From 04526b18b6aaafdc5e54939742ac2f1a3b860879 Mon Sep 17 00:00:00 2001 From: Markus Kreth Date: Sun, 10 Feb 2019 23:27:06 +0100 Subject: [PATCH] Mobile layout started --- .../ui/navigation/ClubhelperNavigation.java | 13 +- .../ui/navigation/DesktopHeadView.java | 41 +++++ .../ui/navigation/HeadView.java | 56 +++---- .../ui/navigation/MainViewDesktop.java | 8 +- .../ui/navigation/MainViewMobile.java | 140 ++++++++++++++++++ 5 files changed, 216 insertions(+), 42 deletions(-) create mode 100644 src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/DesktopHeadView.java create mode 100644 src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewMobile.java diff --git a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperNavigation.java b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperNavigation.java index b8718a0..22eb9d9 100644 --- a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperNavigation.java +++ b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperNavigation.java @@ -8,6 +8,7 @@ import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import com.vaadin.navigator.Navigator; +import com.vaadin.server.Page; import com.vaadin.ui.Notification; import com.vaadin.ui.UI; @@ -49,7 +50,15 @@ public class ClubhelperNavigation { navi = new ClubNavigator().init(mainUI); // Create and register the views - MainView mainView = new MainViewDesktop(personDao, groupDao, eventBusiness, securityGroupVerifier); + + Page page = mainUI.getPage(); + + MainView mainView; + if (page.getBrowserWindowWidth() < 1000) { + mainView = new MainViewMobile(personDao, groupDao, eventBusiness, securityGroupVerifier); + } else { + mainView = new MainViewDesktop(personDao, groupDao, eventBusiness, securityGroupVerifier); + } navi.addView("", mainView); navi.addView(ClubhelperViews.MainView.name(), mainView); navi.addView(ClubhelperViews.LoginUI.name(), new LoginUI(personDao, securityGroupVerifier)); @@ -57,7 +66,7 @@ public class ClubhelperNavigation { navi.addView(ClubhelperViews.EventDetails.name(), new EventDetails(personDao, groupDao, eventBusiness, pflichtenDao, calendarAdapter)); - mainUI.getPage().addBrowserWindowResizeListener(ev -> { + page.addBrowserWindowResizeListener(ev -> { int width = ev.getWidth(); int height = ev.getHeight(); if (LOGGER.isDebugEnabled()) { diff --git a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/DesktopHeadView.java b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/DesktopHeadView.java new file mode 100644 index 0000000..b7600c3 --- /dev/null +++ b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/DesktopHeadView.java @@ -0,0 +1,41 @@ +package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation; + +import java.time.ZonedDateTime; +import java.util.function.Function; + +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Component; +import com.vaadin.ui.Label; + +import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent.ClubEventProvider; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation.ClubhelperNavigation.ClubNavigator; + +public class DesktopHeadView extends HeadView { + + private static final long serialVersionUID = 1596573215389558000L; + + private Label monthName; + + public DesktopHeadView(ClubNavigator navigator, Function startTime, + Function endTime, ClubEventProvider dataProvider, + SecurityVerifier securityVerifier) { + super(navigator, startTime, endTime, dataProvider, securityVerifier); + + monthName = new Label(); + monthName.setId("calendar.month"); + monthName.setStyleName("title_caption"); + monthName.setWidth(null); + + this.addComponent(monthName, 1); + setComponentAlignment(monthName, Alignment.MIDDLE_CENTER); + setExpandRatio(monthName, 1.0f); + } + + public void updateMonthText(ZonedDateTime startDate) { + String monthValue = dfMonth.format(startDate); + log.debug("Changed Month title to {}", monthValue); + monthName.setValue(monthValue); + } + +} diff --git a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java index ab4e330..848040c 100644 --- a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java +++ b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java @@ -12,7 +12,7 @@ import java.util.List; import java.util.Map; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; -import java.util.function.Supplier; +import java.util.function.Function; import org.slf4j.Logger; import org.slf4j.LoggerFactory; @@ -25,8 +25,8 @@ import com.vaadin.ui.Alignment; import com.vaadin.ui.BrowserFrame; import com.vaadin.ui.Button; import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Component; import com.vaadin.ui.HorizontalLayout; -import com.vaadin.ui.Label; import com.vaadin.ui.MenuBar.MenuItem; import com.vaadin.ui.Notification; import com.vaadin.ui.Window; @@ -46,13 +46,8 @@ public class HeadView extends HorizontalLayout { private static final long serialVersionUID = -7915475211371903028L; - private transient final Logger log = LoggerFactory.getLogger(getClass()); - private transient DateTimeFormatter dfMonth = DateTimeFormatter.ofPattern("MMMM uuuu"); - - private Label monthName; - - private final Supplier startTime; - private final Supplier endTime; + protected transient final Logger log = LoggerFactory.getLogger(getClass()); + protected transient DateTimeFormatter dfMonth = DateTimeFormatter.ofPattern("MMMM uuuu"); private ClubEventProvider dataProvider; @@ -60,20 +55,21 @@ public class HeadView extends HorizontalLayout { private Button personLabel; + private final Function startTime; + private final Function endTime; + private final ClubNavigator navigator; private final SecurityVerifier securityVerifier; - public HeadView(ClubNavigator navigator, Supplier startTime, Supplier endTime, - ClubEventProvider dataProvider, SecurityVerifier securityVerifier) { + public HeadView(ClubNavigator navigator, Function startTime, + Function endTime, ClubEventProvider dataProvider, + SecurityVerifier securityVerifier) { this.navigator = navigator; this.securityVerifier = securityVerifier; - - monthName = new Label(); - monthName.setId("calendar.month"); - monthName.setStyleName("title_caption"); - monthName.setWidth(null); + this.startTime = startTime; + this.endTime = endTime; Button popupButton = new Button(VaadinIcons.MENU); popupButton.setId("head.menu"); @@ -82,21 +78,14 @@ public class HeadView extends HorizontalLayout { personLabel = new Button(VaadinIcons.USER); personLabel.setId("head.user"); -// personLabel.setStyleName("title_caption"); -// personLabel.addStyleName("bold-caption"); personLabel.addClickListener(this::openPopupMenu); this.addComponent(popupButton); - this.addComponent(monthName); this.addComponent(personLabel); setComponentAlignment(popupButton, Alignment.MIDDLE_LEFT); - setComponentAlignment(monthName, Alignment.MIDDLE_CENTER); setComponentAlignment(personLabel, Alignment.MIDDLE_RIGHT); - setExpandRatio(monthName, 1.0f); - this.startTime = startTime; - this.endTime = endTime; this.dataProvider = dataProvider; } @@ -110,12 +99,6 @@ public class HeadView extends HorizontalLayout { } } - public void updateMonthText(ZonedDateTime startDate) { - String monthValue = dfMonth.format(startDate); - log.debug("Changed Month title to {}", monthValue); - monthName.setValue(monthValue); - } - private void openPopupMenu(ClickEvent ev) { Button button = ev.getButton(); @@ -123,8 +106,9 @@ public class HeadView extends HorizontalLayout { switch (button.getId()) { case "head.menu": - monthItemId = contextMenu.addItem("Export Monat", ev1 -> calendarExport(ev1)).getId(); - contextMenu.addItem("Export Jahr", ev1 -> calendarExport(ev1)); + MenuItem menuItem = contextMenu.addItem("Export Monat", ev1 -> calendarExport(button, ev1)); + monthItemId = menuItem.getId(); + contextMenu.addItem("Export Jahr", ev1 -> calendarExport(button, ev1)); if (securityVerifier.isLoggedin() && securityVerifier.isPermitted(SecurityGroups.ADMIN, SecurityGroups.UEBUNGSLEITER)) { contextMenu.addItem("Personen verwalten", @@ -152,18 +136,18 @@ public class HeadView extends HorizontalLayout { } - private void calendarExport(MenuItem ev1) { + private void calendarExport(Button source, MenuItem ev1) { boolean monthOnly = ev1.getId() == monthItemId; List items; ZonedDateTime start; ZonedDateTime end; if (monthOnly) { - start = startTime.get(); - end = endTime.get(); + start = startTime.apply(source); + end = endTime.apply(source); items = dataProvider.getItems(start, end); } else { - start = startTime.get().withDayOfYear(1); + start = startTime.apply(source).withDayOfYear(1); end = start.withMonth(12).withDayOfMonth(31); items = dataProvider.getItems(start, end); } @@ -219,7 +203,7 @@ public class HeadView extends HorizontalLayout { window.setModal(true); window.setWidth("50%"); window.setHeight("90%"); - monthName.getUI().addWindow(window); + personLabel.getUI().addWindow(window); log.trace("Added pdf window for {}", calendarMonth); } catch (JRException e) { log.error("Error Creating Jasper Report for {}", calendarMonth, e); diff --git a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewDesktop.java b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewDesktop.java index 7e15109..fdbae24 100644 --- a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewDesktop.java +++ b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewDesktop.java @@ -32,7 +32,7 @@ public class MainViewDesktop extends MainView { private HorizontalLayout eventButtonLayout; private CalendarComponent calendar; - private HeadView head; + private DesktopHeadView head; public MainViewDesktop(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness, SecurityVerifier securityGroupVerifier) { @@ -49,8 +49,8 @@ public class MainViewDesktop extends MainView { calendar.setId("main.calendar"); calendar.setHandler(this::onItemClick); - head = new HeadView(navigator, () -> calendar.getStartDate(), () -> calendar.getEndDate(), dataProvider, - securityVerifier); + head = new DesktopHeadView(navigator, component -> calendar.getStartDate(), component -> calendar.getEndDate(), + dataProvider, securityVerifier); head.setWidth("100%"); head.updateMonthText(calendar.getStartDate()); @@ -66,7 +66,7 @@ public class MainViewDesktop extends MainView { close.setId("person.close"); Button eventDetails = new Button("Veranstaltung Details", ev -> { - navigator.navigateTo(ClubhelperViews.EventDetails.name()); + navigator.navigateTo(ClubhelperViews.EventDetails); }); eventDetails.setId("person.eventDetails"); diff --git a/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewMobile.java b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewMobile.java new file mode 100644 index 0000000..ca645fa --- /dev/null +++ b/src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewMobile.java @@ -0,0 +1,140 @@ +package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation; + +import java.time.LocalDate; +import java.time.ZonedDateTime; +import java.util.Optional; + +import com.vaadin.data.provider.ConfigurableFilterDataProvider; +import com.vaadin.data.provider.DataProvider; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.SerializablePredicate; +import com.vaadin.ui.Button; +import com.vaadin.ui.Component; +import com.vaadin.ui.DateField; +import com.vaadin.ui.Grid; +import com.vaadin.ui.Grid.SelectionMode; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Window; + +import de.kreth.vaadin.clubhelper.vaadinclubhelper.business.EventBusiness; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.GroupDao; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PersonDao; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.ClubEvent; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier; +import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent.ClubEventProvider; + +public class MainViewMobile extends MainView { + + /** + * + */ + private static final long serialVersionUID = -3293470536470926668L; + + private Grid eventGrid; + + private HeadView head; + + private HorizontalLayout eventButtonLayout; + + public MainViewMobile(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness, + SecurityVerifier securityGroupVerifier) { + super(personDao, groupDao, eventBusiness, securityGroupVerifier); + } + + @Override + public void initUI(ViewChangeEvent event) { + super.initUI(event); + if (!securityVerifier.isLoggedin()) { + navigator.navigateTo(ClubhelperViews.LoginUI); + return; + } + + head = new HeadView(navigator, component -> showDateTimeDialog(component, "Startdatum"), + component -> showDateTimeDialog(component, "Endedatum"), new ClubEventProvider(), securityVerifier); + + eventGrid = new Grid<>(); + eventGrid.setCaption("Veranstaltungen"); + eventGrid.setSizeFull(); + eventGrid.setSelectionMode(SelectionMode.SINGLE); + + eventGrid.addComponentColumn(ev -> { + Label l = new Label(); + l.setHeight("15px"); + l.setWidth("15px"); + l.addStyleName(ev.getOrganizerDisplayName()); + return l; + }).setSortable(true).setHidable(false); + eventGrid.addColumn(ClubEvent::getCaption).setCaption("Name").setSortable(true); + eventGrid.addColumn(ClubEvent::getStart).setCaption("Start").setSortable(true).setHidable(true); + ConfigurableFilterDataProvider> eventDataProvider = DataProvider + .ofCollection(eventBusiness.loadEvents()).withConfigurableFilter(); + eventDataProvider.setFilter(this::filter); + eventGrid.setDataProvider(eventDataProvider); + + eventGrid.addSelectionListener(select -> { + Optional item = select.getFirstSelectedItem(); + personGrid.setVisible(item.isPresent()); + eventButtonLayout.setVisible(item.isPresent()); + if (item.isPresent()) { + ClubEvent ev = item.get(); + eventBusiness.setSelected(ev); + personGrid.setEvent(ev); + } + + }); + + Button eventDetails = new Button("Veranstaltung Details", ev -> { + navigator.navigateTo(ClubhelperViews.EventDetails); + }); + eventDetails.setId("person.eventDetails"); + + eventButtonLayout = new HorizontalLayout(); + eventButtonLayout.setSpacing(true); + eventButtonLayout.addComponents(eventDetails); + eventButtonLayout.setVisible(false); + + addComponent(head); + addComponent(eventGrid); + addComponent(eventButtonLayout); + addComponent(personGrid); + } + + private ZonedDateTime showDateTimeDialog(Component source, String caption) { + Window window = new Window(); + window.setCaption(caption); + window.setModal(true); + + DateField dateField = new DateField(); + window.setContent(dateField); + source.getUI().addWindow(window); + LocalDate value = dateField.getValue(); + return ZonedDateTime.from(value); +// if (caption.toLowerCase().contains("Start")) { +// return ZonedDateTime.now().withDayOfMonth(1); +// } else { +// return ZonedDateTime.now().plusMonths(1).withDayOfMonth(1).minusDays(1); +// } + } + + private boolean filter(ClubEvent ev) { + return ev.getStart().isAfter(ZonedDateTime.now().minusDays(10)); + } + + @Override + public void enter(ViewChangeEvent event) { + super.enter(event); + } + + @Override + public void openDetailForEvent(ClubEvent ev) { + super.openDetailForEvent(ev); + + } + + @Override + public void detailClosed() { + super.detailClosed(); + } + +}