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

Working to make the dark mode look better. Work on the help tech component. General clean up.

Browse Source
This commit is contained in:
Scott Idem
2025-08-12 17:59:37 -04:00
parent 496eea48ee
commit 231462e3ad
17 changed files with 350 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.css
View File

@@ -885,6 +885,13 @@ img.qr_code:focus {
}
.iframe .novi_m0 {
margin: 0;
}
.iframe .novi_p0 {
padding: 0;
}
.iframe .dark .novi_label {
color: white;
}

3
src/lib/ae_stores.ts
View File

@@ -122,11 +122,12 @@ const ae_app_local_data_defaults: key_val = {
// Added 2025-04-04
person_id: null, // The current person_id of the logged-in user (if any)
person: {
// WARNING: We need to add some logic on sign in to only include needed fields. 2025-08-12
id: null, // The current person_id of the logged-in user
// profile_id: null, // The current person_profile_id of the logged-in user
// pronouns: null,
// informal_name: null,
// given_name: null,
given_name: null,
// family_name: null,
// professional_title: null,
full_name: null, // convenience

227
src/lib/e_app_help_tech.svelte
View File

@@ -7,6 +7,8 @@ interface Props {
e_class?: string;
e_title?: string;
e_text?: string;
e_class_h1?: string;
e_class_h2?: string;
e_class_form_hidden?: string;
e_class_form_showing?: string;
btn_text?: string;
@@ -23,6 +25,8 @@ let {
e_class = '',
e_title = 'Technical Help',
e_text = 'Request technical help for this application.',
e_class_h1 = $bindable(''),
e_class_h2 = $bindable(''),
e_class_form_hidden = $bindable(''),
e_class_form_showing = $bindable(''),
btn_text = 'Technical Help',
@@ -33,11 +37,13 @@ let {
}: Props = $props();
// *** Import Svelte specific
import { goto } from '$app/navigation';
// *** Import other supporting libraries
import {
// ArrowBigRight,
BadgeQuestionMark,
ChevronDown, ChevronRight,
// CircleX,
// Copy,
// Eye, EyeOff,
@@ -46,8 +52,9 @@ import {
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
// Menu,
// RefreshCw, RefreshCcw, RefreshCcwDot,
RefreshCw, RefreshCcw, RefreshCcwDot,
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
SquareX,
// User, UserCheck
} from '@lucide/svelte';
@@ -130,13 +137,10 @@ function send_help_tech_email() {
<div
class="
m-2
mx-auto
p-2
flex flex-row
items-center justify-center
rounded-lg shadow-2xl
border-2 border-transparent
border-1 border-transparent
transition-all
{e_class}
{!$ae_sess.show_help_tech ? e_class_form_hidden : e_class_form_showing}
@@ -144,6 +148,9 @@ function send_help_tech_email() {
"
class:w-xl={$ae_sess.show_help_tech}
class:w-fit={!$ae_sess.show_help_tech}
class:mx-auto={$ae_sess.show_help_tech}
class:m-2={$ae_sess.show_help_tech}
class:p-2={$ae_sess.show_help_tech}
class:hover:border-blue-400={$ae_sess.show_help_tech}
class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
class:hover:shadow-blue-200={$ae_sess.show_help_tech}
@@ -168,20 +175,21 @@ function send_help_tech_email() {
w-full
"
>
<h3
<h1
class="
h1
text-base font-semibold text-gray-800 dark:text-gray-200
w-fit
{e_class_h1}
"
>
{#if e_success}
<span class="text-green-800 dark:text-green-200 font-semibold">
<span class="text-lg text-green-800 dark:text-green-200 font-semibold">
<BadgeQuestionMark class="inline-block mr-2" />
Help Requested
</span>
{:else}
<span class="text-gray-800 dark:text-gray-200 font-semibold">
<span class="text-lg text-gray-800 dark:text-gray-200 font-semibold">
<BadgeQuestionMark class="inline-block mr-2" />
<!-- Request Technical Help -->
Notify Technical Support
@@ -192,16 +200,22 @@ function send_help_tech_email() {
{/if}
<!-- Cancel button -->
</h3>
</h1>
<button
type="button"
onclick={() => ($ae_sess.show_help_tech = false)}
class="
btn btn-base preset-tonal-tertiary
btn btn-base
preset-tonal-tertiary
preset-outlined-tertiary-100-900
hover:preset-filled-tertiary-200-800
transition-all
{btn_class}
"
title="Close Help Request Form"
>
<span class="fas fa-times"></span>
<!-- <span class="fas fa-times"></span> -->
<SquareX size="1em" />
<span class="sr-only">Close</span>
</button>
</div>
@@ -223,19 +237,31 @@ function send_help_tech_email() {
alert('Notification sent to the IT team.');
})}
>
<textarea
class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded text-gray-950 dark:text-gray-50"
class="
form-control
w-full max-w-lg h-24 p-2
border border-gray-300 rounded
text-gray-950 dark:text-gray-50
bg-white dark:bg-gray-500
hover:dark:bg-gray-50
hover:dark:text-gray-950
"
placeholder="Send with or without a description...."
bind:value={help_tech_text}
></textarea>
<button
type="submit"
class="
btn btn-lg
m-1
preset-tonal-warning
hover:preset-tonal-success
preset-outlined-warning-600-400
preset-outlined-warning-100-900
hover:preset-filled-warning-200-800
transition-all
{btn_class}
"
@@ -278,19 +304,20 @@ function send_help_tech_email() {
w-full
"
>
<h4
<h2
class="
novi_white
h2
text-base font-semibold text-gray-800 dark:text-gray-200
flex flex-row gap-1 items-center justify-center
{e_class_h2}
"
>
<span class="text-base font-semibold text-gray-800 dark:text-gray-200">
Additional Information Included
</h4>
</span>
</h2>
<!-- Button to expand and show additional information -->
<button
type="button"
class="
btn btn-sm preset-tonal-tertiary
{btn_class}
@@ -300,46 +327,48 @@ function send_help_tech_email() {
>
<span>
{#if hide_additional_info}
<span class="fas fa-caret-right"></span>
<!-- <span class="fas fa-caret-right"></span> -->
<ChevronRight size="1em" class="inline-block" />
Show
{:else}
<span class="fas fa-caret-down"></span>
<!-- <span class="fas fa-caret-down"></span> -->
<ChevronDown size="1em" class="inline-block" />
Hide
{/if}
</span>
</button>
</div>
<ul
class="list-disc list-inside text-gray-800 text-sm"
class="list-disc list-inside text-sm text-gray-800 dark:text-gray-200"
class:hidden={hide_additional_info}
>
<li><span class="text-sm text-gray-500">Datetime =</span> {new Date().toISOString()}</li>
<li><span class="text-sm text-gray-500">URL =</span> {window.location.href}</li>
<li><span class="text-sm text-gray-500">Browser =</span> {navigator.userAgent}</li>
<li><span class="text-sm text-gray-500">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
<li><span class="text-sm text-gray-500">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
<li><span class="text-sm text-gray-500">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
<li><span class="text-sm text-gray-500">In iframe =</span> {$ae_loc?.iframe}</li>
<li><span class="text-sm text-gray-500">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
<li><span class="text-sm text-gray-500">Theme Name =</span> {$ae_loc?.theme_name}</li>
<li><span class="text-sm text-gray-500">Account ID =</span> {$slct.account_id}</li>
<li><span class="text-sm text-gray-500">Access Type =</span> {$ae_loc?.access_type}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Datetime =</span> {new Date().toISOString()}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">URL =</span> {window.location.href}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Browser =</span> {navigator.userAgent}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">In iframe =</span> {$ae_loc?.iframe}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Theme Name =</span> {$ae_loc?.theme_name}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Account ID =</span> {$slct.account_id}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">Access Type =</span> {$ae_loc?.access_type}</li>
{#if $ae_loc?.person_id}
<li><span class="text-sm text-gray-500">person_id =</span> {$ae_loc?.person_id}</li>
<li><span class="text-sm text-gray-500">full_name =</span> {$ae_loc?.full_name}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">person_id =</span> {$ae_loc?.person_id}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">full_name =</span> {$ae_loc?.full_name}</li>
{/if}
{#if $ae_loc?.user_id}
<li><span class="text-sm text-gray-500">user_id =</span> {$ae_loc?.user_id}</li>
<li><span class="text-sm text-gray-500">username =</span> {$ae_loc?.username}</li>
<li><span class="text-sm text-gray-500">email =</span> {$ae_loc?.email}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">user_id =</span> {$ae_loc?.user_id}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">username =</span> {$ae_loc?.username}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">email =</span> {$ae_loc?.email}</li>
{/if}
<li><span class="text-sm text-gray-500">API Base URL =</span> {$ae_api.base_url}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">API Base URL =</span> {$ae_api.base_url}</li>
{#if additional_kv && Object.keys(additional_kv).length > 0}
<h2 class="text-base font-semibold text-gray-800">Component Info:</h2>
<ul class="list-disc list-inside text-gray-800 text-sm">
{#each Object.entries(additional_kv) as [key, value]}
<li><span class="text-sm text-gray-500">{key} =</span> {value ?? '-- not set --'}</li>
<li><span class="text-sm text-gray-500 dark:text-gray-400">{key} =</span> {value ?? '-- not set --'}</li>
{/each}
</ul>
{/if}
@@ -351,31 +380,115 @@ function send_help_tech_email() {
</div>
<!-- Cancel button -->
<button
onclick={() => ($ae_sess.show_help_tech = false)}
class="
btn btn-sm preset-tonal-tertiary
m-1
{btn_class}
"
title="Close Help Request Form"
>
<span class="fas fa-times"></span>
<span class="">Cancel</span>
</button>
<div
class="
flex flex-row gap-2 items-center justify-around
w-full
mt-2
"
>
<button
type="button"
onclick={() => {
if ($ae_loc.edit_mode) {
// Confirm before clearing
if (!confirm("Are you sure you want to clear IndexedDB databases, localStorage, and sessionStorage? This will also reload the page.")) {
return;
}
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
// Clear Indexed DB
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
// 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);
} else {
// Confirm before clearing
if (!confirm("Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.")) {
return;
}
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
// Clear Indexed DB
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
window.location.reload(true);
}
// This does not seem to work fast enough or something?
// goto('/', {invalidateAll: true});
// The page does usually seem to reload correctly?
// 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.');
}}
class="
btn btn-sm
preset-tonal-surface
preset-outlined-warning-100-900
hover:preset-filled-warning-200-800
transition-all
{btn_class}
"
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
>
<!-- <span class="fas fa-eraser mx-1"></span> -->
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw size="1em" class="inline-block" />
<span class="md:inline">Clear & Reload</span>
</button>
<!-- Cancel button -->
<button
type="button"
onclick={() => ($ae_sess.show_help_tech = false)}
class="
btn btn-sm
preset-tonal-tertiary
preset-outlined-tertiary-100-900
hover:preset-filled-tertiary-100-900
transition-all
{btn_class}
"
title="Close Help Request Form"
>
<!-- <span class="fas fa-times"></span> -->
<SquareX size="1em" class="inline-block" />
<span class="">Cancel</span>
</button>
</div>
</div>
{:else}
<button
type="button"
onclick={() => ($ae_sess.show_help_tech = true)}
class="
btn btn-sm
border border-blue-400 dark:border-blue-600
preset-filled-tertiary-400-600
preset-outlined-tertiary-100-900
hover:preset-filled-warning-500
transition-all
{btn_class}
{show_btn_class}

2
src/routes/idaa/(idaa)/archives/+page.svelte
View File

@@ -133,6 +133,8 @@ function add_activity_log(
<Help_tech
e_class=""
e_class_h1="novi_m0"
e_class_h2="novi_m0"
btn_class="novi_btn"
show_btn_class="z-10"
additional_kv={{

2
src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
View File

@@ -297,6 +297,8 @@ onDestroy(() => {
<Help_tech
e_class=""
e_class_h1="novi_m0"
e_class_h2="novi_m0"
btn_class="novi_btn"
show_btn_class="absolute top-0 right-0 float-right z-10"
additional_kv={{

2
src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
View File

@@ -254,6 +254,8 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
<Help_tech
e_class=""
e_class_h1="novi_m0"
e_class_h2="novi_m0"
e_class_form_hidden="float-right"
e_class_form_showing="inline-block"
btn_class="novi_btn"

2
src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
View File

@@ -154,6 +154,8 @@ onDestroy(() => {
<Help_tech
e_class=""
e_class_h1="novi_m0"
e_class_h2="novi_m0"
btn_class="novi_btn"
show_btn_class="absolute top-0 right-0 float-right z-10"
additional_kv={{

2
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
View File

@@ -227,6 +227,8 @@ function preventDefault(fn) {
<Help_tech
e_class=""
e_class_h1="novi_m0"
e_class_h2="novi_m0"
e_class_form_hidden="float-right"
e_class_form_showing="float-none"
btn_class="novi_btn"

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

@@ -23,6 +23,7 @@ import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
// import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import Element_data_store from '$lib/element_data_store_v2.svelte';
import Help_tech from '$lib/e_app_help_tech.svelte';
// *** Setup Svelte properties
interface Props {
@@ -76,7 +77,11 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
<!-- These are needed: h-full overflow-auto -->
<div
class:iframe={$ae_loc?.iframe}
class="ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto"
class="
ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto
bg-gray-50 dark:bg-gray-900
text-gray-800 dark:text-gray-200
"
>
<nav
@@ -175,6 +180,18 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
<RefreshCw />
<span class="hidden md:inline">Clear & Reload</span>
</button>
<Help_tech
e_class=""
e_class_form_hidden=""
e_class_form_showing="inline-block"
btn_class=""
show_btn_class="btn-info"
additional_kv={{
'test': true,
}}
>
</Help_tech>
</nav>

6
src/routes/journals/+page.svelte
View File

@@ -166,10 +166,12 @@ async function create_journal() {
"
>
<h1 class="h1 text-center">
<h1 class="h1 text-4xl text-center text-gray-800 dark:text-gray-200">
<!-- <Library size="1em" class="mx-1 inline-block" /> -->
<SquareLibrary size="1em" class="mx-1 inline-block text-gray-500"/>
<SquareLibrary size="1em" class="mx-1 inline-block text-neutral-800/60"/>
Journals for {$ae_loc.account_name ?? 'Æ loading...'}
{$ae_loc.person.given_name ? `- ${$ae_loc.person.given_name}` : ''}
</h1>
<div

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

@@ -65,6 +65,20 @@ let lq__journal_obj = $derived(liveQuery(async () => {
console.log(`lq__journal_obj: results = `, results);
}
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
$journals_slct.journal_obj = { ...results };
if (log_lvl) {
console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_obj);
}
} else {
if (log_lvl) {
console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`);
}
}
}
return results;
}));

63
src/routes/journals/[journal_id]/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
let log_lvl: number = $state(0);
let log_lvl: number = $state(1);
// *** Import Svelte specific
import { browser } from '$app/environment';
@@ -42,10 +42,22 @@ let { data }: Props = $props();
// Variables
// *** Quickly pull out data from parent(s)
let ae_acct = data[$slct.account_id];
if (log_lvl) {
if (log_lvl > 1) {
console.log(`ae_acct = `, ae_acct);
}
$inspect(log_lvl, `log_lvl = ${log_lvl}`);
$inspect($journals_slct.journal_id, `$journals_slct.journal_id = ${$journals_slct.journal_id}`);
$inspect($journals_slct.journal_entry_id, `$journals_slct.journal_entry_id = ${$journals_slct.journal_entry_id}`);
// $inspect($journals_slct.journal_entry_id).with((type, val) => {
// if (type === 'update') {
// // debugger; // or `console.trace`, or whatever you want
// console.log('$journals_slct.journal_entry_id updated:', val);
// }
// });
// For some reason data.params.journal_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06
$journals_slct.journal_id = ae_acct.slct.journal_id;
// $journals_slct.journal_obj = ae_acct.slct.journal_obj;
@@ -56,12 +68,27 @@ let lq__journal_obj = $derived(liveQuery(async () => {
if (log_lvl) {
console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
}
let results = await db_journals.journal
.get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
if (log_lvl) {
console.log(`lq__journal_obj: results = `, results);
}
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
$journals_slct.journal_obj = { ...results};
if (log_lvl) {
console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_obj);
}
} else {
if (log_lvl) {
console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`);
}
}
}
return results;
}));
@@ -72,10 +99,14 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
}
if ($journals_sess.entry_li_trigger && !$journals_sess?.entry_li) {
$journals_sess.entry_li = null;
$journals_sess.entry_li_trigger = false;
}
let results;
if ($journals_sess?.entry_li && $journals_sess?.entry_li?.length) {
// $journals_sess.entry_li_trigger = false;
let journal_entry_id_random_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
@@ -87,12 +118,11 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
}
// let journal_entry_id_random_li = tmp_li;
let results = await db_journals.journal_entry
results = await db_journals.journal_entry
.bulkGet(journal_entry_id_random_li);
return results;
} else if ($lq__journal_obj?.cfg_json?.entry_group_sort === 'DESC') {
let results = await db_journals.journal_entry
results = await db_journals.journal_entry
// .orderBy('updated_on')
.where('journal_id')
.equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
@@ -101,35 +131,46 @@ let lq__journal_entry_obj_li = $derived(liveQuery(async () => {
.sortBy('updated_on');
// .sortBy('title');
return results;
} else if ($journals_loc.filter__category_code && $journals_loc.filter__category_code.length > 0) {
if (log_lvl) {
// console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
console.log(`$journals_loc.filter__category_code = `, $journals_loc.filter__category_code);
}
let results = await db_journals.journal_entry
results = await db_journals.journal_entry
.where('journal_id')
.equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
.and(entry => entry.category_code === $journals_loc.filter__category_code)
.reverse()
.sortBy('tmp_sort_1');
return results;
} else {
if (log_lvl) {
// console.log(`$lq__journal_obj.cfg_json = `, $lq__journal_obj?.cfg_json);
console.log(`$journals_slct?.journal_id - default query using journal_id: ${$journals_slct?.journal_id}`);
}
let results = await db_journals.journal_entry
results = await db_journals.journal_entry
.where('journal_id')
.equals($journals_slct?.journal_id ?? '') // null or undefined does not reset things like '' does
.reverse()
.sortBy('tmp_sort_1');
// .sortBy('updated_on');
return results;
}
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_entry_obj_li && JSON.stringify($journals_slct.journal_entry_obj_li) !== JSON.stringify(results)) {
$journals_slct.journal_entry_obj_li = [...results];
if (log_lvl) {
console.log(`Session slct li stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_entry_obj_li);
}
} else {
if (log_lvl > 1) {
console.log(`Session slct li stored version has not changed for ID = ${$journals_slct.journal_id}`);
}
}
return results;
}));
@@ -174,8 +215,6 @@ if ($journals_trig.journal_entry_li) {
});
if (browser) {
// console.log('Browser environment detected.');
let message = {'journal_id': $journals_slct?.journal_id ?? null};
window.parent.postMessage(message, "*");
}

67
src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
let log_lvl: number = 0;
let log_lvl: number = $state(1);
// *** Import Svelte specific
// import { browser } from '$app/environment';
@@ -42,20 +42,59 @@ if (log_lvl) {
$journals_slct.journal_id = ae_acct.slct.journal_id;
let lq__journal_obj = $derived(liveQuery(async () => {
if (log_lvl) {
console.log(`lq__journal_obj: journal_id = ${$journals_slct?.journal_id}`);
}
let results = await db_journals.journal
.where('id')
.equals($journals_slct.journal_id)
.first();
.get($journals_slct?.journal_id ?? ''); // null or undefined does not reset things like '' does
// .where('id')
// .equals($journals_slct.journal_id)
// .first();
if (log_lvl) {
console.log(`lq__journal_obj: results = `, results);
}
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj && results) {
if (JSON.stringify($journals_slct.journal_obj) !== JSON.stringify(results)) {
$journals_slct.journal_obj = { ...results };
if (log_lvl) {
console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_id}`, $journals_slct.journal_obj);
}
} else {
if (log_lvl) {
console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_id}`);
}
}
}
return results;
}));
let lq__journal_obj_li = $derived(liveQuery(async () => {
if (log_lvl) {
console.log(`lq__journal_obj_li: person_id = ${$ae_loc.person_id}`);
}
let results = await db_journals.journal
.where('person_id')
.equals($ae_loc.person_id)
.reverse()
.sortBy('tmp_sort_2')
.sortBy('tmp_sort_2');
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_obj_li && JSON.stringify($journals_slct.journal_obj_li) !== JSON.stringify(results)) {
$journals_slct.journal_obj_li = [...results];
if (log_lvl) {
console.log(`Session slct li stored version has changed for ID = ${$ae_loc.person_id}`, $journals_slct.journal_obj_li);
}
} else {
if (log_lvl > 1) {
console.log(`Session slct li stored version has not changed for ID = ${$ae_loc.person_id}`);
}
}
return results;
}));
@@ -69,7 +108,23 @@ let lq__journal_entry_obj = $derived(liveQuery(async () => {
}
let results = await db_journals.journal_entry
.get($journals_slct.journal_entry_id ?? ''); // null or undefined does not reset things like '' does
// console.log(`lq__journal_entry_obj: results = `, results);
if (log_lvl) {
console.log(`lq__journal_entry_obj: results = `, results);
}
// Check if results are different than the current session version stored under $journals_slct
if ($journals_slct.journal_entry_obj && results) {
if (JSON.stringify($journals_slct.journal_entry_obj) !== JSON.stringify(results)) {
$journals_slct.journal_entry_obj = { ...results};
if (log_lvl) {
console.log(`Session slct stored version has changed for ID = ${$journals_slct.journal_entry_id}`, $journals_slct.journal_entry_obj);
}
} else {
if (log_lvl) {
console.log(`Session slct stored version has not changed for ID = ${$journals_slct.journal_entry_id}`);
}
}
}
return results;
}));

4
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -968,10 +968,10 @@ $effect(() => {
/>
{:else}
{#if ($lq__journal_entry_obj?.name)}
<NotebookText class="mx-1 inline-block"/>
<NotebookText class="mx-1 inline-block text-neutral-800/60"/>
{@html $lq__journal_entry_obj?.name}
{:else}
<CalendarClock class="mx-1 inline-block"/>
<CalendarClock class="mx-1 inline-block text-neutral-800/60"/>
{ae_util.iso_datetime_formatter($lq__journal_entry_obj?.created_on, 'datetime_iso_12_no_seconds')}
{/if}
{/if}

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

@@ -159,13 +159,13 @@ $effect(() => {
>
{#if journals_journal_entry_obj.template}
<NotepadTextDashed class="mx-1 inline-block" />
<NotepadTextDashed class="mx-1 inline-block text-neutral-800/60" />
{@html journals_journal_entry_obj.name ?? '-- no name --'}
{:else if (journals_journal_entry_obj.name)}
<NotebookText class="mx-1 inline-block" />
<NotebookText class="mx-1 inline-block text-neutral-800/60" />
{@html journals_journal_entry_obj.name}
{:else}
<CalendarClock class="mx-1 inline-block" />
<CalendarClock class="mx-1 inline-block text-neutral-800/60" />
{ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
{/if}

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

@@ -102,7 +102,7 @@ function verify_journal_passcode() {
<header class="ae_header journal__header flex flex-row flex-wrap gap-2 items-center justify-between w-full">
<h2 class="journal__name h3 text-center ">
<BookOpenText class="inline-block" />
<BookOpenText class="inline-block text-neutral-800/60" />
{@html $lq__journal_obj?.name ?? 'Loading...'}
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
({$lq__journal_entry_obj_li?.length ?? '0'}×)

9
src/routes/journals/ae_comp__journal_obj_li.svelte
View File

@@ -6,7 +6,9 @@
// *** Import other supporting libraries
// import { Spinner } from 'flowbite-svelte';
import { BookOpenText } from '@lucide/svelte';
import {
BookOpenText, BookType
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -27,7 +29,7 @@ let { lq__journal_obj_li }: Props = $props();
{#each $lq__journal_obj_li as journals_journal_obj, index}
<div
class="container journal journal_obj border border rounded p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center bg-{journals_journal_obj?.cfg_json.color_scheme}-100"
class="container journal journal_obj border rounded p-2 mb-2 space-y-2 w-full max-w-(--breakpoint-lg) flex flex-col items-center justify-center bg-{journals_journal_obj?.cfg_json.color_scheme}-100"
class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) && !$ae_loc.trusted_access}
class:dim={journals_journal_obj.hide}
class:bg-warning-100={!journals_journal_obj?.enable}
@@ -36,6 +38,9 @@ let { lq__journal_obj_li }: Props = $props();
<header class="ae_header flex flex-row gap-2 items-center justify-between w-full">
<h3 class="journal__name h3">
<BookType class="m-1 inline-block text-neutral-800/60" />
<span class="journal__name">{@html journals_journal_obj.name}</span>
</h3>