a lot of stuff

author: curly <curlybryce@protonmail.com> 2023-02-14 14:26:06 -0700
committer: curly <curlybryce@protonmail.com> 2023-02-14 14:26:06 -0700
commit: 39159f3a5cca5515fa01943ac9e5d50a19bd275b (patch)
tree: 5b29b0776288bf7a2c355a098075ed70afd22fbd
parent: 0f8d8a7a3ba3a78bcb4fd2ce440384479f4b802d (diff)
download: rocket_test_ui-39159f3a5cca5515fa01943ac9e5d50a19bd275b.tar.gz
rocket_test_ui-39159f3a5cca5515fa01943ac9e5d50a19bd275b.tar.bz2
rocket_test_ui-39159f3a5cca5515fa01943ac9e5d50a19bd275b.zip
3 files changed, 199 insertions, 83 deletions
diff --git a/index.html b/index.html
index aae55ba..741c457 100644
--- a/index.html
+++ b/index.html
@@ -1,64 +1,19 @@
-<html>
+<!DOCTYPE html>
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <script src="main.js"></script>
-        <style>
-            .UI {
-                background-color: blue;
-            }
-            #chatwindow {
-                display: flex;
-                flex-flow: column;
-                overflow-y: scroll;
-                word-break: break-word;
-                scroll-snap-align: end;
-                flex-basis: 100vh;
-                flex-grow: 1;
-            }
-            #chatwindow > span:hover {
-                background-color: #DDD;
-            }
-            #chatwindow > span {
-                white-space: pre-line;
-            }
-            #navbar {
-                border-bottom: 2px solid black;
-                width: 100%;
-                display: inline-block;
-                flex-grow: 0;
-            }
-            #inputbox {
-                border-top: 2px solid black;
-                display: flex;
-            }
-            #inputbox > button {
-                padding: 0 5px 0 5px;
-            }
-            #input {
-                resize: none;
-                flex-grow: 1;
-            }
-
-            * {
-                margin: 0;
-                padding: 0;
-                border: 0;
-            }
-
-            body {
-                display: flex;
-                flex-direction: column;
-                max-height: 100vh;
-            }
-        </style>
+        <link rel="stylesheet" href="main.css">
     </head>
     <body onload="onload()">
         <span id="navbar">
             <span>Localhost</span>
             <span id = "info" class="UI">Server Information: </span>
+            <span>username: <input id="username"></span>
         </span>
-        <div id="chatwindow"></div>
-        <span id="inputbox" onkeyup="inputkey(event)">
-            <textarea id="input" autofocus rows="2"></textarea>
+        <span id="new_messages" class="new_messages">New Messages</span>
+        <div id="chatwindow" onscroll="onscrollchat()"></div>
+        <span id="inputbox">
+            <textarea id="input" rows="2.5" onkeypress="inputkey(event)" onkeyup="clearnewlineinput()"></textarea>
             <button onclick="send()">Send</button>
         </span>
     </body>
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..f67887f
--- /dev/null
+++ b/main.css
@@ -0,0 +1,65 @@
+.UI {
+    background-color: blue;
+}
+#chatwindow {
+    display: flex;
+    flex-flow: column;
+    overflow-y: scroll;
+    word-break: break-word;
+    scroll-snap-align: end;
+    flex-basis: 100vh;
+    flex-grow: 1;
+}
+.message:hover {
+    background-color: #DDD;
+}
+.message {
+    white-space: pre;
+}
+#navbar {
+    border-bottom: 2px solid black;
+    width: 100%;
+    display: inline-block;
+    flex-grow: 0;
+}
+#inputbox {
+    border-top: 2px solid black;
+    display: flex;
+}
+#inputbox > button {
+    padding: 0 5px 0 5px;
+}
+#input {
+    resize: none;
+    flex-grow: 1;
+    font-size: 16px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+}
+
+.date {
+    text-align: center;
+    font-weight: bold;
+    border-bottom: 1px solid black;
+}
+
+.deleted {
+    color: #999;
+}
+
+.new_messages {
+    display: none;
+    text-align: center;
+    background-color: red;
+    color: white;
+}
+\ No newline at end of file
diff --git a/main.js b/main.js
index e4a1069..eb3c9ac 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,7 @@
 const messages = new Map();
 const users = new Map();
+const host = window.location.protocol + "//" + window.location.host;
+let sent = false;
 
 
 function xhttp_request(location) {
@@ -12,7 +14,7 @@ function xhttp_request(location) {
             return_string = xhttp.responseText;
         }
     };
-    xhttp.open("GET", "http://localhost/api/" + location, false);
+    xhttp.open("GET", `${host}/api/${location}`, false);
     xhttp.send();
     
     return JSON.parse(return_string);
@@ -20,7 +22,7 @@ function xhttp_request(location) {
 
 function xhttp_post(location, json) {
     var xhttp = new XMLHttpRequest();
-    xhttp.open("POST", "http://localhost/api/" + location, false);
+    xhttp.open("POST", `${host}/api/${location}`, false);
     xhttp.setRequestHeader("Content-Type", "application/json")
 
     
@@ -40,27 +42,51 @@ function xhttp_post(location, json) {
 function format_message(m) {
     var s;
     var sender = get_user_name(m.sender);
+    var sclass = "";
 
     if (m.deleted) {
-        s = `<span>${m.id}|${sender}: deleted</span>`
-        // s = "<span>" + m.id + "|" + m.sender + ": /deleted/" + "</span>"
-    } else {
-        s = `<span>${m.id}|${sender}: ${m.message}</span>`
-        // s = "<span>" + m.id + "|" + m.sender + ": " + m.message + "</span>"
+        m.message = "*deleted*"
+        sclass = "deleted"
     }
+    s = `<span title="${m.id}" class="message ${sclass}" id="${m.id}">${format_date(m.date)}|${sender}: ${m.message}</span>`
 
     return s
 }
 
+function format_time(t) {
+    let as_str = `${t}`;
+    if (as_str.length < 2) {
+        return `0${t}`
+    } else {
+        return `${t}`
+    }
+}
+
+function format_date(d) {
+    let date = new Date(d * 1000);
+    let hours = format_time(date.getHours());
+    let minutes = format_time(date.getMinutes());
+    let seconds = format_time(date.getSeconds());
+    return `${hours}:${minutes}:${seconds}`;
+}
+
 function send() {
     var input = document.getElementById("input").value;
-    let message = JSON.stringify({"sender": 0, "message": input})
+    let user_id = get_user_from_name();
+
+    if (user_id == undefined) {
+        alert("User not found")
+        return undefined
+    }
+
+    let message = JSON.stringify({"sender": user_id, "message": input})
 
     var id = xhttp_post("send_message", message)
 
     get_message(id.Ok);
 
-    document.getElementById("input").value = ''
+    document.getElementById("input").value = ""
+    sent = true
 }
 
 function get_newest_cache_id() {
@@ -71,14 +97,24 @@ function get_newest_cache_id() {
         }
     }
 
-    return last
+    if (last == -1) {
+        return undefined
+    } else {
+        return last
+    }
 }
 
 // Returns message list
 function get_newest_messages() {
-    let newest_id = xhttp_request("get_message_id_newest").Ok;
+    let newest_id = xhttp_request("get_message_id_newest");
     let newest_cache_id = get_newest_cache_id();
 
+    if (newest_id.Err) {
+        return
+    } else {
+        newest_id = newest_id.Ok
+    }
+
 
     let final_array = [];
 
@@ -86,8 +122,8 @@ function get_newest_messages() {
         return
     }
 
-    if (newest_cache_id == -1) {
-        get_message(0)
+    if (newest_cache_id == undefined) {
+        get_message(newest_id - 25)
         return get_newest_messages()
     }
     
@@ -134,18 +170,34 @@ function get_message_list(oldest, newest) {
 function get_message(id) {
     let cached = messages.get(id)
     if (cached != undefined) {
-        return to_dom(cached)
+        return to_dom(format_message(cached))
     }
 
     // Get message
     let msg = xhttp_request("get_message/" + id).Ok;
     messages.set(msg.id, msg)
 
-    let dom = to_dom(msg);
+    let dom = to_dom(format_message(msg));
 
-    chatwindow()
+    chatwindow(msg.id)
+}
 
-    return dom
+function get_user_from_name() {
+    let v = document.getElementById("username").value;
+
+    let cached;
+    for (x of users.values()) {
+        if (x.username == v) {
+            return x.id
+        }
+    }
+
+    let user = xhttp_post("get_user_by_name", JSON.stringify(v));
+    if (user.Ok) {
+        return user.Ok.id
+    } else {
+        return undefined
+    }
 }
 
 function get_user_name(id) {
@@ -163,12 +215,14 @@ function get_user_name(id) {
 
 // Returns dom
 function to_dom(x) {
-    let dom = new DOMParser().parseFromString(format_message(x), "text/xml").firstChild;
+    // Pretty hacky if I do say so myself
+    let dom = new DOMParser().parseFromString(x, "text/html").firstChild.lastChild.firstChild;
     return dom
 }
 
-function chatwindow() {
+function chatwindow(hash) {
     let window = document.getElementById("chatwindow");
+    let pre_scroll = window.scrollHeight - window.clientHeight;
     window.innerHTML = "";
 
     let array = [];
@@ -183,22 +237,62 @@ function chatwindow() {
         }
     );
 
+    let old_date = new Date(0);
+    let latest_v;
     for (v of array) {
-        let dom = to_dom(v);
+        latest_v = v;
+        let date = new Date(v.date * 1000);
+        if (date.getDate() > old_date.getDate() || date.getFullYear() > old_date.getFullYear() || date.getMonth() > date.getMonth()) {
+            old_date = date;
+            window.append(to_dom(`<span class="date">${date.getDate()}/${date.getMonth()}/${date.getFullYear()}</span>`))
+        }
+        let dom = to_dom(format_message(v))
+
 
-        window.append(dom)
+        let node = window.appendChild(dom);
+    }
+
+    if (window.scrollTop == pre_scroll) {
+        if (latest_v != undefined && hash == undefined) {
+            document.getElementById(v.id).scrollIntoView();
+        }
+    } else {
+        document.getElementById("new_messages").style.display = "unset"
     }
 
-    window.scrollTop = window.scrollHeight
+    if (hash != undefined) {
+        document.getElementById(hash).scrollIntoView();
+    }
+}
+
+function onscrollchat() {
+    let window = document.getElementById("chatwindow");
+    let pre_scroll = window.scrollHeight - window.clientHeight;
+
+    if (window.scrollTop == pre_scroll) {
+        document.getElementById("new_messages").style.display = "";
+    }
 }
 
 function inputkey(event) {
+    let window = document.getElementById("input");
+
+    // If the cursor pos is at the end of the textarea
+    let comp = window.selectionEnd - window.value.length
+
     let key = event.key
     let shift = event.shiftKey;
-    if (key == "Enter" && shift) {
+    if (key == "Enter" && !shift && comp == 0) {
         send()
-    } else if (key == "Enter" && !shift) {
-        this.value += "\n"
+    }
+}
+
+function clearnewlineinput() {
+    let window = document.getElementById("input");
+
+    if (window.value == "\n" && sent == true) {
+        window.value = ""
+        sent = false
     }
 }
 
@@ -206,8 +300,10 @@ function onload() {
     let server_info = xhttp_request("");
     document.getElementById("info").innerHTML += server_info.version + ", " + server_info.name + ", users: " + server_info.users;
 
-    // Get all messages on startup
-    // get_newest_messages();
-
-    const interval = setInterval(get_newest_messages, 1000);
-}
-\ No newline at end of file
+    // Get ready for websockets implementation in rocket_test 0.3
+    if (server_info.version[2] < 3 ) {
+        const interval = setInterval(get_newest_messages, 1000);
+    } else {
+        // Initiate websocket "polling"
+    }
+}
author	curly <curlybryce@protonmail.com>	2023-02-14 14:26:06 -0700
committer	curly <curlybryce@protonmail.com>	2023-02-14 14:26:06 -0700
commit	39159f3a5cca5515fa01943ac9e5d50a19bd275b (patch)
tree	5b29b0776288bf7a2c355a098075ed70afd22fbd
parent	0f8d8a7a3ba3a78bcb4fd2ce440384479f4b802d (diff)
download	rocket_test_ui-39159f3a5cca5515fa01943ac9e5d50a19bd275b.tar.gz rocket_test_ui-39159f3a5cca5515fa01943ac9e5d50a19bd275b.tar.bz2 rocket_test_ui-39159f3a5cca5515fa01943ac9e5d50a19bd275b.zip