implemented state change for messages:

messages are marked as read upon display

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/message/Messages.svelte

@@ -2,19 +2,28 @@
     import { onMount } from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
     import { t } from '../../translations.svelte';
-    import { api, get } from '../../urls.svelte';
+    import { api, get, patch } from '../../urls.svelte';
     import { error, yikes } from '../../warn.svelte';
 
     let router = useTinyRouter();
     let messages = [];
+    let timer = null;
 
     async function display(hash){
         const url = api(`message/${hash}`);
-        const res = get(url);
+        const res = await get(url);
         if (res.ok){
             yikes();
             const json = await res.json();
-            console.log(json);
+            if (timer) clearTimeout(timer);
+            for (let i in messages){
+                if (messages[i].hash == hash){
+                    messages[i].body = json.body;
+                    timer = setTimeout(() => {mark_read(hash)}, 2000);
+                } else {
+                    delete messages[i].body;
+                }
+            }
         } else {
             error(res);
         }
@@ -31,6 +40,20 @@
         }
     }
 
+    async function mark_read(hash){
+        timer = null;
+        const url = api(`message/read/${hash}`);
+        const res = await patch(url);
+        if (res.ok) {
+            for (let i in messages){
+                if (messages[i].hash == hash) messages[i].read = true;
+            }
+            yikes();
+        } else {
+            error(res);
+        }
+    }
+
     function showSettings(){
         router.navigate("message/settings");
     }
@@ -51,10 +74,21 @@
         <tbody>
             {#each messages as message}
             <tr class="message-{message.hash}" onclick={ev => display(message.hash)}>
-                <td>{message.timestamp}</td>
+                <td>
+                    {#if message.read}→ {/if}
+                    {message.timestamp}
+                </td>
                 <td>{message.sender}</td>
                 <td>{message.subject}</td>
             </tr>
+            {#if message.body}
+            <tr class="message-{message.hash} body">
+                <td></td>
+                <td colspan="2">
+                    <pre>{message.body.trim()}</pre>
+                </td>
+            </tr>
+            {/if}
             {/each}
         </tbody>
     </table>