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

Adding a new notes module I guess. Because why not.

Browse Source
This commit is contained in:
Scott Idem
2024-08-20 21:00:03 -04:00
parent 5139a706d0
commit d8edd658b0
8 changed files with 693 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/ae_notes_functions.ts Normal file
View File

@@ -0,0 +1,14 @@
// This file is used to export all the functions that are used for Aether Events related functions.
// import {
// handle_load_ae_obj_id__note,
// handle_load_ae_obj_li__note,
// handle_db_save_ae_obj_li__note,
// } from "$lib/ae_notes__note";
let export_obj = {
// handle_load_ae_obj_id__note: handle_load_ae_obj_id__note,
};
export let notes_func = export_obj;

70
src/lib/ae_notes_stores.ts Normal file
View File

@@ -0,0 +1,70 @@
import { localStorageStore } from '@skeletonlabs/skeleton';
import { writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
import type { key_val } from '$lib/ae_stores';
/* *** BEGIN *** Initialize notes_local_data_struct */
// This is for longer term or sticky app data. This should be stored to *local* storage.
// Updated 2024-08-20
let notes_local_data_struct: key_val = {
ver: '2024-08-20_19',
// Shared
name: 'Aether - Notes (SvelteKit 2.x Svelte 4.x)',
title: `OSIT's Æ Notes`, // Æ
mode__edit: false,
mode__debug: false,
};
// console.log(`AE Stores - App Notes Local Storage Data:`, notes_local_data_struct);
// This works and uses *local* storage:
export let notes_loc: Writable<key_val> = localStorageStore('ae_notes_loc', notes_local_data_struct);
// console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
/* *** BEGIN *** Initialize notes_session_data_struct */
// Temporary app data. This is lost if the page is refreshed or using different tabs/windows. This should be stored to *session* storage.
// Updated 2024-08-20
let notes_session_data_struct: key_val = {
ver: '2024-08-20_19',
log_lvl: 1,
// Shared Triggers
trigger: null,
trigger__note_id: null,
// trigger__note_li: null,
};
// console.log(`AE Stores - App Notes Session Storage Data:`, notes_session_data_struct);
export let notes_sess = writable(notes_session_data_struct);
/* *** BEGIN *** Initialize notes_slct and notes_trigger */
/* The slct and slct_trigger variable should not be stored in local storage. Only use session storage because browser tabs can be open to different notes, badges, exhibits, etc. */
// Intended for temporary session storage.
// Updated 2024-08-20
let notes_slct_obj_template: key_val = {
// Top level
'note_id': null,
'note_obj': {},
'note_obj_li': [],
'lq__note_obj': {}, // Testing passing a LiveQuery object around...
};
// console.log(`AE Stores - Selected Notes Objects:`, notes_slct_obj_template);
// This works, and uses *session* (not local) storage:
export let notes_slct = writable(notes_slct_obj_template);
/* *** BEGIN *** Initialize notes_trigger */
// Intended for temporary session storage.
// Updated 2024-08-20
export let notes_trigger: any = writable(null);
// console.log(`AE Notes Stores - Notes Trigger:`, notes_trigger);

3
src/lib/db_events.ts
View File

@@ -1,7 +1,6 @@
import Dexie, { type Table } from 'dexie';
import type { list } from 'postcss';
import type { key_val } from './ae_stores';
import type { o } from 'vitest/dist/reporters-B7ebVMkT.js';
// li = list
// kv = key value list

147
src/lib/db_notes.ts Normal file
View File

@@ -0,0 +1,147 @@
import Dexie, { type Table } from 'dexie';
import type { key_val } from './ae_stores';
// li = list
// kv = key value list
// json = JSON string
// ux = user experience (mode)
// LLM = Large Language Model (AI)
// Updated 2024-08-20
export interface Note {
id: string; // actually "id_random"
note_id: string;
// Essentially this is a change log of notes
snapshot_id: string; // This is the original note ID. If deleted, then delete all children notes.
previous_id?: null|string; // This is the old or parent note ID
next_id?: null|string; // This is the new or child note ID
external_id?: null|string;
import_id?: null|string;
code?: null|string;
for_type?: null|string;
for_id?: null|string;
type_code?: null|string;
account_id?: null|string; // Owner account of the note
person_id?: null|string; // Owner person of the note
event_id: null|string; // Assign to an event???
location_id?: null|string; // Assign to a location???
name: string; // or the title
summary?: null|string; // LLM (AI) generated summary...???
outline?: null|string; // LLM (AI) generated outline...???
note?: null|string;
note_html?: null|string;
note_json?: null|string;
start_datetime?: null|Date;
end_datetime?: null|Date;
timezone?: null|string;
hide_event_launcher?: null|boolean;
alert?: null|boolean; // LLM (AI) generated summary...???
alert_msg?: null|string; // LLM (AI) generated summary...???
data_json?: null|string; // We always need to store something extra...
ux_mode?: null|string; // 'mobile' or 'desktop'
// This only allows for basic access to the content.
passcode_read?: null|string; // For LLM (AI) generated summary...???
passcode_read_expire?: null|Date;
passcode_write?: null|string;
passcode_write_expire?: null|Date
enable: null|boolean;
hide: null|boolean;
priority: null|boolean
sort: null|number;
group: null|string;
notes: null|string;
created_on: Date;
updated_on: null|Date;
// Additional fields for convenience (database views)
file_count?: null|number; // Only files directly under a note
note_file_id_li_json?: null|string;
// One person
person__given_name?: null|string;
person__family_name?: null|string;
person__full_name?: null|string;
person__primary_email?: null|string;
person__passcode?: null|string;
// JSON formatted key value pairs for multiple people: {id: name, email, etc.}
person__kv_json?: null|string;
note_name?: null|string;
note_location_code?: null|string;
note_location_name?: null|string;
// A key value list of the presentations
note_presentation_kv?: null|key_val;
note_presentation_li?: null|list;
// A key value list of the files
note_file_kv?: null|key_val;
note_file_li?: null|list;
// Future standard fields!!!
obj_id?: null|string;
obj_ext_uid?: null|string; // Probably not needed for notes
obj_ext_id?: null|string; // Probably not needed for notes
obj_import_id?: null|string; // Probably not needed for notes
obj_code?: null|string;
obj_account_id?: null|string;
obj_passcode?: null|string;
obj_type?: null|string; // Should always be 'note' in this case
obj_type_ver_id?: null|string; // The ID from the table for the object type
obj_name?: null|string;
obj_summary?: null|string; // LLM (AI) generated summary...???
obj_outline?: null|string; // LLM (AI) generated outline...???
obj_description?: null|string; // Probably not needed for notes
obj_enable?: null|boolean;
obj_enable_on?: null|Date;
obj_archive_on?: null|Date;
obj_hide?: null|boolean;
obj_priority?: null|number;
obj_sort?: null|number;
obj_group?: null|string;
obj_cfg_json?: null|string;
obj_notes?: null|string; // Not the same as the "note" in the object type named "Note".
obj_created_on?: Date;
obj_updated_on?: null|Date;
}
// Updated 2024-06-10
export class MySubClassedDexie extends Dexie {
// We just tell the typing system this is the case
notes!: Table<Note>;
constructor() {
super('ae_notes_db');
this.version(1).stores({
notes: `
id, note_id, note_id_random,
code,
account_id, account_id_random,
conference, type,
name,
start_datetime, end_datetime,
timezone,
cfg_json,
enable, hide, priority, sort, group, notes, created_on, updated_on`,
});
}
}
export const db_notes = new MySubClassedDexie();

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

@@ -0,0 +1,163 @@
<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';
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_stores';
import { notes_func } from '$lib/ae_notes_functions';
// import Element_data_store from '$lib/element_data_store.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 Normal file
View File

@@ -0,0 +1,74 @@
/** @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 = 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.handle_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.handle_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.handle_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_pres_mgmt/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;

186
src/routes/notes/+page.svelte Normal file
View File

@@ -0,0 +1,186 @@
<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 { liveQuery } from "dexie";
import { db_notes } from "$lib/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_stores';
import { ae_util } from '$lib/ae_utils';
// import Element_data_store from '$lib/element_data_store.svelte';
let ae_acct = data[$slct.account_id];
// $notes_slct.note_obj = ae_acct.slct.note_obj;
// $notes_slct.note_obj_li = ae_acct.slct.note_obj_li;
let lq__note_obj_li = liveQuery(
() => db_notes.notes
.orderBy('start_datetime')
.reverse()
.toArray()
// .sortBy('start_datetime')
// () => db_notes.notes
// .where('conference')
// // .aboveOrEqual(0)
// .equals('true')
// // .above(0)
// .sortBy('name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
// // .sortBy('[priority+name]')
// // .orderBy('name')
// // .offset(10).limit(5)
// // .toArray()
);
// console.log(`lq__note_obj_li:`, $lq__note_obj_li);
let lq__note_obj = liveQuery(
async () => db_notes.notes
.where('id')
.equals(ae_acct.slct.note_id)
.toArray()
// .first()
// .get($notes_slct.note_id)
);
onMount(() => {
console.log('Events - Presentation Management: +page.svelte');
console.log('ae_ slct:', $slct);
let href_url = window.location.href;
// console.log(href_url);
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
console.log(`lq__note_obj = `, $lq__note_obj);
// $notes_slct.note_obj = db_notes.notes.get($notes_slct.note_id);
// console.log(`$notes_slct.note_obj = `, $notes_slct.note_obj?.name);
});
</script>
<section class="ae_notes md:container h-full mx-auto">
<h2 class="h3">Notes for {$ae_loc.account_name ?? 'Æ loading...'}</h2>
<!-- {$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"
ds_type="html"
for_type="note"
for_id={$notes_slct.note_id}
display="block"
class_li="p-2"
/> -->
<!-- <Element_data_store
ds_code="notes___example"
ds_type="html"
for_type="note"
for_id={$notes_slct.note_id}
ds_name="Default: Events - Notes Example"
store="local"
display="block"
class_li="variant-ghost-surface p-2"
try_cache={true}
show_edit={false}
/> -->
{#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>
{#if ae_acct.slct.note_obj_li && $lq__note_obj_li}
<ul
class="space-y-2"
>
{#each $lq__note_obj_li as note_obj}
<li>
<!-- We do not want to show notes more than 8 months old. -->
{#if (
new Date(note_obj.start_datetime).getTime())
>
(new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
|| $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={() => {
// 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;
}}
>
{ae_util.iso_datetime_formatter(note_obj.start_datetime, 'date_long')}
-
{note_obj.name}
</a>
{:else}
<button
disabled
class="btn btn-md variant-ghost-surface"
>
{ae_util.iso_datetime_formatter(note_obj.start_datetime, 'date_long')}
-
{note_obj.name}
</button>
{/if}
{#if $ae_loc.trusted_access}
<a
data-sveltekit-reload
href="/note/{note_obj.note_id_random}"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning hover:underline"
>
Manage
</a>
{/if}
</li>
{/each}
</ul>
{/if}
{:catch error}
<div class="text-red-800">
<span class="fas fa-exclamation-triangle text-xl"></span>
<span>Error: {error.message}</span>
</div>
{/await}
</section>
<style lang="postcss">
</style>

38
src/routes/notes/+page.ts Normal file
View File

@@ -0,0 +1,38 @@
/** @type {import('./$types').PageLoad} */
import { error } from '@sveltejs/kit';
import { notes_func } from '$lib/ae_notes_functions';
export async function load({ parent }) {
let log_lvl = 0;
let data = await parent();
// let account_id = data.account_id;
// if (!account_id) {
// console.log(`ae_notes +page.ts: The account_id was not found in the data!!!`);
// error(500, {
// message: 'Not found'
// });
// }
// let ae_acct = data[account_id];
// Should we limit these to note.conference = true?
// let load_note_obj_li = await notes_func.handle_load_ae_obj_li__note({
// api_cfg: ae_acct.api,
// account_id: account_id,
// params: {enabled: 'enabled', qry__limit: 25},
// try_cache: false,
// log_lvl: 1
// });
// ae_acct.slct.note_obj_li = load_note_obj_li;
// data[account_id] = ae_acct;
return data;
// return {
// ae_notes_page_ts: true,
// };
}