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

Work on expanding the routes

Browse Source
This commit is contained in:
Scott Idem
2024-03-04 20:55:48 -05:00
parent 6c60ee3086
commit 19a6ff6dbe
22 changed files with 846 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/ae_stores.ts
View File

@@ -37,9 +37,10 @@ export type key_val = {
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
export let ae_app_local_data_struct: key_val = {
'ver': '2024-03-04_10',
'name': 'Aether App Template',
'name': 'Aether App SvelteKit Template',
'theme': 'light',
'iframe': false,
'title': `OSIT's Æ - Dev SvelteKit`, // Æ
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
'site_domain': null, // https://example.com, https://dev.example.com, etc.

40
src/lib/ae_utils.ts
View File

@@ -415,23 +415,36 @@ export let process_permission_checks = function process_permission_checks(access
// Svelte specific:
// WARNING: Avoid using `history.pushState(...)` and `history.replaceState(...)` as these will conflict with SvelteKit's router. Use the `pushState` and `replaceState` imports from `$app/navigation` instead.
// Updated 2024-03-02
import { pushState, replaceState } from '$app/navigation';
function handle_url_and_message(name: string, value: null|string) {
console.log(`*** handle_url_and_message() *** name=${name} value=${value}`);
let location = window.location.href;
// console.log('location:', location);
const url = new URL(location);
// console.log('url:', url);
if (value) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.set(name, value);
history.pushState({}, '', url);
// console.log('url:', url);
// pushState(url.href, {});
// pushState(url.search, {});
// replaceState(url.href, {});
let message = {name: value};
window.parent.postMessage(message, "*");
} else {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete(name);
history.pushState({}, '', url);
// console.log('url:', url);
// pushState({}, '', url.search);
// pushState(url.href, {});
// replaceState(url.href, {});
let message = {name: null};
window.parent.postMessage(message, "*");
}
@@ -476,6 +489,25 @@ function create_video_element({account_id, base_url, hosted_file_id, filename=nu
}
// // Clear the quick access type
// function clear_access_type() {
// // NOTE: I think it makes since to reset this to anonymous even if logged in as an admin or similar.
// window.localStorage.setItem('access_type', 'anonymous');
// // $ae_loc.access_type = null; // 'anonymous';
// $ae_loc.access_type = 'anonymous';
// trigger = 'process_permission_check';
// show_passcode_input = false;
// // $ae_loc = $ae_loc; // Trigger Svelte just in case
// // ae_loc.set($ae_loc);
// // console.log($ae_loc);
// return true;
// }
export let ae_util = {
iso_datetime_formatter: iso_datetime_formatter,
number_w_commas: number_w_commas,

34
src/lib/element_access_type.svelte
View File

@@ -161,7 +161,7 @@ function dispatch_access_type_changed() {
</script>
<section id="AE-Quick-Access-Type" class="access_type transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
<section id="AE-Quick-Access-Type" class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all hidden-print">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-unlock"></span> Super Access
@@ -232,15 +232,16 @@ function dispatch_access_type_changed() {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.30); */
background-color: rgba(var(--color-surface-500) / .5);
/* background-color: rgba(var(--color-surface-500) / .5); */
border-top: solid thin black;
border-left: solid thin black;
border-bottom: solid thin black;
border-top: solid thin hsla(0,0%,0%,.5);
border-left: solid thin hsla(0,0%,0%,.5);
border-bottom: solid thin hsla(0,0%,0%,.5);
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
opacity: .50;
opacity: .15;
/* opacity: 1; */
font-size: .75rem;
@@ -248,22 +249,27 @@ function dispatch_access_type_changed() {
/* NOTE: transition when no longer hovering */
transition-property: opacity, background-color;
transition-delay: .1s;
transition-duration: .4s;
transition-timing-function: linear;
transition-delay: 1.25s;
transition-duration: .5s;
transition-timing-function: ease-out;
}
#AE-Quick-Access-Type:hover {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */
background-color: rgba(var(--color-surface-500) / 1);
/* background-color: rgba(var(--color-surface-500) / 1); */
border-top: solid thin hsla(0,0%,0%,.95);
border-left: solid thin hsla(0,0%,0%,.95);
border-bottom: solid thin hsla(0,0%,0%,.95);
opacity: 1;
/* NOTE: transition when hover starts */
transition-property: opacity, background-color;
/* transition-delay: .5s; */
transition-delay: .5s;
transition-duration: .10s;
transition-timing-function: linear;
transition-timing-function: ease-in;
}
/* #Access-Type .unlock_text {
@@ -280,11 +286,11 @@ function dispatch_access_type_changed() {
/* outline: solid thin red; */
}
.access_type .current_text {
.ae_access_type .current_text {
display: none;
}
.access_type:hover .current_text {
.ae_access_type:hover .current_text {
display: initial;
/* outline: solid thin red; */
}

261
src/lib/element_app_cfg.svelte
View File

@@ -90,100 +90,173 @@ function dispatch_something_changed() {
</script>
<section id="AE-App-Cfg" class="ae_app_cfg transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
<section id="AE-App-Cfg" class="ae_app_cfg bg-surface-100 text-surface-800 transition hover:transition-all hidden-print">
<div
class="ae_cfg_content"
class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.hub.show_element__cfg_detail}
data-sveltekit-preload-data="false"
>
<div>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users"></span> Anonymous Access
{:else}
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
<button
class="btn btn-sm variant-soft-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock
</button>
<section class="space-y-2">
<div>
<h2 class="strong">Access Type:</h2>
<div>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users"></span> Anonymous Access
{:else}
Not logged in
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
</div>
<div>
Theme:
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-soft"
hover="hover:variant-ringed-primary"
>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
on:change={() => {
$slct_trigger = 'set_theme_name';
<!-- <button
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
bind:value={$ae_loc.hub.theme_name}
class="select"
title="Theme name"
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</div>
<span class="fas fa-lock mx-1"></span> Lock
</button> -->
{:else}
Not logged in
{/if}
</section>
<!-- END: Access Type -->
<section class="space-y-2">
<h2 class="strong">Theme:</h2>
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-glass-success"
hover="hover:variant-ringed-surface"
>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
on:change={() => {
$slct_trigger = 'set_theme_name';
}}
bind:value={$ae_loc.hub.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</section>
<!-- END: Theme -->
<section class="space-y-2">
<h2 class="strong">Utilities:</h2>
<a
class="btn btn-sm variant-glass-secondary"
href="/hosted_files"
>
<span class="fas fa-code mx-1"></span>
Util: Convert Videos
</a>
{#if $ae_loc.iframe}
<a
class="btn btn-sm variant-glass-secondary"
href="/?iframe=false"
>
<span class="fas fa-code mx-1"></span>
Exit iframe Mode
</a>
{:else}
<a
class="btn btn-sm variant-glass-secondary"
href="/?iframe=true"
>
<span class="fas fa-code mx-1"></span>
Use iframe Mode
</a>
{/if}
<div>
<button
class="btn btn-sm variant-glass-warning"
title="Reload and clear the page cache"
on:click={() => {
// $ae_loc.
window.location.reload(true);
}}
>
<span class="fas fa-sync mx-1"></span>
Reload and
<span class="fas fa-trash mx-1"></span>
Clear Cache
</button>
<button
class="btn btn-sm variant-glass-warning"
title="Clear the browser storage for this page"
on:click={() => {
// $ae_loc.
localStorage.clear();
sessionStorage.clear();
alert('Local and Session Storage cleared. You will probably want to refresh the page.');
}}
>
<span class="fas fa-eraser mx-1"></span>
Clear Storage
</button>
</div>
</section>
<!-- END: Utilities -->
</div>
<button
class="btn btn-sm ae_cfg_btn hover:transition-all"
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;
}}
@@ -192,6 +265,7 @@ function dispatch_something_changed() {
<span class="cfg_text">Config</span>
</button>
</section>
@@ -211,15 +285,16 @@ function dispatch_something_changed() {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.30); */
background-color: rgba(var(--color-surface-500) / .5);
/* background-color: rgba(var(--color-surface-500) / .95); */
border-top: solid thin black;
border-right: solid thin black;
border-bottom: solid thin black;
border-top: solid thin hsla(0,0%,0%,.5);
border-right: solid thin hsla(0,0%,0%,.5);
border-bottom: solid thin hsla(0,0%,0%,.5);
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
opacity: .50;
opacity: .15;
/* opacity: 1; */
font-size: .75rem;
@@ -227,22 +302,28 @@ function dispatch_something_changed() {
/* NOTE: transition when no longer hovering */
transition-property: opacity, background-color;
transition-delay: .1s;
transition-duration: .4s;
transition-timing-function: linear;
transition-delay: 1.25s;
transition-duration: .5s;
transition-timing-function: ease-out;
}
#AE-App-Cfg:hover {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */
background-color: rgba(var(--color-surface-500) / 1);
/* background-color: rgba(var(--color-surface-100) / 1); */
/* color: black; */
border-top: solid thin hsla(0,0%,0%,.95);
border-right: solid thin hsla(0,0%,0%,.95);
border-bottom: solid thin hsla(0,0%,0%,.95);
opacity: 1;
/* NOTE: transition when hover starts */
transition-property: opacity, background-color;
/* transition-delay: .5s; */
transition-delay: .5s;
transition-duration: .10s;
transition-timing-function: linear;
transition-timing-function: ease-in;
}
.ae_cfg_btn .cfg_text {