Mobile layout started

master
Markus Kreth 7 years ago
parent afb71469d8
commit 04526b18b6
  1. 13
      src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperNavigation.java
  2. 41
      src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/DesktopHeadView.java
  3. 56
      src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java
  4. 8
      src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewDesktop.java
  5. 140
      src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewMobile.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()) {

@ -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<Component, ZonedDateTime> startTime,
Function<Component, ZonedDateTime> 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);
}
}

@ -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<ZonedDateTime> startTime;
private final Supplier<ZonedDateTime> 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<Component, ZonedDateTime> startTime;
private final Function<Component, ZonedDateTime> endTime;
private final ClubNavigator navigator;
private final SecurityVerifier securityVerifier;
public HeadView(ClubNavigator navigator, Supplier<ZonedDateTime> startTime, Supplier<ZonedDateTime> endTime,
ClubEventProvider dataProvider, SecurityVerifier securityVerifier) {
public HeadView(ClubNavigator navigator, Function<Component, ZonedDateTime> startTime,
Function<Component, ZonedDateTime> 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<ClubEvent> 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);

@ -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");

@ -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<ClubEvent> 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<ClubEvent, Void, SerializablePredicate<ClubEvent>> eventDataProvider = DataProvider
.ofCollection(eventBusiness.loadEvents()).withConfigurableFilter();
eventDataProvider.setFilter(this::filter);
eventGrid.setDataProvider(eventDataProvider);
eventGrid.addSelectionListener(select -> {
Optional<ClubEvent> 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();
}
}
Loading…
Cancel
Save