preparing display of selcted message

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

frontend/src/routes/message/Messages.svelte

@@ -6,13 +6,25 @@
     import { error, yikes } from '../../warn.svelte';
 
     let router = useTinyRouter();
+    let messages = [];
+
+    async function display(hash){
+        const url = api(`message/${hash}`);
+        const res = get(url);
+        if (res.ok){
+            yikes();
+            const json = await res.json();
+            console.log(json);
+        } else {
+            error(res);
+        }
+    }
 
     async function load(){
         const url = api('message');
         const res = await get(url);
         if (res.ok){
-            let json = await res.json();
-            console.log(json);
+            messages = await res.json();
             yikes();
         } else {
             error(res);
@@ -28,4 +40,22 @@
 
 <fieldset>
     <legend>{t('messages')} <button onclick={showSettings}>{t('settings')}</button></legend>
+    <table>
+        <thead>
+            <tr>
+                <th>{t('timestamp')}</th>
+                <th>{t('initiator')}</th>
+                <th>{t('subject')}</th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each messages as message}
+            <tr class="message-{message.hash}" onclick={ev => display(message.hash)}>
+                <td>{message.timestamp}</td>
+                <td>{message.sender}</td>
+                <td>{message.subject}</td>
+            </tr>
+            {/each}
+        </tbody>
+    </table>
 </fieldset>