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

Working on update a lot of pages using the ae_loc hub section.

Browse Source
This commit is contained in:
Scott Idem
2025-03-28 14:33:26 -04:00
parent 1059cf5683
commit 8539ccc2f4
21 changed files with 171 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
README_guidelines.md Normal file
View File

@@ -0,0 +1,61 @@
# One Sky IT's Aether App - UI and UX Guidelines and Rules
## General
### Events
#### layout header
#### layout footer
### Journals
#### buttons
##### alert
##### info
##### priority, flag
##### warning, hide
```css
variant-soft-warning hover:variant-filled-warning
```
##### error, delete, disable
```css
variant-soft-error hover:variant-filled-error
```
#### new root layout header
#### submenu
```css
flex flex-row items-center justify-center gap-1
```
#### new layout footer
## Svelte 5 and SvelteKit v2 (framework and routing)
## Tailwind 3.x CSS (styles)
Waiting to upgrade to 4.x when ShadCN is ready. ShadCN is still being worked on as of late March 2025.
* https://ui.shadcn.com/docs/tailwind-v4
## ShadCN (Tailwind Components)
* https://github.com/shadcn-ui/ui
## Skeleton (Design System, Tailwind Components, Functional Components)
## Flowbite (Tailwind Components)
## Lucide Icons (SVG Icons)
* https://lucide.dev/icons/
## Markdown
Using marked for Markdown parsing.
* https://marked.js.org/
## Edra (TipTap based Rich Text Editor)
* https://edra.tsuzat.com/

10
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "ae-app-svelte5",
"version": "0.2.4",
"version": "0.2.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ae-app-svelte5",
"version": "0.2.4",
"version": "0.2.6",
"dependencies": {
"@floating-ui/dom": "^1.6.0",
"@lucide/svelte": "^0.483.0",
@@ -4319,9 +4319,9 @@
}
},
"node_modules/immutable": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
"integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.0.tgz",
"integrity": "sha512-L3LqPjnn4+m1ZNFBXo9QdXQhbfLwmcd+6IttT5hn821zDelhfaGLsVIEXJX0M5vJwc3NzA7zm1p5bFo8kDfn8A==",
"dev": true,
"license": "MIT"
},

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ae-app-svelte5",
"version": "0.2.4",
"version": "0.2.6",
"private": true,
"scripts": {
"dev": "vite dev",

2
src/lib/ae_core/ae_core_functions.ts
View File

@@ -84,7 +84,7 @@ async function handle_load_ae_obj_id__site_domain(
let params = {};
// ae_loc.hub.site_domain_id_qry_status = 'loading';
// ae_sess.hub.site_domain_id_qry_status = 'loading';
ae_promises.load__site_domain_obj = api.get_ae_obj_id_crud({
api_cfg: api_cfg,
no_account_id: no_account_id,

22
src/lib/ae_stores.ts
View File

@@ -57,6 +57,8 @@ export let ae_app_local_data_struct: key_val = {
ver_idb: '2024-10-16_1540', // Clear if date IndexedDB version
name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
theme: 'light',
theme_mode: 'light',
theme_name: 'wintry', // wintry
iframe: false,
title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
@@ -112,6 +114,18 @@ export let ae_app_local_data_struct: key_val = {
show_element__sql_qry_results: false,
},
app_cfg: {
show_element__access_type: true,
show_element__cfg: true,
show_element__cfg_detail: false,
show_opt__debug: true,
show_opt__permissions: true,
show_opt__reset: true,
show_opt__sync: true,
show_opt__theme: true,
show_opt__utilities: true,
},
files: {
processed_file_kv: {},
uploaded_file_kv: {},
@@ -233,6 +247,14 @@ export let ae_app_session_data_struct: key_val = {
'hub': {
'show_xyz': null,
'account_id_qry_status': null,
'event_badge_id_status_qry__search': null,
'event_presenter_id_qry_status': null,
'site_domain_id_qry_status': null,
'sponsorship_id_qry_status': null,
'sponsorship_cfg_id_qry_status': null,
'qr': {},
},
'mod': {
'archives': {},

12
src/lib/element_access_type.svelte
View File

@@ -122,14 +122,14 @@ function handle_check_access_type_passcode() {
// WARNING 2024-08-21: For some reason the config element does not auto show or hide when the access type changes.
if (!$ae_loc.iframe && $ae_loc.authenticated_access) {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = true;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__cfg = true;
} else if ($ae_loc.iframe && $ae_loc.trusted_access) {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = true;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__cfg = true;
} else {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__cfg = false;
}
// dispatch_access_type_changed();

24
src/lib/element_app_cfg.svelte
View File

@@ -26,23 +26,23 @@ onMount(() => {
}
});
// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.hub?.theme_mode) {
// console.log(`$ae_loc.hub.theme_mode=${$ae_loc?.hub?.theme_mode}`);
// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
// console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
// $slct_trigger = null;
// if ($ae_loc.hub.theme_mode == 'light') {
// if ($ae_loc.app_cfg.theme_mode == 'light') {
// document.documentElement.classList.remove('dark');
// document.documentElement.classList.add('light');
// } else if ($ae_loc.hub.theme_mode == 'dark') {
// } else if ($ae_loc.app_cfg.theme_mode == 'dark') {
// document.documentElement.classList.remove('light');
// document.documentElement.classList.add('dark');
// }
// }
// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.hub?.theme_name) {
// console.log(`$ae_loc?.hub?.theme_name=${$ae_loc?.hub?.theme_name}`);
// $: if ($slct_trigger == 'set_theme_name' && $ae_loc?.app_cfg?.theme_name) {
// console.log(`$ae_loc?.app_cfg?.theme_name=${$ae_loc?.app_cfg?.theme_name}`);
// $slct_trigger = null;
// // Update the body attribute named "data-theme" to the current theme name.
// document.body.setAttribute('data-theme', $ae_loc?.hub?.theme_name);
// document.body.setAttribute('data-theme', $ae_loc?.app_cfg?.theme_name);
// }
// $: if (entered_passcode && entered_passcode.length >= 5) {
@@ -95,7 +95,7 @@ function handle_clear_storage(item: null|string) {
<div
class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.hub.show_element__cfg_detail}
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
data-sveltekit-preload-data="false"
>
@@ -149,7 +149,7 @@ function handle_clear_storage(item: null|string) {
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
bind:group={$ae_loc.app_cfg.theme_mode}
name="theme_light"
value={'light'}
>
@@ -159,7 +159,7 @@ function handle_clear_storage(item: null|string) {
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
bind:group={$ae_loc.app_cfg.theme_mode}
name="theme_dark"
value={'dark'}
>
@@ -174,7 +174,7 @@ function handle_clear_storage(item: null|string) {
on:change={() => {
$slct_trigger = 'set_theme_name';
}}
bind:value={$ae_loc.hub.theme_name}
bind:value={$ae_loc.app_cfg.theme_name}
class="select"
title="Theme name"
>
@@ -269,7 +269,7 @@ function handle_clear_storage(item: null|string) {
<button
class="btn btn-sm variant-glass-warning ae_cfg_btn hover:transition-all"
on:click={() => {
$ae_loc.hub.show_element__cfg_detail = !$ae_loc.hub.show_element__cfg_detail;
$ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
}}
>
<span class="fas fa-cog mx-1"></span>

29
src/routes/+layout.svelte
View File

@@ -317,8 +317,8 @@ if (browser) {
// document.getElementsByTagName('html')[0].classList.remove('dark');
// document.getElementsByTagName('html')[0].classList.remove('light');
$ae_loc.hub.show_element__access_type = false;
$ae_loc.hub.show_element__cfg = false;
$ae_loc.app_cfg.show_element__access_type = false;
$ae_loc.app_cfg.show_element__cfg = false;
} else if (iframe == 'false') {
$ae_loc.iframe = false;
@@ -328,14 +328,14 @@ if (browser) {
}
if (!$ae_loc.iframe && $ae_loc.trusted_access) {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = true;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__cfg = true;
} else if ($ae_loc.iframe && $ae_loc.manager_access) {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = true;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__cfg = true;
} else {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__cfg = false;
}
@@ -422,20 +422,23 @@ $effect(() => {
{#if $ae_loc.hub?.show_element__access_type}
{#if $ae_loc.app_cfg?.show_element__access_type}
<Element_access_type
hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
/>
{/if}
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.hub?.show_element__cfg}
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg}
>
<!-- {#if $ae_loc?.hub?.show_element__cfg} -->
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
<!-- {/if} -->
<Element_app_cfg
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
<div

2
src/routes/admin/+page.svelte
View File

@@ -139,7 +139,7 @@ onMount(() => {
as_list={true}
/>
{/if}
<!-- {#if $ae_loc.admin.show_element__cfg_detail} -->
<!-- {#if $ae_loc.app_cfg.show_element__cfg_detail} -->

2
src/routes/events_badges/review/+page.svelte
View File

@@ -106,7 +106,7 @@ async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=fal
let params = {};
// $ae_loc.hub.event_badge_id_status_qry__search = 'loading';
// $ae_sess.hub.event_badge_id_status_qry__search = 'loading';
ae_event_badge_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event_badge',

2
src/routes/events_badges/stats/+page.svelte
View File

@@ -113,7 +113,7 @@ async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=fal
let params = {};
// $ae_loc.hub.event_badge_id_status_qry__search = 'loading';
// $ae_sess.hub.event_badge_id_status_qry__search = 'loading';
ae_event_badge_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event_badge',

2
src/routes/events_speakers/+page.svelte
View File

@@ -282,7 +282,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
let params = {};
// $ae_loc.hub.event_presenter_id_qry_status = 'loading';
// $ae_sess.hub.event_presenter_id_qry_status = 'loading';
ae_event_presenter_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event_presenter',

2
src/routes/events_speakers/[slug]/+page.svelte
View File

@@ -179,7 +179,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
let params = {};
// $ae_loc.hub.event_presenter_id_qry_status = 'loading';
// $ae_sess.hub.event_presenter_id_qry_status = 'loading';
ae_event_presenter_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event_presenter',

4
src/routes/idaa/(idaa)/+layout.svelte
View File

@@ -102,8 +102,8 @@ if (browser && iframe == 'true') {
// document.getElementsByTagName('html')[0].classList.remove('dark');
// document.getElementsByTagName('html')[0].classList.remove('light');
// $ae_loc.hub.show_element__access_type = false;
// $ae_loc.hub.show_element__cfg = false;
// $ae_loc.app_cfg.show_element__access_type = false;
// $ae_loc.app_cfg.show_element__cfg = false;
} else if (browser && iframe == 'false') {
// data_struct['iframe'] = false;
$ae_loc.iframe = false;

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

@@ -1,11 +1,15 @@
<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let { data, children } = $props();
// Imports
// *** Import Svelte specific
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import { House } from '@lucide/svelte';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api';
@@ -15,6 +19,13 @@ import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_
// import Element_data_store from '$lib/element_data_store_v2.svelte';
// *** Setup Svelte properties
interface Props {
data: any;
children: any;
}
let { data, children }: Props = $props();
$journals_loc.qry__enabled = 'enabled';
$journals_loc.qry__hidden = 'not_hidden';
$journals_loc.qry__limit = 15;
@@ -57,8 +68,14 @@ if (browser) {
<!-- These are needed: h-full overflow-auto -->
<div class="ae_journals">
<nav class="submenu flex flex-row items-centr justify-center gap-1">
<a href="/" class="btn btn-sm variant-ghost-success hover:variant-filled-success">Home</a>
<nav class="submenu flex flex-row items-center justify-center gap-1">
<a
href="/"
class="btn btn-sm variant-ghost-success hover:variant-filled-success"
>
<House />
Home
</a>
<!-- <a href="/about" class="btn btn-sm">About</a> -->
<!-- <a href="/settings" class="btn btn-sm">Settings</a> -->
<button

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

@@ -92,7 +92,8 @@ async function handle_update_journal() {
class="
ae_journals__journal
container h-full mx-auto
flex flex-col gap-1
flex flex-col
gap-1
py-1 px-2 pb-16
items-center
min-w-full
@@ -101,7 +102,16 @@ async function handle_update_journal() {
>
<div class="flex flex-row items-center justify-between w-full border-gray-200 border-y-2 py-2">
<div
class="
flex flex-row flex-wrap
gap-1
items-center justify-between
border-gray-200 border-y-
w-full
py-2
"
>
<a href="/journals"
class="
btn btn-sm

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

@@ -6,10 +6,9 @@ let log_lvl: number = 0;
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import { BookHeart, FilePlus } from '@lucide/svelte';
// *** Import other supporting libraries
import { Modal } from 'flowbite-svelte';
import { liveQuery } from "dexie";

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

@@ -281,7 +281,7 @@ $effect(() => {
</header>
<div
class="flex flex-row gap-2 items-center justify-evenly w-full max-w-sm"
class="flex flex-row flex-wrap gap-1 items-center justify-evenly w-full max-w-sm"
>
<!-- Entry alert status -->
<button
@@ -591,7 +591,7 @@ $effect(() => {
{@html test_html}
</div> -->
<div class="ae_meta flex flex-row flex-wrap gap-2 items-center justify-between w-full">
<div class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<!-- {$lq__journal_entry_obj?.priority}
{$lq__journal_entry_obj?.sort}
{$lq__journal_entry_obj?.group}

2
src/routes/sponsorships/+page.svelte
View File

@@ -257,7 +257,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
let params = {};
// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
// $ae_sess.hub.sponsorship_id_qry_status = 'loading';
ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship',

4
src/routes/sponsorships/[slug]/+page.svelte
View File

@@ -113,7 +113,7 @@ async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_c
let params = {};
// $ae_loc.hub.sponsorship_cfg_id_qry_status = 'loading';
// $ae_sess.hub.sponsorship_cfg_id_qry_status = 'loading';
ae_sponsorship_cfg_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship_cfg',
@@ -178,7 +178,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
let params = {};
// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
// $ae_sess.hub.sponsorship_id_qry_status = 'loading';
ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship',

2
src/routes/testing/+page.svelte
View File

@@ -35,7 +35,7 @@ async function handle_load_ae_account_obj_id({account_id, try_cache=false}) {
let params = {};
$ae_loc.hub.account_id_qry_status = 'loading';
$ae_sess.hub.account_id_qry_status = 'loading';
ae_account_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'account',