Journals is working pretty well. Most basic functions work now.

This commit is contained in:
Scott Idem
2025-03-21 17:08:58 -04:00
parent 8826ebf92f
commit db762a3c91
5 changed files with 528 additions and 490 deletions

947
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -98,6 +98,7 @@
"dexie": "^4.0.1-beta.14", "dexie": "^4.0.1-beta.14",
"flowbite-svelte": "^0.48.00", "flowbite-svelte": "^0.48.00",
"html5-qrcode": "^2.3.8", "html5-qrcode": "^2.3.8",
"lucide-svelte": "^0.483.0",
"marked": "^15.0.7", "marked": "^15.0.7",
"shadcn-svelte": "^0.14.0" "shadcn-svelte": "^0.14.0"
} }

View File

@@ -6,6 +6,8 @@ let log_lvl: number = 0;
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { BookHeart, FilePlus } from '@lucide/svelte';
// *** Import other supporting libraries // *** Import other supporting libraries
import { Modal } from 'flowbite-svelte'; import { Modal } from 'flowbite-svelte';
import { liveQuery } from "dexie"; import { liveQuery } from "dexie";
@@ -164,35 +166,37 @@ if (browser) {
" "
> >
<!-- <h1>Journals {$lq__journal_obj?.name} - {$lq__journal_entry_obj_li?.length}</h1> -->
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<a href="/journals" class="novi_btn btn btn-secondary btn-sm <a href="/journals"
class="btn btn-sm
variant-ghost-tertiary variant-ghost-tertiary
hover:variant-filled-tertiary hover:variant-filled-tertiary
transition transition
"> ">
<!-- <span class="fas fa-arrow-left m-1"></span> Back to Journals --> <!-- <span class="fas fa-arrow-left m-1"></span> Back to Journals -->
<span class="fas fa-arrow-left m-1"></span> <!-- <span class="fas fa-arrow-left m-1"></span> -->
<BookHeart class="mx-1" />
View Other Journals View Other Journals
</a> </a>
<!-- Add default journal entry --> <!-- Add default journal entry -->
<span class="flex flex-row items-center gap-2"> <span class="flex flex-row items-center gap-1">
<span class="text-sm text-gray-500 hidden md:inline"> <span class="text-sm text-gray-500 hidden md:inline">
New Entry: New entry:
</span> </span>
<button <button
class="btn btn-sm class="
btn btn-sm
variant-ghost-success variant-ghost-success
hover:variant-filled-success hover:variant-filled-success
transition" transition
"
onclick={() => { onclick={() => {
// $journals_sess.show__modal_new__journal_entry_obj = true; // $journals_sess.show__modal_new__journal_entry_obj = true;
let data_kv = { let data_kv = {
// journal_id_random: $lq__journal_obj?.journal_id, category_code: null,
category_code: 'test',
}; };
if ($journals_loc.qry__category_code) { if ($journals_loc.qry__category_code) {
data_kv.category_code = $journals_loc.qry__category_code; data_kv.category_code = $journals_loc.qry__category_code;
@@ -217,7 +221,9 @@ if (browser) {
}); });
}} }}
> >
<span class="fas fa-plus m-1"></span> New Journal Entry <FilePlus class="mx-1" />
<!-- <span class="fas fa-plus m-1"></span> -->
New Journal Entry
</button> </button>
<!-- Give list of categories to base the new entry on --> <!-- Give list of categories to base the new entry on -->

View File

@@ -91,6 +91,7 @@ $effect(() => {
let data_kv = { let data_kv = {
name: tmp_entry_obj?.name, name: tmp_entry_obj?.name,
category_code: tmp_entry_obj?.category_code, category_code: tmp_entry_obj?.category_code,
tags: tmp_entry_obj?.tags,
content: tmp_entry_obj?.content content: tmp_entry_obj?.content
}; };
journals_func.update_ae_obj__journal_entry({ journals_func.update_ae_obj__journal_entry({
@@ -141,10 +142,10 @@ $effect(() => {
/> />
{:else} {:else}
{#if ($lq__journal_entry_obj?.name)} {#if ($lq__journal_entry_obj?.name)}
<NotebookText class="m-1 inline-block"/> <NotebookText class="mx-1 inline-block"/>
{@html $lq__journal_entry_obj?.name} {@html $lq__journal_entry_obj?.name}
{:else} {:else}
<CalendarClock class="m-1 inline-block"/> <CalendarClock class="mx-1 inline-block"/>
{ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')} {ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
{/if} {/if}
{/if} {/if}
@@ -158,9 +159,9 @@ $effect(() => {
<!-- Tags for journal entry. Comma delimited list. --> <!-- Tags for journal entry. Comma delimited list. -->
{#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]} {#if $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
<div class="tags flex flex-row gap-1 items-center justify-start border border-gray-200 rounded-lg p-1"> <div class="tags flex flex-row gap-1 items-center justify-start border border-gray-200 rounded-lg">
<span class="text-sm text-gray-500"> <span class="text-sm text-gray-500">
<Tags class="m-1 inline-block" /> <Tags class="mx-1 inline-block" />
<!-- <span class="hidden sm:inline">Tags:</span> --> <!-- <span class="hidden sm:inline">Tags:</span> -->
</span> </span>
@@ -174,9 +175,9 @@ $effect(() => {
</div> </div>
{:else} {:else}
{#if $lq__journal_entry_obj.tags && $lq__journal_entry_obj.tags.length} {#if $lq__journal_entry_obj.tags && $lq__journal_entry_obj.tags.length}
<div class="tags flex flex-wrap gap-1 items-center justify-start border border-gray-200 rounded-lg p-1"> <div class="tags flex flex-wrap gap-1 items-center justify-start border border-gray-200 rounded-lg">
<span class="text-sm text-gray-500"> <span class="text-sm text-gray-500">
<Tags class="m-1 inline-block" /> <Tags class="mx-1 inline-block" />
<span class="hidden md:inline">Tags</span> <span class="hidden md:inline">Tags</span>
</span> </span>
<!-- <Tags class="m-1 inline-block" /> <!-- <Tags class="m-1 inline-block" />
@@ -184,7 +185,7 @@ $effect(() => {
{#each $lq__journal_entry_obj.tags.split(',') as tag} {#each $lq__journal_entry_obj.tags.split(',') as tag}
<span <span
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-tertiary transition py-1 px-2" class="btn btn-sm variant-glass-tertiary hover:variant-ghost-tertiary transition py-1 px-2"
title={`Tag: ${tag.trim()}`} title={`Tag: ${tag.trim()}`}
> >
{tag.trim()} {tag.trim()}
@@ -267,7 +268,9 @@ $effect(() => {
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition py-1 px-2" class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition py-1 px-2"
title={`Filter by category: ${$lq__journal_entry_obj.category_code}`} title={`Filter by category: ${$lq__journal_entry_obj.category_code}`}
> >
<Shapes class="m-1 inline-block"/> <span class="text-sm text-gray-500">
<Shapes class="mx-1 inline-block"/>
</span>
{$lq__journal_entry_obj.category_code ?? '-- no category --'} {$lq__journal_entry_obj.category_code ?? '-- no category --'}
</button> </button>
{/if} {/if}
@@ -552,6 +555,7 @@ $effect(() => {
let data_kv = { let data_kv = {
name: tmp_entry_obj?.name, name: tmp_entry_obj?.name,
category_code: tmp_entry_obj?.category_code, category_code: tmp_entry_obj?.category_code,
tags: tmp_entry_obj?.tags,
content: tmp_entry_obj?.content content: tmp_entry_obj?.content
}; };
journals_func.update_ae_obj__journal_entry({ journals_func.update_ae_obj__journal_entry({
@@ -627,7 +631,7 @@ $effect(() => {
</button> </button>
<!-- Set sort order (number) --> <!-- Set sort order (number) -->
<span class="flex flex-row items-center justify-center"> <span class="flex flex-row items-center justify-center border border-gray-300 rounded-lg">
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
@@ -652,7 +656,7 @@ $effect(() => {
> >
<Plus strokeWidth="2.5" color="blue" /> <Plus strokeWidth="2.5" color="blue" />
</button> </button>
<span class="m-1"> <span class="mx-1">
{$lq__journal_entry_obj?.sort} {$lq__journal_entry_obj?.sort}
</span> </span>
<button <button

View File

@@ -4,7 +4,7 @@ let log_lvl: number = 1;
// *** Import Svelte specific // *** Import Svelte specific
import { goto, invalidate, pushState, replaceState } from '$app/navigation'; import { goto, invalidate, pushState, replaceState } from '$app/navigation';
import { CalendarClock, NotebookPen, NotebookText, Shapes, Tags } from '@lucide/svelte'; import { CalendarClock, Flag, FlagOff, NotebookPen, NotebookText, Shapes, Siren, Tags } from '@lucide/svelte';
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
@@ -48,11 +48,17 @@ let ae_promises: key_val = $state({});
<header class="ae_header flex flex-row gap-2 items-center justify-between w-full"> <header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
<h3 class="journal__name h4"> <h3 class="journal__name h4">
<span class="journal_entry__name"> <span class="journal_entry__name">
{#if (journals_journal_entry_obj.alert)}
<Siren class="mx-1 inline-block text-red-500"/>
{/if}
{#if (journals_journal_entry_obj.priority)}
<Flag class="mx-1 inline-block text-yellow-500"/>
{/if}
{#if (journals_journal_entry_obj.name)} {#if (journals_journal_entry_obj.name)}
<NotebookText class="m-1 inline-block"/> <NotebookText class="mx-1 inline-block"/>
{@html journals_journal_entry_obj.name} {@html journals_journal_entry_obj.name}
{:else} {:else}
<CalendarClock class="m-1 inline-block"/> <CalendarClock class="mx-1 inline-block"/>
{ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')} {ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
{/if} {/if}
</span> </span>
@@ -62,12 +68,12 @@ let ae_promises: key_val = $state({});
<!-- Tags for journal entry. Comma delimited list. --> <!-- Tags for journal entry. Comma delimited list. -->
{#if journals_journal_entry_obj.tags && journals_journal_entry_obj.tags.length} {#if journals_journal_entry_obj.tags && journals_journal_entry_obj.tags.length}
<div class="tags flex flex-wrap gap-1 items-center justify-start p-1"> <div class="tags flex flex-wrap gap-1 items-center justify-start p-1">
<Tags class="m-1 inline-block"/> <Tags class="mx-1 inline-block"/>
<span class="text-sm text-gray-500 hidden md:inline">Tags:</span> <span class="text-sm text-gray-500 hidden md:inline">Tags:</span>
{#each journals_journal_entry_obj.tags.split(',') as tag} {#each journals_journal_entry_obj.tags.split(',') as tag}
<span <span
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-tertiary transition py-1 px-2" class="btn btn-sm variant-glass-tertiary hover:variant-ghost-tertiary transition py-1 px-2"
title={`Tag: ${tag.trim()}`} title={`Tag: ${tag.trim()}`}
> >
{tag.trim()} {tag.trim()}
@@ -97,7 +103,7 @@ let ae_promises: key_val = $state({});
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition py-1 px-2" class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition py-1 px-2"
title={`Filter by category: ${journals_journal_entry_obj.category_code}`} title={`Filter by category: ${journals_journal_entry_obj.category_code}`}
> >
<Shapes class="m-1 inline-block"/> <Shapes class="mx-1 inline-block"/>
{journals_journal_entry_obj.category_code ?? '-- no category --'} {journals_journal_entry_obj.category_code ?? '-- no category --'}
</button> </button>
{/if} {/if}
@@ -107,7 +113,7 @@ let ae_promises: key_val = $state({});
class="btn btn-secondary variant-ghost-primary hover:variant-filled-primary transition" class="btn btn-secondary variant-ghost-primary hover:variant-filled-primary transition"
title={`View ID: ${journals_journal_entry_obj?.id}\n${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}`} title={`View ID: ${journals_journal_entry_obj?.id}\n${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}`}
> >
<NotebookPen class="m-1 inline-block"/> <NotebookPen class="mx-1 inline-block"/>
<span class="hidden md:inline"> <span class="hidden md:inline">
View View
</span> </span>