Add Gallery & Settings to menu and start layouts

.vscode/launch.json

@@ -7,7 +7,7 @@
             "name": "Launch BrickLog Client",
             "mainClass": "com.example.bricklog.BrickLogClient",
             "projectName": "bricklog-client",
-            "vmArgs": "--module-path C:/javafx-sdk-21.0.5 --add-modules javafx.controls,javafx.fxml"
+            "vmArgs": "--module-path \"C:/javafx-sdk-21.0.5/lib\" --add-modules javafx.controls,javafx.fxml"
         }
     ]
 }

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "java.compile.nullAnalysis.mode": "automatic"
+    "java.compile.nullAnalysis.mode": "automatic",
+    "java.configuration.updateBuildConfiguration": "automatic"
 }

BrickLog-Client/pom.xml

@@ -42,7 +42,7 @@
             <plugin>
                 <groupId>org.openjfx</groupId>
                 <artifactId>javafx-maven-plugin</artifactId>
-                <version>0.0.5</version>
+                <version>0.0.8</version>
                 <executions>
                     <execution>
                         <goals>

BrickLog-Client/src/main/java/com/example/bricklog/BrickLogClientApplication.java

@@ -1,49 +1,21 @@
 package com.example.bricklog;
 
+import com.example.bricklog.view.MainLayout;
+
 import javafx.application.Application;
 import javafx.scene.Scene;
-import javafx.scene.control.Button;
-import javafx.scene.control.TextField;
-import javafx.scene.layout.VBox;
 import javafx.stage.Stage;
 
 public class BrickLogClientApplication extends Application {
 
     @Override
     public void start(Stage primaryStage) {
-        primaryStage.setTitle("Brick Log");
+        primaryStage.setTitle("Brick Log Client");
 
-        // Create layout
+        // Use MainLayout as the root layout
-        VBox layout = new VBox(10); // Vertical box with spacing of 10 pixels
+        MainLayout mainLayout = new MainLayout();
+        Scene scene = new Scene(mainLayout, 1024, 720); // Set the desired width and height
 
-        // Search Box
-        TextField searchBox = new TextField();
-        searchBox.setPromptText("Search for builds...");
-
-        // Add Button
-        Button addButton = new Button("+");
-        addButton.setStyle("-fx-background-color: lightblue; -fx-font-size: 18px; -fx-padding: 10px; -fx-font-weight: bold;");
-        addButton.setPrefSize(50, 50);
-
-        // Animation Effect on Click
-        addButton.setOnMouseClicked(e -> {
-            addButton.setScaleX(1.2);
-            addButton.setScaleY(1.2);
-            // You may want to add logic for adding a new build here
-            // For example, opening a new window to add a build
-        });
-
-        // Reset size after animation
-        addButton.setOnMouseReleased(e -> {
-            addButton.setScaleX(1.0);
-            addButton.setScaleY(1.0);
-        });
-
-        // Add components to layout
-        layout.getChildren().addAll(searchBox, addButton);
-        
-        // Create a scene and set it to the stage
-        Scene scene = new Scene(layout, 400, 300); // Set the width and height as per your need
         primaryStage.setScene(scene);
         primaryStage.show();
     }

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

@@ -0,0 +1,113 @@
+package com.example.bricklog.view;
+
+import javafx.geometry.Insets;
+import javafx.scene.control.Label;
+import javafx.scene.control.ListView;
+import javafx.scene.control.ToggleButton;
+import javafx.scene.control.ToggleGroup;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.GridPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.VBox;
+
+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;
+
+        HBox toggleBox = new HBox(gridButton, listButton);
+        toggleBox.setSpacing(10);
+        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 = true;  // Update the variable
+            toggleLayout(isGridView);  // Use the variable
+        } else if (newValue == listButton) {
+            isGridView = false;  // Update the variable
+            toggleLayout(isGridView);  // Use the variable
+        }
+    });
+    }
+
+    private GridPane createGridView() {
+        GridPane grid = new GridPane();
+        grid.setPadding(new Insets(10));
+        grid.setHgap(10);
+        grid.setVgap(10);
+
+        // Example data - replace with your actual data retrieval logic
+        String[] buildTypes = {"Kitset", "MoC", "Kitset", "MoC"};
+        String[] imageUrls = {
+            "path/to/image1.jpg", 
+            "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.setFitWidth(150);
+            imageView.setFitHeight(150);
+            imageView.setPreserveRatio(true);
+
+            vbox.getChildren().addAll(imageView, new Label(buildTypes[i]));
+            grid.add(vbox, i % 3, i / 3); // Adjust to layout items in a grid
+        }
+        return grid;
+    }
+
+    private ListView<String> createListView() {
+        ListView<String> list = new ListView<>();
+        
+        // Example data - replace with your actual data retrieval logic
+        String[] details = {
+            "Build 1: Builder Name, 100 Pieces, 20x30x10 cm, Kitset",
+            "Build 2: Builder Name, 150 Pieces, 25x35x15 cm, MoC",
+            // Add more entries as needed...
+        };
+
+        list.getItems().addAll(details);
+        return list;
+    }
+
+// Method to toggle layout and print the current state
+private void toggleLayout(boolean isGrid) {
+    if (isGrid) {
+        System.out.println("Current layout: Grid View");
+        this.setCenter(gridView);
+    } else {
+        System.out.println("Current layout: List View");
+        this.setCenter(listView);
+    }
+}
+}
+

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

@@ -0,0 +1,137 @@
+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() {
+
+        // Title & Coppyright
+        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() {
+        Dialog<ButtonType> dialog = new Dialog<>();
+        dialog.setTitle("Add Build");
+        
+        // Create the dialog layout
+        GridPane grid = new GridPane();
+        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();
+    }
+      // This method is essential for switching to the GalleryLayout
+      private void switchToGalleryLayout() {
+        // Create an instance of GalleryLayout
+        GalleryLayout galleryLayout = new GalleryLayout();
+        
+        // Set the center of the MainLayout to the GalleryLayout
+        this.setCenter(galleryLayout);
+    }
+    private void switchToSettingsLayout() {
+        SettingsLayout settingsLayout = new SettingsLayout();
+        this.setCenter(settingsLayout);
+    }
+}

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

@@ -0,0 +1,26 @@
+package com.example.bricklog.view;
+
+import javafx.geometry.Insets;
+//import javafx.geometry.Pos;
+import javafx.scene.control.CheckBox;
+import javafx.scene.control.Label;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.VBox;
+
+public class SettingsLayout extends VBox {
+
+    public SettingsLayout() {
+        this.setSpacing(10);
+        this.setPadding(new Insets(20));
+        
+        Label settingsTitle = new Label("Settings");
+        settingsTitle.setStyle("-fx-font-size: 20px; -fx-font-weight: bold;");
+
+        // Example settings: toggle for sound, username input
+        CheckBox soundToggle = new CheckBox("Enable Sound");
+        TextField usernameField = new TextField();
+        usernameField.setPromptText("Enter your username");
+
+        this.getChildren().addAll(settingsTitle, soundToggle, usernameField);
+    }
+}

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

@@ -1,101 +0,0 @@
-package com.example.bricklog.view;
-
-import javafx.application.Application;
-import javafx.geometry.Insets;
-import javafx.scene.Scene;
-import javafx.scene.control.Label;
-import javafx.scene.control.PasswordField;
-import javafx.scene.control.RadioButton;
-import javafx.scene.control.Slider;
-import javafx.scene.control.Tab;
-import javafx.scene.control.TabPane;
-import javafx.scene.control.TextField;
-import javafx.scene.control.ToggleGroup;
-import javafx.scene.layout.GridPane;
-import javafx.scene.layout.VBox;
-import javafx.stage.Stage;
-
-public class SettingsWindow extends Application {
-
-    @Override
-    public void start(Stage primaryStage) {
-        primaryStage.setTitle("Settings");
-
-        // Create a TabPane for organizing settings
-        TabPane tabPane = new TabPane();
-
-        // Tab 1: Display Settings
-        Tab displayTab = new Tab("Display Settings");
-        displayTab.setContent(createDisplaySettingsContent());
-        displayTab.setClosable(false);
-
-        // Tab 2: Server Settings
-        Tab serverTab = new Tab("Server Settings");
-        serverTab.setContent(createServerSettingsContent());
-        serverTab.setClosable(false);
-
-        tabPane.getTabs().addAll(displayTab, serverTab);
-
-        // Set up the scene
-        VBox vbox = new VBox(tabPane);
-        Scene scene = new Scene(vbox, 400, 300);
-        primaryStage.setScene(scene);
-        primaryStage.show();
-    }
-
-    private GridPane createDisplaySettingsContent() {
-        GridPane grid = new GridPane();
-        grid.setPadding(new Insets(10));
-        grid.setVgap(10);
-        grid.setHgap(10);
-
-        // Font Size Adjuster
-        Label fontSizeLabel = new Label("Font Size:");
-        Slider fontSizeSlider = new Slider(10, 30, 14);
-        fontSizeSlider.setShowTickLabels(true);
-        fontSizeSlider.setShowTickMarks(true);
-
-        // Dark/Light Mode Toggle
-        Label themeLabel = new Label("Theme:");
-        ToggleGroup themeGroup = new ToggleGroup();
-        RadioButton lightMode = new RadioButton("Light");
-        RadioButton darkMode = new RadioButton("Dark");
-        lightMode.setToggleGroup(themeGroup);
-        darkMode.setToggleGroup(themeGroup);
-        lightMode.setSelected(true);
-
-        grid.add(fontSizeLabel, 0, 0);
-        grid.add(fontSizeSlider, 1, 0);
-        grid.add(themeLabel, 0, 1);
-        grid.add(lightMode, 1, 1);
-        grid.add(darkMode, 2, 1);
-
-        return grid;
-    }
-
-    private GridPane createServerSettingsContent() {
-        GridPane grid = new GridPane();
-        grid.setPadding(new Insets(10));
-        grid.setVgap(10);
-        grid.setHgap(10);
-
-        // Server IP
-        Label ipLabel = new Label("Server IP:");
-        TextField ipField = new TextField();
-
-        // Authentication Token
-        Label authLabel = new Label("Auth Token:");
-        PasswordField authField = new PasswordField();
-
-        grid.add(ipLabel, 0, 0);
-        grid.add(ipField, 1, 0);
-        grid.add(authLabel, 0, 1);
-        grid.add(authField, 1, 1);
-
-        return grid;
-    }
-
-    public static void main(String[] args) {
-        launch(args);
-    }
-}

BrickLog-Client/target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst

@@ -1,2 +1,3 @@
 com\example\bricklog\BrickLogClientApplication.class
-com\example\bricklog\view\SettingsWindow.class
+com\example\bricklog\view\MainLayout.class
+com\example\bricklog\view\GalleryLayout.class

BrickLog-Client/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst

@@ -1,3 +1,5 @@
 C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\BrickLogClientApplication.java
 C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\controller\SettingsController.java
+C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\view\MainLayout.java
 C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\view\SettingsWindow.java
+C:\Users\bryce\Documents\Git\BrickLog\BrickLog-Client\src\main\java\com\example\bricklog\view\GalleryLayout.java