wip

webui/src/lib/components/layout/Jobs.svelte

@@ -10,7 +10,7 @@
 <script lang="ts">
 	import type { IJob } from '@upnd/upend/types';
 	import { fade } from 'svelte/transition';
-	import ProgessBar from '../utils/ProgessBar.svelte';
+	import ProgressBar from '../utils/ProgressBar.svelte';
 	import api from '$lib/api';
 	import { DEBUG } from '$lib/debug';
 
@@ -66,7 +66,7 @@
 {#each activeJobs as job (job.id)}
 	<div class="job" transition:fade>
 		<div class="job-label">{job.title}</div>
-		<ProgessBar value={job.progress} />
+		<ProgressBar value={job.progress} />
 	</div>
 {/each}
 

webui/src/lib/components/utils/NotesEditor.svelte

@@ -5,16 +5,20 @@
 	import type { AttributeCreate, AttributeUpdate } from '$lib/types/base';
 	import type { UpEntry } from '@upnd/upend';
 	import LabelBorder from './LabelBorder.svelte';
+	import { i18n } from '$lib/i18n';
+	import { format } from 'date-fns';
 	const dispatch = createEventDispatcher();
 
 	export let address: string;
 
+	let lastSaved: Date | undefined;
+
 	$: ({ entity } = useEntity(address));
 
 	let noteEntry: UpEntry | undefined;
 	let notes: string | undefined = undefined;
 	$: {
-		if ($entity?.attr['NOTE']?.length && $entity?.attr['NOTE'][0]?.value?.c) {
+		if ($entity?.attr['NOTE']?.[0]?.value?.c) {
 			noteEntry = $entity?.attr['NOTE'][0];
 			notes = String(noteEntry.value.c);
 		} else {
@@ -41,14 +45,27 @@
 				value: { t: 'String', c: contentEl.innerText }
 			} as AttributeCreate);
 		}
+		lastSaved = new Date();
 	}, 500);
+
+	function onInput() {
+		lastSaved = undefined;
+		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}
+			{$i18n.t('Waiting for changes...')}
+		{/if}
+	</div>
 </LabelBorder>
 
 <style lang="scss">

webui/src/routes/+layout.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
 	import '$lib/styles/main.scss';
 	import Header from '$lib/components/layout/Header.svelte';
+	import Footer from '$lib/components/layout/Footer.svelte';
+	import DropPasteHandler from '$lib/components/DropPasteHandler.svelte';
+	import AddModal from '$lib/components/AddModal.svelte';
 </script>
 
 <Header />
 <main>
 	<slot />
 </main>
+<Footer />
+
+<AddModal />
+<DropPasteHandler />>