Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now with a description and basic color scheme. Saving before making some more changes.

Browse Source
This commit is contained in:
Scott Idem
2025-04-03 18:27:59 -04:00
parent 2ab026611f
commit e022645f64
7 changed files with 125 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/routes/+layout.svelte
View File

@@ -408,8 +408,26 @@ $effect(() => {
<button
type="button"
onclick={() => {
// Clear the localStorage and sessionStorage, then reload the page.
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_posts_db');
window.location.reload();
}}
ondblclick={() => {
// Double click to clear all databases and reload the page.
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_posts_db');
// Clear localStorage and sessionStorage
localStorage.clear();
sessionStorage.clear();
alert('Local and Session Storage cleared. The page should now refresh on its own.');
// window.location.reload({forceGet: true});
// window.location.reload(true);

28
src/routes/journals/+layout.svelte
View File

@@ -113,16 +113,12 @@ if (browser) {
onclick={() => {
// Confirm before clearing
if (!confirm("Are you sure you want to clear all *local* app data and settings? This will also reload the page.")) {
if (!confirm("Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.")) {
return;
}
console.log("Clearing local and session storage, and reloading the page...");
// Clear the local and session storage. Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
// Clear Indexed DB as well
// Clear Indexed DB
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_journals_db');
@@ -133,6 +129,26 @@ if (browser) {
window.location.reload(true); // true only works with Firefox
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}}
ondblclick={() => {
// Confirm before clearing
if (!confirm("Are you sure you want to clear all *local* app data and settings? This will also reload the page.")) {
return;
}
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
// Clear Indexed DB
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_journals_db');
// Clear localStorage and sessionStorage
// Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
goto('/', {invalidateAll: true});
window.location.reload(true);
}}
class="btn btn-sm variant-ghost-surface hover:variant-filled-warning"
title="Clear App Data &amp; Settings - Reload: Clear the browser storage for this site"
>

41
src/routes/journals/[journal_id]/+layout.svelte
View File

@@ -58,6 +58,7 @@ async function handle_update_journal() {
let data_kv = {
// account: $slct.account_id,
name: $journals_slct.tmp_journal_obj.name,
description: $journals_slct.tmp_journal_obj.description ?? '', // Ensure description is at least an empty string
type_code: $journals_slct.tmp_journal_obj.type_code,
passcode: $journals_slct.tmp_journal_obj.passcode,
passcode_timeout: $journals_slct.tmp_journal_obj.passcode_timeout,
@@ -171,6 +172,7 @@ async function handle_update_journal() {
onclick={() => {
$journals_slct.tmp_journal_obj = {
name: $lq__journal_obj?.name,
description: $lq__journal_obj?.description,
type_code: $lq__journal_obj?.type_code,
passcode: $lq__journal_obj?.passcode,
passcode_timeout: $lq__journal_obj?.passcode_timeout,
@@ -258,7 +260,10 @@ async function handle_update_journal() {
"
bind:value={$journals_loc.qry__category_code}
onchange={(event) => {
// WARNING: This will cause pages to reset if the journal entry list is being filtered by category. This is a bug that should be fixed.
$journals_loc.qry__category_code = event.target.value;
$journals_loc.filter__category_code = event.target.value;
$journals_trig.journal_entry_li = true;
console.log('Selected category:', $journals_loc.qry__category_code);
}}
title="Select a category for the new journal entry"
@@ -297,6 +302,15 @@ async function handle_update_journal() {
<!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
<div class="py-4">
<input type="text" placeholder="Journal Name" bind:value={$journals_slct.tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
<!-- Journal Description (Markdown) -->
<textarea
placeholder="Journal Description (Markdown format)"
bind:value={$journals_slct.tmp_journal_obj.description}
class="input input-bordered w-full mb-2 h-32 resize-none"
title="Description of the journal (supports Markdown)"
></textarea>
<input type="text" placeholder="Journal Type" bind:value={$journals_slct.tmp_journal_obj.type_code} class="input input-bordered w-full mb-2" />
<!-- input for passcode -->
@@ -393,7 +407,34 @@ async function handle_update_journal() {
</select>
</div>
<!-- Select color scheme for the journal entries -->
<!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
<!-- Saves to cfg_json.color_scheme -->
<div>
<span class="text-sm text-gray-500 hidden sm:inline">
Color Scheme:
</span>
<select
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-96"
bind:value={$journals_slct.tmp_journal_obj.cfg_json.color_scheme}
title="Select color scheme for journal entries"
onchange={(event) => {
$journals_slct.tmp_journal_obj.cfg_json.color_scheme = event.target.value;
console.log('Selected color scheme:', $journals_slct.tmp_journal_obj.cfg_json.color_scheme);
}}
>
<option value="">Default (auto)</option>
<option value="slate">Slate</option>
<option value="gray">Gray</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>
</div>
<!-- JSON configuration editor for advanced users -->
<!-- textarea for json_cfg editing -->
</div>

2
src/routes/journals/ae_comp__journal_entry_obj_li.svelte
View File

@@ -235,6 +235,7 @@ let tmp_entry_obj: key_val = $state({});
<button
type="button"
onclick={() => {
// WARNING: This will cause pages to reset if the journal entry list is being filtered by category. This is a bug that should be fixed.
if ($journals_loc.filter__category_code == journals_journal_entry_obj.category_code) {
$journals_loc.filter__category_code = null;
} else {
@@ -247,6 +248,7 @@ let tmp_entry_obj: key_val = $state({});
console.log('$journals_loc.filter__category_code', $journals_loc.filter__category_code);
}
}}
class:bg-green-100={$journals_loc.filter__category_code == journals_journal_entry_obj.category_code}
class="btn btn-sm variant-outline-secondary hover:variant-filled-secondary transition py-1 px-2"
title={`Filter by category: ${journals_journal_entry_obj.category_code}`}
>

30
src/routes/journals/ae_comp__journal_obj_id_view.svelte
View File

@@ -46,6 +46,36 @@ let { log_lvl = 0, lq__journal_obj, lq__journal_entry_obj_li }: Props = $props()
</h2>
</header>
<!-- Show Journal description -->
<!-- class:bg-green-100={$lq__journal_obj?.cfg_json.color_scheme ?? 'green'} -->
<div>
{#if $lq__journal_obj?.description}
<div
class="
prose
space-y-1
journal__description
p-2
font-mono
bg-{$lq__journal_obj?.cfg_json.color_scheme}-100 text-gray-900
dark:bg-blue-900 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap whitespace-pre-wrap word-break
max-w-screen-md
prose-h1:underline prose-h1:decoration-double
prose-h2:underline
prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
prose-li:m-0 prose-li:p-0 prose-li:line-height-none
"
>
{@html $lq__journal_obj.description_md_html}
</div>
{/if}
</div>