diff options
Diffstat (limited to 'main.js')
| -rw-r--r-- | main.js | 156 |
1 files changed, 126 insertions, 30 deletions
@@ -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" + } +} |