From 33768e2695ae8624050dad29cc953e47ca6649b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 6 Feb 2024 22:34:55 +0100
Subject: [PATCH] feat(webui): add status indicator for notes editor

---
 .../lib/components/utils/NotesEditor.svelte   | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/webui/src/lib/components/utils/NotesEditor.svelte b/webui/src/lib/components/utils/NotesEditor.svelte
index 5413766..3c42675 100644
--- a/webui/src/lib/components/utils/NotesEditor.svelte
+++ b/webui/src/lib/components/utils/NotesEditor.svelte
@@ -4,10 +4,14 @@
 	import { useEntity } from '$lib/entity';
 	import type { WidgetChange } from '$lib/types/base';
 	import LabelBorder from './LabelBorder.svelte';
+	import { i18n } from '$lib/i18n';
+	import { format } from 'date-fns';
 	const dispatch = createEventDispatcher<{ change: WidgetChange }>();
 
 	export let address: string;
 
+	let lastSaved: Date | undefined | null;
+
 	$: ({ entity } = useEntity(address));
 
 	$: notes = $entity?.get('NOTE')?.toString();
@@ -20,20 +24,45 @@
 			attribute: 'NOTE',
 			value: { t: 'String', c: contentEl.innerText }
 		});
+		lastSaved = new Date();
 	}, 500);
+
+	function onInput() {
+		lastSaved = null;
+		update();
+	}
 </script>
 
 <LabelBorder hide={!notes?.length}>
 	<span slot="header">Notes</span>
-	<div class="notes" contenteditable on:input={update} bind:this={contentEl}>
+	<div class="notes" contenteditable on:input={onInput} bind:this={contentEl}>
 		{notes ? notes : ''}
 	</div>
+	<div class="status">
+		{#if lastSaved}
+			{$i18n.t('Last saved at {{time}}', { time: format(lastSaved, 'HH:mm') })}
+		{:else if lastSaved !== undefined}
+			{$i18n.t('Waiting for changes...')}
+		{/if}
+	</div>
 </LabelBorder>
 
 <style lang="scss">
 	.notes {
 		background: var(--background);
 		border-radius: 4px;
-		padding: 0.5em !important;
+		padding: 0.66em !important;
+		margin: 0.1rem;
+
+		&:focus {
+			outline: 1px solid var(--primary-lighter);
+		}
+	}
+
+	.status {
+		font-size: 0.8em;
+		opacity: 0.8;
+		margin-top: 0.5em;
+		margin-right: 0.1rem;
 	}
 </style>