Implement pending/delivered status for messages

src/locutus.ts

@@ -148,9 +148,18 @@ export class App {
         this.windows.appendChild(win);
     }
 
-    addMessage(message: string) {
+    addMessage(id: string, message: string, delivered: boolean = true) {
+        const test = document.getElementById(`msg-${id}`);
+        if (test) return;
+
         const msg = document.createElement("div");
+        msg.id = `msg-${id}`;
         msg.classList.add("message");
+        if (delivered) {
+            msg.classList.add("delivered");
+        } else {
+            msg.classList.add("pending");
+        }
 
         msg.innerText = message;
 
@@ -161,6 +170,14 @@ export class App {
         chat.scrollTop = chat.scrollHeight;
     }
 
+    confirmMessage(id: string) {
+        const msg = document.getElementById(`msg-${id}`);
+        if (!msg) return;
+
+        msg.classList.remove("pending");
+        msg.classList.add("delivered");
+    }
+
     addLoginWindow() {
         const win = document.createElement("div");
         win.classList.add("window-login");
@@ -243,21 +260,28 @@ export class App {
         const input = document.getElementsByTagName("input")[0];
         if (!input) throw new Error("Element <input> not found");
 
-        input.addEventListener("keyup", async event => {
+        input.addEventListener("keydown", event => {
             if (event.key === "Enter" && input.value.length > 0) {
                 if (!this.session) throw new Error("No session found");
 
-                this.addMessage(input.value);
+                const id = crypto.randomUUID();
                 const val = input.value;
-                input.value = "";
+                this.addMessage(id, input.value, false);
-                await this.session.newEvent("24595934-4540-4333-ac2b-78796ac3f25f", {
+
-                    message: val,
+                this.session.newEvent(
+                    "24595934-4540-4333-ac2b-78796ac3f25f",
+                    {message: val},
+                    id
+                ).then(() => {
+                    this.confirmMessage(id);
                 });
+
+                input.value = "";
             }
         });
 
         this.session.subscribe(event => {
-            this.addMessage(event.data.message);
+            this.addMessage(event.id, event.data.message);
-        });
+        }).then();
     }
 }

src/main.ts

@@ -9,8 +9,8 @@ window.addEventListener("DOMContentLoaded", () => {
     }
 
     const locutus = new Locutus.App();
+
     if (isMobilePlatform()) {
-        console.log("MOBILE");
         document.addEventListener("visibilitychange", () => {
             if (document.visibilityState === 'hidden') {
                 locutus.sleep();
@@ -18,12 +18,11 @@ window.addEventListener("DOMContentLoaded", () => {
                 locutus.wakeup().then();
             }
         });
-    } else {
+    }
-        console.log("DESKTOP");
+
-        window.addEventListener("beforeunload", (evt) => {
+    window.addEventListener("beforeunload", () => {
         locutus.close();
     });
-    }
 });
 
 function isMobilePlatform(): boolean {

src/usimp.ts

@@ -34,7 +34,7 @@ interface EventJson {
     data: {
         message: string,
     }
-    uuid: string,
+    id: string,
 }
 
 interface WellKnownJson {
@@ -390,11 +390,12 @@ export class Session {
         return response;
     }
 
-    async newEvent(roomId: string, data: any) {
+    async newEvent(roomId: string, data: any, id: string | undefined = undefined) {
         return this.send("new_event", {
             room_id: roomId,
             events: [{
-                data: data
+                data: data,
+                id: id,
             }],
         });
     }

www/res/styles/styles.css

@@ -235,6 +235,10 @@ main .chat .message {
     font-size: 0.875rem;
 }
 
+main .chat .message.pending {
+    border-color: #C00000;
+}
+
 main .chat ::-webkit-scrollbar {
     width: 4px;
 }