Merge branch 'mobile_support'

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/dao/ClubEventDaoImpl.java

@@ -37,6 +37,7 @@ public class ClubEventDaoImpl extends AbstractDaoImpl<ClubEvent> implements Club
 	}
 
 	@Override
+	@Transactional
 	public void addPersons(ClubEvent event, Collection<Person> updated) {
 		List<Person> added = new ArrayList<>(updated);
 		List<Person> removed = new ArrayList<>();

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/MainUi.java

@@ -7,8 +7,9 @@ import org.springframework.beans.factory.annotation.Autowired;
 import com.vaadin.annotations.PreserveOnRefresh;
 import com.vaadin.annotations.Push;
 import com.vaadin.annotations.Theme;
-import com.vaadin.navigator.Navigator;
+import com.vaadin.server.Page;
 import com.vaadin.server.VaadinRequest;
+import com.vaadin.server.WebBrowser;
 import com.vaadin.shared.communication.PushMode;
 import com.vaadin.spring.annotation.SpringUI;
 import com.vaadin.ui.UI;
@@ -19,7 +20,8 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.GroupDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PersonDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PflichtenDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.EventDetails;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation.ClubhelperNavigation;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation.ClubhelperViews;
 
 @Theme("vaadin-clubhelpertheme")
 @SpringUI
@@ -48,22 +50,24 @@ public class MainUi extends UI {
 	@Autowired
 	CalendarAdapter calendarAdapter;
 
+	@Autowired
+	ClubhelperNavigation clubhelperNavigation;
+
 	@Override
 	protected void init(VaadinRequest request) {
 
-		LOGGER.debug("Starting Vaadin UI with {}", getClass().getName());
+		Page page = getPage();
+		int browserWidth = page.getBrowserWindowWidth();
+		WebBrowser webBrowser = page.getWebBrowser();
 
-		getPage().setTitle("Vereinshelfer");
+		LOGGER.debug("Starting Vaadin UI with {}, windowWidth={}, touchDevice={}, Android={}, IPad={}, IPhone={}",
+				getClass().getName(), browserWidth, webBrowser.isTouchDevice(), webBrowser.isAndroid(),
+				webBrowser.isIPad(), webBrowser.isIPhone());
 
-		Navigator navigator = new Navigator(this, this);
+		page.setTitle("Vereinshelfer");
 
-		// Create and register the views
+		clubhelperNavigation.configure(this);
-		navigator.addView(MainView.VIEW_NAME, new MainView(personDao, groupDao, eventBusiness, securityGroupVerifier));
+		clubhelperNavigation.navigateTo(ClubhelperViews.MainView.name());
-		navigator.addView(LoginUI.VIEW_NAME, new LoginUI(personDao, securityGroupVerifier));
-		navigator.addView(PersonEditView.VIEW_NAME, new PersonEditView(groupDao, personDao));
-		navigator.addView(EventDetails.VIEW_NAME,
-				new EventDetails(personDao, groupDao, eventBusiness, pflichtenDao, calendarAdapter));
-		navigator.navigateTo(MainView.VIEW_NAME);
 	}
 
 }

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/MainView.java

@@ -1,210 +0,0 @@
-package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui;
-
-import java.util.List;
-import java.util.Set;
-import java.util.concurrent.ExecutorService;
-import java.util.concurrent.Executors;
-
-import org.slf4j.Logger;
-import org.slf4j.LoggerFactory;
-import org.vaadin.addon.calendar.ui.CalendarComponentEvents;
-
-import com.vaadin.event.selection.SelectionEvent;
-import com.vaadin.navigator.Navigator;
-import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
-import com.vaadin.ui.Button;
-import com.vaadin.ui.Grid.SelectionMode;
-import com.vaadin.ui.HorizontalLayout;
-import com.vaadin.ui.UI;
-import com.vaadin.ui.VerticalLayout;
-
-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.data.Person;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent.ClubEventProvider;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.EventDetails;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.PersonGrid;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.SingleEventView;
-
-public class MainView extends VerticalLayout implements NamedView {
-
-	public static final String VIEW_NAME = "";
-
-	private static final long serialVersionUID = 4831071242146146399L;
-	private final Logger LOGGER = LoggerFactory.getLogger(getClass());
-
-	private final PersonDao personDao;
-	private final GroupDao groupDao;
-	private final EventBusiness eventBusiness;
-	private final SecurityVerifier securityVerifier;
-
-	private PersonGrid personGrid;
-	private CalendarComponent calendar;
-	private HeadView head;
-	private SingleEventView eventView;
-	private HorizontalLayout eventButtonLayout;
-
-	private Navigator navigator;
-
-	private VerticalLayout eastLayout;
-
-	private HorizontalLayout mainLayout;
-
-	public MainView(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness,
-			SecurityVerifier securityGroupVerifier) {
-		this.personDao = personDao;
-		this.groupDao = groupDao;
-		this.eventBusiness = eventBusiness;
-		this.securityVerifier = securityGroupVerifier;
-	}
-
-	@Override
-	public void enter(ViewChangeEvent event) {
-		if (this.navigator == null) {
-			initUI(event);
-			LOGGER.info("Loaded UI and started fetch of Events");
-		} else {
-			if (securityVerifier.isLoggedin()) {
-				LOGGER.info("{} already initialized - opening Person View.", getClass().getName());
-				ClubEvent current = eventBusiness.getCurrent();
-				openPersonViewForEvent(current);
-				if (current != null) {
-					calendar.setToday(current.getStart());
-				}
-				head.updateLoggedinPerson();
-			} else {
-				LOGGER.info("{} already initialized - but not loggedin.", getClass().getName());
-				detailClosed();
-				head.updateLoggedinPerson();
-			}
-			reloadEvents();
-		}
-	}
-
-	public void initUI(ViewChangeEvent event) {
-
-		navigator = event.getNavigator();
-
-		eventView = new SingleEventView(false);
-		eventView.setVisible(false);
-
-		personGrid = new PersonGrid(groupDao, personDao);
-		personGrid.setCaption("Personen");
-		personGrid.setSelectionMode(SelectionMode.MULTI);
-		personGrid.onPersonSelect(ev -> personSelectionChange(ev));
-		personGrid.setVisible(false);
-
-		Button close = new Button("Schließen", ev -> {
-			detailClosed();
-		});
-		close.setId("person.close");
-
-		Button eventDetails = new Button("Veranstaltung Details", ev -> {
-			navigator.navigateTo(EventDetails.VIEW_NAME);
-		});
-		eventDetails.setId("person.eventDetails");
-
-		eventButtonLayout = new HorizontalLayout();
-		eventButtonLayout.setSpacing(true);
-		eventButtonLayout.addComponents(close, eventDetails);
-		eventButtonLayout.setVisible(false);
-
-		eastLayout = new VerticalLayout();
-		eastLayout.addComponents(eventView, personGrid, eventButtonLayout);
-
-		ClubEventProvider dataProvider = new ClubEventProvider();
-		calendar = new CalendarComponent(dataProvider);
-		calendar.setSizeFull();
-		calendar.setId("main.calendar");
-		calendar.setHandler(this::onItemClick);
-
-		head = new HeadView(navigator, () -> calendar.getStartDate(), () -> calendar.getEndDate(), dataProvider,
-				securityVerifier);
-		head.setWidth("100%");
-		head.updateMonthText(calendar.getStartDate());
-
-		calendar.add(dateTime -> head.updateMonthText(dateTime));
-
-		mainLayout = new HorizontalLayout(calendar);
-		mainLayout.setSizeFull();
-		mainLayout.setExpandRatio(calendar, 2f);
-
-		addComponent(head);
-		addComponent(mainLayout);
-		setExpandRatio(mainLayout, 1f);
-		setSizeFull();
-
-		reloadEvents();
-	}
-
-	public void reloadEvents() {
-		ExecutorService exec = Executors.newSingleThreadExecutor();
-		exec.execute(() -> {
-
-			final List<ClubEvent> events = eventBusiness.loadEvents();
-			LOGGER.info("Loaded events: {}", events);
-			final UI ui = calendar.getUI();
-			ui.access(() -> {
-				calendar.setItems(events);
-				ui.push();
-			});
-
-		});
-		exec.shutdown();
-	}
-
-	private void personSelectionChange(SelectionEvent<Person> ev) {
-		Set<Person> selected = ev.getAllSelectedItems();
-		LOGGER.debug("Selection changed to: {}", selected);
-		eventBusiness.changePersons(selected);
-	}
-
-	private void detailClosed() {
-		LOGGER.debug("Closing detail view.");
-		personGrid.setVisible(false);
-		eventView.setVisible(false);
-		eventButtonLayout.setVisible(false);
-		mainLayout.removeComponent(eastLayout);
-	}
-
-	private void onItemClick(CalendarComponentEvents.ItemClickEvent event) {
-
-		ClubEvent ev = (ClubEvent) event.getCalendarItem();
-		if (securityVerifier.isLoggedin()) {
-			openPersonViewForEvent(ev);
-		} else {
-			eventBusiness.setSelected(ev);
-			navigator.navigateTo(LoginUI.VIEW_NAME + '/' + ev.getId());
-		}
-	}
-
-	public void openPersonViewForEvent(ClubEvent ev) {
-		LOGGER.debug("Opening detail view for {}", ev);
-
-		eventBusiness.setSelected(null);
-		eventView.setEvent(ev);
-
-		personGrid.setEnabled(false);
-		personGrid.setEvent(ev);
-		personGrid.setEnabled(true);
-
-		personGrid.setVisible(true);
-		eventView.setVisible(true);
-		eventButtonLayout.setVisible(true);
-
-		mainLayout.addComponent(eastLayout);
-		mainLayout.setExpandRatio(eastLayout, 1f);
-
-		eventBusiness.setSelected(ev);
-	}
-
-	@Override
-	public String getViewName() {
-		return VIEW_NAME;
-	}
-
-}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/NamedView.java

@@ -1,12 +0,0 @@
-package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui;
-
-import com.vaadin.navigator.View;
-
-public interface NamedView extends View {
-	/**
-	 * Navigation view name used for this view.
-	 * 
-	 * @return view name.
-	 */
-	String getViewName();
-}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/components/EventDetails.java

@@ -1,6 +1,6 @@
 package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components;
 
-import com.vaadin.navigator.Navigator;
+import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.shared.ui.ContentMode;
 import com.vaadin.ui.Button;
@@ -18,11 +18,10 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.GroupDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PersonDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PflichtenDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.ClubEvent;
-import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.NamedView;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation.ClubhelperNavigation.ClubNavigator;
 
-public class EventDetails extends GridLayout implements NamedView {
+public class EventDetails extends GridLayout implements View {
 
-	public static final String VIEW_NAME = "EventDetails";
 	private static final long serialVersionUID = 8290150079638390995L;
 
 	private final EventBusiness eventBusiness;
@@ -52,12 +51,12 @@ public class EventDetails extends GridLayout implements NamedView {
 		currentEvent = eventBusiness.getCurrent();
 		if (eventView == null) {
 
-			Navigator navigator = event.getNavigator();
+			ClubNavigator navigator = (ClubNavigator) event.getNavigator();
 
 			eventView = new SingleEventView(true);
 			eventView.setCalendarAdapter(calendarAdapter);
 			eventView.setEventBusiness(eventBusiness);
-			eventView.setDeletedHandler(() -> navigator.navigateTo(((NamedView) event.getOldView()).getViewName()));
+			eventView.setDeletedHandler(() -> navigator.back());
 
 			eventView.addDataUpdatedListener(() -> eventBusiness.storeEventType());
 
@@ -69,7 +68,7 @@ public class EventDetails extends GridLayout implements NamedView {
 			personGrid.setSelectionMode(SelectionMode.NONE);
 
 			Button back = new Button("Zurück");
-			back.addClickListener(ev -> navigator.navigateTo(((NamedView) event.getOldView()).getViewName()));
+			back.addClickListener(ev -> navigator.back());
 			Button createMeldung = new Button("Meldung");
 			createMeldung.addClickListener(ev -> show(eventBusiness.createMeldung()));
 
@@ -100,9 +99,4 @@ public class EventDetails extends GridLayout implements NamedView {
 
 	}
 
-	@Override
-	public String getViewName() {
-		return VIEW_NAME;
-	}
-
 }

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperNavigation.java

@@ -0,0 +1,146 @@
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
+
+import java.util.Stack;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+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;
+
+import de.kreth.googleconnectors.calendar.CalendarAdapter;
+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.dao.PflichtenDao;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.EventDetails;
+
+@Component
+public class ClubhelperNavigation {
+
+	private static final Logger LOGGER = LoggerFactory.getLogger(ClubhelperNavigation.class);
+
+	@Autowired
+	PersonDao personDao;
+
+	@Autowired
+	GroupDao groupDao;
+
+	@Autowired
+	EventBusiness eventBusiness;
+
+	@Autowired
+	PflichtenDao pflichtenDao;
+
+	@Autowired
+	SecurityVerifier securityGroupVerifier;
+
+	@Autowired
+	CalendarAdapter calendarAdapter;
+
+	private ClubNavigator navi;
+
+	public void configure(UI mainUI) {
+
+		navi = new ClubNavigator().init(mainUI);
+
+		// Create and register the views
+
+		Page page = mainUI.getPage();
+
+		ViewFactory factory = new ViewFactory(page);
+		MainView mainView = factory.createMain();
+
+		navi.addView("", mainView);
+		navi.addView(ClubhelperViews.MainView.name(), mainView);
+		navi.addView(ClubhelperViews.LoginUI.name(), new LoginUI(personDao, securityGroupVerifier));
+		navi.addView(ClubhelperViews.PersonEditView.name(), factory.createPersonEdit());
+		navi.addView(ClubhelperViews.EventDetails.name(),
+				new EventDetails(personDao, groupDao, eventBusiness, pflichtenDao, calendarAdapter));
+
+		page.addBrowserWindowResizeListener(ev -> {
+			int width = ev.getWidth();
+			int height = ev.getHeight();
+			if (LOGGER.isDebugEnabled()) {
+				LOGGER.debug("Changed Window Size: [w={},h={}]", width, height);
+				Notification.show("Size Changed", "Changed Window Size: [w=" + width + ",h=" + height + "]",
+						Notification.Type.TRAY_NOTIFICATION);
+			}
+		});
+	}
+
+	class ViewFactory {
+
+		private Page page;
+
+		public ViewFactory(Page page) {
+			this.page = page;
+		}
+
+		public MainView createMain() {
+
+			if (page.getBrowserWindowWidth() < 1000) {
+				return new MainViewMobile(personDao, groupDao, eventBusiness, securityGroupVerifier);
+			} else {
+				return new MainViewDesktop(personDao, groupDao, eventBusiness, securityGroupVerifier);
+			}
+		}
+
+		public PersonEditView createPersonEdit() {
+			return new PersonEditView(groupDao, personDao, (page.getBrowserWindowWidth() >= 1000));
+		}
+	}
+
+	public void navigateTo(String navigationState) {
+		navi.navigateTo(navigationState);
+	}
+
+	public class ClubNavigator extends Navigator {
+
+		private static final long serialVersionUID = -6503600786209888296L;
+		private final Stack<ClubhelperViews> navigationViewNames = new Stack<>();
+
+		ClubNavigator init(UI ui) {
+			init(ui, null, new SingleComponentContainerViewDisplay(ui));
+			return this;
+		}
+
+		public void navigateTo(ClubhelperViews view) {
+			navigateTo(view.name());
+		}
+
+		@Override
+		public void navigateTo(String navigationState) {
+			ClubhelperViews byState = ClubhelperViews.byState(navigationState);
+			if (navigationViewNames.contains(byState)) {
+				int index = navigationViewNames.indexOf(byState);
+				LOGGER.warn("Navigating to previously visited View. Removing some history");
+				while (navigationViewNames.size() > index) {
+					navigationViewNames.remove(index);
+				}
+			}
+
+			int width = navi.getUI().getPage().getBrowserWindowWidth();
+			boolean loggedIn = securityGroupVerifier.isLoggedin();
+			if (!loggedIn && width < 1000) {
+				navigationViewNames.clear();
+				navigationViewNames.add(ClubhelperViews.MainView);
+				super.navigateTo(ClubhelperViews.LoginUI.name());
+			} else {
+				navigationViewNames.add(byState);
+				super.navigateTo(navigationState);
+			}
+
+		}
+
+		public void back() {
+			navigationViewNames.pop();
+			navigateTo(navigationViewNames.pop().name());
+		}
+	}
+}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/ClubhelperViews.java

@@ -0,0 +1,20 @@
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
+
+public enum ClubhelperViews {
+	/**
+	 * With Alias ''
+	 */
+	MainView, EventDetails, PersonEditView, LoginUI;
+
+	public static ClubhelperViews byState(String state) {
+		if (state.isBlank()) {
+			return MainView;
+		}
+		for (ClubhelperViews v : values()) {
+			if (state.startsWith(v.name())) {
+				return v;
+			}
+		}
+		throw new IllegalArgumentException("View not found for state=" + state);
+	}
+}

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<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);
+	}
+
+}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/HeadView.java

@@ -1,4 +1,4 @@
-package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui;
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
 
 import java.io.IOException;
 import java.io.PipedInputStream;
@@ -12,22 +12,21 @@ 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;
 
 import com.vaadin.contextmenu.ContextMenu;
 import com.vaadin.icons.VaadinIcons;
-import com.vaadin.navigator.Navigator;
 import com.vaadin.server.StreamResource;
 import com.vaadin.ui.AbstractComponent;
 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;
@@ -38,6 +37,7 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.jasper.CalendarCreator;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityGroups;
 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;
 import net.sf.jasperreports.engine.JRException;
 import net.sf.jasperreports.engine.JasperExportManager;
 import net.sf.jasperreports.engine.JasperPrint;
@@ -46,55 +46,46 @@ public class HeadView extends HorizontalLayout {
 
 	private static final long serialVersionUID = -7915475211371903028L;
 
-	private transient final Logger log = LoggerFactory.getLogger(getClass());
+	protected transient final Logger log = LoggerFactory.getLogger(getClass());
-	private transient DateTimeFormatter dfMonth = DateTimeFormatter.ofPattern("MMMM uuuu");
+	protected transient DateTimeFormatter dfMonth = DateTimeFormatter.ofPattern("MMMM uuuu");
-
-	private Label monthName;
-
-	private final Supplier<ZonedDateTime> startTime;
-	private final Supplier<ZonedDateTime> endTime;
 
 	private ClubEventProvider dataProvider;
 
 	private int monthItemId;
 
-	private Label personLabel;
+	private Button personLabel;
+
+	private final Function<Component, ZonedDateTime> startTime;
+	private final Function<Component, ZonedDateTime> endTime;
 
-	private final Navigator navigator;
+	private final ClubNavigator navigator;
 
 	private final SecurityVerifier securityVerifier;
 
-	public HeadView(Navigator navigator, Supplier<ZonedDateTime> startTime, Supplier<ZonedDateTime> endTime,
+	public HeadView(ClubNavigator navigator, Function<Component, ZonedDateTime> startTime,
-			ClubEventProvider dataProvider, SecurityVerifier securityVerifier) {
+			Function<Component, ZonedDateTime> endTime, ClubEventProvider dataProvider,
+			SecurityVerifier securityVerifier) {
 
 		this.navigator = navigator;
 		this.securityVerifier = securityVerifier;
-
+		this.startTime = startTime;
-		monthName = new Label();
+		this.endTime = endTime;
-		monthName.setId("calendar.month");
-		monthName.setStyleName("title_caption");
-		monthName.setWidth(null);
 
 		Button popupButton = new Button(VaadinIcons.MENU);
-		popupButton.setId("calendar.menu");
+		popupButton.setId("head.menu");
 		popupButton.addClickListener(ev -> openPopupMenu(ev));
 		popupButton.setWidth(null);
 
-		personLabel = new Label();
+		personLabel = new Button(VaadinIcons.USER);
-		personLabel.setStyleName("title_caption");
+		personLabel.setId("head.user");
-		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;
 	}
 
@@ -108,44 +99,55 @@ 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();
 
 		ContextMenu contextMenu = new ContextMenu(button, true);
-		monthItemId = contextMenu.addItem("Export Monat", ev1 -> calendarExport(ev1)).getId();
+
-		contextMenu.addItem("Export Jahr", ev1 -> calendarExport(ev1));
+		switch (button.getId()) {
-		if (securityVerifier.getLoggedinPerson() != null) {
+		case "head.menu":
-			if (securityVerifier.isPermitted(SecurityGroups.ADMIN, SecurityGroups.UEBUNGSLEITER)) {
+			MenuItem menuItem = contextMenu.addItem("Export Monat", ev1 -> calendarExport(button, ev1));
-				contextMenu.addItem("Personen verwalten", ev1 -> navigator.navigateTo(PersonEditView.VIEW_NAME));
+			monthItemId = menuItem.getId();
+			contextMenu.addItem("Export Jahr", ev1 -> calendarExport(button, ev1));
+			if (securityVerifier.isLoggedin()
+					&& securityVerifier.isPermitted(SecurityGroups.ADMIN, SecurityGroups.UEBUNGSLEITER)) {
+				contextMenu.addItem("Personen verwalten",
+						ev1 -> navigator.navigateTo(ClubhelperViews.PersonEditView.name()));
 			}
+			contextMenu.open(50, 50);
+			break;
+		case "head.user":
+			if (securityVerifier.getLoggedinPerson() != null) {
+
 				contextMenu.addItem("Abmelden", ev1 -> {
 					securityVerifier.setLoggedinPerson(null);
-				navigator.navigateTo(MainView.VIEW_NAME);
+					navigator.navigateTo(ClubhelperViews.MainView.name());
 				});
 			} else {
-			contextMenu.addItem("Anmelden", ev1 -> navigator.navigateTo(LoginUI.VIEW_NAME));
+				contextMenu.addItem("Anmelden", ev1 -> navigator.navigateTo(ClubhelperViews.LoginUI.name()));
 			}
-		contextMenu.open(50, 50);
+			int width = getUI().getPage().getBrowserWindowWidth();
+
+			contextMenu.open(width - 150, 50);
+			break;
+		default:
+			break;
+		}
+
 	}
 
-	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();
+			start = startTime.apply(source);
-			end = endTime.get();
+			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);
 		}
@@ -201,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);

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/LoginUI.java

@@ -1,9 +1,10 @@
-package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui;
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
 import com.vaadin.navigator.Navigator;
+import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.LoginForm;
@@ -14,9 +15,8 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.dao.PersonDao;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.Person;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier;
 
-public class LoginUI extends VerticalLayout implements NamedView {
+public class LoginUI extends VerticalLayout implements View {
 
-	public static final String VIEW_NAME = "LoginUI";
 	private static final long serialVersionUID = 4339018452507960084L;
 	private final Logger logger = LoggerFactory.getLogger(getClass());
 
@@ -34,7 +34,7 @@ public class LoginUI extends VerticalLayout implements NamedView {
 			try {
 				Person loggedin = personDao.findLoginUser(username, password);
 				securityGroupVerifier.setLoggedinPerson(loggedin);
-				navigator.navigateTo(MainView.VIEW_NAME + '/' + parameters);
+				navigator.navigateTo(ClubhelperViews.MainView.name() + '/' + parameters);
 			} catch (final Exception ex) {
 				ex.printStackTrace();
 				logger.error("Error on login for User={}", e.getLoginParameter("username"), ex);
@@ -58,8 +58,4 @@ public class LoginUI extends VerticalLayout implements NamedView {
 		}
 	}
 
-	@Override
-	public String getViewName() {
-		return VIEW_NAME;
-	}
 }

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainView.java

@@ -0,0 +1,107 @@
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
+
+import java.util.Set;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import com.vaadin.event.selection.SelectionEvent;
+import com.vaadin.navigator.View;
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Grid.SelectionMode;
+import com.vaadin.ui.VerticalLayout;
+
+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.data.Person;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.security.SecurityVerifier;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.PersonGrid;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.SingleEventView;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation.ClubhelperNavigation.ClubNavigator;
+
+public abstract class MainView extends VerticalLayout implements View {
+
+	private static final long serialVersionUID = 4831071242146146399L;
+	protected final Logger LOGGER = LoggerFactory.getLogger(getClass());
+
+	private final PersonDao personDao;
+	private final GroupDao groupDao;
+	protected final EventBusiness eventBusiness;
+	protected final SecurityVerifier securityVerifier;
+
+	protected PersonGrid personGrid;
+	protected SingleEventView eventView;
+
+	protected ClubNavigator navigator;
+
+	public MainView(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness,
+			SecurityVerifier securityGroupVerifier) {
+		this.personDao = personDao;
+		this.groupDao = groupDao;
+		this.eventBusiness = eventBusiness;
+		this.securityVerifier = securityGroupVerifier;
+	}
+
+	@Override
+	public void enter(ViewChangeEvent event) {
+		if (this.navigator == null) {
+			initUI(event);
+			LOGGER.info("Loaded UI and started fetch of Events");
+		} else {
+			if (securityVerifier.isLoggedin()) {
+				LOGGER.info("{} already initialized - opening Person View.", getClass().getName());
+				ClubEvent current = eventBusiness.getCurrent();
+				openDetailForEvent(current);
+			} else {
+				LOGGER.info("{} already initialized - but not loggedin.", getClass().getName());
+				detailClosed();
+			}
+		}
+	}
+
+	public void initUI(ViewChangeEvent event) {
+
+		navigator = (ClubNavigator) event.getNavigator();
+
+		eventView = new SingleEventView(false);
+		eventView.setVisible(false);
+
+		personGrid = new PersonGrid(groupDao, personDao);
+		personGrid.setCaption("Personen");
+		personGrid.setSelectionMode(SelectionMode.MULTI);
+		personGrid.onPersonSelect(ev -> personSelectionChange(ev));
+		personGrid.setVisible(false);
+
+	}
+
+	private void personSelectionChange(SelectionEvent<Person> ev) {
+		Set<Person> selected = ev.getAllSelectedItems();
+		LOGGER.debug("Selection changed to: {}", selected);
+		eventBusiness.changePersons(selected);
+	}
+
+	public void detailClosed() {
+		LOGGER.debug("Closing detail view.");
+		personGrid.setVisible(false);
+		eventView.setVisible(false);
+	}
+
+	public void openDetailForEvent(ClubEvent ev) {
+		LOGGER.debug("Opening detail view for {}", ev);
+
+		eventBusiness.setSelected(null);
+		eventView.setEvent(ev);
+
+		personGrid.setEnabled(false);
+		personGrid.setEvent(ev);
+		personGrid.setEnabled(true);
+
+		personGrid.setVisible(true);
+		eventView.setVisible(true);
+
+		eventBusiness.setSelected(ev);
+	}
+
+}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/MainViewDesktop.java

@@ -0,0 +1,145 @@
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
+
+import java.util.List;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+
+import org.vaadin.addon.calendar.ui.CalendarComponentEvents;
+
+import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.VerticalLayout;
+
+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;
+import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.CalendarComponent.ClubEventProvider;
+
+public class MainViewDesktop extends MainView {
+
+	/**
+	 * 
+	 */
+	private static final long serialVersionUID = -3293470536470926668L;
+
+	private VerticalLayout eastLayout;
+	private HorizontalLayout mainLayout;
+	private HorizontalLayout eventButtonLayout;
+
+	private CalendarComponent calendar;
+	private DesktopHeadView head;
+
+	public MainViewDesktop(PersonDao personDao, GroupDao groupDao, EventBusiness eventBusiness,
+			SecurityVerifier securityGroupVerifier) {
+		super(personDao, groupDao, eventBusiness, securityGroupVerifier);
+	}
+
+	@Override
+	public void initUI(ViewChangeEvent event) {
+		super.initUI(event);
+
+		ClubEventProvider dataProvider = new ClubEventProvider();
+		calendar = new CalendarComponent(dataProvider);
+		calendar.setSizeFull();
+		calendar.setId("main.calendar");
+		calendar.setHandler(this::onItemClick);
+
+		head = new DesktopHeadView(navigator, component -> calendar.getStartDate(), component -> calendar.getEndDate(),
+				dataProvider, securityVerifier);
+		head.setWidth("100%");
+		head.updateMonthText(calendar.getStartDate());
+
+		calendar.add(dateTime -> head.updateMonthText(dateTime));
+
+		mainLayout = new HorizontalLayout(calendar);
+		mainLayout.setSizeFull();
+		mainLayout.setExpandRatio(calendar, 2f);
+
+		Button close = new Button("Schließen", ev -> {
+			detailClosed();
+		});
+		close.setId("person.close");
+
+		Button eventDetails = new Button("Veranstaltung Details", ev -> {
+			navigator.navigateTo(ClubhelperViews.EventDetails);
+		});
+		eventDetails.setId("person.eventDetails");
+
+		eventButtonLayout = new HorizontalLayout();
+		eventButtonLayout.setSpacing(true);
+		eventButtonLayout.addComponents(close, eventDetails);
+		eventButtonLayout.setVisible(false);
+
+		eastLayout = new VerticalLayout();
+		eastLayout.addComponents(eventView, personGrid, eventButtonLayout);
+
+		addComponent(head);
+		addComponent(mainLayout);
+		setExpandRatio(mainLayout, 1f);
+		setSizeFull();
+
+		reloadEvents();
+	}
+
+	public void reloadEvents() {
+
+		ExecutorService exec = Executors.newSingleThreadExecutor();
+		exec.execute(() -> {
+
+			final List<ClubEvent> events = eventBusiness.loadEvents();
+			LOGGER.info("Loaded events: {}", events);
+			final UI ui = calendar.getUI();
+			ui.access(() -> {
+				calendar.setItems(events);
+				ui.push();
+			});
+
+		});
+		exec.shutdown();
+	}
+
+	@Override
+	public void enter(ViewChangeEvent event) {
+		super.enter(event);
+
+		head.updateLoggedinPerson();
+		reloadEvents();
+	}
+
+	private void onItemClick(CalendarComponentEvents.ItemClickEvent event) {
+
+		ClubEvent ev = (ClubEvent) event.getCalendarItem();
+		if (securityVerifier.isLoggedin()) {
+			openDetailForEvent(ev);
+		} else {
+			eventBusiness.setSelected(ev);
+			navigator.navigateTo(ClubhelperViews.LoginUI.name() + '/' + ev.getId());
+		}
+	}
+
+	@Override
+	public void openDetailForEvent(ClubEvent ev) {
+		super.openDetailForEvent(ev);
+
+		mainLayout.addComponent(eastLayout);
+		mainLayout.setExpandRatio(eastLayout, 1f);
+
+		if (ev != null) {
+			calendar.setToday(ev.getStart());
+		}
+		eventButtonLayout.setVisible(true);
+	}
+
+	@Override
+	public void detailClosed() {
+		super.detailClosed();
+		mainLayout.removeComponent(eastLayout);
+		eventButtonLayout.setVisible(false);
+	}
+
+}

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<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();
+	}
+
+}

src/main/java/de/kreth/vaadin/clubhelper/vaadinclubhelper/ui/navigation/PersonEditView.java

@@ -1,4 +1,4 @@
-package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui;
+package de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.navigation;
 
 import java.util.ArrayList;
 import java.util.HashSet;
@@ -6,6 +6,7 @@ import java.util.Optional;
 
 import com.vaadin.event.selection.SelectionEvent;
 import com.vaadin.navigator.Navigator;
+import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.HorizontalLayout;
@@ -17,9 +18,8 @@ import de.kreth.vaadin.clubhelper.vaadinclubhelper.data.Person;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.PersonEditDetails;
 import de.kreth.vaadin.clubhelper.vaadinclubhelper.ui.components.PersonGrid;
 
-public class PersonEditView extends VerticalLayout implements NamedView {
+public class PersonEditView extends VerticalLayout implements View {
 
-	public static final String VIEW_NAME = "PersonEditView";
 	private static final long serialVersionUID = 1770993670570422036L;
 
 	private PersonGrid personGrid;
@@ -27,7 +27,7 @@ public class PersonEditView extends VerticalLayout implements NamedView {
 
 	private Navigator navigator;
 
-	public PersonEditView(GroupDao groupDao, PersonDao personDao) {
+	public PersonEditView(GroupDao groupDao, PersonDao personDao, boolean horizontalLayout) {
 		setMargin(true);
 
 		personGrid = new PersonGrid(groupDao, personDao);
@@ -40,21 +40,36 @@ public class PersonEditView extends VerticalLayout implements NamedView {
 		personDetails.setSizeFull();
 		personDetails.setPersonChangeHandler(personGrid::refreshItem);
 
-		HorizontalLayout layout = new HorizontalLayout();
+		if (horizontalLayout) {
-		layout.addComponents(personGrid, personDetails);
+			addComponent(createHorizontalLayout());
-		layout.setExpandRatio(personGrid, 1f);
+		} else {
-		layout.setExpandRatio(personDetails, 2f);
+			addComponent(createVerticalLayout());
-		layout.setSizeFull();
+		}
-		addComponent(layout);
 		Button addPerson = new Button("Hinzufügen");
 		addPerson.addClickListener(ev -> addPerson());
 
 		addComponent(addPerson);
 		Button backButton = new Button("Zurück");
-		backButton.addClickListener(ev -> navigator.navigateTo(MainView.VIEW_NAME));
+		backButton.addClickListener(ev -> navigator.navigateTo(ClubhelperViews.MainView.name()));
 		addComponent(backButton);
 	}
 
+	public HorizontalLayout createHorizontalLayout() {
+		HorizontalLayout layout = new HorizontalLayout();
+		layout.addComponents(personGrid, personDetails);
+		layout.setExpandRatio(personGrid, 1f);
+		layout.setExpandRatio(personDetails, 2f);
+		layout.setSizeFull();
+		return layout;
+	}
+
+	public VerticalLayout createVerticalLayout() {
+		VerticalLayout layout = new VerticalLayout();
+		layout.addComponents(personGrid, personDetails);
+		layout.setSizeFull();
+		return layout;
+	}
+
 	private void addPerson() {
 		Person person = new Person();
 		person.setGroups(new HashSet<>());
@@ -72,13 +87,7 @@ public class PersonEditView extends VerticalLayout implements NamedView {
 
 	@Override
 	public void enter(ViewChangeEvent event) {
-		NamedView.super.enter(event);
 		this.navigator = event.getNavigator();
 	}
 
-	@Override
-	public String getViewName() {
-		return VIEW_NAME;
-	}
-
 }