working on editor for polls

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

frontend/src/routes/poll/Edit.svelte

@@ -0,0 +1,88 @@
+<script>
+	import { onMount } from 'svelte';
+	import { useTinyRouter } from 'svelte-tiny-router';
+
+	import LineEditor     from '../../Components/LineEditor.svelte';
+	import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+
+	import { api, get } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import { t } from '../../translations.svelte';
+    import { user }          from '../../user.svelte.js';
+
+	let { id } = $props();
+	let poll = $state(null);
+
+	async function load(){
+		let url = api('poll/'+id);
+		let res = await get(url);
+		if (res.ok){
+			poll = await res.json();
+			yikes();
+		} else error(res);
+	}
+
+
+	onMount(load);
+
+</script>
+
+<fieldset>
+	<legend>{t('edit poll',{id:id})}</legend>
+	{#if poll && poll.name}
+	<fieldset>
+		<legend>{t('name')}</legend>
+		<LineEditor bind:value={poll.name} editable={true} />
+	</fieldset>
+	<fieldset>
+		<legend>{t('description')}</legend>
+		<MarkdownEditor bind:value={poll.description} />
+	</fieldset>
+	<fieldset>
+		<legend>{t('options')}</legend>
+		<table>
+			<thead>
+				<tr>
+					<th>{t('name')}</th>
+					<th>{t('description')}</th>
+				</tr>
+			</thead>
+			<tbody>
+			{#each poll.options as option}
+				<tr>
+					<td>
+						<input type="text" value={option.name} />
+					</td>
+					<td>
+						<MarkdownEditor bind:value={option.description} />
+					</td>
+				</tr>
+			{/each}
+			</tbody>
+		</table>
+	</fieldset>
+	<fieldset>
+		<legend>{t('weights')}</legend>
+		<table>
+			<thead>
+				<tr>
+					<th>{t('weight')}</th>
+					<th>{t('description')}</th>
+				</tr>
+			</thead>
+			<tbody>
+			{#each Object.entries(poll.weights) as [weight,descr]}
+				<tr>
+					<td>
+						<input type="number" value={weight} />
+					</td>
+					<td>
+						<input type="text" value={descr} />
+					</td>
+				</tr>
+			{/each}
+			</tbody>
+		</table>
+	</fieldset>
+	{/if}
+</fieldset>

frontend/src/routes/poll/Index.svelte

@@ -0,0 +1,66 @@
+<script>
+	import { onMount } from 'svelte';
+	import { useTinyRouter } from 'svelte-tiny-router';
+	import { api, get } from '../../urls.svelte';
+	import { error, yikes } from '../../warn.svelte';
+	import { t } from '../../translations.svelte';
+    import { user }          from '../../user.svelte.js';
+
+	let polls = [];
+	let router = useTinyRouter();
+
+	function edit(poll){
+		router.navigate(`/poll/${poll.id}/edit`);
+	}
+
+	function evaluate(poll){
+		router.navigate(`/poll/${poll.id}/evaluate`);
+	}
+
+	async function load(){
+		let url = api('poll/list');
+		let res = await get(url);
+		if (res.ok){
+			polls = await res.json();
+			yikes();
+		} else error(res);
+	}
+
+	function share(poll){
+	}
+
+	onMount(load);
+
+</script>
+
+<fieldset>
+	<legend>{t('polls')}</legend>
+	<table>
+		<thead>
+			<tr>
+				<th>{t('name')}</th>
+				<th>{t('description')}</th>
+				<th>{t('owner')}</th>
+				<th>{t('actions')}</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each polls as poll}
+			<tr>
+				<td>{poll.name}</td>
+				<td>{@html poll.description.rendered}</td>
+				<td>{poll.owner.name}</td>
+				<td>
+					{#if user.id == poll.owner.id || poll.shares[user.id].permission == 2}
+					<button onclick={e => edit(poll)}>{t('edit')}</button>
+					{/if}
+					{#if user.id == poll.owner.id || poll.shares[user.id].permission > 0}
+					<button onclick={e => evaluate(poll)}>{t('evaluate')}</button>
+					{/if}
+					<button onclick={e => share(poll)}>{t('share')}</button>
+				</td>
+			</tr>
+			{/each}
+		</tbody>
+	</table>
+</fieldset>