working on poll evaluation

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

frontend/src/routes/poll/Edit.svelte

@@ -119,7 +119,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				{#each poll.options as option (option.id)}
+				{#each Object.entries(poll.options) as [option_id, option]}
 				<tr>
 					<td>
 						<LineEditor editable={true} value={option.name} onSet={name => patch_option(option,'name',name)} title={t('clear to remove')} />

frontend/src/routes/poll/Evaluate.svelte

@@ -1,8 +1,24 @@
 <script>
 	import { onMount } from 'svelte';
 	import { api, get } from '../../urls.svelte';
-
+	import { error, yikes } from '../../warn.svelte';
+	import { t } from '../../translations.svelte';
 	let { id } = $props();
+	let poll = $state(null);
+
+	function average(hist){
+		let count = 0;
+		let sum   = 0;
+		for (let [k,v] of Object.entries(hist)) {
+			count += v;
+			sum   += k*v;
+		}
+		return count > 0 ? sum/count : '?';
+	}
+
+	function max_val(hist){
+		return Math.max(...Object.values(hist));
+	}
 
 	async function load(){
 		let url = api('poll/evaluate/'+id);
@@ -16,4 +32,56 @@
 	onMount(load);
 </script>
 
-Evaluate
+<style>
+	.histogram > span{
+		display: inline-block;
+		border: 1px solid lime;
+		vertical-align: bottom;
+		position: relative;
+		width: 15px;
+	}
+	.histogram{
+		height: 40px;
+	}
+	.histogram span span{
+		position: absolute;
+		bottom: 0;
+	}
+</style>
+
+{#if poll}
+<fieldset>
+	<legend>{poll.name}</legend>
+	<div class="description">{@html poll.description.rendered}</div>
+	<table>
+		<thead>
+			<tr>
+				<td>{t('option')}</td>
+				<td>{t('average')}</td>
+				<td>{t('histogram')}</td>
+			</tr>
+		</thead>
+		<tbody>
+			{#each Object.entries(poll.evaluation) as [option_id,hist]}
+			<tr>
+				<td>
+					{poll.options[option_id].name}
+				</td>
+				<td>
+					{average(hist)}
+				</td>
+				<td class="histogram">
+					{#each Object.entries(hist) as [weight,count]}
+					<span style="height: {100*count/max_val(hist)}%">
+						<span>
+							{weight}
+						</span>
+					</span>
+					{/each}
+				</td>
+			</tr>
+			{/each}
+		</tbody>
+	</table>
+</fieldset>
+{/if}

frontend/src/routes/poll/View.svelte

@@ -76,7 +76,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			{#each poll.options as option}
+			{#each Object.entries(poll.options) as [option_id,option]}
 			<tr>
 				<td class="option">
 					{option.name}
@@ -86,7 +86,7 @@
 				</td>
 				{#each Object.entries(poll.weights) as [weight,name]}
 				<td class="radio" onclick={e => select(option,weight)} title={t('click to select')} >
-					{#if selection[option.id] == weight}
+					{#if selection[option_id] == weight}
 					X
 					{/if}
 				</td>