Aperance Modifycation of the Client

sorting out the 'Dashboard' and SettingsWindow
creation of Kitset & MoC pages and BuildView model

BrickLog-Client/src/main/java/com/example/bricklog/model/Build.java

@@ -0,0 +1,45 @@
+package com.example.bricklog.model;
+
+public class Build {
+    private String name;
+    private String imageUrl;
+    private String type; // "Kitset" or "MoC"
+
+    // Constructor
+    public Build(String name, String imageUrl, String type) {
+        this.name = name;
+        this.imageUrl = imageUrl;
+        this.type = type;
+    }
+
+    // Getters and setters
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getImageUrl() {
+        return imageUrl;
+    }
+
+    public void setImageUrl(String imageUrl) {
+        this.imageUrl = imageUrl;
+    }
+
+    public String getType() {
+        return type;
+    }
+
+    public void setType(String type) {
+        this.type = type;
+    }
+
+    // Override toString for display purposes
+    @Override
+    public String toString() {
+        return String.format("Build{name='%s', type='%s', imageUrl='%s'}", name, type, imageUrl);
+    }
+}

BrickLog-Client/src/main/java/com/example/bricklog/view/GalleryLayout.java

@@ -1,5 +1,6 @@
 package com.example.bricklog.view;
 
+import com.example.bricklog.model.Build;
 import javafx.geometry.Insets;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListView;
@@ -12,23 +13,23 @@ import javafx.scene.layout.GridPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 
+import java.util.ArrayList;
+import java.util.List;
+
 public class GalleryLayout extends BorderPane {
     private final GridPane gridView;
     private final ListView<String> listView;
     private boolean isGridView;
 
     public GalleryLayout() {
-        // Create a ToggleGroup for the layout options
         ToggleGroup toggleGroup = new ToggleGroup();
 
-        // Create toggle buttons for layout options
         ToggleButton gridButton = new ToggleButton("Grid");
         ToggleButton listButton = new ToggleButton("List");
 
         gridButton.setToggleGroup(toggleGroup);
         listButton.setToggleGroup(toggleGroup);
 
-        // Set the default selected button
         gridButton.setSelected(true);
         isGridView = true;
 
@@ -37,24 +38,18 @@ public class GalleryLayout extends BorderPane {
         toggleBox.setPadding(new Insets(10));
         this.setTop(toggleBox);
 
-        // Create both views
         gridView = createGridView();
         listView = createListView();
 
-        // Start with the grid view
         isGridView = true;
         this.setCenter(gridView);
 
-    // Add listener to the toggle group to switch layouts
         toggleGroup.selectedToggleProperty().addListener((observable, oldValue, newValue) -> {
-        if (newValue == gridButton) {
+            isGridView = newValue == gridButton;
-            isGridView = true;  // Update the variable
+            toggleLayout(isGridView);
-            toggleLayout(isGridView);  // Use the variable
-        } else if (newValue == listButton) {
-            isGridView = false;  // Update the variable
-            toggleLayout(isGridView);  // Use the variable
-        }
         });
+
+        this.getStylesheets().add(getClass().getResource("/css/gallery.css").toExternalForm());
     }
 
     private GridPane createGridView() {
@@ -63,51 +58,50 @@ public class GalleryLayout extends BorderPane {
         grid.setHgap(10);
         grid.setVgap(10);
 
-        // Example data - replace with your actual data retrieval logic
+        List<Build> builds = loadData();
-        String[] buildTypes = {"Kitset", "MoC", "Kitset", "MoC"};
+
-        String[] imageUrls = {
+        for (int i = 0; i < builds.size(); i++) {
-            "path/to/image1.jpg", 
+            Build build = builds.get(i);
-            "path/to/image2.jpg", 
-            "path/to/image3.jpg",
-            "path/to/image4.jpg"
-        };
 
-        for (int i = 0; i < buildTypes.length; i++) {
             VBox vbox = new VBox();
-            ImageView imageView = new ImageView(new Image(imageUrls[i]));
+            ImageView imageView = new ImageView();
+            try {
+                imageView.setImage(new Image(build.getImageUrl()));
+            } catch (Exception e) {
+                imageView.setImage(new Image("path/to/placeholder.jpg"));
+            }
+
             imageView.setFitWidth(150);
             imageView.setFitHeight(150);
             imageView.setPreserveRatio(true);
 
-            vbox.getChildren().addAll(imageView, new Label(buildTypes[i]));
+            vbox.getChildren().addAll(imageView, new Label(build.getType()));
-            grid.add(vbox, i % 3, i / 3); // Adjust to layout items in a grid
+            grid.add(vbox, i % 3, i / 3);
         }
         return grid;
     }
 
     private ListView<String> createListView() {
         ListView<String> list = new ListView<>();
+        List<Build> builds = loadData();
 
-        // Example data - replace with your actual data retrieval logic
+        for (Build build : builds) {
-        String[] details = {
+            list.getItems().add(String.format(
-            "Build 1: Builder Name, 100 Pieces, 20x30x10 cm, Kitset",
+                "Name: %s, Type: %s, Image: %s",
-            "Build 2: Builder Name, 150 Pieces, 25x35x15 cm, MoC",
+                build.getName(), build.getType(), build.getImageUrl()
-            // Add more entries as needed...
+            ));
-        };
+        }
-
-        list.getItems().addAll(details);
         return list;
     }
 
-// Method to toggle layout and print the current state
+    private List<Build> loadData() {
-private void toggleLayout(boolean isGrid) {
+        List<Build> builds = new ArrayList<>();
-    if (isGrid) {
+        builds.add(new Build("Build 1", "path/to/image1.jpg", "Kitset"));
-        System.out.println("Current layout: Grid View");
+        builds.add(new Build("Build 2", "path/to/image2.jpg", "MoC"));
-        this.setCenter(gridView);
+        return builds;
-    } else {
+    }
-        System.out.println("Current layout: List View");
+
-        this.setCenter(listView);
+    private void toggleLayout(boolean isGrid) {
+        this.setCenter(isGrid ? gridView : listView);
     }
 }
-}
-

BrickLog-Client/src/main/java/com/example/bricklog/view/KitsetPage.java

@@ -0,0 +1,14 @@
+package com.example.bricklog.view;
+
+import javafx.scene.control.TableColumn;
+import javafx.scene.control.TableView;
+import javafx.scene.layout.VBox;
+
+public class KitsetPage extends VBox {
+    public KitsetPage() {
+        TableView<String> table = new TableView<>();
+        TableColumn<String, String> column = new TableColumn<>("Kitset Name");
+        table.getColumns().add(column);
+        getChildren().add(table);
+    }
+}

BrickLog-Client/src/main/java/com/example/bricklog/view/MainLayout.java

@@ -1,137 +1,32 @@
 package com.example.bricklog.view;
 
-import javafx.geometry.Insets;
-import javafx.geometry.Pos;
 import javafx.scene.control.Button;
-import javafx.scene.control.ButtonType;
-import javafx.scene.control.Dialog;
 import javafx.scene.control.Label;
-import javafx.scene.control.TextField;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.GridPane;
 import javafx.scene.layout.HBox;
-import javafx.scene.layout.VBox;
-// import javafx.scene.layout.StackPane;
 
 public class MainLayout extends BorderPane {
 
-    private VBox menu; // makes menu accessible for updates
-
     public MainLayout() {
-
+        setTop(createMenuBar());
-        // Title & Coppyright
+        setCenter(createDashboard());
-        Label title = new Label("BRICK LOG Client");
-        title.setStyle("-fx-font-size: 24px; -fx-font-weight: bold;");
-
-        Label copyright = new Label("built by Bryce © 2024");
-        copyright.setStyle("-fx-font-size: 14px;");
-
-        VBox titleBox = new VBox(title, copyright);
-        titleBox.setAlignment(Pos.CENTER);
-        titleBox.setPadding(new Insets(10));
-
-        // Set title at the top
-        VBox topContainer = new VBox(titleBox);
-        this.setTop(topContainer);
-
-        menu = new VBox();
-        menu.setSpacing(10);
-        menu.setPadding(new Insets(10));
-        menu.setStyle("-fx-background-color: #f0f0f0;"); // Optional: Background color for the menu
-
-        // Search Bar
-        TextField searchField = new TextField();
-        searchField.setPromptText("Search...");
-
-        // Set up the menu
-        menu = new VBox();
-        menu.setSpacing(10);
-        menu.setPadding(new Insets(10));
-        menu.setStyle("-fx-background-color: #f0f0f0;"); // Optional: Background color for the menu
-
-        // Add the Gallery menu item
-        Label galleryLabel = new Label("Gallery");
-        galleryLabel.setStyle("-fx-font-weight: bold; cursor: hand;"); // Make it look interactive
-        galleryLabel.setOnMouseClicked(event -> switchToGalleryLayout()); // Switch layout on click
-
-        Label settingsLabel = new Label("Settings");
-        settingsLabel.setStyle("-fx-font-weight: bold; cursor: hand;");
-        settingsLabel.setOnMouseClicked(event -> switchToSettingsLayout());
-
-        // Add menu items
-        menu.getChildren().addAll(new Label("Menu"), galleryLabel, settingsLabel);
-        this.setLeft(menu); // Set the menu on the left side
-
-        // Set up the '+' button
-        Button addButton = new Button("+");
-        addButton.setStyle("-fx-font-size: 24px; -fx-background-color: lightblue;");
-
-        // Set up the action for the '+' button to show the add dialog
-        addButton.setOnAction(e -> showAddDialog());
-
-        // Create an HBox to hold the button and align it to the bottom right
-        HBox buttonContainer = new HBox(addButton);
-        buttonContainer.setAlignment(Pos.BOTTOM_RIGHT);
-        buttonContainer.setPadding(new Insets(10)); // Optional padding
-
-        // Add the buttonContainer to the bottom of the layout
-        this.setBottom(buttonContainer);
-
-        // Optionally, set the center to another pane or leave it empty
-        // this.setCenter(someOtherPane);
     }
 
-    private void showAddDialog() {
+    private HBox createMenuBar() {
-        Dialog<ButtonType> dialog = new Dialog<>();
+        HBox menuBar = new HBox();
-        dialog.setTitle("Add Build");
+        Button dashboardButton = new Button("Dashboard");
-        
+        dashboardButton.setOnAction(e -> setCenter(createDashboard()));
-        // Create the dialog layout
+        menuBar.getChildren().add(dashboardButton);
-        GridPane grid = new GridPane();
+        return menuBar;
-        grid.setHgap(10);
-        grid.setVgap(10);
-        grid.setPadding(new Insets(20));
-
-        TextField nameField = new TextField();
-        nameField.setPromptText("Build Name");
-        TextField builderField = new TextField();
-        builderField.setPromptText("Builder Name");
-        // Add more fields as needed...
-
-        grid.add(new Label("Name:"), 0, 0);
-        grid.add(nameField, 1, 0);
-        grid.add(new Label("Builder:"), 0, 1);
-        grid.add(builderField, 1, 1);
-        // Add more fields to the grid as needed...
-
-        dialog.getDialogPane().setContent(grid);
-        
-        // Add buttons for adding and canceling
-        dialog.getDialogPane().getButtonTypes().addAll(ButtonType.OK, ButtonType.CANCEL);
-
-        // Show dialog and handle button events
-        dialog.setResultConverter(button -> {
-            if (button == ButtonType.OK) {
-                // Insert data into the database and handle image upload
-                String name = nameField.getText();
-                String builder = builderField.getText();
-                // Handle database insert...
-                System.out.println("Name: " + name + ", Builder: " + builder); // Debugging line
     }
-            return null;
-        });
 
-        dialog.showAndWait();
+    private GridPane createDashboard() {
-    }
+        GridPane dashboard = new GridPane();
-      // This method is essential for switching to the GalleryLayout
+        dashboard.add(new Label("Number of Kitsets:"), 0, 0);
-      private void switchToGalleryLayout() {
+        dashboard.add(new Label("..."), 1, 0); // Placeholder for data
-        // Create an instance of GalleryLayout
+        dashboard.add(new Label("Number of MoCs:"), 0, 1);
-        GalleryLayout galleryLayout = new GalleryLayout();
+        dashboard.add(new Label("..."), 1, 1); // Placeholder for data
-        
+        return dashboard;
-        // Set the center of the MainLayout to the GalleryLayout
-        this.setCenter(galleryLayout);
-    }
-    private void switchToSettingsLayout() {
-        SettingsWindow settingsLayout = new SettingsWindow();
-        this.setCenter(settingsLayout);
     }
 }

BrickLog-Client/src/main/java/com/example/bricklog/view/MocPage.java

@@ -0,0 +1,14 @@
+package com.example.bricklog.view;
+
+import javafx.scene.control.TableColumn;
+import javafx.scene.control.TableView;
+import javafx.scene.layout.VBox;
+
+public class MocPage extends VBox {
+    public MocPage() {
+        TableView<String> table = new TableView<>();
+        TableColumn<String, String> column = new TableColumn<>("MoC Name");
+        table.getColumns().add(column);
+        getChildren().add(table);
+    }
+}

BrickLog-Client/src/main/java/com/example/bricklog/view/SettingsWindow.java

@@ -99,7 +99,13 @@ public class SettingsWindow extends BorderPane {
 
         // Method to connect to the server
         private void connectToServer(String ipAddress) {
-            boolean isConnected = simulateServerConnection(ipAddress); // Replace with real connection logic
+            if (!isValidIPAddress(ipAddress)) {
+                connectionStatus.setText("Invalid IP Address");
+                connectionStatus.setStyle("-fx-background-color: orange; -fx-padding: 5;");
+                return;
+            }
+        
+            boolean isConnected = simulateServerConnection(ipAddress);
         
             if (isConnected) {
                 connectionStatus.setText("Connected");
@@ -110,9 +116,37 @@ public class SettingsWindow extends BorderPane {
             }
         }
         
+        // Utility method to validate IP addresses
+        private boolean isValidIPAddress(String ipAddress) {
+            return ipAddress.matches(
+                "^((25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)\\.){3}(25[0-5]|2[0-4][0-9]|[0-1]?[0-9][0-9]?)$"
+            );
+        }
+
+        // DEMO PURPOSES ONLY [Commented out when in production]
         // Simulated connection logic for demonstration purposes
         private boolean simulateServerConnection(String ipAddress) {
-            // Here, add logic for real server connection. For now, a simple placeholder:
+            if (ipAddress == null || ipAddress.isEmpty()) {
-            return !ipAddress.isEmpty() && ipAddress.equals("127.0.0.1");
+                return false; // IP address is invalid
             }
+            
+          
+            // Simulate connection by checking for a specific IP pattern (e.g., localhost)
+            return ipAddress.equals("127.0.0.1") || ipAddress.startsWith("192.168.");
+        }
+
+        /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+          //PRODUCTION _ UNCOMmENT When Needed for true Server Connectivity
+          +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+            private boolean simulateServerConnection(String ipAddress) {
+        int port = 12345; // Replace with your server's port
+        try (Socket socket = new Socket()) {
+            socket.connect(new InetSocketAddress(ipAddress, port), 3000); // 3-second timeout
+            return true; // Connection successful
+        } catch (IOException e) {
+            return false; // Connection failed
+        }
+    } 
+        ====================================================================================================== */
+        
 }

BrickLog-Client/src/main/java/css/dark-theme.css

@@ -0,0 +1,19 @@
+.root {
+    -fx-background-color: #161616;
+    background-color: #161616; /* Compatibility fix */
+}
+
+.label.title {
+    -fx-text-fill: #B22222;
+    -fx-effect: dropshadow(gaussian, white, 2, 0, 0, 0);
+}
+
+.table-view {
+    -fx-font-size: 14px;
+    font-size: 14px;/* Compatibility fix */
+    -fx-text-fill: #E0FFFF;
+}
+
+.caption {
+    -fx-text-fill: #C0C0C0;
+}

BrickLog-Client/src/main/java/css/gallery.css

@@ -0,0 +1,22 @@
+.toggle-button {
+    -fx-background-color: #444;
+    -fx-text-fill: white;
+    -fx-padding: 5 10;
+    -fx-border-radius: 5;
+    -fx-background-radius: 5;
+}
+
+.toggle-button:selected {
+    -fx-background-color: #666;
+}
+
+.grid-pane {
+    -fx-background-color: #f0f0f0;
+    -fx-padding: 10;
+    -fx-hgap: 15;
+    -fx-vgap: 15;
+}
+
+.list-view {
+    -fx-background-color: #f9f9f9;
+}

BrickLog-Client/target/classes/css/dark-theme.css

@@ -0,0 +1,19 @@
+.root {
+    -fx-background-color: #161616;
+    background-color: #161616; /* Compatibility fix */
+}
+
+.label.title {
+    -fx-text-fill: #B22222;
+    -fx-effect: dropshadow(gaussian, white, 2, 0, 0, 0);
+}
+
+.table-view {
+    -fx-font-size: 14px;
+    font-size: 14px;/* Compatibility fix */
+    -fx-text-fill: #E0FFFF;
+}
+
+.caption {
+    -fx-text-fill: #C0C0C0;
+}

BrickLog-Client/target/classes/css/gallery.css

@@ -0,0 +1,22 @@
+.toggle-button {
+    -fx-background-color: #444;
+    -fx-text-fill: white;
+    -fx-padding: 5 10;
+    -fx-border-radius: 5;
+    -fx-background-radius: 5;
+}
+
+.toggle-button:selected {
+    -fx-background-color: #666;
+}
+
+.grid-pane {
+    -fx-background-color: #f0f0f0;
+    -fx-padding: 10;
+    -fx-hgap: 15;
+    -fx-vgap: 15;
+}
+
+.list-view {
+    -fx-background-color: #f9f9f9;
+}