Refactor HomeView layout and enhance clock event buttons

Refactored the layout setup in HomeView for better readability and maintainability. Introduced methods to create buttons and the event list separately. Added a new dependency for spring-data-eclipse-store in pom.xml and updated package.json to fix dependency order.

package.json

@@ -108,7 +108,7 @@
     "proj4": "$proj4",
     "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
     "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles",
-    "@fontsource/anton": "$@fontsource/anton",
-    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles"
+    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles",
+    "@fontsource/anton": "$@fontsource/anton"
   }
 }

pom.xml

@@ -57,6 +57,11 @@
             <artifactId>line-awesome</artifactId>
             <version>2.0.0</version>
         </dependency>
+        <dependency>
+            <groupId>software.xdev</groupId>
+            <artifactId>spring-data-eclipse-store</artifactId>
+            <version>2.1.0</version>
+        </dependency>
 
         <dependency>
             <groupId>org.springframework.boot</groupId>
@@ -83,11 +88,7 @@
             <version>2.1.8</version>
             <scope>test</scope>
         </dependency>
-        <dependency>
-            <groupId>software.xdev</groupId>
-            <artifactId>spring-data-eclipse-store</artifactId>
-            <version>2.1.0</version>
-        </dependency>
+
     </dependencies>
 
     <build>

src/main/java/dev/nathanlively/Application.java

@@ -2,19 +2,14 @@
 
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.page.AppShellConfigurator;
+import com.vaadin.flow.server.PWA;
 import com.vaadin.flow.theme.Theme;
 import com.vaadin.flow.theme.lumo.Lumo;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import software.xdev.spring.data.eclipse.store.repository.config.EnableEclipseStoreRepositories;
 
-/**
- * The entry point of the Spring Boot application.
- *
- * Use the @PWA annotation make the application installable on phones, tablets
- * and some desktop browsers.
- *
- */
+@PWA(name = "Clocker-Vaadin", shortName = "Clocker")
 @SpringBootApplication
 @EnableEclipseStoreRepositories
 @NpmPackage(value = "@fontsource/anton", version = "4.5.0")

src/main/java/dev/nathanlively/HomeView.java

@@ -14,6 +14,7 @@
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.router.RouteAlias;
+import com.vaadin.flow.theme.lumo.LumoUtility;
 import com.vaadin.flow.theme.lumo.LumoUtility.Gap;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -25,83 +26,98 @@
 @RouteAlias(value = "")
 @Uses(Icon.class)
 public class HomeView extends Composite<VerticalLayout> {
+
     private static final Logger log = LoggerFactory.getLogger(HomeView.class);
+
     private final ClockEventService service;
-    private final Button buttonPrimary;
-    private final Button buttonSecondary;
+
+    private final Button clockInButton;
+    private final Button clockOutButton;
     private final UnorderedList eventsList;
 
     public HomeView(ClockEventService service) {
         this.service = service;
-        HorizontalLayout mainRow = new HorizontalLayout();
-        VerticalLayout column1 = new VerticalLayout();
-        VerticalLayout column2 = new VerticalLayout();
+        this.clockInButton = createClockInButton();
+        this.clockOutButton = createClockOutButton();
+        this.eventsList = createEventsList();
 
-        getContent().setWidth("100%");
-        getContent().getStyle().set("flex-grow", "1");
-        mainRow.addClassName(Gap.MEDIUM);
+        setupLayout();
+        addClockEvents();
+        updateButtonVisibility();
+    }
+
+    private void setupLayout() {
+        VerticalLayout content = getContent();
+        content.setWidth("100%");
+        content.getStyle().set("flex-grow", "1");
+
+        HorizontalLayout mainRow = new HorizontalLayout();
+        mainRow.addClassNames(Gap.MEDIUM, LumoUtility.Height.SCREEN);
         mainRow.setWidth("100%");
         mainRow.getStyle().set("flex-grow", "1");
 
+        VerticalLayout column1 = new VerticalLayout();
         column1.getStyle().set("flex-grow", "1");
         column1.setJustifyContentMode(JustifyContentMode.CENTER);
         column1.setAlignItems(Alignment.CENTER);
 
-        buttonPrimary = new Button("Clock In", event -> clockIn());
-        buttonSecondary = new Button("Clock Out", event -> clockOut());
-        eventsList = new UnorderedList();
+        VerticalLayout column2 = new VerticalLayout();
+        column2.getStyle().set("flex-grow", "1");
 
-        buttonPrimary.setId("button-primary");
-        buttonSecondary.setId("button-secondary");
-        eventsList.setId("events-list");
+        column1.add(clockInButton, clockOutButton);
+        column2.add(eventsList);
 
-        buttonPrimary.setWidth("min-content");
-        buttonSecondary.setWidth("min-content");
-        buttonPrimary.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+        mainRow.add(column1, column2);
+        content.add(mainRow);
+    }
 
-        column2.getStyle().set("flex-grow", "1");
-        eventsList.setWidth("100%");
-        eventsList.setHeight("100%");
-        addClockEvents();
-        updateButtonVisibility();
+    private Button createClockInButton() {
+        Button button = new Button("Clock In!!!", event -> clockIn());
+        button.setId("button-primary");
+        button.setWidth("min-content");
+        button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+        return button;
+    }
 
-        getContent().add(mainRow);
-        mainRow.add(column1);
-        column1.add(buttonPrimary);
-        column1.add(buttonSecondary);
-        mainRow.add(column2);
-        column2.add(eventsList);
+    private Button createClockOutButton() {
+        Button button = new Button("Clock Out", event -> clockOut());
+        button.setId("button-secondary");
+        button.setWidth("min-content");
+        return button;
+    }
+
+    private UnorderedList createEventsList() {
+        UnorderedList list = new UnorderedList();
+        list.setId("events-list");
+        list.setWidth("100%");
+        list.setHeight("100%");
+        return list;
     }
 
     private void clockIn() {
         ClockEventView clockEventView = service.clockIn();
-        eventsList.addComponentAsFirst(new ListItem(clockEventView.toString()));
+        eventsList.addComponentAsFirst(new ListItem(clockEventView.timeStamp()));
         updateButtonVisibility();
     }
 
     private void clockOut() {
         ClockEventView clockEventView = service.clockOut();
-        eventsList.addComponentAsFirst(new ListItem(clockEventView.toString()));
+        eventsList.addComponentAsFirst(new ListItem(clockEventView.timeStamp()));
         updateButtonVisibility();
     }
 
     void addClockEvents() {
         List<ClockEventView> allClockEvents = service.all();
-        for (ClockEventView clockEvent : allClockEvents) {
+        allClockEvents.forEach(clockEvent -> {
             log.info("Adding event: {}", clockEvent);
-            eventsList.add(new ListItem(clockEvent.toString()));
-        }
+            eventsList.add(new ListItem(clockEvent.timeStamp()));
+        });
     }
 
     private void updateButtonVisibility() {
         ClockEventType lastEventType = service.getLastClockEventType();
-        if (lastEventType == ClockEventType.IN) {
-            buttonPrimary.setVisible(false);
-            buttonSecondary.setVisible(true);
-        } else {
-            buttonPrimary.setVisible(true);
-            buttonSecondary.setVisible(false);
-        }
+        boolean isClockedIn = lastEventType == ClockEventType.IN;
+        clockInButton.setVisible(!isClockedIn);
+        clockOutButton.setVisible(isClockedIn);
     }
-
 }

src/main/resources/application.properties

@@ -3,6 +3,7 @@ logging.level.org.atmosphere = warn
 
 # Launch the default browser when starting the application in development mode
 vaadin.launch-browser=true
+spring.devtools.restart.exclude=**/EclipseStore/**
 # To improve the performance during development.
 # For more information https://vaadin.com/docs/latest/integrations/spring/configuration#special-configuration-parameters
 vaadin.allowed-packages = com.vaadin,org.vaadin,dev.nathanlively