working on bookmark editing

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

frontend/src/routes/bookmark/Index.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount } from 'svelte';
 
-    import { api }          from '../../urls.svelte';
+    import { api, eventStream } from '../../urls.svelte';
     import { error, yikes } from '../../warn.svelte';
     import { t }            from '../../translations.svelte';
 
@@ -11,6 +11,7 @@
     import Template    from './Template.svelte';
 
     let bookmarks    = $state(null);
+	let eventSource      = null;
     let loader       = {
         offset : 0,
         limit  : 16,
@@ -45,6 +46,36 @@
         }
     }
 
+    function handleCreateEvent(evt){
+        let data = JSON.parse(evt.data);
+        if (data.record) {
+            console.log({created:data.record});
+            bookmarks = bookmarks.push(data.record);
+        }
+    }
+
+    function handleDeleteEvent(evt){
+        let data = JSON.parse(evt.data);
+        if (data.record && data.record.id) {
+            console.log({deleted:data.record});
+            bookmarks = bookmarks.filter(b => b.id != data.record.id);
+        }
+    }
+
+    function handleUpdateEvent(evt){
+        let data = JSON.parse(evt.data);
+        if (data.record && data.record.id) {
+            console.log({updated:data.record});
+            bookmarks = bookmarks.map(b => data.record.id == b.id ? data.record : b);
+        }
+    }
+
+
+    function load(){
+        loadBookmarks();
+        eventSource = eventStream(handleCreateEvent,handleUpdateEvent,handleDeleteEvent);
+    }
+
     async function loadBookmarks(){
         const url  = api(`bookmark/list?offset=${loader.offset}&limit=${loader.limit}`);
         const resp = await fetch(url,{credentials:'include'});
@@ -92,7 +123,7 @@
         }
     }
 
-    onMount(loadBookmarks);
+    onMount(load);
 </script>
 
 <svelte:head>

frontend/src/routes/bookmark/Template.svelte

@@ -1,19 +1,41 @@
 <script>
-    import { target }  from '../../urls.svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
+    import { api, drop, target }  from '../../urls.svelte';
+    import { error, yikes } from '../../warn.svelte';
+    import { t }       from '../../translations.svelte';
     import Tags        from '../tags/TagList.svelte';
 
+    const router = useTinyRouter();
     let { bookmark } = $props();
+
+    async function del(bookmark){
+        if (confirm(t('confirm_delete',{element:bookmark.url}))){
+            var url = api(`bookmark/${bookmark.id}`)
+            var res = await drop(url);
+            if (res.ok){
+                yikes();
+                router.navigate('/bookmark')
+            } else error(res);
+        }
+    }
+
+    function edit(bookmark){
+        router.navigate(`/bookmark/${bookmark.id}/view`);
+    }
 </script>
 
 {#if bookmark}
 <fieldset class="bookmark">
     <legend>
         <a href={bookmark.url} target="_blank" class="url">{bookmark.url}</a>
+        <a class="symbol" onclick={e => edit(bookmark)} title={t('edit_object',{object:t('bookmark')})} ></a>
+        <a class="symbol" onclick={e => del(bookmark)} title={t('delete_object',{object:t('bookmark')})} ></a>
     </legend>
     <legend class="date">
         {bookmark.timestamp.replace('T',' ')}
     </legend>
     {@html target(bookmark.comment.rendered)}
     <Tags module="bookmark" id={bookmark.id} />
+    <button onclick={e => edit(bookmark.id)} >{t('edit')}</button>
 </fieldset>
 {/if}

frontend/src/routes/bookmark/View.svelte

@@ -2,8 +2,11 @@
     import { onMount } from 'svelte';
 
     import Bookmark from './Template.svelte';
+    import LineEditor from '../../Components/LineEditor.svelte';
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+    import Tags        from '../tags/TagList.svelte';
 
-    import { api }          from '../../urls.svelte';
+    import { api, patch } from '../../urls.svelte';
     import { error, yikes } from '../../warn.svelte';
     import { t }            from '../../translations.svelte';
 
@@ -24,7 +27,55 @@
         }
     }
 
+    function visit(ev){
+        window.open(bookmark.url, '_blank').focus();
+    }
+
+    async function update(field,value){
+        var url = api(`bookmark/${id}`);
+        var res = await patch(url,{[field]:value});
+        if (res.ok){
+            yikes();
+            bookmark = await res.json();
+            if (id != bookmark.id){
+                id = bookmark.id;
+                history.pushState({}, null, `/bookmark/${id}/view`);
+            }
+            return true;
+        }
+        error(res);
+        return false;
+    }
+
     onMount(load);
 </script>
 
-<Template {bookmark} />
+{#if bookmark}
+<fieldset>
+    <legend>{t('bookmark')} {id}</legend>
+    <table class="edit bookmark">
+        <tbody>
+            <tr>
+                <th>{t('URL')}</th>
+                <td>
+                    <LineEditor value={bookmark.url} editable={true} onSet={url => update('url',url)} />
+                    <button onclick={visit}>{t('open')}</button>
+                </td>
+            </tr>
+            <tr>
+                <th>{t('description')}</th>
+                <td>
+                    <MarkdownEditor editable={true} value={bookmark.comment} onSet={desc => update('comment',desc)}/>
+                </td>
+            </tr>
+            <tr>
+                <th>{t('tags')}</th>
+                <td>
+                    <Tags module="bookmark" id={bookmark.id} />
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+</fieldset>
+{/if}

frontend/src/routes/task/Index.svelte

@@ -2,7 +2,7 @@
     import { onMount }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api, get, patch }    from '../../urls.svelte.js';
+    import { api, eventStream, get, patch }    from '../../urls.svelte.js';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';