feat(webui): add status indicator for notes editor
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
9d6ebfc31c
commit
33768e2695
1 changed files with 31 additions and 2 deletions
|
@ -4,10 +4,14 @@
|
||||||
import { useEntity } from '$lib/entity';
|
import { useEntity } from '$lib/entity';
|
||||||
import type { WidgetChange } from '$lib/types/base';
|
import type { WidgetChange } from '$lib/types/base';
|
||||||
import LabelBorder from './LabelBorder.svelte';
|
import LabelBorder from './LabelBorder.svelte';
|
||||||
|
import { i18n } from '$lib/i18n';
|
||||||
|
import { format } from 'date-fns';
|
||||||
const dispatch = createEventDispatcher<{ change: WidgetChange }>();
|
const dispatch = createEventDispatcher<{ change: WidgetChange }>();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
|
||||||
|
let lastSaved: Date | undefined | null;
|
||||||
|
|
||||||
$: ({ entity } = useEntity(address));
|
$: ({ entity } = useEntity(address));
|
||||||
|
|
||||||
$: notes = $entity?.get('NOTE')?.toString();
|
$: notes = $entity?.get('NOTE')?.toString();
|
||||||
|
@ -20,20 +24,45 @@
|
||||||
attribute: 'NOTE',
|
attribute: 'NOTE',
|
||||||
value: { t: 'String', c: contentEl.innerText }
|
value: { t: 'String', c: contentEl.innerText }
|
||||||
});
|
});
|
||||||
|
lastSaved = new Date();
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
|
function onInput() {
|
||||||
|
lastSaved = null;
|
||||||
|
update();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LabelBorder hide={!notes?.length}>
|
<LabelBorder hide={!notes?.length}>
|
||||||
<span slot="header">Notes</span>
|
<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 : ''}
|
{notes ? notes : ''}
|
||||||
</div>
|
</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>
|
</LabelBorder>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.notes {
|
.notes {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
border-radius: 4px;
|
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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue