London | 26-SDC-July | Shaghayegh Far| Sprint 2 | Chat-app

chat-app/.gitattributes

@@ -0,0 +1,2 @@
+/mvnw text eol=lf
+*.cmd text eol=crlf

chat-app/.gitignore

@@ -0,0 +1,33 @@
+HELP.md
+target/
+.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+build/
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### VS Code ###
+.vscode/

chat-app/.mvn/wrapper/maven-wrapper.properties

@@ -0,0 +1,3 @@
+wrapperVersion=3.3.4
+distributionType=only-script
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.16/apache-maven-3.9.16-bin.zip

chat-app/frontend/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Chat App</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+<div class="chat-container">
+
+    <header class="chat-header">
+        <h1>Chat App</h1>
+    </header>
+
+    <main id="messages" class="messages"></main>
+
+    <div id="feedback" class="feedback"></div>
+
+    <footer class="message-area">
+
+        <input
+                type="text"
+                id="usernameInput"
+                placeholder="Your name..."
+                autocomplete="off"
+        >
+
+        <input
+                type="text"
+                id="messageInput"
+                placeholder="Write a message..."
+                autocomplete="off"
+        >
+
+        <button id="sendButton">Send</button>
+
+    </footer>
+
+</div>
+
+<script src="script.js"></script>
+
+</body>
+</html>

chat-app/frontend/script.js

@@ -0,0 +1,134 @@
+const usernameInput = document.getElementById("usernameInput");
+const messageInput = document.getElementById("messageInput");
+const sendButton = document.getElementById("sendButton");
+const messagesDiv = document.getElementById("messages");
+const feedback = document.getElementById("feedback");
+
+
+sendButton.addEventListener("click", sendMessage);
+
+
+messageInput.addEventListener("keydown", function (event) {
+
+    if (event.key === "Enter") {
+        event.preventDefault();
+        sendMessage();
+    }
+
+});
+
+
+function sendMessage() {
+
+    const username = usernameInput.value.trim();
+    const content = messageInput.value.trim();
+
+    if (username === "") {
+        feedback.textContent = "Please enter your name.";
+        return;
+    }
+
+    if (content === "") {
+        feedback.textContent = "Message cannot be empty.";
+        return;
+    }
+
+    fetch(`http://localhost:8081/messages?username=${encodeURIComponent(username)}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            content: content
+        })
+    })
+        .then(response => {
+
+            if (!response.ok) {
+                throw new Error("Message could not be sent.");
+            }
+
+            return response.json();
+        })
+        .then(() => {
+
+            messageInput.value = "";
+            feedback.textContent = "";
+
+            loadMessages();
+        })
+        .catch(error => {
+
+            feedback.textContent = error.message;
+        });
+}
+
+
+function loadMessages() {
+
+    fetch("http://localhost:8081/messages")
+        .then(response => {
+
+            if (!response.ok) {
+                throw new Error("Could not load messages.");
+            }
+
+            return response.json();
+        })
+        .then(messages => {
+
+            messagesDiv.innerHTML = "";
+
+            messages.forEach(message => {
+
+                const messageElement = document.createElement("div");
+                messageElement.classList.add("message");
+
+                const usernameElement = document.createElement("span");
+                usernameElement.classList.add("username");
+
+                const contentElement = document.createElement("span");
+                contentElement.classList.add("content");
+
+                const timestampElement = document.createElement("span");
+                timestampElement.classList.add("timestamp");
+
+
+                if (message.user) {
+
+                    usernameElement.textContent =
+                        message.user.username + ":";
+
+                } else {
+
+                    usernameElement.textContent = "Unknown user:";
+                }
+
+
+                contentElement.textContent = message.content;
+
+                timestampElement.textContent =
+                    message.createdAt
+                        ? new Date(message.createdAt).toLocaleString()
+                        : "";
+
+
+                messageElement.appendChild(usernameElement);
+                messageElement.appendChild(contentElement);
+                messageElement.appendChild(timestampElement);
+
+                messagesDiv.appendChild(messageElement);
+            });
+
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+        })
+        .catch(error => {
+
+            feedback.textContent = error.message;
+        });
+}
+
+
+loadMessages();
+
+setInterval(loadMessages, 2000);

chat-app/frontend/style.css

@@ -0,0 +1,111 @@
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+    height: 100vh;
+}
+
+.chat-container {
+    width: 90%;
+    max-width: 1000px;
+    height: 90vh;
+    margin: 5vh auto;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Top of chat */
+
+.chat-header {
+    background-color: #4a76a8;
+    color: white;
+    padding: 15px 20px;
+}
+
+.chat-header h1 {
+    margin: 0;
+    font-size: 24px;
+}
+
+/* Message area */
+
+.messages {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background-color: #ffffff;
+}
+
+/* Individual message */
+
+.message {
+    margin-bottom: 12px;
+    font-size: 16px;
+}
+
+.username {
+    font-weight: bold;
+    margin-right: 8px;
+    color: #4a76a8;
+}
+
+.content {
+    color: #333;
+}
+
+.timestamp {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: #888;
+}
+
+/* Error/success message */
+
+.feedback {
+    padding: 5px 20px;
+    color: #d9534f;
+    min-height: 25px;
+}
+
+/* Bottom input area */
+
+.message-area {
+    display: flex;
+    padding: 15px;
+    border-top: 1px solid #ccc;
+    background-color: #f5f5f5;
+    gap: 10px;
+}
+
+.message-area input {
+    flex: 1;
+    padding: 12px;
+    font-size: 16px;
+    border: 1px solid #bbb;
+    border-radius: 5px;
+}
+
+.message-area button {
+    padding: 12px 25px;
+    font-size: 16px;
+    background-color: #4a76a8;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.message-area button:hover {
+    background-color: #365f8a;
+}