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

Doing some more work on the new Notes objects.

Browse Source
This commit is contained in:
Scott Idem
2025-03-15 21:24:25 -04:00
parent f4bd387ed9
commit 183d431e1d
10 changed files with 305 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/ae_notes/ae_notes__note.ts
View File

@@ -98,6 +98,10 @@ export async function load_ae_obj_li__note(
for_obj_type = 'account',
for_obj_id,
// inc_other_li = false,
enabled = 'enabled',
hidden = 'not_hidden',
limit = 99,
offset = 0,
order_by_li = {'priority': 'DESC', 'sort': 'DESC', 'name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'},
params = {},
try_cache = true,
@@ -107,6 +111,10 @@ export async function load_ae_obj_li__note(
for_obj_type: string,
for_obj_id: string,
// inc_other_li?: boolean,
enabled?: string, // all, disabled, enabled
hidden?: string, // all, hidden, not_hidden
limit?: number,
offset?: number,
order_by_li?: key_val,
params?: key_val,
try_cache?: boolean,
@@ -115,11 +123,6 @@ export async function load_ae_obj_li__note(
) {
console.log(`*** load_ae_obj_li__note() *** for_obj_type=${for_obj_type} for_obj_id=${for_obj_id}`);
let enabled: string = (params.qry__enabled ?? 'enabled'); // all, disabled, enabled
let hidden: string = (params.qry__hidden ?? 'not_hidden'); // all, hidden, not_hidden
let limit: number = (params.qry__limit ?? 99); // 99
let offset: number = (params.qry__offset ?? 0); // 0
let params_json: key_val = {};
// console.log('params_json:', params_json);

65
src/routes/(notes)/+layout.svelte Normal file
View File

@@ -0,0 +1,65 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
let { children } = $props();
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_notes/ae_notes_stores';
</script>
<svelte:head>
<title>Notes - {$notes_loc.title ?? 'Æ loading...'}</title>
</svelte:head>
<div class="ae_notes">
<nav class="submenu flex flex-row justify-center gap-1">
<a href="/" class="btn btn-sm variant-ghost-success hover:variant-filled-success">Home</a>
<!-- <a href="/about" class="btn btn-sm">About</a> -->
<!-- <a href="/settings" class="btn btn-sm">Settings</a> -->
<button
onclick={() => {
// 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
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_notes_db');
// 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 variant-ghost-success hover:variant-filled-success"
title="Clear App Data &amp; Settings - Reload: Clear the browser storage for this site"
>
<!-- <span class="fas fa-eraser mx-1"></span> -->
<span class="fas fa-sync mx-1"></span>
Clear &amp; Reload
</button>
</nav>
<section class="status flex flex-col justify-center items-center gap-1">
{#if $ae_loc.administrator_access}
<h3 class="h4">Administrator Access - Technical Support</h3>
<p>You are accessing the notes system with "administrator" level permissions.</p>
{:else if $ae_loc.trusted_access}
<h3 class="h4">Trusted Access - Staff</h3>
<p>You are accessing the notes system with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
<h3 class="h4">Restricted Access</h3>
<p>You are accessing to the notes system is limited</p>
{/if}
</section>
<section class="main_content outline">
{@render children()}
</section>
</div>

34
src/routes/(notes)/+layout.ts Normal file
View File

@@ -0,0 +1,34 @@
/** @type {import('./$types').LayoutLoad} */
// import { error } from '@sveltejs/kit';
import { browser } from '$app/environment';
// import { api } from '$lib/api';
// import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
// import { core_func } from '$lib/ae_core/ae_core_functions';
// import type { key_val } from '$lib/ae_stores';
export async function load({ fetch, params, parent, route, url }) {
let log_lvl: number = 0;
let parent_data = await parent();
let account_id = parent_data.account_id;
let ae_acct = parent_data[account_id];
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
// let ae_params = {};
if (browser) {
}
parent_data[account_id] = ae_acct;
return parent_data;
}

82
src/routes/(notes)/notes/+layout.ts Normal file
View File

@@ -0,0 +1,82 @@
/** @type {import('./$types').LayoutLoad} */
console.log(`ae_notes +layout.ts start`);
// Imports
import { browser } from '$app/environment';
import { notes_func } from '$lib/ae_notes/ae_notes_functions';
export async function load({ params, parent }) {
let log_lvl: number = 0;
let data = await parent();
// console.log(`ae_notes +layout.ts data:`, data);
let account_id = data.account_id;
if (!account_id) {
console.log(`notes +layout.ts: The account_id was not found in the data!!!`);
return false;
}
let ae_acct = data[account_id];
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
let note_id = ae_acct.slct.note_id; // From root +layout.ts
if (!note_id) {
console.log(`ERROR: notes +layout.ts: The note_id was not found in the data!!!`);
// return false;
}
let ae_params = {};
if (browser) {
if (note_id) {
let load_note_obj_li = notes_func.load_ae_obj_li__note({
api_cfg: ae_acct.api,
for_obj_type: 'account',
for_obj_id: account_id,
enabled: 'enabled',
hidden: 'not_hidden',
limit: 20,
// order_by_li: {},
params: ae_params,
try_cache: true,
log_lvl: log_lvl
});
ae_acct.slct.note_obj_li = load_note_obj_li;
}
}
// let load_note_obj = notes_func.load_ae_obj_id__note({
// api_cfg: ae_acct.api,
// note_id: note_id,
// try_cache: false
// });
// ae_acct.slct.note_obj = load_note_obj;
// if (browser) {
// console.log(`Browser: ${browser}`);
// notes_func.db_save_ae_obj_li__note({
// obj_type: 'note',
// obj_li: [load_note_obj_li],
// });
// }
// let submenu = {
// main: {name: 'Main', href: '/notes', access: false},
// // manage: {name: 'Manage', href: '/notes/manage', access: 'administrator', disable: true, hide: true},
// locations: {name: 'Locations', href: `/notes/${note_id}/locations`, access: false, disable: false, hide: false},
// };
// data.submenu = submenu
// WARNING: Precaution against shared data between sites and sessions.
data[account_id] = ae_acct;
return data;
}
// export const prerender = false;
// export const prerender = true;

98
src/routes/(notes)/notes/+layout@(notes).svelte Normal file
View File

@@ -0,0 +1,98 @@
<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let { data, children } = $props();
// Imports
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_notes/ae_notes_stores';
// import { notes_func } from '$lib/ae_notes/ae_notes_functions';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
$notes_loc.qry__enabled = 'enabled';
$notes_loc.qry__hidden = 'not_hidden';
$notes_loc.qry__limit = 15;
$notes_loc.qry__offset = 0;
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);
// if (browser) {
// console.log(`Browser: ${browser}`);
// notes_func.handle_db_save_ae_obj_li__note({
// obj_type: 'note',
// obj_li: [ae_acct.slct.note_obj_li],
// });
// }
$notes_slct.note_id = ae_acct.slct.note_id;
// $notes_slct.note_obj = ae_acct.slct.note_obj;
$notes_slct.note_obj_li = ae_acct.slct.note_obj_li;
let ae_promises: key_val = {};
if (browser) {
console.log('AE Notes: +layout.svelte');
console.log($notes_slct.note_obj_li);
};
</script>
{#if $ae_loc.administrator_access && 1==2}
<section
class="submenu flex flex-row justify-center"
class:hidden={$ae_loc.iframe}
>
<span class="btn-group variant-soft-secondary px-4 py-2">
{#each Object.entries(data.submenu) as [key, item]}
<!-- <a href="/settings/{item.slug}">{item.title}</a> -->
<!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
{#if item.disable}
<button
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
disabled={item.disable}
onclick={() => {
// window.location(item.href);
// href={item.href}
// invalidateAll
goto(item.href, { });
}}
>
{item.name}
</button>
{:else}
<a
href={item.href}
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
class:disabled={item.disable}
>
{item.name}
</a>
{/if}
{/each}
</span>
</section>
{/if}
<div class="container m-auto outline-red-500">
{@render children()}
</div>

37
src/routes/notes/+page.svelte → src/routes/(notes)/notes/+page.svelte
View File

@@ -1,16 +1,20 @@
<script lang="ts">
export let data: any;
// console.log(`ae_notes +page data:`, data);
// console.log(`ae_notes Data Params:`, data.url.searchParams.get('note_id'));
import { onMount } from 'svelte';
import { api } from '$lib/api';
// import { api } from '$lib/api';
import { liveQuery } from "dexie";
import { db_notes } from "$lib/ae_notes/db_notes";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_notes/ae_notes_stores';
// import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_notes/ae_notes_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
interface Props {
data: any;
}
let { data }: Props = $props();
// import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -72,16 +76,7 @@ onMount(() => {
<!-- {$notes_slct.note_obj.name ?? '--'} -->
<!-- ({$notes_slct.note_id}) -->
{#if $ae_loc.administrator_access}
<h3 class="h4">Administrator Access - Technical Support</h3>
<p>You are accessing the notes system with "administrator" level permissions.</p>
{:else if $ae_loc.trusted_access}
<h3 class="h4">Trusted Access - Staff</h3>
<p>You are accessing the notes system with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
<h3 class="h4">Restricted Access</h3>
<p>You are accessing to the notes system is limited</p>
{/if}
<!-- <Element_data_store
ds_code="notes___overview"
@@ -107,15 +102,18 @@ onMount(() => {
{#await ae_acct.slct.note_obj_li}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
<span>Loading...</span>
</div>
{:then}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-check text-green-500 mx-1"></span>
<span>Loaded</span>
</div>
<div class="flex flex-row items-center justify-center">
<span class="fas fa-check text-green-500 mx-1"></span>
<span>Loaded</span>
</div>
{#if ae_acct.slct.note_obj_li && $lq__note_obj_li}
@@ -129,14 +127,13 @@ onMount(() => {
new Date(note_obj.start_datetime).getTime())
>
(new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
|| $ae_loc.trusted_access
}
|| $ae_loc.trusted_access}
<!-- {#if $notes_slct.note_id === note_obj.note_id_random} -->
<a
href="/notes/note/{note_obj.note_id_random}"
class="btn btn-md variant-ghost-primary hover:variant-filled-primary hover:underline"
on:pointerover={() => {
onpointerover={() => {
// When the cursor is hovering we want to set the note_id and note_obj
// $notes_slct.note_id = note_obj.note_id_random;
// $notes_slct.note_obj = note_obj;

0
src/routes/notes/+page.ts → src/routes/(notes)/notes/+page.ts
View File

2
src/routes/+layout.svelte
View File

@@ -378,7 +378,7 @@ $effect(() => {
{/if}
<svelte:head>
<title>{$ae_loc.title ?? 'Æ loading...'}</title>
<!-- <title>{$ae_loc.title ?? 'Æ loading...'}</title> -->
<link rel="stylesheet" href="{ae_acct.loc.site_style_href}">
<!-- <link rel="manifest" href="/manifest.json"> -->
</svelte:head>

163
src/routes/notes/+layout.svelte
View File

@@ -1,163 +0,0 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data: any;
// Imports
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { notes_loc, notes_slct, notes_trigger } from '$lib/ae_notes/ae_notes_stores';
import { notes_func } from '$lib/ae_notes/ae_notes_functions';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
$notes_loc.qry__enabled = 'enabled';
$notes_loc.qry__hidden = 'not_hidden';
$notes_loc.qry__limit = 15;
$notes_loc.qry__offset = 0;
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);
// if (browser) {
// console.log(`Browser: ${browser}`);
// notes_func.handle_db_save_ae_obj_li__note({
// obj_type: 'note',
// obj_li: [ae_acct.slct.note_obj_li],
// });
// }
$notes_slct.note_id = ae_acct.slct.note_id;
// $notes_slct.note_obj = ae_acct.slct.note_obj;
$notes_slct.note_obj_li = ae_acct.slct.note_obj_li;
let ae_promises: key_val = {};
if (browser) {
console.log('AE Notes: +layout.svelte');
console.log($notes_slct.note_obj_li);
};
</script>
<svelte:head>
<title>Notes - {$notes_loc.title ?? 'Æ loading...'}</title>
</svelte:head>
{#if $ae_loc.administrator_access && 1==2}
<section
class="submenu flex flex-row justify-center"
class:hidden={$ae_loc.iframe}
>
<span class="btn-group variant-soft-secondary px-4 py-2">
{#each Object.entries(data.submenu) as [key, item]}
<!-- <a href="/settings/{item.slug}">{item.title}</a> -->
<!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
{#if item.disable}
<button
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
disabled={item.disable}
on:click={() => {
// window.location(item.href);
// href={item.href}
// invalidateAll
goto(item.href, { });
}}
>
{item.name}
</button>
{:else}
<a
href={item.href}
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
class:disabled={item.disable}
>
{item.name}
</a>
{/if}
{/each}
</span>
</section>
{/if}
{#if $ae_loc.ver != '2024-08-16_1821' || $ae_loc.ver_idb != '2024-08-16_1826'}
<div class="flex flex-col items-center justify-center bg-error-100 text-error-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">
<span class="fas fa-exclamation-triangle text-4xl text-error-800"></span>
<h2 class="text-2xl font-bold">New Version Available</h2>
<p class="text-lg max-w-2xl text-center">
There is a new version of the web app (this website). Please use the button to clear some cached data and settings. The page will then reload.
</p>
<button
class="btn btn-xl variant-ghost-success hover:variant-filled-success"
on:click={() => {
// This is not a very efficient way to do this, but it works for now.
// Do this first even if the localStorage will be cleared.
if ($ae_loc.ver_idb != '2024-08-16_1826') {
// Yep... this needs to be done differently.
$ae_loc.ver_idb = '2024-08-16_1826';
}
if ($ae_loc.ver != '2024-08-16_1821') {
alert('You will need to sign in again.')
// 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
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_notes_db');
// 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.');
}}
title="New Version: Clear the browser storage for this page"
>
<!-- <span class="fas fa-eraser mx-1"></span> -->
<span class="fas fa-sync mx-1"></span>
Clear App Data &amp; Settings - Reload
</button>
{#if $ae_loc.ver != '2024-08-07_1504'}
<p class="text-lg font-bold max-w-2xl text-center">
You will need to sign in again after clearing the cache.
</p>
{/if}
<!-- <p>This reload will be done automatically in the future.</p> -->
</div>
{:else}
<!-- <div class="flex flex-col items-center justify-center bg-success-100 text-success-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">Local App Version {$ae_loc.ver}<br>Local App DB Version {$ae_loc.ver_idb}</div> -->
{/if}
<!-- <div class="container m-auto"> -->
<slot></slot>
<!-- </div> -->

74
src/routes/notes/+layout.ts
View File

@@ -1,74 +0,0 @@
/** @type {import('./$types').LayoutLoad} */
console.log(`ae_notes +layout.ts start`);
// Imports
import { browser } from '$app/environment';
import { events_func } from '$lib/ae_events_functions';
export async function load({ parent }) {
let log_lvl: number = 0;
let data = await parent();
// console.log(`ae_events_pres_mgmt +layout.ts data:`, data);
let account_id = data.account_id;
if (!account_id) {
console.log(`events_pres_mgmt +layout.ts: The account_id was not found in the data!!!`);
return false;
}
let ae_acct = data[account_id];
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
let event_id = ae_acct.slct.event_id; // From root +layout.ts
if (!event_id) {
console.log(`ERROR: events_pres_mgmt +layout.ts: The event_id was not found in the data!!!`);
return false;
}
if (browser) {
// Should we limit these to event.conference = true?
let load_event_obj_li = events_func.load_ae_obj_li__event({
api_cfg: ae_acct.api,
account_id: account_id,
params: {enabled: 'enabled', qry__limit: 25},
try_cache: true,
log_lvl: log_lvl
});
ae_acct.slct.event_obj_li = load_event_obj_li;
}
// let load_event_obj = events_func.load_ae_obj_id__event({
// api_cfg: ae_acct.api,
// event_id: event_id,
// try_cache: false
// });
// ae_acct.slct.event_obj = load_event_obj;
// if (browser) {
// console.log(`Browser: ${browser}`);
// events_func.db_save_ae_obj_li__event({
// obj_type: 'event',
// obj_li: [load_event_obj_li],
// });
// }
let submenu = {
main: {name: 'Main', href: '/events_pres_mgmt', access: false},
// manage: {name: 'Manage', href: '/events_pres_mgmt/manage', access: 'administrator', disable: true, hide: true},
locations: {name: 'Locations', href: `/events/${event_id}/locations`, access: false, disable: false, hide: false},
};
data.submenu = submenu
// WARNING: Precaution against shared data between sites and sessions.
data[account_id] = ae_acct;
return data;
}
// export const prerender = false;
// export const prerender = true;