Merge pull request #2 from ithsjava25/feature/message-input

Feature/message input

Author: addee1

src/main/java/com/example/HelloController.java

@@ -1,8 +1,9 @@
 package com.example;
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
-import javafx.scene.control.Label;
-import javafx.scene.control.ListView;
+import javafx.geometry.Insets;
+import javafx.scene.control.*;
+import javafx.scene.layout.HBox;
 
 /**
  * Controller layer: mediates between the view (FXML) and the model.
@@ -15,16 +16,71 @@ public class HelloController {
     @FXML
     private Label messageLabel;
 
+    @FXML
+    private TextField messageField;
+
     @FXML
     private void initialize() {
         if (messageLabel != null) {
             messageLabel.setText(model.getGreeting());
         }
         messageView.setItems(model.getMessages());
 
+        messageView.setCellFactory(list -> new ListCell<>() {
+            private final Label messageLabel = new Label();
+            private final HBox bubble = new HBox(messageLabel);
+            {
+                bubble.setPadding(new Insets(5, 10, 5, 10));
+                bubble.setMaxWidth(200);
+                messageLabel.setWrapText(true);
+                bubble.getStyleClass().add("chat-bubble");
+            }
+
+            @Override
+            protected void updateItem(NtfyMessageDto item, boolean empty) {
+                super.updateItem(item, empty);
+                if (empty || item == null) {
+                    setGraphic(null);
+                } else {
+                    // Format tid + text
+                    java.time.LocalTime time = java.time.Instant.ofEpochSecond(item.time())
+                            .atZone(java.time.ZoneId.systemDefault())
+                            .toLocalTime();
+                    String formattedTime = time.format(java.time.format.DateTimeFormatter.ofPattern("HH:mm"));
+
+                    messageLabel.setText(formattedTime + "\n" + item.message());
+                    setGraphic(bubble);
+                }
+            }
+        });
+
+        model.messageToSendProperty().bind(messageField.textProperty());
+
     }
 
     public void sendMessage(ActionEvent actionEvent) {
+        String message = messageField.getText();
+        if(message == null || message.isBlank()){
+            showTemporaryAlert("You must write something before sending!");
+            return;
+        }
+
         model.sendMessage();
+        messageField.clear();
+    }
+
+    private void showTemporaryAlert(String alertMessage) {
+        Alert alert = new Alert(Alert.AlertType.WARNING);
+        alert.setHeaderText(null);
+        alert.setContentText(alertMessage);
+        alert.initOwner(messageField.getScene().getWindow());
+
+        alert.show();
+
+        new Thread(() -> {
+            try {
+                Thread.sleep(2000);
+            } catch (InterruptedException e) {}
+        }).start();
     }
 }

src/main/java/com/example/HelloFX.java

@@ -12,6 +12,7 @@ public void start(Stage stage) throws Exception {
         FXMLLoader fxmlLoader = new FXMLLoader(HelloFX.class.getResource("hello-view.fxml"));
         Parent root = fxmlLoader.load();
         Scene scene = new Scene(root, 640, 480);
+        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
         stage.setTitle("Chatt Client");
         stage.setScene(scene);
         stage.show();

src/main/resources/com/example/hello-view.fxml

@@ -3,10 +3,20 @@
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 
-<VBox alignment="CENTER" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.HelloController">
+<?import javafx.geometry.Insets?>
+<VBox alignment="CENTER" stylesheets="@style.css" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.HelloController">
 
     <Label fx:id="messageLabel" text="Adams Chat Client" />
-    <Button onAction="#sendMessage" prefHeight="25.0" prefWidth="115.0" text="Send message" />
     <ListView fx:id="messageView" />
 
+
+    <HBox alignment="CENTER_RIGHT" spacing="5" prefHeight="40" maxWidth="600">
+        <VBox.margin>
+            <Insets top="10" left="10" right="10" bottom="10" />
+        </VBox.margin>
+
+        <TextField fx:id="messageField" prefHeight="40" promptText="Write something here.." HBox.hgrow="ALWAYS" />
+        <Button onAction="#sendMessage" prefHeight="40" prefWidth="80" text="Send" />
+    </HBox>
+
 </VBox>

src/main/resources/com/example/style.css

@@ -0,0 +1,43 @@
+.list-view {
+    -fx-control-inner-background: white;
+    -fx-control-inner-background-alt: white;
+    -fx-background-color: white;
+    -fx-selection-bar: transparent;
+    -fx-selection-bar-non-focused: transparent;
+    -fx-border-color: transparent;
+}
+.list-cell {
+    -fx-background-color: #060312;
+    -fx-padding: 5 10 5 10;
+}
+.chat-bubble {
+    -fx-background-color: linear-gradient(to bottom right, #a922b5, #3d11ed);
+    -fx-background-radius: 15;
+    -fx-padding: 10;
+    -fx-text-fill: white;
+}
+.chat-bubble .label {
+    -fx-text-fill: white;
+}
+
+.button {
+    -fx-background-color: linear-gradient(to bottom right, #6366f1, #4f46e5);
+    -fx-background-radius: 5;
+    -fx-text-fill: white;
+    -fx-font-size: 12px;
+    -fx-font-weight: bold;
+    -fx-padding: 8 24 8 24;
+    -fx-cursor: hand;/
+    -fx-border-color: transparent;
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 8, 0, 0, 3);
+    -fx-transition: all 0.3s ease;
+}
+
+.button:hover {
+    -fx-background-color: linear-gradient(to bottom right, #7c3aed, #4338ca);
+}
+
+.button:pressed {
+    -fx-background-color: linear-gradient(to bottom right, #4338ca, #312e81);
+    -fx-translate-y: 2;
+}