358 lines
9.5 KiB
Svelte
358 lines
9.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
|
|
|
|
import { ae_util } from '$lib/ae_utils/ae_utils';
|
|
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
|
|
|
let notes: null|string = null;
|
|
let all: boolean = false;
|
|
|
|
// export let theme_mode: null|string = null;
|
|
export let set_theme_mode: null|boolean = null;
|
|
// export let theme_name: null|string = null;
|
|
export let set_theme_name: null|boolean = null;
|
|
|
|
// const dispatch = createEventDispatcher();
|
|
|
|
|
|
onMount(() => {
|
|
// console.log('** Element Mounted: ** Element App Config');
|
|
if (set_theme_mode) {
|
|
$slct_trigger = 'set_theme_mode';
|
|
}
|
|
if (set_theme_name) {
|
|
$slct_trigger = 'set_theme_name';
|
|
}
|
|
});
|
|
|
|
// $: 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.app_cfg.theme_mode == 'light') {
|
|
// document.documentElement.classList.remove('dark');
|
|
// document.documentElement.classList.add('light');
|
|
// } 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?.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?.app_cfg?.theme_name);
|
|
// }
|
|
|
|
// $: if (entered_passcode && entered_passcode.length >= 5) {
|
|
// console.log(`entered_passcode=${entered_passcode}`);
|
|
// handle_check_access_type_passcode();
|
|
// }
|
|
|
|
// $: if (trigger && $ae_loc.access_type) {
|
|
// console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
|
|
|
|
// let access_checks_results = ae_util.process_permission_checks($ae_loc.access_type);
|
|
|
|
// $ae_loc = {...$ae_loc, ...access_checks_results};
|
|
// } else if (trigger) {
|
|
// console.log(`$ae_loc.access_type=not set`);
|
|
|
|
// // Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
|
|
// let access_checks_results = ae_util.process_permission_checks('');
|
|
|
|
// $ae_loc = {...$ae_loc, ...access_checks_results};
|
|
// }
|
|
|
|
|
|
function handle_something() {
|
|
// console.log('*** handle_something() ***');
|
|
|
|
}
|
|
|
|
function handle_clear_storage(item: null|string) {
|
|
// console.log('*** handle_clear_storage() ***');
|
|
// window.localStorage.setItem('access_type', 'anonymous');
|
|
// return true;
|
|
}
|
|
|
|
// function dispatch_something_changed() {
|
|
// console.log('*** dispatch_something_changed() ***');
|
|
|
|
// console.log(ae_util);
|
|
// console.log($ae_loc);
|
|
|
|
// dispatch('access_type_changed', {
|
|
// access_type: $ae_loc.access_type
|
|
// });
|
|
// }
|
|
</script>
|
|
|
|
|
|
<!-- 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 text-xs space-y-4 my-4"
|
|
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
|
|
data-sveltekit-preload-data="false"
|
|
>
|
|
|
|
|
|
<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 mx-1"></span> Super Access
|
|
{:else if $ae_loc.access_type == 'manager'}
|
|
<span class="fas fa-user-shield mx-1"></span> Manager Access
|
|
{:else if $ae_loc.access_type == 'administrator'}
|
|
<span class="fas fa-user-ninja mx-1"></span> Administrator Access
|
|
{:else if $ae_loc.access_type == 'trusted'}
|
|
<span class="fas fa-user-nurse mx-1"></span> Trusted Access
|
|
{:else if $ae_loc.access_type == 'authenticated'}
|
|
<span class="fas fa-user-friends mx-1"></span> Authenticated Access
|
|
{:else if $ae_loc.access_type == 'anonymous'}
|
|
<span class="fas fa-users mx-1"></span> Anonymous Access
|
|
{:else}
|
|
<span class="fas fa-unlock mx-1"></span> Unknown Access
|
|
{/if}
|
|
|
|
<!-- <button
|
|
class="btn btn-sm variant-glass-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> -->
|
|
{: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.app_cfg.theme_mode}
|
|
name="theme_light"
|
|
value={'light'}
|
|
>
|
|
Light
|
|
</RadioItem>
|
|
<RadioItem
|
|
on:change={() => {
|
|
$slct_trigger = 'set_theme_mode';
|
|
}}
|
|
bind:group={$ae_loc.app_cfg.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.app_cfg.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
|
|
&
|
|
<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={() => {
|
|
if (!confirm('Are you sure you want to clear the local and session storage?')) {
|
|
return false;
|
|
}
|
|
|
|
// Clear the local and session storage
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
|
|
// Clear Indexed DB as well
|
|
indexedDB.deleteDatabase('ae_core_db');
|
|
indexedDB.deleteDatabase('ae_events_db');
|
|
|
|
window.location.reload();
|
|
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
|
|
}}
|
|
>
|
|
<span class="fas fa-eraser mx-1"></span>
|
|
Clear Storage & DB
|
|
</button>
|
|
</div>
|
|
|
|
</section>
|
|
<!-- END: Utilities -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button
|
|
class="btn btn-sm variant-glass-warning ae_cfg_btn hover:transition-all"
|
|
on:click={() => {
|
|
$ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
|
|
}}
|
|
>
|
|
<span class="fas fa-cog mx-1"></span>
|
|
<span class="cfg_text">Config</span>
|
|
</button>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<style lang="postcss">
|
|
/* BEGIN: AE's Svelte App Config component */
|
|
#AE-App-Cfg {
|
|
/* position: absolute; */
|
|
position: fixed;
|
|
/* position: relative; */
|
|
/* position: static; */
|
|
/* position: sticky; */
|
|
top: 4.5em;
|
|
/* bottom: 9.5rem; */
|
|
left: 0rem;
|
|
|
|
padding: .5rem;
|
|
|
|
/* lightyellow */
|
|
/* background-color: hsla(60,100%,90%,.30); */
|
|
/* background-color: rgba(var(--color-surface-500) / .95); */
|
|
|
|
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: .15;
|
|
/* opacity: 1; */
|
|
|
|
font-size: .75rem;
|
|
|
|
z-index: 5;
|
|
|
|
/* NOTE: transition when no longer hovering */
|
|
transition-property: opacity, background-color;
|
|
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-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-duration: .10s;
|
|
transition-timing-function: ease-in;
|
|
}
|
|
|
|
.ae_cfg_btn .cfg_text {
|
|
display: none;
|
|
}
|
|
|
|
.ae_cfg_btn:hover .cfg_text {
|
|
display: initial;
|
|
/* outline: solid thin red; */
|
|
}
|
|
|
|
/* .access_type .current_text {
|
|
display: none;
|
|
} */
|
|
|
|
/* .access_type:hover .current_text {
|
|
display: initial;
|
|
} */
|
|
/* END: AE's Svelte App Config component */
|
|
</style>
|