Aperance Modifycation of the Client

sorting out the 'Dashboard' and SettingsWindow
creation of Kitset & MoC pages and BuildView model
This commit is contained in:
bryce
2024-12-01 15:41:56 +13:00
parent 484b60e31e
commit 49a34e77ab
16 changed files with 251 additions and 173 deletions

View File

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

View File

@@ -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 = true; // Update the variable
toggleLayout(isGridView); // Use the variable
} else if (newValue == listButton) {
isGridView = false; // Update the variable
toggleLayout(isGridView); // Use the variable
}
isGridView = newValue == gridButton;
toggleLayout(isGridView);
});
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
String[] buildTypes = {"Kitset", "MoC", "Kitset", "MoC"};
String[] imageUrls = {
"path/to/image1.jpg",
"path/to/image2.jpg",
"path/to/image3.jpg",
"path/to/image4.jpg"
};
List<Build> builds = loadData();
for (int i = 0; i < builds.size(); i++) {
Build build = builds.get(i);
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]));
grid.add(vbox, i % 3, i / 3); // Adjust to layout items in a grid
vbox.getChildren().addAll(imageView, new Label(build.getType()));
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
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);
for (Build build : builds) {
list.getItems().add(String.format(
"Name: %s, Type: %s, Image: %s",
build.getName(), build.getType(), build.getImageUrl()
));
}
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);
}
}
private List<Build> loadData() {
List<Build> builds = new ArrayList<>();
builds.add(new Build("Build 1", "path/to/image1.jpg", "Kitset"));
builds.add(new Build("Build 2", "path/to/image2.jpg", "MoC"));
return builds;
}
private void toggleLayout(boolean isGrid) {
this.setCenter(isGrid ? gridView : listView);
}
}

View File

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

View File

@@ -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() {
// 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);
setTop(createMenuBar());
setCenter(createDashboard());
}
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
private HBox createMenuBar() {
HBox menuBar = new HBox();
Button dashboardButton = new Button("Dashboard");
dashboardButton.setOnAction(e -> setCenter(createDashboard()));
menuBar.getChildren().add(dashboardButton);
return menuBar;
}
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() {
SettingsWindow settingsLayout = new SettingsWindow();
this.setCenter(settingsLayout);
private GridPane createDashboard() {
GridPane dashboard = new GridPane();
dashboard.add(new Label("Number of Kitsets:"), 0, 0);
dashboard.add(new Label("..."), 1, 0); // Placeholder for data
dashboard.add(new Label("Number of MoCs:"), 0, 1);
dashboard.add(new Label("..."), 1, 1); // Placeholder for data
return dashboard;
}
}

View File

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

View File

@@ -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:
return !ipAddress.isEmpty() && ipAddress.equals("127.0.0.1");
if (ipAddress == null || ipAddress.isEmpty()) {
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
}
}
====================================================================================================== */
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}