michkin32 · ryanmil · Dec 13, 2019 · Dec 13, 2019
diff --git a/src/main/client/index.html b/src/main/client/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>YouAreEll Client</title>
+    <meta name="description" content="A cool chat web-app">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./styles.css">
+
+    <script src="./js/index.js" type="module" async></script>
+</head>
+<body>
+<main>
+    <div id="actions">
+
+    </div>
+    <div id="sidebar">
+        <div class="sidebar-search topNav">
+            <label><input type="text" name="search-val" placeholder="search" ></label>
+        </div>
+
+        <div class="chat">
+            @ Chat
+        </div>
+
+    </div>
+    <div id="hub">
+        <div class="hub-actions topNav">
+            <h3>@ Chat</h3>
+        </div>
+
+        <div id="message-container" class="messages">
+
+            <div class="message">
+                <div class="message-head">
+                    <div class="message-sender">Tester</div>
+                    <div class="message-time">01/01/19</div>
+                </div>
+                <div class="message-body">A Test Message</div>
+            </div>
+
+        </div>
+
+        <div class="message-text-box">
+            <div class="input-wrapper">
+                <label><input id="message-text-box-input" type="text" name="message-val" placeholder="Message @Chat" ></label>
+            </div>
+        </div>
+    </div>
+</main>
+</body>
+</html>
diff --git a/src/main/client/js/index.js b/src/main/client/js/index.js
@@ -0,0 +1,83 @@
+import MessageService from "./message-service.js";
+
+let userId = "Tester";
+const messageService = new MessageService();
+
+window.addEventListener("load", function () {
+    //document.getElementById("greeting").innerHTML = `Welcome ${userId}`;
+    createFormListener();
+    messageService.getAllMessages().then(successCallback, errorCallback);
+});
+
+function successCallback(response) {
+    // This data comes from the resolve method
+    populateThread(response);
+    console.log(response);
+}
+
+function errorCallback(response) {
+    // This data comes from the reject method
+    console.log(response);
+}
+
+function populateThread(messages) {
+    messages.forEach(message => {
+        addMessageToThread(message);
+    })
+}
+
+function addMessageToThread(message) {
+    const messageListItem = document.createElement("div");
+    messageListItem.className = "message";
+
+    const messageHead = document.createElement("div");
+    messageHead.className = "message-head";
+
+    const userIdContent = document.createElement("div");
+    userIdContent.className = "message-sender";
+    userIdContent.innerHTML = message.fromid;
+    messageHead.appendChild(userIdContent);
+
+    const timeContent = document.createElement("div");
+    timeContent.className = "message-time";
+    timeContent.innerHTML = message.timestamp;
+    messageHead.appendChild(timeContent);
+
+    const messageBody = document.createElement("div");
+    messageBody.innerHTML = message.message;
+
+    messageListItem
+        .appendChild(messageHead)
+        .appendChild(messageBody);
+    document.getElementById("message-container").appendChild(messageListItem);
+}
+
+function createFormListener() {
+    const input = document.getElementById("message-text-box-input");
+
+    input.onkeydown = function (event) {
+        // stop the regular form submission
+        if (event.key === 'Enter') {
+            event.preventDefault();
+
+            const data = {
+                fromid: userId,
+                message: input.value
+            };
+            input.value = "";
+
+            messageService.createNewMessage(data)
+                .then(successCallback, errorCallback);
+
+            function successCallback(response) {
+                // This data comes from the resolve method
+                addMessageToThread(response);
+            }
+
+            function errorCallback(response) {
+                // This data comes from the reject method
+                console.log(response);
+            }
+        }
+    }
+}
diff --git a/src/main/client/js/message-service.js b/src/main/client/js/message-service.js
@@ -0,0 +1,56 @@
+export default class MessageService {
+
+    getAllMessages() {
+        const request = new XMLHttpRequest();
+
+        return new Promise(function (resolve, reject) {
+            // Setup our listener to process compeleted requests
+            request.onload = function () {
+                // Process the response
+                if (request.status >= 200 && request.status < 300) {
+                    // If successful
+                    const threads = JSON.parse(request.responseText);
+                    // this data is passed to the success callback
+                    resolve(threads);
+                } else {
+                    // this data is passed to the failure callback
+                    reject({
+                        status: request.status,
+                        statusText: request.statusText
+                    });
+                }
+            };
+
+            request.open("GET", "http://zipcode.rocks:8085/messages");
+
+            request.send();
+        })
+    }
+
+
+    createNewMessage(message) {
+        const request = new XMLHttpRequest();
+
+        return new Promise(function (resolve, reject) {
+            // Setup our listener to process compeleted requests
+            request.onload = function () {
+                // Process the response
+                if (request.status >= 200 && request.status < 300) {
+                    // If successful
+                    resolve(JSON.parse(request.responseText));
+                } else {
+                    reject({
+                        status: request.status,
+                        statusText: request.statusText
+                    });
+                }
+            };
+
+            request.open("POST", `http://zipcode.rocks:8085/ids/${message.fromid}/messages`);
+
+            request.send(JSON.stringify(message));
+        });
+    }
+
+
+}
diff --git a/src/main/client/styles.css b/src/main/client/styles.css
@@ -0,0 +1,119 @@
+body {
+    overflow: hidden;
+}
+
+input:focus {
+    outline-width: 0;
+}
+
+#actions {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100vh;
+    background: #35373f;
+}
+
+#sidebar {
+    position: absolute;
+    top: 0;
+    left: 100px;
+    width: 300px;
+    height: 100vh;
+    background: #35373f;
+}
+
+#hub {
+    position: absolute;
+    top: 0;
+    left: 400px;
+    width: calc(100vw - 400px);
+    height: 100vh;
+    background: #36383f;
+}
+
+.topNav {
+    overflow: hidden;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    border-bottom: 1px solid #202225;
+}
+.hub-actions h3 {
+    color: #fff;
+    width: 90%;
+    margin: 15px auto;
+}
+
+.sidebar-search input {
+    width: 240px;
+    height: 25px;
+    margin: 11px auto;
+    display: block;
+    border: none;
+    border-radius: 3px;
+    background: #1f2225;
+    color: #72767d;
+    padding: 1px 10px;
+    font-size: 14px;
+}
+
+
+
+.chat {
+    color: #fff;
+    width: 90%;
+    margin: 15px auto;
+}
+
+
+
+.messages {
+    width: 90%;
+    margin: auto;
+    height: calc(100% - 120px);
+    overflow: scroll;
+}
+.message {
+    padding: 10px 0px;
+    border-bottom: 1px solid #42454a;
+    color: #DCDDDE;
+}
+.message .message-head .message-sender {
+    display: inline-block;
+    color: #FFFFFF;
+    font-size: 18px;
+}
+.message .message-head .message-time {
+    display: inline-block;
+    padding-left: 10px;
+    font-size: 10px;
+    color: #72767d;
+}
+
+.message-text-box {
+    bottom: 0;
+    width: 100%;
+    height: 70px;
+}
+.message-text-box .input-wrapper {
+    width: 90%;
+    margin: auto;
+    border-top: 1px solid #42454a;
+    overflow: hidden;
+}
+.message-text-box input {
+    width: calc(100% - 20px);
+    height: 25px;
+    margin: 13px auto;
+    display: block;
+    border: none;
+    border-radius: 5px;
+    background: #1f2225;
+    color: #72767d;
+    padding: 9px 10px;
+    font-size: 14px;
+}
diff --git a/src/main/java/com/groupfour/chatapp/chatapp/user/User.java b/src/main/java/com/groupfour/chatapp/chatapp/user/User.java
@@ -19,27 +19,30 @@ public class User {
     private Long userId;
 
     private String userName;
-
     private String password;
-
     private String email;
 
-    private Date timeStamp;
+    private Date timeStamp = new Date();
+    private Integer activeStatus = 0;
 
     @OneToMany
     private Set<Message> messages;
 
-    private Integer activeStatus;
-
 
     public User() {
     }
 
+    public User(String userName, String password, String email) {
+        this.userName = userName;
+        this.password = password;
+        this.email = email;
+    }
+
+
     public Long getUserId() {
         return userId;
     }
 
-
     public String getUserName() {
         return userName;
     }