diff options
| author | curly <curlybryce@protonmail.com> | 2023-02-15 11:55:08 -0700 |
|---|---|---|
| committer | curly <curlybryce@protonmail.com> | 2023-02-15 11:55:08 -0700 |
| commit | 8e67c82dc8f30155ababb3fcc146e6bafc895619 (patch) | |
| tree | c919f50cf8655104c1417c558c5650079b469caa | |
| parent | 87120e5df6b4c218e12a904e7723c2c2b5674684 (diff) | |
| download | rocket_test_ui-8e67c82dc8f30155ababb3fcc146e6bafc895619.tar.gz rocket_test_ui-8e67c82dc8f30155ababb3fcc146e6bafc895619.tar.bz2 rocket_test_ui-8e67c82dc8f30155ababb3fcc146e6bafc895619.zip | |
delete messages
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | main.css | 13 | ||||
| -rw-r--r-- | main.js | 42 |
3 files changed, 44 insertions, 12 deletions
@@ -3,6 +3,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <link rel="stylesheet" href="main.css"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous"> </head> <body onload="onload()"> <span id="navbar"> @@ -14,8 +14,21 @@ background-color: #DDD; } .message { + display: flex; +} +.messagetext { white-space: pre-wrap; + flex-grow: 1; } +.message_buttons { + display: flex; +} +.message_buttons > button { + height: fit-content; + padding: 2px; + margin: 2px; +} + #navbar { border-bottom: 2px solid black; width: 100%; @@ -3,8 +3,6 @@ const users = new Map(); let sent = false; const host = location.protocol + "//" + location.host; -// const xhttp_worker = new Worker("xhttp.js"); - function xhttp_request(location) { let f = fetch(`${host}/api/${location}`); @@ -12,9 +10,9 @@ function xhttp_request(location) { } -function xhttp_post(location, json) { +function xhttp_send(method, location, json) { let f = fetch(`${host}/api/${location}`, { - method: "POST", + method: method, headers: {"Content-Type": "application/json"}, body: json }) @@ -32,7 +30,11 @@ async function format_message(m) { m.message = "*deleted*" sclass = "deleted" } - s = `<span title="${m.id}" class="message ${sclass}" id="${m.id}">${format_date(m.date)}|${sender}: ${m.message}</span>` + s = `<span id="${m.id}" class="message ${sclass}"><p title="${m.id}" class="messagetext">${format_date(m.date)}|${sender}: ${m.message}</p> + <span class="message_buttons"> + <button><i class="fa fa-reply" aria-hidden="true"></i></button> + <button onclick="delete_message(${m.id})"><i class="fa fa-trash-o" aria-hidden="true"></i></button> + </span></span>` return s } @@ -54,6 +56,21 @@ function format_date(d) { return `${hours}:${minutes}:${seconds}`; } +function delete_message(id) { + xhttp_send("DELETE", "delete_message", JSON.stringify(id)).then((response) => { + if (response.Ok == undefined) { + alert("Could not delete message") + } else { + let old_msg = messages.get(id); + old_msg.message = "*deleted*"; + old_msg.deleted = true; + messages.set(id, old_msg); + + chatwindow(null).then(); + } + }) +} + function send() { var input = document.getElementById("input").value; let user_id = get_user_from_name().then((user_id) => { @@ -64,7 +81,7 @@ function send() { let message = JSON.stringify({"sender": user_id, "message": input}) - var id = xhttp_post("send_message", message).then((id) => { + var id = xhttp_send("POST", "send_message", message).then((id) => { get_message(id.Ok); document.getElementById("input").value = "" @@ -88,7 +105,6 @@ function get_newest_cache_id() { } } -// Returns message list function get_newest_messages() { xhttp_request("get_message_id_newest").then(async (newest_id) => { let newest_cache_id = get_newest_cache_id(); @@ -157,7 +173,6 @@ async function get_message_list(oldest, newest) { return req } -// Returns dom function get_message(id) { let cached = messages.get(id) if (cached != undefined) { @@ -185,7 +200,7 @@ async function get_user_from_name() { } - let user = await xhttp_post("get_user_by_name", JSON.stringify(v)); + let user = await xhttp_send("POST", "get_user_by_name", JSON.stringify(v)); if (user.Ok) { users.set(user.id, user) return user.Ok.id @@ -195,7 +210,7 @@ async function get_user_from_name() { } async function create_user(username) { - let response = await xhttp_post("create_user", JSON.stringify(username)); + let response = await xhttp_send("POST", "create_user", JSON.stringify(username)); if (response.Ok != undefined) { await get_user_name(response.Ok); return response.Ok @@ -221,14 +236,13 @@ async function get_user_name(id) { return user.username } -// Returns dom function to_dom(x) { // Pretty hacky if I do say so myself let dom = new DOMParser().parseFromString(x, "text/html").firstChild.lastChild.firstChild; return dom } -async function chatwindow(hash = undefined) { +async function chatwindow(hash) { let window = document.getElementById("chatwindow"); let pre_scroll = window.scrollHeight - window.clientHeight; window.innerHTML = ""; @@ -261,6 +275,10 @@ async function chatwindow(hash = undefined) { window.appendChild(dom); } + + if (hash == null) { + return + } if (window.scrollTop == pre_scroll) { if (latest_v != undefined && hash == undefined) { |