Umbrella/frontend/src/routes/poll/Edit.svelte

<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, patch, post } from '../../urls.svelte';
	import { error, yikes } from '../../warn.svelte';
	import { t } from '../../translations.svelte';
    import { user }          from '../../user.svelte.js';

	let { id } = $props();
	let new_option = $state({name:'',description:{'source':'',rendered:''}});
	let new_weight = $state({description:'',weight:0});
	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);
	}

	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 res = await patch(url,{[field]: newVal});
		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;
			return true;
		}
		error(res);
		return false;
	}

	async function patch_weight(data){
		let url = api(`poll/${id}/weight`);
		let res = await patch(url,data);
		if (res.ok) {
			yikes();
			const json = await res.json();
			const weights = json.weights;
			for (let weight of Object.keys(data)){
				let desc = data[weight];
				console.log(weight, desc);
				if (desc) {
					poll.weights[weight] = desc;
				} else delete poll.weights[weight]; // TODO: this corrupts the display of the following element!
			}
			return true;
		}
		error(res);
		return false;
	}


	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){
			yikes();
			const json = await res.json();
			poll.options = json.options;
		} else error(res);
	}

	function save_new_weight(e){
		const data = {};
		data[new_weight.weight] = new_weight.description;
		patch_weight(data);
	}

	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} onSet={name => patch_poll('name',name)} />
	</fieldset>
	<fieldset>
		<legend>{t('description')}</legend>
		<MarkdownEditor bind:value={poll.description} onSet={desc => patch_poll('description',desc)} />
	</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 (option.id)}
				<tr>
					<td>
						<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}  onSet={desc => patch_option(option,'description',desc)} />
					</td>
				</tr>
				{/each}
				<tr>
					<td class="new_option">
						{t('add element',{element:t('options')})}
						<input type="text" bind:value={new_option.name} />
					</td>
					<td>
						<MarkdownEditor simple={true} bind:value={new_option.description} />
						<button onclick={save_new_option}>{t('save')}</button>
					</td>
				</tr>
			</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>
						<LineEditor editable={true} value={descr} onSet={desc => patch_weight({[weight]: desc})} />
					</td>
				</tr>
			{/each}
				<tr>
					<td>
						<input type="number" bind:value={new_weight.weight} />
					</td>
					<td>
						<input type="text" bind:value={new_weight.description} />
						<button onclick={save_new_weight}>{t('save')}</button>
					</td>
				</tr>
			</tbody>
		</table>
	</fieldset>
	{/if}
</fieldset>