implemented creating new poll and managing poll options

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

frontend/src/Components/LineEditor.svelte

@@ -110,7 +110,7 @@
 </style>
 
 {#if editable && editing}
-<input bind:value={editValue} onkeyup={typed} autofocus />
+<input bind:value={editValue} onkeyup={typed} {title} autofocus />
 {:else}
 <svelte:element this={type} href={href} onclick={ignore} {onmousedown} {onmouseup} {ontouchstart} {ontouchend} {oncontextmenu} class={{editable}} {title} >{value}</svelte:element>
 {/if}

frontend/src/Components/MarkdownEditor.svelte

@@ -129,8 +129,8 @@
     }
 </style>
 
-<div class="markdown {editing?'editing':''}">
-{#if editing}
+<div class="markdown {editing || simple ?'editing':''}">
+{#if editing || simple}
     <span class="hint">{@html t('markdown_supported')}</span>
     {#if stored_source}
     <span id="restore_markdown" onclick={restore} class="hint">{t('unsaved_content')}</span>

frontend/src/routes/poll/Edit.svelte

@@ -23,7 +23,24 @@
 		} else error(res);
 	}
 
-	async function patchOption(option, field, newVal){
+	async function patch_poll(field, newVal){
+		let url = api(`poll/${id}`);
+		let data = {}
+		data[field] = newVal;
+		let res = await patch(url,data);
+		if (res.ok) {
+			yikes();
+			const json = await res.json();
+			poll = { ...poll, ...json };
+			return true;
+
+		}
+		error(res);
+		return false;
+	}
+
+
+	async function patch_option(option, field, newVal){
 		let url = api(`poll/${id}/option/${option.id}`);
 		let data = {}
 		data[field] = newVal;
@@ -31,11 +48,15 @@
 		if (res.ok) {
 			yikes();
 			const json = await res.json();
+			if (field == 'name' && newVal == ''){
+				poll.options = poll.options.filter(o => o.id !== option.id);
+			} else poll.options = json.options;
 		} else error(res);
 	}
 
 
 	async function save_new_option(){
+		if (!new_option.name) return;
 		let url = api('poll/'+id+'/option');
 		let res = await post(url,new_option);
 		if (res.ok){
@@ -54,11 +75,11 @@
 	{#if poll && poll.name}
 	<fieldset>
 		<legend>{t('name')}</legend>
-		<LineEditor bind:value={poll.name} editable={true} />
+		<LineEditor bind:value={poll.name} editable={true} onSet={name => patch_poll('name',name)} />
 	</fieldset>
 	<fieldset>
 		<legend>{t('description')}</legend>
-		<MarkdownEditor bind:value={poll.description} />
+		<MarkdownEditor bind:value={poll.description} onSet={desc => patch_poll('description',desc)} />
 	</fieldset>
 	<fieldset>
 		<legend>{t('options')}</legend>
@@ -70,13 +91,13 @@
 				</tr>
 			</thead>
 			<tbody>
-				{#each poll.options as option}
+				{#each poll.options as option (option.id)}
 				<tr>
 					<td>
-						<LineEditor editable={true} value={option.name} onSet={name => patchOption(option,'name',name)} />
+						<LineEditor editable={true} value={option.name} onSet={name => patch_option(option,'name',name)} title={t('clear to remove')} />
 					</td>
 					<td>
-						<MarkdownEditor bind:value={option.description} />
+						<MarkdownEditor bind:value={option.description}  onSet={desc => patch_option(option,'description',desc)} />
 					</td>
 				</tr>
 				{/each}

frontend/src/routes/poll/Index.svelte

@@ -1,14 +1,28 @@
 <script>
 	import { onMount } from 'svelte';
+
+	import LineEditor from '../../Components/LineEditor.svelte';
+
 	import { useTinyRouter } from 'svelte-tiny-router';
-	import { api, get } from '../../urls.svelte';
+	import { api, get, post } from '../../urls.svelte';
 	import { error, yikes } from '../../warn.svelte';
 	import { t } from '../../translations.svelte';
     import { user }          from '../../user.svelte.js';
 
-	let polls = [];
+	let polls = $state([]);
 	let router = useTinyRouter();
 
+	async function create_poll(name){
+		const url = api('poll');
+		const res = await post(url,{name});
+		if (res.ok) {
+			yikes();
+			const json = await res.json();
+			polls.push(json);
+		}
+		error(res);
+	}
+
 	function edit(poll){
 		router.navigate(`/poll/${poll.id}/edit`);
 	}
@@ -61,6 +75,12 @@
 				</td>
 			</tr>
 			{/each}
+			<tr>
+				<td>
+					<LineEditor simple={true} onSet={create_poll}/>
+				</td>
+				<td colspan="3">{t('Enter name to create new')}</td>
+			</tr>
 		</tbody>
 	</table>
 </fieldset>