feat: Migrate ESLint to flat config and resolve initial linting errors
Migrated the ESLint configuration to the new flat config format () and addressed several initial linting errors. Key changes include: - Updated ESLint configuration to treat as warnings instead of errors. - Fixed errors in by declaring and . - Corrected error in by using instead of an out-of-scope . - Resolved error in by replacing the undefined directive with the component. - Addressed errors in by replacing with and with . - Fixed errors in by importing necessary modules (, , ) and adding missing props (, , , , ).
This commit is contained in:
Scott Idem
@@ -1,27 +1,25 @@
|
||||
<script lang="ts">
|
||||
export let log_lvl: number = 0;
|
||||
export let log_lvl: number = 0;
|
||||
|
||||
export let site_google_tracking_id: string = '';
|
||||
if (log_lvl) {
|
||||
console.log(`AE Analytics: site_google_tracking_id = `, site_google_tracking_id);
|
||||
}
|
||||
export let site_google_tracking_id: string = '';
|
||||
if (log_lvl) {
|
||||
console.log(`AE Analytics: site_google_tracking_id = `, site_google_tracking_id);
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function gtag(): void {
|
||||
window.dataLayer.push(arguments);
|
||||
};
|
||||
window.gtag('js', new Date());
|
||||
window.gtag('config', site_google_tracking_id);
|
||||
if (log_lvl) {
|
||||
console.log(`AE Analytics: Google Analytics Tracking ID = `, site_google_tracking_id);
|
||||
}
|
||||
}
|
||||
if (typeof window !== 'undefined') {
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.gtag = function gtag(): void {
|
||||
window.dataLayer.push(arguments);
|
||||
};
|
||||
window.gtag('js', new Date());
|
||||
window.gtag('config', site_google_tracking_id);
|
||||
if (log_lvl) {
|
||||
console.log(`AE Analytics: Google Analytics Tracking ID = `, site_google_tracking_id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id={site_google_tracking_id}">
|
||||
</script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id={site_google_tracking_id}">
|
||||
</script>
|
||||
</svelte:head>
|
||||
|
||||
@@ -1,286 +1,299 @@
|
||||
<script lang="ts">
|
||||
// *** Import Svelte specific
|
||||
import { onDestroy, onMount, tick } from 'svelte';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
// import { liveQuery } from "dexie";
|
||||
import {
|
||||
ShieldEllipsis,
|
||||
ShieldMinus,
|
||||
ShieldPlus,
|
||||
ShieldUser,
|
||||
User,
|
||||
UserCheck
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
// import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
// Ideally the Event related stores should not be imported here?
|
||||
import { events_loc } from '$lib/stores/ae_events_stores';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
|
||||
// export let hidden: boolean = false;
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null | boolean;
|
||||
focus_input: boolean;
|
||||
expand?: boolean;
|
||||
show_passcode_input: boolean;
|
||||
trigger_clear_access: null | boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
focus_input = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
show_passcode_input = $bindable(false),
|
||||
trigger_clear_access = $bindable(null)
|
||||
}: Props = $props();
|
||||
|
||||
let entered_passcode: null | string = $state(null);
|
||||
let checked_passcode: null | string = $state(null);
|
||||
// let password_checked: boolean = $state(false);
|
||||
// let entered_passcode: null|string = '';
|
||||
// let show_passcode_input: boolean = $state(false);
|
||||
// let show_passcode_input: boolean = false;
|
||||
|
||||
// let trigger: null|string|boolean = null;
|
||||
let trigger: null | string | boolean = $state(null);
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
// WARNING: There is a bug (I think) around here related to the entered_passcode not being cleared. There seems to be something different about how Svelte handles state in this component compared to the others. This might be related to the `$effect` or `$derived` usage. Maybe there are conflicting things trying to update the $ae_loc store at the same time.
|
||||
onMount(() => {
|
||||
log_lvl = 2;
|
||||
if (log_lvl > 1) {
|
||||
console.log('** Element Mounted: ** Element Access Type');
|
||||
}
|
||||
entered_passcode = '';
|
||||
trigger = null;
|
||||
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (log_lvl > 1) {
|
||||
console.log('** Element Destroyed: ** Element Access Type');
|
||||
}
|
||||
|
||||
// Clean up any references or listeners if needed
|
||||
entered_passcode = null; // Clear the entered passcode
|
||||
show_passcode_input = false;
|
||||
|
||||
// Reset trigger
|
||||
trigger = null;
|
||||
});
|
||||
|
||||
// afterNavigate(() => {
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
// });
|
||||
|
||||
$effect(() => {
|
||||
if (entered_passcode && entered_passcode.length >= 5 && entered_passcode != checked_passcode) {
|
||||
checked_passcode = entered_passcode;
|
||||
if (log_lvl) {
|
||||
console.log(`entered_passcode=${entered_passcode}`);
|
||||
}
|
||||
handle_check_access_type_passcode();
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (trigger && $ae_loc.access_type) {
|
||||
trigger = false;
|
||||
if (log_lvl) {
|
||||
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 };
|
||||
$ae_loc = $ae_loc;
|
||||
$ae_loc.sys_menu.expand = false;
|
||||
} else if (trigger) {
|
||||
trigger = false;
|
||||
if (log_lvl) {
|
||||
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 };
|
||||
$ae_loc = $ae_loc;
|
||||
}
|
||||
});
|
||||
|
||||
// This does not seem to work. I feel like it should though...?
|
||||
$effect(() => {
|
||||
if (!hide && focus_input) {
|
||||
focus_input = false;
|
||||
log_lvl = 2;
|
||||
// await tick();
|
||||
// document.getElementById('access_passcode_input')?.focus();
|
||||
if (log_lvl > 1) {
|
||||
console.log('Effect: Setting focus on the passcode input field');
|
||||
}
|
||||
/** @type {HTMLElement | null} */
|
||||
const to_focus = document.getElementById('access_passcode_input');
|
||||
to_focus?.focus();
|
||||
}
|
||||
});
|
||||
|
||||
$effect(async () => {
|
||||
if (trigger_clear_access) {
|
||||
trigger_clear_access = false;
|
||||
if (log_lvl) {
|
||||
console.log(`trigger_clear_access=${trigger_clear_access}`);
|
||||
}
|
||||
handle_clear_access();
|
||||
}
|
||||
});
|
||||
|
||||
function handle_check_access_type_passcode() {
|
||||
if (log_lvl > 1) {
|
||||
console.log(
|
||||
`*** handle_check_access_type_passcode() *** passcode list:`,
|
||||
$ae_loc.site_access_code_kv
|
||||
);
|
||||
}
|
||||
|
||||
// Reminder: super > manager > administrator > trusted > public > authenticated > anonymous
|
||||
|
||||
if (entered_passcode && entered_passcode.length >= 5) {
|
||||
if (
|
||||
$ae_loc.site_access_code_kv.super.length >= 8 &&
|
||||
$ae_loc.site_access_code_kv.super == entered_passcode
|
||||
) {
|
||||
console.log('Super passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'super');
|
||||
|
||||
$ae_loc.access_type = 'super';
|
||||
} else if (
|
||||
$ae_loc.site_access_code_kv.manager.length >= 5 &&
|
||||
$ae_loc.site_access_code_kv.manager == entered_passcode
|
||||
) {
|
||||
console.log('Manager passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'manager');
|
||||
|
||||
$ae_loc.access_type = 'manager';
|
||||
} else if (
|
||||
$ae_loc.site_access_code_kv.administrator.length >= 5 &&
|
||||
$ae_loc.site_access_code_kv.administrator == entered_passcode
|
||||
) {
|
||||
console.log('Administrator passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'administrator');
|
||||
|
||||
$ae_loc.access_type = 'administrator';
|
||||
} else if (
|
||||
$ae_loc.site_access_code_kv.trusted.length >= 5 &&
|
||||
$ae_loc.site_access_code_kv.trusted == entered_passcode
|
||||
) {
|
||||
console.log('Trusted passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'trusted');
|
||||
|
||||
$ae_loc.access_type = 'trusted';
|
||||
} else if (
|
||||
$ae_loc.site_access_code_kv.public.length >= 5 &&
|
||||
$ae_loc.site_access_code_kv.public == entered_passcode
|
||||
) {
|
||||
console.log('Public passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'public');
|
||||
|
||||
$ae_loc.access_type = 'public';
|
||||
} else if ($ae_loc.site_access_code_kv.authenticated == entered_passcode) {
|
||||
console.log('Authenticated passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'authenticated');
|
||||
|
||||
$ae_loc.access_type = 'authenticated';
|
||||
} else {
|
||||
if (log_lvl > 1) {
|
||||
console.log('Entered passcode does not match any of the site access codes.');
|
||||
}
|
||||
|
||||
if ($ae_loc.access_type != 'anonymous') {
|
||||
console.log('Access type is not anonymous');
|
||||
}
|
||||
// window.localStorage.setItem('access_type', 'anonymous');
|
||||
|
||||
// $ae_loc.access_type = 'anonymous';
|
||||
|
||||
// trigger = 'process_permission_check';
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
// ae_loc.set($ae_loc);
|
||||
// console.log($ae_loc);
|
||||
|
||||
// dispatch_access_type_changed();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
entered_passcode = '';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
$ae_loc.app_cfg.show_element__menu = false;
|
||||
$ae_loc.app_cfg.show_element__menu_btn = true;
|
||||
|
||||
// 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.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.app_cfg.show_element__access_type = true;
|
||||
$ae_loc.app_cfg.show_element__cfg = true;
|
||||
} else {
|
||||
$ae_loc.app_cfg.show_element__access_type = true;
|
||||
$ae_loc.app_cfg.show_element__cfg = false;
|
||||
}
|
||||
|
||||
// *** Import Svelte specific
|
||||
import { onDestroy, onMount, tick } from 'svelte';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
// import { liveQuery } from "dexie";
|
||||
import {
|
||||
ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||
User, UserCheck
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
// import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
// Ideally the Event related stores should not be imported here?
|
||||
import { events_loc } from '$lib/stores/ae_events_stores';
|
||||
// import { db_events } from "$lib/db_events";
|
||||
|
||||
// export let hidden: boolean = false;
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null|boolean;
|
||||
focus_input: boolean;
|
||||
expand?: boolean;
|
||||
show_passcode_input: boolean;
|
||||
trigger_clear_access: null|boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
focus_input = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
show_passcode_input = $bindable(false),
|
||||
trigger_clear_access = $bindable(null),
|
||||
}: Props = $props();
|
||||
|
||||
|
||||
let entered_passcode: null|string = $state(null);
|
||||
let checked_passcode: null|string = $state(null);
|
||||
// let password_checked: boolean = $state(false);
|
||||
// let entered_passcode: null|string = '';
|
||||
// let show_passcode_input: boolean = $state(false);
|
||||
// let show_passcode_input: boolean = false;
|
||||
|
||||
// let trigger: null|string|boolean = null;
|
||||
let trigger: null|string|boolean = $state(null);
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
// WARNING: There is a bug (I think) around here related to the entered_passcode not being cleared. There seems to be something different about how Svelte handles state in this component compared to the others. This might be related to the `$effect` or `$derived` usage. Maybe there are conflicting things trying to update the $ae_loc store at the same time.
|
||||
onMount(() => {
|
||||
log_lvl = 2;
|
||||
if (log_lvl > 1) {
|
||||
console.log('** Element Mounted: ** Element Access Type');
|
||||
}
|
||||
entered_passcode = '';
|
||||
trigger = null;
|
||||
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (log_lvl > 1) {
|
||||
console.log('** Element Destroyed: ** Element Access Type');
|
||||
}
|
||||
|
||||
// Clean up any references or listeners if needed
|
||||
entered_passcode = null; // Clear the entered passcode
|
||||
show_passcode_input = false;
|
||||
|
||||
// Reset trigger
|
||||
trigger = null;
|
||||
});
|
||||
|
||||
|
||||
// afterNavigate(() => {
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
// });
|
||||
|
||||
$effect(() => {
|
||||
if (entered_passcode && entered_passcode.length >= 5 && entered_passcode != checked_passcode) {
|
||||
checked_passcode = entered_passcode;
|
||||
if (log_lvl) {
|
||||
console.log(`entered_passcode=${entered_passcode}`);
|
||||
}
|
||||
handle_check_access_type_passcode();
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (trigger && $ae_loc.access_type) {
|
||||
trigger = false;
|
||||
if (log_lvl) {
|
||||
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};
|
||||
$ae_loc = $ae_loc;
|
||||
$ae_loc.sys_menu.expand = false;
|
||||
} else if (trigger) {
|
||||
trigger = false;
|
||||
if (log_lvl) {
|
||||
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};
|
||||
$ae_loc = $ae_loc;
|
||||
}
|
||||
});
|
||||
|
||||
// This does not seem to work. I feel like it should though...?
|
||||
$effect(() => {
|
||||
if (!hide && focus_input) {
|
||||
focus_input = false;
|
||||
log_lvl = 2;
|
||||
// await tick();
|
||||
// document.getElementById('access_passcode_input')?.focus();
|
||||
if (log_lvl > 1) {
|
||||
console.log('Effect: Setting focus on the passcode input field');
|
||||
}
|
||||
/** @type {HTMLElement | null} */
|
||||
const to_focus = document.getElementById('access_passcode_input');
|
||||
to_focus?.focus();
|
||||
}
|
||||
});
|
||||
|
||||
$effect(async () => {
|
||||
if (trigger_clear_access) {
|
||||
trigger_clear_access = false;
|
||||
if (log_lvl) {
|
||||
console.log(`trigger_clear_access=${trigger_clear_access}`);
|
||||
}
|
||||
handle_clear_access();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handle_check_access_type_passcode() {
|
||||
if (log_lvl > 1) {
|
||||
console.log(`*** handle_check_access_type_passcode() *** passcode list:`, $ae_loc.site_access_code_kv);
|
||||
}
|
||||
|
||||
// Reminder: super > manager > administrator > trusted > public > authenticated > anonymous
|
||||
|
||||
if (entered_passcode && entered_passcode.length >= 5) {
|
||||
|
||||
if ($ae_loc.site_access_code_kv.super.length >= 8 && $ae_loc.site_access_code_kv.super == entered_passcode) {
|
||||
console.log('Super passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'super');
|
||||
|
||||
$ae_loc.access_type = 'super';
|
||||
} else if ($ae_loc.site_access_code_kv.manager.length >= 5 && $ae_loc.site_access_code_kv.manager == entered_passcode) {
|
||||
console.log('Manager passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'manager');
|
||||
|
||||
$ae_loc.access_type = 'manager';
|
||||
} else if ($ae_loc.site_access_code_kv.administrator.length >= 5 && $ae_loc.site_access_code_kv.administrator == entered_passcode) {
|
||||
console.log('Administrator passcode matched');
|
||||
// dispatch_access_type_changed();
|
||||
|
||||
window.localStorage.setItem('access_type', 'administrator');
|
||||
return true;
|
||||
} else {
|
||||
if (log_lvl > 1) {
|
||||
console.log('Entered passcode too short.');
|
||||
}
|
||||
|
||||
$ae_loc.access_type = 'administrator';
|
||||
} else if ($ae_loc.site_access_code_kv.trusted.length >= 5 && $ae_loc.site_access_code_kv.trusted == entered_passcode) {
|
||||
console.log('Trusted passcode matched');
|
||||
// $ae_loc.access_type = null; // 'anonymous';
|
||||
|
||||
window.localStorage.setItem('access_type', 'trusted');
|
||||
|
||||
$ae_loc.access_type = 'trusted';
|
||||
} else if ($ae_loc.site_access_code_kv.public.length >= 5 && $ae_loc.site_access_code_kv.public == entered_passcode) {
|
||||
console.log('Public passcode matched');
|
||||
// dispatch_access_type_changed()
|
||||
|
||||
window.localStorage.setItem('access_type', 'public');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
$ae_loc.access_type = 'public';
|
||||
} else if ($ae_loc.site_access_code_kv.authenticated == entered_passcode) {
|
||||
console.log('Authenticated passcode matched');
|
||||
function handle_clear_access() {
|
||||
// console.log('handle_clear_access()');
|
||||
// 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');
|
||||
|
||||
window.localStorage.setItem('access_type', 'authenticated');
|
||||
// $ae_loc.access_type = null; // 'anonymous';
|
||||
// Revert back to the user's access type after quick access (temporarily escalate permissions) is turned off.
|
||||
$ae_loc.access_type = $ae_loc.user_access_type ?? 'anonymous';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
$ae_loc.access_type = 'authenticated';
|
||||
} else {
|
||||
if (log_lvl > 1) {
|
||||
console.log('Entered passcode does not match any of the site access codes.');
|
||||
}
|
||||
entered_passcode = ''; // Clear the entered passcode
|
||||
show_passcode_input = true;
|
||||
|
||||
if ($ae_loc.access_type != 'anonymous') {
|
||||
console.log('Access type is not anonymous');
|
||||
}
|
||||
// window.localStorage.setItem('access_type', 'anonymous');
|
||||
$ae_loc.app_cfg.show_element__menu = false;
|
||||
$ae_loc.app_cfg.show_element__menu_btn = true;
|
||||
|
||||
// $ae_loc.access_type = 'anonymous';
|
||||
|
||||
// trigger = 'process_permission_check';
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
// ae_loc.set($ae_loc);
|
||||
// console.log($ae_loc);
|
||||
|
||||
// dispatch_access_type_changed();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
entered_passcode = '';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
|
||||
$ae_loc.app_cfg.show_element__menu = false;
|
||||
$ae_loc.app_cfg.show_element__menu_btn = true;
|
||||
|
||||
// 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.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.app_cfg.show_element__access_type = true;
|
||||
$ae_loc.app_cfg.show_element__cfg = true;
|
||||
} else {
|
||||
$ae_loc.app_cfg.show_element__access_type = true;
|
||||
$ae_loc.app_cfg.show_element__cfg = false;
|
||||
}
|
||||
|
||||
// dispatch_access_type_changed();
|
||||
|
||||
return true;
|
||||
} else {
|
||||
if (log_lvl > 1) {
|
||||
console.log('Entered passcode too short.');
|
||||
}
|
||||
|
||||
// $ae_loc.access_type = null; // 'anonymous';
|
||||
|
||||
// dispatch_access_type_changed()
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function handle_clear_access() {
|
||||
// console.log('handle_clear_access()');
|
||||
// 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';
|
||||
// Revert back to the user's access type after quick access (temporarily escalate permissions) is turned off.
|
||||
$ae_loc.access_type = $ae_loc.user_access_type ?? 'anonymous';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
entered_passcode = ''; // Clear the entered passcode
|
||||
show_passcode_input = true;
|
||||
|
||||
$ae_loc.app_cfg.show_element__menu = false;
|
||||
$ae_loc.app_cfg.show_element__menu_btn = true;
|
||||
|
||||
$ae_loc.edit_mode = false;
|
||||
|
||||
return true;
|
||||
}
|
||||
$ae_loc.edit_mode = false;
|
||||
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<section
|
||||
id="AE-Quick-Access-Type"
|
||||
class="
|
||||
id="AE-Quick-Access-Type"
|
||||
class="
|
||||
ae_access_type
|
||||
hidden-print
|
||||
|
||||
@@ -297,20 +310,15 @@ function handle_clear_access() {
|
||||
duration-300 delay-150 hover:delay-1000 hover:ease-out
|
||||
transition-all
|
||||
"
|
||||
class:hidden={hide}
|
||||
>
|
||||
class:hidden={hide}
|
||||
>
|
||||
<!-- class:hidden={!$ae_sess.show__sign_in_out__fields} -->
|
||||
<header class="ae_header hidden">
|
||||
<h2 class="text-sm text-center font-semibold">Passcode Sign In</h2>
|
||||
</header>
|
||||
|
||||
<!-- class:hidden={!$ae_sess.show__sign_in_out__fields} -->
|
||||
<header
|
||||
class="ae_header hidden"
|
||||
>
|
||||
<h2 class="text-sm text-center font-semibold">
|
||||
Passcode Sign In
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<!-- Show list of authorized sessions and presentations for a user -->
|
||||
<!-- {#if $ae_loc.access_type == 'administrator'}
|
||||
<!-- Show list of authorized sessions and presentations for a user -->
|
||||
<!-- {#if $ae_loc.access_type == 'administrator'}
|
||||
{#if $events_loc.auth__kv.session}
|
||||
Sessions:
|
||||
<ul>
|
||||
@@ -323,58 +331,53 @@ function handle_clear_access() {
|
||||
{/if}
|
||||
{/if} -->
|
||||
|
||||
<div class="transition-all">
|
||||
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
|
||||
{#if $ae_loc.manager_access}
|
||||
{#if $ae_loc?.sync_local_config}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.sync_local_config = false;
|
||||
$events_loc.pres_mgmt.sync_local_config = false;
|
||||
|
||||
<div class="transition-all">
|
||||
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
|
||||
{#if $ae_loc.manager_access}
|
||||
{#if $ae_loc?.sync_local_config}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.sync_local_config = false;
|
||||
$events_loc.pres_mgmt.sync_local_config = false;
|
||||
$ae_loc.lock_config = false;
|
||||
$events_loc.pres_mgmt.lock_config = false;
|
||||
|
||||
$ae_loc.lock_config = false;
|
||||
$events_loc.pres_mgmt.lock_config = false;
|
||||
// dispatch_sync_local_config_changed();
|
||||
// tick();
|
||||
return false;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all hover:transition-all *:hover:inline"
|
||||
title="Syncing the local configuration with the remote configuration."
|
||||
>
|
||||
<span class="fas fa-sync m-1"></span>
|
||||
<span class="hidden"> Sync </span>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.sync_local_config = true;
|
||||
$events_loc.pres_mgmt.sync_local_config = true;
|
||||
|
||||
// dispatch_sync_local_config_changed();
|
||||
// tick();
|
||||
return false;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all hover:transition-all *:hover:inline"
|
||||
title="Syncing the local configuration with the remote configuration."
|
||||
>
|
||||
<span class="fas fa-sync m-1"></span>
|
||||
<span class="hidden">
|
||||
Sync
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.sync_local_config = true;
|
||||
$events_loc.pres_mgmt.sync_local_config = true;
|
||||
$ae_loc.lock_config = true;
|
||||
$events_loc.pres_mgmt.lock_config = true;
|
||||
|
||||
$ae_loc.lock_config = true;
|
||||
$events_loc.pres_mgmt.lock_config = true;
|
||||
// dispatch_sync_local_config_changed();
|
||||
// tick();
|
||||
return true;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all hover:transition-all *:hover:inline"
|
||||
title="Currently not syncing with the remote server. Re-sync the local configuration with the remote configuration?"
|
||||
>
|
||||
<span class="fas fa-unlink m-1"></span>
|
||||
<span class="hidden"> Re-sync? </span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
// dispatch_sync_local_config_changed();
|
||||
// tick();
|
||||
return true;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all hover:transition-all *:hover:inline"
|
||||
title="Currently not syncing with the remote server. Re-sync the local configuration with the remote configuration?"
|
||||
>
|
||||
<span class="fas fa-unlink m-1"></span>
|
||||
<span class="hidden">
|
||||
Re-sync?
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- {#if $ae_loc.edit_mode}
|
||||
<!-- {#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
@@ -404,133 +407,127 @@ function handle_clear_access() {
|
||||
</span>
|
||||
</button>
|
||||
{/if} -->
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-1 items-end justify-end w-full transition-all">
|
||||
<div class="flex flex-row flex-wrap gap-1 items-end justify-end w-full transition-all">
|
||||
{#if $ae_loc?.access_type && $ae_loc?.access_type == 'anonymous' && 1 == 3}
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_check_access_type_passcode();
|
||||
trigger = true;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-success hover:preset-filled-warning-500 access_type_unlock_btn transition-all"
|
||||
title="Anonymous public access is currently set. Access mode is disabled/locked."
|
||||
>
|
||||
<span class="fas fa-lock mx-1"></span>
|
||||
<span class="lock_icon">Locked</span>
|
||||
|
||||
{#if $ae_loc?.access_type && $ae_loc?.access_type == 'anonymous' && 1==3}
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_check_access_type_passcode();
|
||||
trigger = true;
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-success hover:preset-filled-warning-500 access_type_unlock_btn transition-all"
|
||||
title="Anonymous public access is currently set. Access mode is disabled/locked."
|
||||
>
|
||||
<span class="fas fa-lock mx-1"></span>
|
||||
<span class="lock_icon">Locked</span>
|
||||
<span class="fas fa-unlock mx-1 unlock_icon hidden"></span>
|
||||
{#if show_passcode_input}
|
||||
<span class="unlock_text">Cancel</span>
|
||||
{:else}
|
||||
<span class="unlock_text">Access?</span>
|
||||
{/if}
|
||||
</button>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<span class="fas fa-unlock mx-1 unlock_icon hidden"></span>
|
||||
{#if (show_passcode_input)}
|
||||
<span class="unlock_text">Cancel</span>
|
||||
{:else}
|
||||
<span class="unlock_text">Access?</span>
|
||||
{/if}
|
||||
</button>
|
||||
</span>
|
||||
{/if}
|
||||
{#if $ae_loc?.access_type && $ae_loc?.access_type != 'anonymous'}
|
||||
<span class="flex flex-row gap-1 items-center justify-center">
|
||||
<!-- <span class="fas fa-unlock mx-1"></span> -->
|
||||
<ShieldPlus class="inline-block" />
|
||||
|
||||
{#if ($ae_loc?.access_type && $ae_loc?.access_type != 'anonymous')}
|
||||
<span class="flex flex-row gap-1 items-center justify-center">
|
||||
<!-- <span class="fas fa-unlock mx-1"></span> -->
|
||||
<ShieldPlus class="inline-block" />
|
||||
<span class="*:hover:inline" title={`Current access type/level: ${$ae_loc.access_type}`}>
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-hat-wizard m-1"></span>
|
||||
<span class="hidden">Super</span>
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-user-shield m-1"></span>
|
||||
<span class="hidden">Manager</span>
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-user-ninja m-1"></span>
|
||||
<span class="hidden">Administrator</span>
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-user-check m-1"></span>
|
||||
<span class="hidden">Trusted Access</span>
|
||||
{:else if $ae_loc.access_type == 'public'}
|
||||
Public
|
||||
<span class="hidden">Access</span>
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
Authenticated
|
||||
<span class="hidden">Access</span>
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
Anonymous Access
|
||||
{:else}
|
||||
Unknown Access
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="*:hover:inline"
|
||||
title={`Current access type/level: ${$ae_loc.access_type}`}
|
||||
>
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-hat-wizard m-1"></span>
|
||||
<span class="hidden">Super</span>
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-user-shield m-1"></span>
|
||||
<span class="hidden">Manager</span>
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-user-ninja m-1"></span>
|
||||
<span class="hidden">Administrator</span>
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-user-check m-1"></span>
|
||||
<span class="hidden">Trusted Access</span>
|
||||
{:else if $ae_loc.access_type == 'public'}
|
||||
Public
|
||||
<span class="hidden">Access</span>
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
Authenticated
|
||||
<span class="hidden">Access</span>
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
Anonymous Access
|
||||
{:else}
|
||||
Unknown Access
|
||||
{/if}
|
||||
</span>
|
||||
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type && !show_passcode_input}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_clear_access();
|
||||
// trigger_clear_access = true;
|
||||
show_passcode_input = true;
|
||||
}}
|
||||
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all"
|
||||
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> -->
|
||||
<!-- <ShieldMinus /> -->
|
||||
<ShieldEllipsis class="inline-block" />
|
||||
Passcode?
|
||||
</button>
|
||||
{:else if !show_passcode_input}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_clear_access();
|
||||
trigger_clear_access = true;
|
||||
show_passcode_input = true;
|
||||
// show_passcode_input = true;
|
||||
}}
|
||||
class="btn btn-sm variant-outline-warning hover:preset-tonal-warning border border-warning-500 transition-all"
|
||||
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> -->
|
||||
<ShieldMinus class="inline-block" />
|
||||
Clear?
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type && !show_passcode_input}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_clear_access();
|
||||
// trigger_clear_access = true;
|
||||
show_passcode_input = true;
|
||||
}}
|
||||
class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all"
|
||||
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> -->
|
||||
<!-- <ShieldMinus /> -->
|
||||
<ShieldEllipsis class="inline-block" />
|
||||
Passcode?
|
||||
</button>
|
||||
{:else if (!show_passcode_input)}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_clear_access();
|
||||
trigger_clear_access = true;
|
||||
show_passcode_input = true;
|
||||
// show_passcode_input = true;
|
||||
}}
|
||||
class="btn btn-sm variant-outline-warning hover:preset-tonal-warning border border-warning-500 transition-all"
|
||||
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> -->
|
||||
<ShieldMinus class="inline-block" />
|
||||
Clear?
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{#if show_passcode_input}
|
||||
<span class="flex flex-row gap-1 items-center justify-between w-full">
|
||||
<span>
|
||||
<ShieldEllipsis class="inline-block text-gray-500" />
|
||||
<span class="unlock_text text-sm">Passcode:</span>
|
||||
</span>
|
||||
|
||||
{#if (show_passcode_input)}
|
||||
<span class="flex flex-row gap-1 items-center justify-between w-full">
|
||||
<span>
|
||||
<ShieldEllipsis class="inline-block text-gray-500" />
|
||||
<span class="unlock_text text-sm">Passcode:</span>
|
||||
</span>
|
||||
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<input
|
||||
id="access_passcode_input"
|
||||
bind:value={entered_passcode}
|
||||
class="input w-32 transition-all"
|
||||
class:hidden={!show_passcode_input}
|
||||
type="text"
|
||||
placeholder="Passcode"
|
||||
autofocus={show_passcode_input}
|
||||
/>
|
||||
<!-- <div class="current_text transition-all">{$ae_loc.access_type}</div> -->
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<input
|
||||
id="access_passcode_input"
|
||||
bind:value={entered_passcode}
|
||||
class="input w-32 transition-all"
|
||||
class:hidden={!show_passcode_input}
|
||||
type="text"
|
||||
placeholder="Passcode"
|
||||
autofocus={show_passcode_input}
|
||||
/>
|
||||
<!-- <div class="current_text transition-all">{$ae_loc.access_type}</div> -->
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
/* BEGIN: AE's Svelte Quick Access Type component */
|
||||
/*
|
||||
/* BEGIN: AE's Svelte Quick Access Type component */
|
||||
/*
|
||||
#xxx-AE-Quick-Access-Type {
|
||||
// position: absolute;
|
||||
position: fixed;
|
||||
@@ -568,7 +565,7 @@ function handle_clear_access() {
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
/*
|
||||
#xxx-AE-Quick-Access-Type:hover {
|
||||
|
||||
border-top: solid thin hsla(0,0%,0%,.95);
|
||||
@@ -585,29 +582,29 @@ function handle_clear_access() {
|
||||
}
|
||||
*/
|
||||
|
||||
/* #Access-Type .unlock_text {
|
||||
/* #Access-Type .unlock_text {
|
||||
transition: width 2s, height 2s, background-color 2s, transform 2s;
|
||||
} */
|
||||
/* END: Svelte Access Type component */
|
||||
/* END: Svelte Access Type component */
|
||||
|
||||
.access_type_unlock_btn:hover .lock_icon {
|
||||
display: none;
|
||||
}
|
||||
.access_type_unlock_btn:hover .lock_icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.access_type_unlock_btn:hover .unlock_icon {
|
||||
display: initial;
|
||||
}
|
||||
.access_type_unlock_btn:hover .unlock_icon {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.access_type_unlock_btn .unlock_text {
|
||||
display: none;
|
||||
}
|
||||
.access_type_unlock_btn .unlock_text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.access_type_unlock_btn:hover .unlock_text {
|
||||
display: initial;
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
.access_type_unlock_btn:hover .unlock_text {
|
||||
display: initial;
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
.ae_access_type .current_text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,116 +1,109 @@
|
||||
<script lang="ts">
|
||||
import { Settings } from '@lucide/svelte';
|
||||
|
||||
import {
|
||||
Settings
|
||||
} from '@lucide/svelte';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
// import Element_theme from '$lib/e_app_theme.svelte';
|
||||
|
||||
// import Element_theme from '$lib/e_app_theme.svelte';
|
||||
let notes: null | string = null;
|
||||
let all: boolean = false;
|
||||
|
||||
let notes: null|string = null;
|
||||
let all: boolean = false;
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null | boolean;
|
||||
expand?: boolean;
|
||||
// export let theme_mode: null|string = null;
|
||||
// set_theme_mode?: null|boolean;
|
||||
// export let theme_name: null|string = null;
|
||||
// set_theme_name?: null|boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null|boolean;
|
||||
expand?: boolean;
|
||||
// export let theme_mode: null|string = null;
|
||||
// set_theme_mode?: null|boolean;
|
||||
// export let theme_name: null|string = null;
|
||||
// set_theme_name?: null|boolean;
|
||||
}
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false)
|
||||
// set_theme_mode = null,
|
||||
// set_theme_name = null
|
||||
}: Props = $props();
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
// set_theme_mode = null,
|
||||
// set_theme_name = null
|
||||
}: Props = $props();
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
// 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');
|
||||
// }
|
||||
// }
|
||||
|
||||
// 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_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 ($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 (entered_passcode && entered_passcode.length >= 5) {
|
||||
// console.log(`entered_passcode=${entered_passcode}`);
|
||||
// handle_check_access_type_passcode();
|
||||
// }
|
||||
|
||||
// $: 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 (trigger && $ae_loc.access_type) {
|
||||
// console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
|
||||
|
||||
// $: if (entered_passcode && entered_passcode.length >= 5) {
|
||||
// console.log(`entered_passcode=${entered_passcode}`);
|
||||
// handle_check_access_type_passcode();
|
||||
// }
|
||||
// let access_checks_results = ae_util.process_permission_checks($ae_loc.access_type);
|
||||
|
||||
// $: if (trigger && $ae_loc.access_type) {
|
||||
// console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
|
||||
// $ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
// } else if (trigger) {
|
||||
// console.log(`$ae_loc.access_type=not set`);
|
||||
|
||||
// let access_checks_results = ae_util.process_permission_checks($ae_loc.access_type);
|
||||
// // 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};
|
||||
// } else if (trigger) {
|
||||
// console.log(`$ae_loc.access_type=not set`);
|
||||
// $ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
// }
|
||||
|
||||
// // Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
|
||||
// let access_checks_results = ae_util.process_permission_checks('');
|
||||
function handle_something() {
|
||||
// console.log('*** handle_something() ***');
|
||||
}
|
||||
|
||||
// $ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
// }
|
||||
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() ***');
|
||||
|
||||
function handle_something() {
|
||||
// console.log('*** handle_something() ***');
|
||||
// console.log(ae_util);
|
||||
// console.log($ae_loc);
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
// });
|
||||
// }
|
||||
// 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="
|
||||
id="AE-App-Cfg"
|
||||
class="
|
||||
ae_app_cfg
|
||||
hidden-print
|
||||
|
||||
@@ -127,48 +120,39 @@ function handle_clear_storage(item: null|string) {
|
||||
duration-300 delay-150 hover:delay-1000 hover:ease-out
|
||||
transition-all
|
||||
"
|
||||
class:hidden={hide}
|
||||
>
|
||||
class:hidden={hide}
|
||||
>
|
||||
<header class:hidden={!expand} class="ae_header w-full">
|
||||
<h2 class="text-sm text-center font-semibold">Config</h2>
|
||||
</header>
|
||||
|
||||
<header
|
||||
class:hidden={!expand}
|
||||
class="ae_header w-full"
|
||||
>
|
||||
<h2 class="text-sm text-center font-semibold">
|
||||
Config
|
||||
</h2>
|
||||
</header>
|
||||
<div
|
||||
class="ae_cfg_content text-xs space-y-4 my-4"
|
||||
class:hidden={!expand}
|
||||
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}
|
||||
|
||||
|
||||
<div
|
||||
class="ae_cfg_content text-xs space-y-4 my-4"
|
||||
class:hidden={!expand}
|
||||
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
|
||||
<!-- <button
|
||||
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
|
||||
on:click={() => {
|
||||
handle_clear_access();
|
||||
@@ -177,115 +161,96 @@ function handle_clear_storage(item: null|string) {
|
||||
>
|
||||
<span class="fas fa-lock mx-1"></span> Lock
|
||||
</button> -->
|
||||
{:else}
|
||||
Not logged in
|
||||
{/if}
|
||||
</section>
|
||||
<!-- END: Access Type -->
|
||||
{:else}
|
||||
Not logged in
|
||||
{/if}
|
||||
</section>
|
||||
<!-- END: Access Type -->
|
||||
|
||||
<section class="space-y-2">
|
||||
<h2 class="strong">Utilities:</h2>
|
||||
<a class="btn btn-sm preset-tonal-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 preset-tonal-secondary" href="/?iframe=false">
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Exit iframe Mode
|
||||
</a>
|
||||
{:else}
|
||||
<a class="btn btn-sm preset-tonal-secondary" href="/?iframe=true">
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Use iframe Mode
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-warning"
|
||||
title="Reload and clear the page cache"
|
||||
onclick={() => {
|
||||
// $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 preset-tonal-warning"
|
||||
title="Clear the browser storage for this page"
|
||||
onclick={() => {
|
||||
if (!confirm('Are you sure you want to clear the local and session storage?')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
<section class="space-y-2">
|
||||
// Clear the local and session storage
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
|
||||
<h2 class="strong">Utilities:</h2>
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-secondary"
|
||||
href="/hosted_files"
|
||||
>
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Util: Convert Videos
|
||||
</a>
|
||||
// Clear Indexed DB as well
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db');
|
||||
|
||||
{#if $ae_loc.iframe}
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-secondary"
|
||||
href="/?iframe=false"
|
||||
>
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Exit iframe Mode
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-secondary"
|
||||
href="/?iframe=true"
|
||||
>
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Use iframe Mode
|
||||
</a>
|
||||
{/if}
|
||||
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>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-warning"
|
||||
title="Reload and clear the page cache"
|
||||
onclick={() => {
|
||||
// $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 preset-tonal-warning"
|
||||
title="Clear the browser storage for this page"
|
||||
onclick={() => {
|
||||
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>
|
||||
|
||||
<!-- class:justify-between={expand}
|
||||
<!-- class:justify-between={expand}
|
||||
class:justify-end={!expand} -->
|
||||
<div
|
||||
class="flex flex-row gap-2 items-center justify-between w-full"
|
||||
>
|
||||
<!-- {#if !expand} -->
|
||||
<span>
|
||||
{#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}
|
||||
<div class="flex flex-row gap-2 items-center justify-between w-full">
|
||||
<!-- {#if !expand} -->
|
||||
<span>
|
||||
{#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
|
||||
<!-- <button
|
||||
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
|
||||
on:click={() => {
|
||||
handle_clear_access();
|
||||
@@ -294,59 +259,56 @@ class:justify-end={!expand} -->
|
||||
>
|
||||
<span class="fas fa-lock mx-1"></span> Lock
|
||||
</button> -->
|
||||
{:else}
|
||||
Not logged in
|
||||
{/if}
|
||||
</span>
|
||||
<!-- {/if} -->
|
||||
{:else}
|
||||
Not logged in
|
||||
{/if}
|
||||
</span>
|
||||
<!-- {/if} -->
|
||||
|
||||
<button
|
||||
class="
|
||||
<button
|
||||
class="
|
||||
ae_cfg_btn
|
||||
btn btn-sm text-sm
|
||||
preset-tonal-warning
|
||||
group transition-all
|
||||
"
|
||||
onclick={() => {
|
||||
expand = !expand;
|
||||
}}
|
||||
>
|
||||
<!-- <span class="fas fa-cog m-1"></span> -->
|
||||
<span class="inline-block" title="Settings">
|
||||
<Settings class="m-1" />
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
onclick={() => {
|
||||
expand = !expand;
|
||||
}}
|
||||
>
|
||||
<!-- <span class="fas fa-cog m-1"></span> -->
|
||||
<span class="inline-block" title="Settings">
|
||||
<Settings class="m-1" />
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
cfg_text
|
||||
hidden
|
||||
group-hover:inline
|
||||
"
|
||||
>
|
||||
Settings
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
>
|
||||
Settings
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.ae_cfg_btn .cfg_text {
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
.ae_cfg_btn .cfg_text {
|
||||
/* display: none; */
|
||||
}
|
||||
.ae_cfg_btn:hover .cfg_text {
|
||||
/* display: initial; */
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
|
||||
.ae_cfg_btn:hover .cfg_text {
|
||||
/* display: initial; */
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
|
||||
/* .access_type .current_text {
|
||||
/* .access_type .current_text {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
/* .access_type:hover .current_text {
|
||||
/* .access_type:hover .current_text {
|
||||
display: initial;
|
||||
} */
|
||||
/* END: AE's Svelte App Config component */
|
||||
/* END: AE's Svelte App Config component */
|
||||
</style>
|
||||
|
||||
@@ -1,119 +1,108 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
log_lvl?: number;
|
||||
value: any;
|
||||
success?: boolean;
|
||||
btn_text?: string;
|
||||
btn_title?: string;
|
||||
btn_class?: string;
|
||||
hide_icon?: boolean;
|
||||
hide_text?: boolean;
|
||||
icon_name?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
log_lvl?: number;
|
||||
value: any;
|
||||
success?: boolean;
|
||||
btn_text?: string;
|
||||
btn_title?: string;
|
||||
btn_class?: string;
|
||||
hide_icon?: boolean;
|
||||
hide_text?: boolean;
|
||||
icon_name?: string;
|
||||
}
|
||||
let {
|
||||
children,
|
||||
log_lvl = 0,
|
||||
value = $bindable(''),
|
||||
success = $bindable(false),
|
||||
btn_text = 'Copy to Clipboard',
|
||||
btn_title = 'Copy to Clipboard',
|
||||
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
|
||||
hide_icon = false,
|
||||
hide_text = false,
|
||||
icon_name = 'copy' // copy, check, link
|
||||
}: Props = $props();
|
||||
|
||||
let {
|
||||
children,
|
||||
log_lvl = 0,
|
||||
value = $bindable(''),
|
||||
success = $bindable(false),
|
||||
btn_text = 'Copy to Clipboard',
|
||||
btn_title = 'Copy to Clipboard',
|
||||
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
|
||||
hide_icon = false,
|
||||
hide_text = false,
|
||||
icon_name = 'copy', // copy, check, link
|
||||
}: Props = $props();
|
||||
// *** Import Svelte specific
|
||||
// import { browser } from '$app/environment';
|
||||
|
||||
// *** Import Svelte specific
|
||||
// import { browser } from '$app/environment';
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
// ArrowBigRight,
|
||||
// CircleX,
|
||||
CircleCheck,
|
||||
Copy,
|
||||
// Eye, EyeOff,
|
||||
// Key,
|
||||
Link
|
||||
// LogIn, LogOut, LockKeyhole,
|
||||
// Mail, MailCheck,
|
||||
// Menu,
|
||||
// RefreshCw, RefreshCcw, RefreshCcwDot,
|
||||
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||
// User, UserCheck
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
// ArrowBigRight,
|
||||
// CircleX,
|
||||
CircleCheck,
|
||||
Copy,
|
||||
// Eye, EyeOff,
|
||||
// Key,
|
||||
Link,
|
||||
// LogIn, LogOut, LockKeyhole,
|
||||
// Mail, MailCheck,
|
||||
// Menu,
|
||||
// RefreshCw, RefreshCcw, RefreshCcwDot,
|
||||
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||
// User, UserCheck
|
||||
} from '@lucide/svelte';
|
||||
if (log_lvl) {
|
||||
console.log(`Clipboard component initialized with value:`, value);
|
||||
}
|
||||
|
||||
if (log_lvl) {
|
||||
console.log(`Clipboard component initialized with value:`, value);
|
||||
}
|
||||
// Select your trigger element
|
||||
// const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
|
||||
|
||||
// Select your trigger element
|
||||
// const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
|
||||
|
||||
// Add a click event handler to the trigger
|
||||
// elemButton?.addEventListener('click', () => {
|
||||
// // Call the Clipboard API
|
||||
// navigator.clipboard
|
||||
// // Use the `writeText` method write content to the clipboard
|
||||
// .writeText(value)
|
||||
// // Handle confirmation
|
||||
// .then(() => {
|
||||
// if (log_lvl) {
|
||||
// console.log(`Clipboard write successful: ${value}`);
|
||||
// }
|
||||
// success = true;
|
||||
// });
|
||||
// });
|
||||
// Add a click event handler to the trigger
|
||||
// elemButton?.addEventListener('click', () => {
|
||||
// // Call the Clipboard API
|
||||
// navigator.clipboard
|
||||
// // Use the `writeText` method write content to the clipboard
|
||||
// .writeText(value)
|
||||
// // Handle confirmation
|
||||
// .then(() => {
|
||||
// if (log_lvl) {
|
||||
// console.log(`Clipboard write successful: ${value}`);
|
||||
// }
|
||||
// success = true;
|
||||
// });
|
||||
// });
|
||||
</script>
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-button
|
||||
onclick={() => {
|
||||
// if (browser) {
|
||||
// Call the Clipboard API
|
||||
navigator.clipboard
|
||||
// Use the `writeText` method write content to the clipboard
|
||||
.writeText(value)
|
||||
// Handle confirmation
|
||||
.then(() => {
|
||||
if (log_lvl) {
|
||||
console.log(`Clipboard write successful: ${value}`);
|
||||
}
|
||||
success = true;
|
||||
});
|
||||
// } else {
|
||||
// if (log_lvl) {
|
||||
// console.log(`Clipboard write attempted in non-browser environment.`);
|
||||
// }
|
||||
// }
|
||||
}}
|
||||
class={btn_class}
|
||||
title={btn_title}
|
||||
>
|
||||
<!-- {@render btn_text} -->
|
||||
{#if icon_name === 'link'}
|
||||
<Link
|
||||
class="mx-1 {hide_icon ? 'hidden' : 'inline-block' }"
|
||||
size="1.2em"
|
||||
/>
|
||||
{:else if icon_name === 'check'}
|
||||
<CircleCheck
|
||||
class="mx-1 {hide_icon ? 'hidden' : 'inline-block' }"
|
||||
size="1.2em"
|
||||
/>
|
||||
{:else}
|
||||
<Copy
|
||||
class="mx-1 {hide_icon ? 'hidden' : 'inline-block' }"
|
||||
size="1.2em"
|
||||
/>
|
||||
{/if}
|
||||
<span class="{hide_text ? 'hidden' : 'inline-block' }">
|
||||
{btn_text}
|
||||
</span>
|
||||
{@render children?.()}
|
||||
type="button"
|
||||
data-button
|
||||
onclick={() => {
|
||||
// if (browser) {
|
||||
// Call the Clipboard API
|
||||
navigator.clipboard
|
||||
// Use the `writeText` method write content to the clipboard
|
||||
.writeText(value)
|
||||
// Handle confirmation
|
||||
.then(() => {
|
||||
if (log_lvl) {
|
||||
console.log(`Clipboard write successful: ${value}`);
|
||||
}
|
||||
success = true;
|
||||
});
|
||||
// } else {
|
||||
// if (log_lvl) {
|
||||
// console.log(`Clipboard write attempted in non-browser environment.`);
|
||||
// }
|
||||
// }
|
||||
}}
|
||||
class={btn_class}
|
||||
title={btn_title}
|
||||
>
|
||||
<!-- {@render btn_text} -->
|
||||
{#if icon_name === 'link'}
|
||||
<Link class="mx-1 {hide_icon ? 'hidden' : 'inline-block'}" size="1.2em" />
|
||||
{:else if icon_name === 'check'}
|
||||
<CircleCheck class="mx-1 {hide_icon ? 'hidden' : 'inline-block'}" size="1.2em" />
|
||||
{:else}
|
||||
<Copy class="mx-1 {hide_icon ? 'hidden' : 'inline-block'}" size="1.2em" />
|
||||
{/if}
|
||||
<span class={hide_text ? 'hidden' : 'inline-block'}>
|
||||
{btn_text}
|
||||
</span>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
|
||||
@@ -1,284 +1,295 @@
|
||||
<script lang="ts">
|
||||
// This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
|
||||
// WARNING: This has not been fully updated to Svelte version 5. It is a work in progress.
|
||||
// *** Import Svelte version 5 specific
|
||||
import { browser } from '$app/environment';
|
||||
// This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
|
||||
// WARNING: This has not been fully updated to Svelte version 5. It is a work in progress.
|
||||
// *** Import Svelte version 5 specific
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import {
|
||||
EditorView, keymap, highlightSpecialChars, drawSelection,
|
||||
highlightActiveLine, dropCursor, rectangularSelection,
|
||||
crosshairCursor,
|
||||
gutter, GutterMarker, highlightActiveLineGutter, lineNumbers,
|
||||
placeholder as placeholderExt,
|
||||
} from "@codemirror/view"
|
||||
import { EditorState, RangeSet, StateEffect, type Extension, Text } from '@codemirror/state';
|
||||
import {
|
||||
defaultKeymap, history, historyKeymap, indentWithTab,
|
||||
} from "@codemirror/commands"
|
||||
import { indentUnit } from '@codemirror/language';
|
||||
import { languages } from '@codemirror/language-data';
|
||||
// import {
|
||||
// defaultHighlightStyle, syntaxHighlighting, indentOnInput,
|
||||
// bracketMatching, foldGutter, foldKeymap
|
||||
// } from "@codemirror/language"
|
||||
// import {
|
||||
// defaultHighlightStyle, syntaxHighlighting, indentOnInput,
|
||||
// bracketMatching, foldGutter, foldKeymap
|
||||
// } from "@codemirror/language"
|
||||
// import {
|
||||
// searchKeymap, highlightSelectionMatches
|
||||
// } from "@codemirror/search"
|
||||
// import {
|
||||
// autocompletion, completionKeymap, closeBrackets,
|
||||
// closeBracketsKeymap
|
||||
// } from "@codemirror/autocomplete"
|
||||
// import {lintKeymap} from "@codemirror/lint"
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import {
|
||||
EditorView,
|
||||
keymap,
|
||||
highlightSpecialChars,
|
||||
drawSelection,
|
||||
highlightActiveLine,
|
||||
dropCursor,
|
||||
rectangularSelection,
|
||||
crosshairCursor,
|
||||
gutter,
|
||||
GutterMarker,
|
||||
highlightActiveLineGutter,
|
||||
lineNumbers,
|
||||
placeholder as placeholderExt
|
||||
} from '@codemirror/view';
|
||||
import { EditorState, RangeSet, StateEffect, type Extension, Text } from '@codemirror/state';
|
||||
import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
|
||||
import { indentUnit } from '@codemirror/language';
|
||||
import { languages } from '@codemirror/language-data';
|
||||
// import {
|
||||
// defaultHighlightStyle, syntaxHighlighting, indentOnInput,
|
||||
// bracketMatching, foldGutter, foldKeymap
|
||||
// } from "@codemirror/language"
|
||||
// import {
|
||||
// defaultHighlightStyle, syntaxHighlighting, indentOnInput,
|
||||
// bracketMatching, foldGutter, foldKeymap
|
||||
// } from "@codemirror/language"
|
||||
// import {
|
||||
// searchKeymap, highlightSelectionMatches
|
||||
// } from "@codemirror/search"
|
||||
// import {
|
||||
// autocompletion, completionKeymap, closeBrackets,
|
||||
// closeBracketsKeymap
|
||||
// } from "@codemirror/autocomplete"
|
||||
// import {lintKeymap} from "@codemirror/lint"
|
||||
|
||||
// import { } from '@codemirror/gutter'; // Merged into @codemirror/view
|
||||
import { basicSetup } from 'codemirror';
|
||||
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
||||
// import { css } from '@codemirror/lang-css';
|
||||
// import { javascript } from '@codemirror/lang-javascript';
|
||||
// import { json } from '@codemirror/lang-json';
|
||||
// import { html } from '@codemirror/lang-html';
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
// import { } from '@codemirror/gutter'; // Merged into @codemirror/view
|
||||
import { basicSetup } from 'codemirror';
|
||||
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
||||
// import { css } from '@codemirror/lang-css';
|
||||
// import { javascript } from '@codemirror/lang-javascript';
|
||||
// import { json } from '@codemirror/lang-json';
|
||||
// import { html } from '@codemirror/lang-html';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
|
||||
// Props
|
||||
export let content: string = 'test test test test';
|
||||
export let new_content: string = '';
|
||||
|
||||
// export let language: Extension = markdown(); // javascript()
|
||||
export let theme_mode: string = 'light'; // 'dark' | 'light'
|
||||
export let theme: Extension = EditorView.baseTheme(); // EditorView.baseTheme(); // oneDark
|
||||
|
||||
// Props
|
||||
export let content: string = 'test test test test';
|
||||
export let new_content: string = '';
|
||||
export let extensions: Extension[] = [];
|
||||
|
||||
// export let language: Extension = markdown(); // javascript()
|
||||
export let theme_mode: string = 'light'; // 'dark' | 'light'
|
||||
export let theme: Extension = EditorView.baseTheme(); // EditorView.baseTheme(); // oneDark
|
||||
export let editable: boolean = true;
|
||||
export let readonly: boolean = false;
|
||||
|
||||
export let extensions: Extension[] = [];
|
||||
export let placeholder: string = 'Start typing...';
|
||||
|
||||
export let editable: boolean = true;
|
||||
export let readonly: boolean = false;
|
||||
export let show_line_numbers: boolean = false;
|
||||
export let wrap_lines: boolean = true;
|
||||
export let use_tab: boolean = true;
|
||||
export let tab_size: number = 4;
|
||||
let classes = '';
|
||||
export { classes as class };
|
||||
|
||||
export let placeholder: string = 'Start typing...';
|
||||
let editor_element: HTMLDivElement;
|
||||
let editorView: EditorView;
|
||||
|
||||
export let show_line_numbers: boolean = false;
|
||||
export let wrap_lines: boolean = true;
|
||||
export let use_tab: boolean = true;
|
||||
export let tab_size: number = 4;
|
||||
let classes = "";
|
||||
export { classes as class };
|
||||
// theme = [
|
||||
// // baseTheme,
|
||||
// theme,
|
||||
// ];
|
||||
// console.log(`Theme:`, theme);
|
||||
|
||||
let editor_element: HTMLDivElement;
|
||||
let editorView: EditorView;
|
||||
if (theme_mode == 'dark') {
|
||||
theme = oneDark;
|
||||
} else {
|
||||
// theme = EditorView.baseTheme({
|
||||
// "&": {
|
||||
// color: "black",
|
||||
// backgroundColor: "white"
|
||||
// },
|
||||
// ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000" },
|
||||
// "&.cm-focused .cm-selectionBackground, ::selection": {
|
||||
// backgroundColor: "#B7D5FF"
|
||||
// },
|
||||
// "&.cm-focused .cm-selectionForeground": { color: "black" }
|
||||
// });
|
||||
}
|
||||
|
||||
// theme = [
|
||||
// // baseTheme,
|
||||
// theme,
|
||||
// ];
|
||||
// console.log(`Theme:`, theme);
|
||||
if (editable) {
|
||||
extensions.push(EditorView.editable.of(true));
|
||||
} else {
|
||||
// extensions.push(EditorState.editable.of(false));
|
||||
}
|
||||
if (readonly) {
|
||||
extensions.push(EditorState.readOnly.of(true));
|
||||
} else {
|
||||
// extensions.push(EditorState.readOnly.of(false));
|
||||
}
|
||||
|
||||
if (theme_mode == 'dark') {
|
||||
theme = oneDark;
|
||||
} else {
|
||||
// theme = EditorView.baseTheme({
|
||||
// "&": {
|
||||
// color: "black",
|
||||
// backgroundColor: "white"
|
||||
// },
|
||||
// ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000" },
|
||||
// "&.cm-focused .cm-selectionBackground, ::selection": {
|
||||
// backgroundColor: "#B7D5FF"
|
||||
// },
|
||||
// "&.cm-focused .cm-selectionForeground": { color: "black" }
|
||||
// });
|
||||
}
|
||||
if (placeholder) {
|
||||
extensions.push(placeholderExt(placeholder));
|
||||
}
|
||||
|
||||
if (editable) {
|
||||
extensions.push(EditorView.editable.of(true));
|
||||
} else {
|
||||
// extensions.push(EditorState.editable.of(false));
|
||||
}
|
||||
if (readonly) {
|
||||
extensions.push(EditorState.readOnly.of(true));
|
||||
} else {
|
||||
// extensions.push(EditorState.readOnly.of(false));
|
||||
}
|
||||
if (show_line_numbers) {
|
||||
// extensions.push(lineNumbers({ class: "line-numbers" }));
|
||||
} else {
|
||||
// extensions.push(gutter({ class: "hidden-gutter" }));
|
||||
// extensions.push(lineNumbers(false));
|
||||
// extensions.push(gutter(false));
|
||||
// extensions.pop();
|
||||
// extensions.slice(extensions.indexOf(lineNumbers), 1);
|
||||
}
|
||||
|
||||
if (placeholder) { extensions.push(placeholderExt(placeholder)); }
|
||||
if (wrap_lines) {
|
||||
extensions.push(EditorView.lineWrapping);
|
||||
}
|
||||
|
||||
if (show_line_numbers) {
|
||||
// extensions.push(lineNumbers({ class: "line-numbers" }));
|
||||
} else {
|
||||
// extensions.push(gutter({ class: "hidden-gutter" }));
|
||||
if (use_tab) {
|
||||
extensions.push(keymap.of([indentWithTab]));
|
||||
}
|
||||
if (tab_size) {
|
||||
extensions.push(indentUnit.of(' '.repeat(tab_size)));
|
||||
}
|
||||
|
||||
// extensions.push(lineNumbers(false));
|
||||
// extensions.push(gutter(false));
|
||||
// extensions.pop();
|
||||
// extensions.slice(extensions.indexOf(lineNumbers), 1);
|
||||
// Enable spell check
|
||||
extensions.push(EditorView.contentAttributes.of({ spellcheck: 'true' }));
|
||||
|
||||
}
|
||||
// let languages = [
|
||||
// { name: 'CSS', mode: 'css' },
|
||||
// { name: 'HTML', mode: 'html' },
|
||||
// { name: 'JavaScript', mode: 'javascript' },
|
||||
// { name: 'Markdown', mode: 'markdown' },
|
||||
// { name: 'Python', mode: 'python' },
|
||||
// ];
|
||||
|
||||
if (wrap_lines) { extensions.push(EditorView.lineWrapping); }
|
||||
// Reactive declaration for extensions
|
||||
$: editor_extensions = [
|
||||
basicSetup,
|
||||
// gutter({class: "hidden-gutter"}),
|
||||
// A line number gutter
|
||||
lineNumbers(false),
|
||||
// A gutter with code folding markers
|
||||
// foldGutter(false),
|
||||
// lineWrapping(false),
|
||||
// EditorView.lineWrapping, // Enable line wrapping
|
||||
|
||||
if (use_tab) { extensions.push(keymap.of([indentWithTab])); }
|
||||
if (tab_size) { extensions.push(indentUnit.of(" ".repeat(tab_size))); }
|
||||
// EditorView.indentUnit.of(" ".repeat(tab_size)),
|
||||
// EditorView.tabSize.of(tab_size),
|
||||
// indentUnit.of(" ".repeat(tab_size)),
|
||||
|
||||
// EditorView.editable.of(editable),
|
||||
// EditorState.readOnly.of(readonly),
|
||||
|
||||
// Enable spell check
|
||||
extensions.push(EditorView.contentAttributes.of({ spellcheck: "true" }));
|
||||
// EditorState.tabSize.of(tab_size),
|
||||
// keymap.of([indentWithTab]),
|
||||
// placeholderExt(placeholder),
|
||||
// language,
|
||||
markdown({ base: markdownLanguage, codeLanguages: languages }),
|
||||
// javascript({typescript: true}),
|
||||
// json(),
|
||||
// css(),
|
||||
// html(),
|
||||
theme,
|
||||
|
||||
// let languages = [
|
||||
// { name: 'CSS', mode: 'css' },
|
||||
// { name: 'HTML', mode: 'html' },
|
||||
// { name: 'JavaScript', mode: 'javascript' },
|
||||
// { name: 'Markdown', mode: 'markdown' },
|
||||
// { name: 'Python', mode: 'python' },
|
||||
// ];
|
||||
...extensions
|
||||
];
|
||||
|
||||
// Reactive declaration for extensions
|
||||
$: editor_extensions = [
|
||||
basicSetup,
|
||||
// gutter({class: "hidden-gutter"}),
|
||||
// A line number gutter
|
||||
lineNumbers(false),
|
||||
// A gutter with code folding markers
|
||||
// foldGutter(false),
|
||||
// lineWrapping(false),
|
||||
// EditorView.lineWrapping, // Enable line wrapping
|
||||
// baseTheme = {
|
||||
// ".cm-o-replacement": {
|
||||
// display: "inline-block",
|
||||
// width: ".5em",
|
||||
// height: ".5em",
|
||||
// borderRadius: ".25em"
|
||||
// },
|
||||
// "&light .cm-o-replacement": {
|
||||
// backgroundColor: "#04c"
|
||||
// },
|
||||
// "&dark .cm-o-replacement": {
|
||||
// backgroundColor: "#5bf"
|
||||
// }
|
||||
// },
|
||||
// let dimensions = {
|
||||
// width: '100%',
|
||||
// height: 'calc(100vh - 48px)' // Adjust for header and other elements
|
||||
// };
|
||||
// editorView.setSize(dimensions.width, dimensions.height);
|
||||
|
||||
// EditorView.indentUnit.of(" ".repeat(tab_size)),
|
||||
// EditorView.tabSize.of(tab_size),
|
||||
// indentUnit.of(" ".repeat(tab_size)),
|
||||
// Initialize CodeMirror on mount
|
||||
onMount(() => {
|
||||
editorView = new EditorView({
|
||||
state: EditorState.create({
|
||||
doc: content,
|
||||
extensions: editor_extensions
|
||||
}),
|
||||
parent: editor_element, // document.body
|
||||
dispatch: (transaction) => {
|
||||
editorView.update([transaction]);
|
||||
if (transaction.docChanged) {
|
||||
new_content = editorView.state.doc.toString();
|
||||
const newContent = editorView.state.doc.toString();
|
||||
// dispatch('change', newContent);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// EditorView.editable.of(editable),
|
||||
// EditorState.readOnly.of(readonly),
|
||||
// Clean up on destroy
|
||||
onDestroy(() => {
|
||||
editorView?.destroy();
|
||||
});
|
||||
|
||||
// EditorState.tabSize.of(tab_size),
|
||||
// keymap.of([indentWithTab]),
|
||||
// placeholderExt(placeholder),
|
||||
// language,
|
||||
markdown({base: markdownLanguage, codeLanguages: languages}),
|
||||
// javascript({typescript: true}),
|
||||
// json(),
|
||||
// css(),
|
||||
// html(),
|
||||
theme,
|
||||
|
||||
...extensions
|
||||
];
|
||||
|
||||
// baseTheme = {
|
||||
// ".cm-o-replacement": {
|
||||
// display: "inline-block",
|
||||
// width: ".5em",
|
||||
// height: ".5em",
|
||||
// borderRadius: ".25em"
|
||||
// },
|
||||
// "&light .cm-o-replacement": {
|
||||
// backgroundColor: "#04c"
|
||||
// },
|
||||
// "&dark .cm-o-replacement": {
|
||||
// backgroundColor: "#5bf"
|
||||
// }
|
||||
// },
|
||||
// let dimensions = {
|
||||
// width: '100%',
|
||||
// height: 'calc(100vh - 48px)' // Adjust for header and other elements
|
||||
// };
|
||||
// editorView.setSize(dimensions.width, dimensions.height);
|
||||
|
||||
|
||||
// Initialize CodeMirror on mount
|
||||
onMount(() => {
|
||||
editorView = new EditorView({
|
||||
state: EditorState.create({
|
||||
doc: content,
|
||||
extensions: editor_extensions,
|
||||
}),
|
||||
parent: editor_element, // document.body
|
||||
dispatch: (transaction) => {
|
||||
editorView.update([transaction]);
|
||||
if (transaction.docChanged) {
|
||||
new_content = editorView.state.doc.toString();
|
||||
const newContent = editorView.state.doc.toString();
|
||||
// dispatch('change', newContent);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up on destroy
|
||||
onDestroy(() => {
|
||||
editorView?.destroy();
|
||||
});
|
||||
|
||||
// Update editor content when `content` prop changes
|
||||
$: if (editorView && editorView.state.doc.toString() !== content) {
|
||||
editorView.setState(
|
||||
EditorState.create({
|
||||
doc: content,
|
||||
extensions: editor_extensions
|
||||
})
|
||||
);
|
||||
};
|
||||
// Update editor content when `content` prop changes
|
||||
$: if (editorView && editorView.state.doc.toString() !== content) {
|
||||
editorView.setState(
|
||||
EditorState.create({
|
||||
doc: content,
|
||||
extensions: editor_extensions
|
||||
})
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if browser}
|
||||
<!-- flex flex-col flex-wrap items-center justify-center -->
|
||||
<div bind:this={editor_element} class="codemirror-wrapper h-100 max-h-full w-100 max-w-6xl {classes}"></div>
|
||||
<!-- flex flex-col flex-wrap items-center justify-center -->
|
||||
<div
|
||||
bind:this={editor_element}
|
||||
class="codemirror-wrapper h-100 max-h-full w-100 max-w-6xl {classes}"
|
||||
></div>
|
||||
{:else}
|
||||
<div class="scm-waiting {classes}">
|
||||
<div class="scm-waiting__loading scm-loading">
|
||||
<p class="scm-loading__text">Loading editor...</p>
|
||||
</div>
|
||||
<div class="scm-waiting {classes}">
|
||||
<div class="scm-waiting__loading scm-loading">
|
||||
<p class="scm-loading__text">Loading editor...</p>
|
||||
</div>
|
||||
|
||||
<pre class="scm-pre cm-editor">{content}</pre>
|
||||
</div>
|
||||
<pre class="scm-pre cm-editor">{content}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* .codemirror-wrapper :global(.cm-focused) {
|
||||
/* .codemirror-wrapper :global(.cm-focused) {
|
||||
outline: none;
|
||||
} */
|
||||
|
||||
.codemirror-wrapper {
|
||||
flex-grow: 1;
|
||||
/* flex-shrink: 1; */
|
||||
/* flex-basis: 100%; */
|
||||
.codemirror-wrapper {
|
||||
flex-grow: 1;
|
||||
/* flex-shrink: 1; */
|
||||
/* flex-basis: 100%; */
|
||||
|
||||
/* font-size: 1rem; */
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
/* overflow: auto; */
|
||||
/* background-color: var(--cm-background); */
|
||||
/* font-size: 1rem; */
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
/* overflow: auto; */
|
||||
/* background-color: var(--cm-background); */
|
||||
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
}
|
||||
.codemirror-wrapper :global(.cm-editor) {
|
||||
/* font-size: .8rem; */
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
}
|
||||
.codemirror-wrapper :global(.cm-editor) {
|
||||
/* font-size: .8rem; */
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
|
||||
/* max-width: 100%; */
|
||||
/* max-height: 100%; */
|
||||
/* max-width: 100%; */
|
||||
/* max-height: 100%; */
|
||||
|
||||
/* overflow: auto; */
|
||||
/* overflow: auto; */
|
||||
|
||||
/* width: 100%; */
|
||||
/* height: 100%; */
|
||||
/* width: 100%; */
|
||||
/* height: 100%; */
|
||||
|
||||
/* background-color: var(--cm-background); */
|
||||
/* color: var(--cm-text); */
|
||||
}
|
||||
/* background-color: var(--cm-background); */
|
||||
/* color: var(--cm-text); */
|
||||
}
|
||||
|
||||
/* .codemirror-wrapper :global(.cm-gutters) {
|
||||
/* .codemirror-wrapper :global(.cm-gutters) {
|
||||
background-color: var(--cm-gutter-background);
|
||||
color: var(--cm-gutter-text);
|
||||
}
|
||||
@@ -290,5 +301,4 @@ $: if (editorView && editorView.state.doc.toString() !== content) {
|
||||
background-color: var(--cm-gutter-background);
|
||||
color: var(--cm-gutter-text);
|
||||
} */
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,43 +1,33 @@
|
||||
<script lang="ts">
|
||||
// *** Import Svelte specific
|
||||
// *** Import Svelte specific
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
Bug,
|
||||
CircleX, Info,
|
||||
ToggleLeft, ToggleRight,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
// *** Import other supporting libraries
|
||||
import { Bug, CircleX, Info, ToggleLeft, ToggleRight, X } from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null|boolean;
|
||||
expand?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
}: Props = $props();
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null | boolean;
|
||||
expand?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false)
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- App Debug Menu -->
|
||||
<!-- opacity-25
|
||||
hover:opacity-100 -->
|
||||
<!-- text-slate-400 hover:text-slate-800 -->
|
||||
<section
|
||||
class="
|
||||
class="
|
||||
ae_app__debug_menu
|
||||
|
||||
hidden-print
|
||||
@@ -64,20 +54,19 @@ hover:opacity-100 -->
|
||||
border-red-300 dark:border-red-700
|
||||
hover:border-red-500 hover:dark:border-red-500
|
||||
"
|
||||
class:top-0={expand}
|
||||
class:w-full={expand}
|
||||
class:hidden={hide}
|
||||
class:border-transparent={!expand}
|
||||
class:dark:border-transparent={!expand}
|
||||
class:hover:border-transparent={!expand}
|
||||
class:hover:bg-transparent={!expand}
|
||||
>
|
||||
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class:border-red-200={expand}
|
||||
class:dark:border-red-800={expand}
|
||||
class="
|
||||
class:top-0={expand}
|
||||
class:w-full={expand}
|
||||
class:hidden={hide}
|
||||
class:border-transparent={!expand}
|
||||
class:dark:border-transparent={!expand}
|
||||
class:hover:border-transparent={!expand}
|
||||
class:hover:bg-transparent={!expand}
|
||||
>
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class:border-red-200={expand}
|
||||
class:dark:border-red-800={expand}
|
||||
class="
|
||||
|
||||
transition-all
|
||||
transition-delay-1000
|
||||
@@ -89,115 +78,104 @@ hover:opacity-100 -->
|
||||
hover:opacity-100
|
||||
relative
|
||||
"
|
||||
>
|
||||
>
|
||||
<!-- flex flex-col items-center justify-center max-h-full outline -->
|
||||
<div>
|
||||
<!-- <span class="fas fa-bug mx-1"></span> -->
|
||||
<Bug class="inline-block mx-1" />
|
||||
<span>Debug</span>
|
||||
</div>
|
||||
|
||||
<!-- flex flex-col items-center justify-center max-h-full outline -->
|
||||
<div>
|
||||
<!-- <span class="fas fa-bug mx-1"></span> -->
|
||||
<Bug class="inline-block mx-1" />
|
||||
<span>Debug</span>
|
||||
</div>
|
||||
|
||||
<pre class="text-xs">
|
||||
<pre class="text-xs">
|
||||
{JSON.stringify($ae_loc, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="absolute top-0 right-0 flex flex-row gap-1 items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
$ae_loc.debug_mode = !$ae_loc?.debug_mode;
|
||||
}}
|
||||
class="
|
||||
<span class="absolute top-0 right-0 flex flex-row gap-1 items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
$ae_loc.debug_mode = !$ae_loc?.debug_mode;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-outlined-surface-400-600 preset-filled-suface-200-800
|
||||
hover:preset-tonal-success
|
||||
transition-all
|
||||
"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
{#if $ae_loc?.debug_mode}
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<ToggleRight strokeWidth="2.5" color="green" class="inline-block mx-1" />
|
||||
<span>Debug</span>
|
||||
<span class="hidden">
|
||||
Mode On
|
||||
</span>
|
||||
{:else}
|
||||
<!-- <span class="fas fa-toggle-off mx-1"></span> -->
|
||||
<ToggleLeft strokeWidth="1" color="gray" class="inline-block mx-1" />
|
||||
<span>Debug?</span>
|
||||
<span class="hidden">
|
||||
Mode Off
|
||||
</span>
|
||||
{/if}
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<!-- <ToggleRight class="inline-block mx-1" /> -->
|
||||
<!-- <X class="inline-block mx-1" /> -->
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
{#if $ae_loc?.debug_mode}
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<ToggleRight strokeWidth="2.5" color="green" class="inline-block mx-1" />
|
||||
<span>Debug</span>
|
||||
<span class="hidden"> Mode On </span>
|
||||
{:else}
|
||||
<!-- <span class="fas fa-toggle-off mx-1"></span> -->
|
||||
<ToggleLeft strokeWidth="1" color="gray" class="inline-block mx-1" />
|
||||
<span>Debug?</span>
|
||||
<span class="hidden"> Mode Off </span>
|
||||
{/if}
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<!-- <ToggleRight class="inline-block mx-1" /> -->
|
||||
<!-- <X class="inline-block mx-1" /> -->
|
||||
</button>
|
||||
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if (log_lvl) {
|
||||
console.log('Showing quick info/debug menu.');
|
||||
}
|
||||
expand = false;
|
||||
$ae_sess.debug_menu.hide_quick_info = false;
|
||||
|
||||
}}
|
||||
title="Show Quick Info"
|
||||
class="
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if (log_lvl) {
|
||||
console.log('Showing quick info/debug menu.');
|
||||
}
|
||||
expand = false;
|
||||
$ae_sess.debug_menu.hide_quick_info = false;
|
||||
}}
|
||||
title="Show Quick Info"
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-outlined-surface-400-600 preset-filled-suface-200-800
|
||||
hover:preset-tonal-success
|
||||
transition-all
|
||||
"
|
||||
>
|
||||
<!-- <span class="fas fa-info-circle mx-1"></span> -->
|
||||
<Info class="inline-block mx-1" />
|
||||
Quick Info
|
||||
</button>
|
||||
>
|
||||
<!-- <span class="fas fa-info-circle mx-1"></span> -->
|
||||
<Info class="inline-block mx-1" />
|
||||
Quick Info
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
// $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
|
||||
expand = !expand;
|
||||
}}
|
||||
class="
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
// $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
|
||||
expand = !expand;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-outlined-surface-400-600 preset-filled-suface-200-800
|
||||
hover:preset-tonal-warning
|
||||
transition-all
|
||||
"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<!-- <ToggleRight class="inline-block mx-1" /> -->
|
||||
<CircleX class="inline-block mx-1" />
|
||||
<span class="hidden">
|
||||
Close
|
||||
</span>
|
||||
<span>Debug</span>
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
|
||||
<!-- <ToggleRight class="inline-block mx-1" /> -->
|
||||
<CircleX class="inline-block mx-1" />
|
||||
<span class="hidden"> Close </span>
|
||||
<span>Debug</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
// $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
|
||||
expand = !expand;
|
||||
}}
|
||||
id="AE-Quick-Debug"
|
||||
class="
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Debug ae_loc:', $ae_loc);
|
||||
// $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
|
||||
expand = !expand;
|
||||
}}
|
||||
id="AE-Quick-Debug"
|
||||
class="
|
||||
btn btn-icon
|
||||
text-xs
|
||||
p-1
|
||||
@@ -209,11 +187,10 @@ hover:opacity-100 -->
|
||||
text-neutral-300 hover:text-neutral-800
|
||||
dark:text-neutral-700 dark:hover:text-neutral-200
|
||||
"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
<!-- absolute bottom-2 left-2 -->
|
||||
<!-- fixed bottom-0 left-0 -->
|
||||
π
|
||||
</button>
|
||||
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
<!-- absolute bottom-2 left-2 -->
|
||||
<!-- fixed bottom-0 left-0 -->
|
||||
π
|
||||
</button>
|
||||
</section>
|
||||
|
||||
@@ -1,91 +1,101 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
additional_kv?: key_val;
|
||||
e_success?: boolean;
|
||||
e_class?: string;
|
||||
e_title?: string;
|
||||
e_text?: string;
|
||||
e_class_h1?: string;
|
||||
e_class_h2?: string;
|
||||
e_class_form_hidden?: string;
|
||||
e_class_form_showing?: string;
|
||||
btn_text?: string;
|
||||
btn_title?: string;
|
||||
btn_class?: string;
|
||||
show_btn_class?: string;
|
||||
hide_icon?: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
additional_kv?: key_val;
|
||||
e_success?: boolean;
|
||||
e_class?: string;
|
||||
e_title?: string;
|
||||
e_text?: string;
|
||||
e_class_h1?: string;
|
||||
e_class_h2?: string;
|
||||
e_class_form_hidden?: string;
|
||||
e_class_form_showing?: string;
|
||||
btn_text?: string;
|
||||
btn_title?: string;
|
||||
btn_class?: string;
|
||||
show_btn_class?: string;
|
||||
hide_icon?: boolean;
|
||||
}
|
||||
let {
|
||||
log_lvl = 0,
|
||||
additional_kv = $bindable({}),
|
||||
e_success = $bindable(false),
|
||||
e_class = '',
|
||||
e_title = 'Technical Help',
|
||||
e_text = 'Request technical help for this application.',
|
||||
e_class_h1 = $bindable(''),
|
||||
e_class_h2 = $bindable(''),
|
||||
e_class_form_hidden = $bindable(''),
|
||||
e_class_form_showing = $bindable(''),
|
||||
btn_text = 'Technical Help',
|
||||
btn_title = 'Technical support help',
|
||||
btn_class = '',
|
||||
show_btn_class = '',
|
||||
hide_icon = false
|
||||
}: Props = $props();
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
additional_kv = $bindable({}),
|
||||
e_success = $bindable(false),
|
||||
e_class = '',
|
||||
e_title = 'Technical Help',
|
||||
e_text = 'Request technical help for this application.',
|
||||
e_class_h1 = $bindable(''),
|
||||
e_class_h2 = $bindable(''),
|
||||
e_class_form_hidden = $bindable(''),
|
||||
e_class_form_showing = $bindable(''),
|
||||
btn_text = 'Technical Help',
|
||||
btn_title = 'Technical support help',
|
||||
btn_class = '',
|
||||
show_btn_class = '',
|
||||
hide_icon = false,
|
||||
}: Props = $props();
|
||||
// *** Import Svelte specific
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// *** Import Svelte specific
|
||||
import { goto } from '$app/navigation';
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
// ArrowBigRight,
|
||||
BadgeQuestionMark,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
// CircleX,
|
||||
// Copy,
|
||||
// Eye, EyeOff,
|
||||
// Key,
|
||||
LifeBuoy,
|
||||
// LogIn, LogOut, LockKeyhole,
|
||||
// Mail, MailCheck,
|
||||
// Menu,
|
||||
RefreshCw,
|
||||
RefreshCcw,
|
||||
RefreshCcwDot,
|
||||
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||
SquareX
|
||||
// User, UserCheck
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
// ArrowBigRight,
|
||||
BadgeQuestionMark,
|
||||
ChevronDown, ChevronRight,
|
||||
// CircleX,
|
||||
// Copy,
|
||||
// Eye, EyeOff,
|
||||
// Key,
|
||||
LifeBuoy,
|
||||
// LogIn, LogOut, LockKeyhole,
|
||||
// Mail, MailCheck,
|
||||
// Menu,
|
||||
RefreshCw, RefreshCcw, RefreshCcwDot,
|
||||
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||
SquareX,
|
||||
// User, UserCheck
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger, type key_val } from '$lib/stores/ae_stores';
|
||||
// *** Import Aether specific variables and functions
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger,
|
||||
type key_val
|
||||
} from '$lib/stores/ae_stores';
|
||||
import { User } from 'lucide-svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
|
||||
if (log_lvl) {
|
||||
console.log(`Help - technical support component loaded`);
|
||||
}
|
||||
if (log_lvl) {
|
||||
console.log(`Help - technical support component loaded`);
|
||||
}
|
||||
|
||||
let help_tech_text: string = $state('');
|
||||
let hide_additional_info: boolean = $state(true);
|
||||
let help_tech_text: string = $state('');
|
||||
let hide_additional_info: boolean = $state(true);
|
||||
|
||||
function preventDefault<T extends Event>(fn: (event: T) => void) {
|
||||
return function (event: T) {
|
||||
event.preventDefault();
|
||||
fn(event);
|
||||
};
|
||||
}
|
||||
function preventDefault<T extends Event>(fn: (event: T) => void) {
|
||||
return function (event: T) {
|
||||
event.preventDefault();
|
||||
fn(event);
|
||||
};
|
||||
}
|
||||
|
||||
function send_help_tech_email() {
|
||||
if (log_lvl) {
|
||||
console.log(`*** send_help_tech_email() ***`);
|
||||
}
|
||||
|
||||
function send_help_tech_email() {
|
||||
if (log_lvl) {
|
||||
console.log(`*** send_help_tech_email() ***`);
|
||||
}
|
||||
let subject = `Technical Notification - ${$ae_loc.name}`;
|
||||
|
||||
let subject = `Technical Notification - ${$ae_loc.name}`;
|
||||
|
||||
let body_html = `
|
||||
let body_html = `
|
||||
<div>
|
||||
Technical Notification,\n\n
|
||||
<ul>
|
||||
@@ -113,34 +123,31 @@ function send_help_tech_email() {
|
||||
</div>
|
||||
`;
|
||||
|
||||
api.send_email({
|
||||
api_cfg: $ae_api,
|
||||
from_email: $ae_loc.site_cfg_json?.noreply_email ?? 'noreply+tech@oneskyit.com',
|
||||
from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IT NoReply',
|
||||
// to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
|
||||
to_email: 'it+tech@oneskyit.com',
|
||||
// to_email: $idaa_slct.post_obj.email,
|
||||
// to_email: 'scott+idaabb@oneskyit.com',
|
||||
// to_name: $ae_loc.site_cfg_json?.admin_name ?? 'IT Tech',
|
||||
to_name: 'IT Tech',
|
||||
// to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
|
||||
subject: subject,
|
||||
body_html: body_html,
|
||||
});
|
||||
|
||||
help_tech_text = ''; // Clear the text area after sending
|
||||
|
||||
}
|
||||
api.send_email({
|
||||
api_cfg: $ae_api,
|
||||
from_email: $ae_loc.site_cfg_json?.noreply_email ?? 'noreply+tech@oneskyit.com',
|
||||
from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IT NoReply',
|
||||
// to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
|
||||
to_email: 'it+tech@oneskyit.com',
|
||||
// to_email: $idaa_slct.post_obj.email,
|
||||
// to_email: 'scott+idaabb@oneskyit.com',
|
||||
// to_name: $ae_loc.site_cfg_json?.admin_name ?? 'IT Tech',
|
||||
to_name: 'IT Tech',
|
||||
// to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
|
||||
subject: subject,
|
||||
body_html: body_html
|
||||
});
|
||||
|
||||
help_tech_text = ''; // Clear the text area after sending
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<!-- class:bg-radial-[at_55%_50%]={$ae_sess.show_help_tech}
|
||||
class:from-blue-400={$ae_sess.show_help_tech}
|
||||
class:to-transparent={$ae_sess.show_help_tech}
|
||||
class:to-90%={$ae_sess.show_help_tech} -->
|
||||
<div
|
||||
class="
|
||||
class="
|
||||
flex flex-row
|
||||
items-center justify-center
|
||||
rounded-lg shadow-2xl
|
||||
@@ -150,24 +157,21 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
{!$ae_sess.show_help_tech ? e_class_form_hidden : e_class_form_showing}
|
||||
relative
|
||||
"
|
||||
class:w-xl={$ae_sess.show_help_tech}
|
||||
class:w-fit={!$ae_sess.show_help_tech}
|
||||
class:mx-auto={$ae_sess.show_help_tech}
|
||||
class:m-2={$ae_sess.show_help_tech}
|
||||
class:p-2={$ae_sess.show_help_tech}
|
||||
class:hover:border-blue-400={$ae_sess.show_help_tech}
|
||||
class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
|
||||
class:hover:shadow-blue-200={$ae_sess.show_help_tech}
|
||||
class:hover:dark:shadow-blue-800={$ae_sess.show_help_tech}
|
||||
class:bg-blue-100={$ae_sess.show_help_tech}
|
||||
class:dark:bg-blue-900={$ae_sess.show_help_tech}
|
||||
|
||||
>
|
||||
|
||||
|
||||
{#if $ae_sess.show_help_tech}
|
||||
<div
|
||||
class="
|
||||
class:w-xl={$ae_sess.show_help_tech}
|
||||
class:w-fit={!$ae_sess.show_help_tech}
|
||||
class:mx-auto={$ae_sess.show_help_tech}
|
||||
class:m-2={$ae_sess.show_help_tech}
|
||||
class:p-2={$ae_sess.show_help_tech}
|
||||
class:hover:border-blue-400={$ae_sess.show_help_tech}
|
||||
class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
|
||||
class:hover:shadow-blue-200={$ae_sess.show_help_tech}
|
||||
class:hover:dark:shadow-blue-800={$ae_sess.show_help_tech}
|
||||
class:bg-blue-100={$ae_sess.show_help_tech}
|
||||
class:dark:bg-blue-900={$ae_sess.show_help_tech}
|
||||
>
|
||||
{#if $ae_sess.show_help_tech}
|
||||
<div
|
||||
class="
|
||||
w-xl
|
||||
flex flex-col gap-1
|
||||
items-center justify-center
|
||||
@@ -177,44 +181,44 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
dark:bg-blue-800
|
||||
transition-all
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
>
|
||||
<div
|
||||
class="
|
||||
d-flex align-items-center justify-content-between
|
||||
flex flex-row gap-1 items-center justify-between
|
||||
w-full
|
||||
"
|
||||
>
|
||||
<h1
|
||||
class="
|
||||
>
|
||||
<h1
|
||||
class="
|
||||
h1
|
||||
text-base font-semibold text-gray-800 dark:text-gray-200
|
||||
w-fit
|
||||
{e_class_h1}
|
||||
"
|
||||
>
|
||||
{#if e_success}
|
||||
<span class="text-lg text-green-800 dark:text-green-200 font-semibold">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
Help Requested
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-lg text-gray-800 dark:text-gray-200 font-semibold">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
<!-- Request Technical Help -->
|
||||
Notify Technical Support
|
||||
</span>
|
||||
<!-- <span class="text-gray-500">
|
||||
>
|
||||
{#if e_success}
|
||||
<span class="text-lg text-green-800 dark:text-green-200 font-semibold">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
Help Requested
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-lg text-gray-800 dark:text-gray-200 font-semibold">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
<!-- Request Technical Help -->
|
||||
Notify Technical Support
|
||||
</span>
|
||||
<!-- <span class="text-gray-500">
|
||||
Send your help request with or without a description.
|
||||
</span> -->
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Cancel button -->
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_sess.show_help_tech = false)}
|
||||
class="
|
||||
<!-- Cancel button -->
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_sess.show_help_tech = false)}
|
||||
class="
|
||||
btn btn-base
|
||||
preset-tonal-tertiary
|
||||
preset-outlined-tertiary-100-900
|
||||
@@ -222,34 +226,33 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
transition-all
|
||||
{btn_class}
|
||||
"
|
||||
title="Close Help Request Form"
|
||||
>
|
||||
<!-- <span class="fas fa-times"></span> -->
|
||||
<SquareX size="1em" />
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
title="Close Help Request Form"
|
||||
>
|
||||
<!-- <span class="fas fa-times"></span> -->
|
||||
<SquareX size="1em" />
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="
|
||||
<form
|
||||
class="
|
||||
m-1
|
||||
flex flex-col gap-1
|
||||
items-center justify-center
|
||||
w-md max-w-lg
|
||||
"
|
||||
onsubmit={preventDefault(() => {
|
||||
// Do stuff...
|
||||
send_help_tech_email();
|
||||
onsubmit={preventDefault(() => {
|
||||
// Do stuff...
|
||||
send_help_tech_email();
|
||||
|
||||
// Hide the request form
|
||||
$ae_sess.show_help_tech = false;
|
||||
// Hide the request form
|
||||
$ae_sess.show_help_tech = false;
|
||||
|
||||
alert('Notification sent to the IT team.');
|
||||
})}
|
||||
>
|
||||
|
||||
<textarea
|
||||
class="
|
||||
alert('Notification sent to the IT team.');
|
||||
})}
|
||||
>
|
||||
<textarea
|
||||
class="
|
||||
form-control
|
||||
w-full max-w-lg h-24 p-2
|
||||
border border-gray-300 rounded
|
||||
@@ -258,13 +261,13 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
hover:dark:bg-gray-50
|
||||
hover:dark:text-gray-950
|
||||
"
|
||||
placeholder="Send with or without a description...."
|
||||
bind:value={help_tech_text}
|
||||
></textarea>
|
||||
placeholder="Send with or without a description...."
|
||||
bind:value={help_tech_text}
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="
|
||||
<button
|
||||
type="submit"
|
||||
class="
|
||||
btn btn-lg
|
||||
m-1
|
||||
preset-tonal-warning
|
||||
@@ -275,182 +278,247 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
transition-all
|
||||
{btn_class}
|
||||
"
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<!-- <BadgeQuestionMark class="inline-block mr-2" /> -->
|
||||
<LifeBuoy class="inline-block m-1" />
|
||||
{/if}
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<!-- <BadgeQuestionMark class="inline-block mr-2" /> -->
|
||||
<LifeBuoy class="inline-block m-1" />
|
||||
{/if}
|
||||
|
||||
{#if !help_tech_text}
|
||||
Notify Without Description
|
||||
{:else}
|
||||
Send Notification
|
||||
{/if}
|
||||
</button>
|
||||
{#if !help_tech_text}
|
||||
Notify Without Description
|
||||
{:else}
|
||||
Send Notification
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</form>
|
||||
|
||||
<div
|
||||
class="
|
||||
<div
|
||||
class="
|
||||
text-sm text-gray-700 dark:text-gray-300 text-center italic
|
||||
"
|
||||
>
|
||||
This is intended for technical issues only. Please contact your organization's staff if you have a question about your membership, recorded content, meetings, or posts.
|
||||
</div>
|
||||
>
|
||||
This is intended for technical issues only. Please contact your organization's staff if you
|
||||
have a question about your membership, recorded content, meetings, or posts.
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
<div
|
||||
class="
|
||||
border border-gray-300 rounded p-2
|
||||
w-full
|
||||
max-w-2xl
|
||||
overflow-scroll
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
>
|
||||
<div
|
||||
class="
|
||||
d-flex align-items-center justify-content-between
|
||||
flex flex-row gap-1 items-center justify-between
|
||||
w-full
|
||||
"
|
||||
>
|
||||
<h2
|
||||
class="
|
||||
>
|
||||
<h2
|
||||
class="
|
||||
h2
|
||||
text-base font-semibold text-gray-800 dark:text-gray-200
|
||||
{e_class_h2}
|
||||
"
|
||||
>
|
||||
<span class="text-base font-semibold text-gray-800 dark:text-gray-200">
|
||||
Additional Information Included
|
||||
</span>
|
||||
</h2>
|
||||
<!-- Button to expand and show additional information -->
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
>
|
||||
<span class="text-base font-semibold text-gray-800 dark:text-gray-200">
|
||||
Additional Information Included
|
||||
</span>
|
||||
</h2>
|
||||
<!-- Button to expand and show additional information -->
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
btn btn-sm preset-tonal-tertiary
|
||||
{btn_class}
|
||||
"
|
||||
onclick={() => (hide_additional_info = !hide_additional_info)}
|
||||
title="Toggle additional information"
|
||||
>
|
||||
<span>
|
||||
{#if hide_additional_info}
|
||||
<!-- <span class="fas fa-caret-right"></span> -->
|
||||
<ChevronRight size="1em" class="inline-block" />
|
||||
Show
|
||||
{:else}
|
||||
<!-- <span class="fas fa-caret-down"></span> -->
|
||||
<ChevronDown size="1em" class="inline-block" />
|
||||
Hide
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="list-disc list-inside text-sm text-gray-800 dark:text-gray-200"
|
||||
class:hidden={hide_additional_info}
|
||||
>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Datetime =</span> {new Date().toISOString()}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">URL =</span> {window.location.href}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Browser =</span> {navigator.userAgent}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">In iframe =</span> {$ae_loc?.iframe}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Theme Name =</span> {$ae_loc?.theme_name}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Account ID =</span> {$slct.account_id}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">Access Type =</span> {$ae_loc?.access_type}</li>
|
||||
{#if $ae_loc?.person_id}
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">person_id =</span> {$ae_loc?.person_id}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">full_name =</span> {$ae_loc?.full_name}</li>
|
||||
{/if}
|
||||
{#if $ae_loc?.user_id}
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">user_id =</span> {$ae_loc?.user_id}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">username =</span> {$ae_loc?.username}</li>
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">email =</span> {$ae_loc?.email}</li>
|
||||
{/if}
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">API Base URL =</span> {$ae_api.base_url}</li>
|
||||
onclick={() => (hide_additional_info = !hide_additional_info)}
|
||||
title="Toggle additional information"
|
||||
>
|
||||
<span>
|
||||
{#if hide_additional_info}
|
||||
<!-- <span class="fas fa-caret-right"></span> -->
|
||||
<ChevronRight size="1em" class="inline-block" />
|
||||
Show
|
||||
{:else}
|
||||
<!-- <span class="fas fa-caret-down"></span> -->
|
||||
<ChevronDown size="1em" class="inline-block" />
|
||||
Hide
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="list-disc list-inside text-sm text-gray-800 dark:text-gray-200"
|
||||
class:hidden={hide_additional_info}
|
||||
>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Datetime =</span>
|
||||
{new Date().toISOString()}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">URL =</span>
|
||||
{window.location.href}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Browser =</span>
|
||||
{navigator.userAgent}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Viewport Size =</span>
|
||||
{window.innerWidth} x {window.innerHeight}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Screen Resolution =</span>
|
||||
{window.screen.width} x {window.screen.height}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Dark mode =</span>
|
||||
{window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">In iframe =</span>
|
||||
{$ae_loc?.iframe}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Theme Mode =</span>
|
||||
{$ae_loc?.theme_mode}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Theme Name =</span>
|
||||
{$ae_loc?.theme_name}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Account ID =</span>
|
||||
{$slct.account_id}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">Access Type =</span>
|
||||
{$ae_loc?.access_type}
|
||||
</li>
|
||||
{#if $ae_loc?.person_id}
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">person_id =</span>
|
||||
{$ae_loc?.person_id}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">full_name =</span>
|
||||
{$ae_loc?.full_name}
|
||||
</li>
|
||||
{/if}
|
||||
{#if $ae_loc?.user_id}
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">user_id =</span>
|
||||
{$ae_loc?.user_id}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">username =</span>
|
||||
{$ae_loc?.username}
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">email =</span>
|
||||
{$ae_loc?.email}
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">API Base URL =</span>
|
||||
{$ae_api.base_url}
|
||||
</li>
|
||||
|
||||
{#if additional_kv && Object.keys(additional_kv).length > 0}
|
||||
<h2 class="text-base font-semibold text-gray-800">Component Info:</h2>
|
||||
<ul class="list-disc list-inside text-gray-800 text-sm">
|
||||
{#each Object.entries(additional_kv) as [key, value]}
|
||||
<li><span class="text-sm text-gray-500 dark:text-gray-400">{key} =</span> {value ?? '-- not set --'}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{#if additional_kv && Object.keys(additional_kv).length > 0}
|
||||
<h2 class="text-base font-semibold text-gray-800">Component Info:</h2>
|
||||
<ul class="list-disc list-inside text-gray-800 text-sm">
|
||||
{#each Object.entries(additional_kv) as [key, value]}
|
||||
<li>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400">{key} =</span>
|
||||
{value ?? '-- not set --'}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</ul>
|
||||
<div class="text-sm text-gray-700 dark:text-gray-300 text-center italic">
|
||||
This information will be included in the help request to assist technical support in
|
||||
diagnosing the issue.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<div class="text-sm text-gray-700 dark:text-gray-300 text-center italic">
|
||||
This information will be included in the help request to assist technical support in diagnosing the issue.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
<div
|
||||
class="
|
||||
flex flex-row gap-2 items-center justify-around
|
||||
w-full
|
||||
mt-2
|
||||
"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($ae_loc.edit_mode) {
|
||||
// Confirm before clearing
|
||||
if (!confirm("Are you sure you want to clear IndexedDB databases, localStorage, and sessionStorage? This will also reload the page.")) {
|
||||
return;
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($ae_loc.edit_mode) {
|
||||
// Confirm before clearing
|
||||
if (
|
||||
!confirm(
|
||||
'Are you sure you want to clear IndexedDB databases, localStorage, and sessionStorage? This will also reload the page.'
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
|
||||
console.log(
|
||||
'Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...'
|
||||
);
|
||||
|
||||
// Clear Indexed DB
|
||||
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db'); // Events module
|
||||
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
|
||||
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
|
||||
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
|
||||
// Clear Indexed DB
|
||||
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db'); // Events module
|
||||
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
|
||||
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
|
||||
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
|
||||
|
||||
// Clear localStorage and sessionStorage
|
||||
// Clearing the localStorage will force it to be re-created.
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
// Clear localStorage and sessionStorage
|
||||
// Clearing the localStorage will force it to be re-created.
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
|
||||
goto('/', {invalidateAll: true});
|
||||
goto('/', { invalidateAll: true });
|
||||
|
||||
// window.location.reload(true);
|
||||
} else {
|
||||
// Confirm before clearing
|
||||
if (!confirm("Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.")) {
|
||||
return;
|
||||
}
|
||||
// window.location.reload(true);
|
||||
} else {
|
||||
// Confirm before clearing
|
||||
if (
|
||||
!confirm(
|
||||
'Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.'
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
|
||||
console.log(
|
||||
'Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...'
|
||||
);
|
||||
|
||||
// Clear Indexed DB
|
||||
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db'); // Events module
|
||||
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
|
||||
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
|
||||
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
|
||||
// Clear Indexed DB
|
||||
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
|
||||
indexedDB.deleteDatabase('ae_core_db');
|
||||
indexedDB.deleteDatabase('ae_events_db'); // Events module
|
||||
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
|
||||
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
|
||||
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
|
||||
|
||||
window.location.reload(true);
|
||||
}
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
// This does not seem to work fast enough or something?
|
||||
// goto('/', {invalidateAll: true});
|
||||
// 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="
|
||||
// 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
|
||||
preset-tonal-surface
|
||||
preset-outlined-warning-100-900
|
||||
@@ -458,19 +526,19 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
transition-all
|
||||
{btn_class}
|
||||
"
|
||||
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
|
||||
>
|
||||
<!-- <span class="fas fa-eraser mx-1"></span> -->
|
||||
<!-- <span class="fas fa-sync mx-1"></span> -->
|
||||
<RefreshCw size="1em" class="inline-block" />
|
||||
<span class="md:inline">Clear & Reload</span>
|
||||
</button>
|
||||
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
|
||||
>
|
||||
<!-- <span class="fas fa-eraser mx-1"></span> -->
|
||||
<!-- <span class="fas fa-sync mx-1"></span> -->
|
||||
<RefreshCw size="1em" class="inline-block" />
|
||||
<span class="md:inline">Clear & Reload</span>
|
||||
</button>
|
||||
|
||||
<!-- Cancel button -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_sess.show_help_tech = false)}
|
||||
class="
|
||||
<!-- Cancel button -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_sess.show_help_tech = false)}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-tertiary
|
||||
preset-outlined-tertiary-100-900
|
||||
@@ -478,23 +546,19 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
transition-all
|
||||
{btn_class}
|
||||
"
|
||||
title="Close Help Request Form"
|
||||
>
|
||||
<!-- <span class="fas fa-times"></span> -->
|
||||
<SquareX size="1em" class="inline-block" />
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{:else}
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_sess.show_help_tech = true)}
|
||||
class="
|
||||
title="Close Help Request Form"
|
||||
>
|
||||
<!-- <span class="fas fa-times"></span> -->
|
||||
<SquareX size="1em" class="inline-block" />
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ($ae_sess.show_help_tech = true)}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-filled-tertiary-400-600
|
||||
preset-outlined-tertiary-100-900
|
||||
@@ -503,23 +567,14 @@ class:to-90%={$ae_sess.show_help_tech} -->
|
||||
{btn_class}
|
||||
{show_btn_class}
|
||||
"
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<BadgeQuestionMark class="inline-block m-0.5" />
|
||||
{/if}
|
||||
<span class="hidden">
|
||||
{btn_text}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<BadgeQuestionMark class="inline-block m-0.5" />
|
||||
{/if}
|
||||
<span class="hidden">
|
||||
{btn_text}
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,55 +1,58 @@
|
||||
<script lang="ts">
|
||||
// *** Import Svelte specific
|
||||
// import { tick } from 'svelte';
|
||||
// import { goto, invalidateAll } from '$app/navigation';
|
||||
// *** Import Svelte specific
|
||||
// import { tick } from 'svelte';
|
||||
// import { goto, invalidateAll } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
// ArrowBigRight,
|
||||
// Bug,
|
||||
CircleX,
|
||||
// Eye, EyeOff,
|
||||
// Key,
|
||||
// LogIn, LogOut, LockKeyhole,
|
||||
// Mail, MailCheck,
|
||||
Menu,
|
||||
// RefreshCw, RefreshCcwDot,
|
||||
ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||
// ToggleLeft, ToggleRight,
|
||||
User, UserCheck,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
// *** Import other supporting libraries
|
||||
import {
|
||||
// ArrowBigRight,
|
||||
// Bug,
|
||||
CircleX,
|
||||
// Eye, EyeOff,
|
||||
// Key,
|
||||
// LogIn, LogOut, LockKeyhole,
|
||||
// Mail, MailCheck,
|
||||
Menu,
|
||||
// RefreshCw, RefreshCcwDot,
|
||||
ShieldEllipsis,
|
||||
ShieldMinus,
|
||||
ShieldPlus,
|
||||
ShieldUser,
|
||||
// ToggleLeft, ToggleRight,
|
||||
User,
|
||||
UserCheck,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
// *** Import Aether specific variables and functions
|
||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
|
||||
import Element_app_cfg from '$lib/app_components/e_app_cfg.svelte';
|
||||
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
|
||||
import Element_theme from '$lib/app_components/e_app_theme.svelte';
|
||||
import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
|
||||
import Element_app_cfg from '$lib/app_components/e_app_cfg.svelte';
|
||||
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
|
||||
import Element_theme from '$lib/app_components/e_app_theme.svelte';
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
data: any;
|
||||
hide?: null|boolean;
|
||||
expand?: boolean;
|
||||
}
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
data: any;
|
||||
hide?: null | boolean;
|
||||
expand?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
data = null,
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
}: Props = $props();
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
data = null,
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false)
|
||||
}: Props = $props();
|
||||
|
||||
let trigger_clear_access: null|boolean = $state(null);
|
||||
let trigger_clear_access: null | boolean = $state(null);
|
||||
</script>
|
||||
|
||||
|
||||
<!-- App System Menu -->
|
||||
<!-- min-h-full
|
||||
<!-- min-h-full
|
||||
max-h-max
|
||||
min-w-full
|
||||
max-w-max -->
|
||||
@@ -77,14 +80,14 @@ max-w-max -->
|
||||
class:hidden={!expand_btn}
|
||||
> -->
|
||||
<!-- && !expand -->
|
||||
<!-- !$ae_loc
|
||||
<!-- !$ae_loc
|
||||
?.sys_menu?.expand_btn -->
|
||||
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
|
||||
<!-- class:hover:border-transparent={!expand} -->
|
||||
<!-- mx-1 my-2 -->
|
||||
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
|
||||
<section
|
||||
class="
|
||||
class="
|
||||
ae_app__sys_menu
|
||||
|
||||
hidden-print
|
||||
@@ -113,22 +116,21 @@ max-w-max -->
|
||||
duration-500 hover:duration-200
|
||||
ease-in-out
|
||||
"
|
||||
class:top-0={expand && 1 == 3}
|
||||
class:opacity-100={expand}
|
||||
class:w-full={expand}
|
||||
class:hidden={hide}
|
||||
class:border-transparent={!expand}
|
||||
class:bg-transparent={!expand}
|
||||
>
|
||||
|
||||
<!-- class:hidden={!expand} -->
|
||||
<!-- class:preset-filled-warning-100-900={expand} -->
|
||||
<div
|
||||
class:opacity-50={!expand}
|
||||
class:opacity-100={expand}
|
||||
class:light:bg-blue-500={expand}
|
||||
class:dark:bg-blue-500={expand}
|
||||
class="
|
||||
class:top-0={expand && 1 == 3}
|
||||
class:opacity-100={expand}
|
||||
class:w-full={expand}
|
||||
class:hidden={hide}
|
||||
class:border-transparent={!expand}
|
||||
class:bg-transparent={!expand}
|
||||
>
|
||||
<!-- class:hidden={!expand} -->
|
||||
<!-- class:preset-filled-warning-100-900={expand} -->
|
||||
<div
|
||||
class:opacity-50={!expand}
|
||||
class:opacity-100={expand}
|
||||
class:light:bg-blue-500={expand}
|
||||
class:dark:bg-blue-500={expand}
|
||||
class="
|
||||
hidden-print
|
||||
flex flex-col items-end justify-end
|
||||
gap-1
|
||||
@@ -149,225 +151,193 @@ max-w-max -->
|
||||
duration-200 hover:duration-200
|
||||
ease-in-out
|
||||
"
|
||||
title="
|
||||
title="
|
||||
ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ?? '-- not set --'}
|
||||
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
|
||||
Username: {$ae_loc?.user?.username ?? '-- not set --'}
|
||||
Email: {$ae_loc?.user?.email ?? '-- not set --'}
|
||||
Access Type: {$ae_loc?.access_type ?? '-- not set --'}
|
||||
"
|
||||
>
|
||||
>
|
||||
{#if $ae_loc?.person_id}
|
||||
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
|
||||
<User size="1em" class="mx-1 inline-block text-gray-500" />
|
||||
<span class:hidden={!expand} class="group-hover:inline-block">
|
||||
{$ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $ae_loc?.person_id}
|
||||
<div
|
||||
class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
|
||||
>
|
||||
<User size="1em" class="mx-1 inline-block text-gray-500" />
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="group-hover:inline-block"
|
||||
>
|
||||
{$ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $ae_loc?.user_id}
|
||||
<!-- This is currently not set to show if not expanded. Saving space. -->
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
|
||||
>
|
||||
<ShieldUser size="1em" class="mx-1 inline-block text-gray-500" />
|
||||
<span class:hidden={!expand} class="group-hover:inline-block">
|
||||
{$ae_loc?.user?.username ?? '-- not set --'}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $ae_loc?.user_id}
|
||||
<!-- This is currently not set to show if not expanded. Saving space. -->
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
|
||||
>
|
||||
<ShieldUser size="1em" class="mx-1 inline-block text-gray-500" />
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="group-hover:inline-block"
|
||||
>
|
||||
{$ae_loc?.user?.username ?? '-- not set --'}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
|
||||
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
|
||||
<span
|
||||
class="flex flex-row-reverse gap-1 group text-base"
|
||||
title={`Current access type/level: ${$ae_loc.access_type}`}
|
||||
>
|
||||
<!-- <span class="fas fa-unlock mx-1"></span> -->
|
||||
<!-- <ShieldPlus class="inline-block" /> -->
|
||||
|
||||
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full group">
|
||||
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
|
||||
<span
|
||||
class="flex flex-row-reverse gap-1 group text-base"
|
||||
title={`Current access type/level: ${$ae_loc.access_type}`}
|
||||
>
|
||||
<!-- <span class="fas fa-unlock mx-1"></span> -->
|
||||
<!-- <ShieldPlus class="inline-block" /> -->
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-hat-wizard m-1"></span>
|
||||
<span class:hidden={!expand} class="hidden group-hover:inline-block">Super</span>
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-user-shield m-1"></span>
|
||||
<span class:hidden={!expand} class="hidden group-hover:inline-block">Manager</span>
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-user-ninja m-1"></span>
|
||||
<span class:hidden={!expand} class="hidden group-hover:inline-block">Administrator</span
|
||||
>
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-user-check m-1"></span>
|
||||
<span class:hidden={!expand} class="hidden group-hover:inline-block"
|
||||
>Trusted Access</span
|
||||
>
|
||||
{:else if $ae_loc.access_type == 'public'}
|
||||
Public
|
||||
<span class:hidden={!expand} class="hidden group-hover:inline-block">Access</span>
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
Authenticated
|
||||
<span class:hidden={!expand} class="hidden group-hover:inline-block">Access</span>
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
Anonymous Access
|
||||
{:else}
|
||||
Unknown Access
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_clear_access();
|
||||
// trigger_clear_access = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
|
||||
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-hat-wizard m-1"></span>
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="hidden group-hover:inline-block"
|
||||
>Super</span>
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-user-shield m-1"></span>
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="hidden group-hover:inline-block"
|
||||
>Manager</span>
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-user-ninja m-1"></span>
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="hidden group-hover:inline-block"
|
||||
>Administrator</span>
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-user-check m-1"></span>
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="hidden group-hover:inline-block"
|
||||
>Trusted Access</span>
|
||||
{:else if $ae_loc.access_type == 'public'}
|
||||
Public
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="hidden group-hover:inline-block"
|
||||
>Access</span>
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
Authenticated
|
||||
<span
|
||||
class:hidden={!expand}
|
||||
class="hidden group-hover:inline-block"
|
||||
>Access</span>
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
Anonymous Access
|
||||
{:else}
|
||||
Unknown Access
|
||||
{/if}
|
||||
</span>
|
||||
if (!expand) {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
// $ae_loc.app_cfg.show_element__access_type = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||||
} else {
|
||||
// expand = true;
|
||||
// $ae_loc.sys_menu.expand = false;
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
|
||||
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// handle_clear_access();
|
||||
// trigger_clear_access = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
|
||||
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> -->
|
||||
<!-- <ShieldMinus /> -->
|
||||
<ShieldEllipsis size="2em" class="inline-block" />
|
||||
<span class="hidden group-hover:inline-block">Passcode?</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
trigger_clear_access = true;
|
||||
|
||||
if (!expand) {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
// $ae_loc.app_cfg.show_element__access_type = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||||
} else {
|
||||
// expand = true;
|
||||
// $ae_loc.sys_menu.expand = false;
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
if (expand) {
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
// $ae_loc.sys_menu.expand_access_type = false;
|
||||
expand = false;
|
||||
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
|
||||
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> -->
|
||||
<!-- <ShieldMinus /> -->
|
||||
<ShieldEllipsis size="2em" class="inline-block" />
|
||||
<span class="hidden group-hover:inline-block">Passcode?</span>
|
||||
// $ae_loc.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
$ae_loc.app_cfg.show_element__access_type = true;
|
||||
$ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
trigger_clear_access = true;
|
||||
|
||||
if (expand) {
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
// $ae_loc.sys_menu.expand_access_type = false;
|
||||
expand = false;
|
||||
|
||||
// $ae_loc.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
$ae_loc.app_cfg.show_element__access_type = true;
|
||||
$ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
|
||||
// await tick();
|
||||
// console.log('Layout button click: Focus on passcode input!');
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
} else {
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
// $ae_loc.sys_menu.expand = false;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
}
|
||||
}}
|
||||
class="
|
||||
// await tick();
|
||||
// console.log('Layout button click: Focus on passcode input!');
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
} else {
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
// $ae_loc.sys_menu.expand = false;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
}
|
||||
}}
|
||||
class="
|
||||
btn btn-sm text-xs
|
||||
flex-row-reverse
|
||||
variant-outline-surface hover:variant-ghost-warning
|
||||
transition-all group
|
||||
"
|
||||
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
|
||||
<ShieldMinus class="inline-block" />
|
||||
<span class="hidden group-hover:inline-block">
|
||||
Clear?
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
|
||||
<ShieldMinus class="inline-block" />
|
||||
<span class="hidden group-hover:inline-block"> Clear? </span>
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
$ae_loc.sys_menu.hide_access_type = false;
|
||||
$ae_loc.sys_menu.expand_access_type = true;
|
||||
$ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||||
|
||||
$ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||||
|
||||
// $ae_loc.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
// $ae_loc.app_cfg.show_element__access_type = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||||
// await tick();
|
||||
console.log('Layout button click: Focus on passcode input!');
|
||||
/** @type {HTMLElement | null} */
|
||||
const to_focus = document.getElementById('access_passcode_input');
|
||||
to_focus?.focus();
|
||||
|
||||
}}
|
||||
class="
|
||||
// $ae_loc.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
// $ae_loc.app_cfg.show_element__access_type = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||||
// await tick();
|
||||
console.log('Layout button click: Focus on passcode input!');
|
||||
/** @type {HTMLElement | null} */
|
||||
const to_focus = document.getElementById('access_passcode_input');
|
||||
to_focus?.focus();
|
||||
}}
|
||||
class="
|
||||
btn btn-sm text-xs
|
||||
flex-row-reverse
|
||||
variant-outline-surface hover:variant-ghost-success
|
||||
transition-all group
|
||||
"
|
||||
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
|
||||
<!-- <span class="">Unlock?</span> -->
|
||||
<ShieldUser class="inline-block" />
|
||||
<span class="hidden group-hover:inline-block">Auth?</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
|
||||
>
|
||||
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
|
||||
<!-- <span class="">Unlock?</span> -->
|
||||
<ShieldUser class="inline-block" />
|
||||
<span class="hidden group-hover:inline-block">Auth?</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.edit_mode = false;
|
||||
// dispatch_edit_mode_changed();
|
||||
}}
|
||||
class="
|
||||
{#if $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.edit_mode = false;
|
||||
// dispatch_edit_mode_changed();
|
||||
}}
|
||||
class="
|
||||
btn btn-base text-sm
|
||||
preset-tonal-warning
|
||||
preset-outlined-warning-800-200
|
||||
@@ -376,22 +346,20 @@ max-w-max -->
|
||||
min-w-22 md:min-w-30 w-full max-w-fit
|
||||
gap-1
|
||||
"
|
||||
title="Click to turn off edit mode. Edit mode is currently on."
|
||||
>
|
||||
<span class="fas fa-toggle-on m-1 inline-block"></span>
|
||||
<span class="text-xs">Edit</span>
|
||||
<span class="hidden group-hover:inline-block group-hover:text-xs">
|
||||
Off
|
||||
</span>
|
||||
</button>
|
||||
{:else if $ae_loc.authenticated_access}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.edit_mode = true;
|
||||
// dispatch_edit_mode_changed();
|
||||
}}
|
||||
class="
|
||||
title="Click to turn off edit mode. Edit mode is currently on."
|
||||
>
|
||||
<span class="fas fa-toggle-on m-1 inline-block"></span>
|
||||
<span class="text-xs">Edit</span>
|
||||
<span class="hidden group-hover:inline-block group-hover:text-xs"> Off </span>
|
||||
</button>
|
||||
{:else if $ae_loc.authenticated_access}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$ae_loc.edit_mode = true;
|
||||
// dispatch_edit_mode_changed();
|
||||
}}
|
||||
class="
|
||||
btn btn-base text-sm
|
||||
preset-tonal-surface
|
||||
preset-outlined-warning-400-600
|
||||
@@ -400,26 +368,23 @@ max-w-max -->
|
||||
min-w-22 md:min-w-30 w-full max-w-fit
|
||||
gap-1
|
||||
"
|
||||
title="Click to torn on/enable edit mode. Edit mode is currently off/disabled."
|
||||
>
|
||||
<span class="fas fa-toggle-off m-1 inline-block"></span>
|
||||
<span class="text-xs">Edit</span>
|
||||
<span class="hidden group-hover:inline-block group-hover:text-xs">
|
||||
On?
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
title="Click to torn on/enable edit mode. Edit mode is currently off/disabled."
|
||||
>
|
||||
<span class="fas fa-toggle-off m-1 inline-block"></span>
|
||||
<span class="text-xs">Edit</span>
|
||||
<span class="hidden group-hover:inline-block group-hover:text-xs"> On? </span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
|
||||
<!-- <div> -->
|
||||
<!-- class:visible={expand} -->
|
||||
<!-- class:invisible={!expand} -->
|
||||
<!-- class:hover:visible={true} -->
|
||||
<!-- invisible -->
|
||||
<button
|
||||
type="button"
|
||||
class:w-full={expand}
|
||||
class="
|
||||
<!-- <div> -->
|
||||
<!-- class:visible={expand} -->
|
||||
<!-- class:invisible={!expand} -->
|
||||
<!-- class:hover:visible={true} -->
|
||||
<!-- invisible -->
|
||||
<button
|
||||
type="button"
|
||||
class:w-full={expand}
|
||||
class="
|
||||
btn btn-base text-sm
|
||||
preset-filled-tertiary-400-600
|
||||
preset-outlined-tertiary-400-600
|
||||
@@ -428,67 +393,62 @@ max-w-max -->
|
||||
min-w-22 md:min-w-30 w-full max-w-fit
|
||||
transition-all group
|
||||
"
|
||||
title="Show/Hide the system menu"
|
||||
onclick={async () => {
|
||||
if (!expand) {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
title="Show/Hide the system menu"
|
||||
onclick={async () => {
|
||||
if (!expand) {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
|
||||
// $ae_loc.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
$ae_loc.app_cfg.show_element__access_type = true;
|
||||
// $ae_loc.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
$ae_loc.app_cfg.show_element__access_type = true;
|
||||
|
||||
if ($ae_loc?.access_type == 'anonymous') {
|
||||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||||
// $ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
} else {
|
||||
// $ae_sess.app_cfg.show_element__passcode_input = false;
|
||||
$ae_loc.sys_menu.expand_user = false; // Not in use yet
|
||||
$ae_sess.show__sign_in_out__fields = false;
|
||||
}
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||||
// await tick();
|
||||
// console.log('Layout button click: Focus on passcode input!');
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
} else {
|
||||
expand = false;
|
||||
$ae_sess.sys_menu.expand = false;
|
||||
// $ae_loc.sys_menu.expand = false;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = false;
|
||||
}
|
||||
// $ae_loc.sys_menu.expand_btn = !expand_btn;
|
||||
}}
|
||||
>
|
||||
<!-- <span class=""> -->
|
||||
{#if expand}
|
||||
<CircleX class="m-1 inline-block" />
|
||||
{:else}
|
||||
<Menu class="m-1 inline-block" />
|
||||
{/if}
|
||||
<span class="text-xs hidden group-hover:inline-block">
|
||||
Menu
|
||||
</span>
|
||||
<!-- </span> -->
|
||||
</button>
|
||||
<!-- </div> -->
|
||||
if ($ae_loc?.access_type == 'anonymous') {
|
||||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||||
// $ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
} else {
|
||||
// $ae_sess.app_cfg.show_element__passcode_input = false;
|
||||
$ae_loc.sys_menu.expand_user = false; // Not in use yet
|
||||
$ae_sess.show__sign_in_out__fields = false;
|
||||
}
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||||
// await tick();
|
||||
// console.log('Layout button click: Focus on passcode input!');
|
||||
// /** @type {HTMLElement | null} */
|
||||
// const to_focus = document.getElementById('access_passcode_input');
|
||||
// to_focus?.focus();
|
||||
} else {
|
||||
expand = false;
|
||||
$ae_sess.sys_menu.expand = false;
|
||||
// $ae_loc.sys_menu.expand = false;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
// $ae_loc.app_cfg.show_element__passcode_input = false;
|
||||
}
|
||||
// $ae_loc.sys_menu.expand_btn = !expand_btn;
|
||||
}}
|
||||
>
|
||||
<!-- <span class=""> -->
|
||||
{#if expand}
|
||||
<CircleX class="m-1 inline-block" />
|
||||
{:else}
|
||||
<Menu class="m-1 inline-block" />
|
||||
{/if}
|
||||
<span class="text-xs hidden group-hover:inline-block"> Menu </span>
|
||||
<!-- </span> -->
|
||||
</button>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Show menu on right side of page -->
|
||||
<!-- min-h-96 -->
|
||||
<!-- absolute right-0 bottom-10 -->
|
||||
<!-- opacity-50 -->
|
||||
<!-- hover:opacity-100 -->
|
||||
<!-- bg-white dark:bg-gray-800 -->
|
||||
<div
|
||||
class:preset-filled-warning-200-800={expand}
|
||||
class:hidden={!expand}
|
||||
class="
|
||||
<!-- Show menu on right side of page -->
|
||||
<!-- min-h-96 -->
|
||||
<!-- absolute right-0 bottom-10 -->
|
||||
<!-- opacity-50 -->
|
||||
<!-- hover:opacity-100 -->
|
||||
<!-- bg-white dark:bg-gray-800 -->
|
||||
<div
|
||||
class:preset-filled-warning-200-800={expand}
|
||||
class:hidden={!expand}
|
||||
class="
|
||||
ae_app__sys_menu
|
||||
|
||||
hidden-print
|
||||
@@ -512,12 +472,11 @@ max-w-max -->
|
||||
|
||||
z-20 hover:z-30
|
||||
"
|
||||
>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class:w-full={expand}
|
||||
class="
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class:w-full={expand}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-filled-tertiary-400-600
|
||||
preset-outlined-tertiary-400-600
|
||||
@@ -525,82 +484,70 @@ max-w-max -->
|
||||
px-6 py-1
|
||||
transition-all group
|
||||
"
|
||||
title="Show/Hide the system menu"
|
||||
onclick={() => {
|
||||
if (!expand) {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
// $ae_loc.sys_menu.expand_access_type = true;
|
||||
title="Show/Hide the system menu"
|
||||
onclick={() => {
|
||||
if (!expand) {
|
||||
expand = true;
|
||||
$ae_sess.sys_menu.expand = true;
|
||||
// $ae_loc.sys_menu.expand_btn = false;
|
||||
// $ae_loc.sys_menu.expand_access_type = true;
|
||||
|
||||
// $ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||||
} else {
|
||||
$ae_sess.sys_menu.expand = false;
|
||||
$ae_loc.sys_menu.expand_user = false; // Not in use yet
|
||||
$ae_sess.show__sign_in_out__fields = false;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
}
|
||||
// $ae_loc.sys_menu.expand_btn = !expand_btn;
|
||||
// $ae_loc.sys_menu.expand = !expand;
|
||||
}}
|
||||
>
|
||||
{#if expand}
|
||||
<CircleX class="m-1 inline-block" />
|
||||
<span class="hidden group-hover:inline-block">
|
||||
Hide Menu
|
||||
</span>
|
||||
{:else}
|
||||
<Menu class="m-1 inline-block" />
|
||||
<span class="hidden group-hover:inline-block">
|
||||
Menu
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
// $ae_sess.app_cfg.show_element__passcode_input = true;
|
||||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||||
} else {
|
||||
$ae_sess.sys_menu.expand = false;
|
||||
$ae_loc.sys_menu.expand_user = false; // Not in use yet
|
||||
$ae_sess.show__sign_in_out__fields = false;
|
||||
// $ae_loc.sys_menu.expand_btn = true;
|
||||
}
|
||||
// $ae_loc.sys_menu.expand_btn = !expand_btn;
|
||||
// $ae_loc.sys_menu.expand = !expand;
|
||||
}}
|
||||
>
|
||||
{#if expand}
|
||||
<CircleX class="m-1 inline-block" />
|
||||
<span class="hidden group-hover:inline-block"> Hide Menu </span>
|
||||
{:else}
|
||||
<Menu class="m-1 inline-block" />
|
||||
<span class="hidden group-hover:inline-block"> Menu </span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
|
||||
<span
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
>
|
||||
<Element_app_cfg
|
||||
hide={$ae_loc.sys_menu.hide_app_cfg}
|
||||
expand={$ae_loc.sys_menu.expand_app_cfg}
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
>
|
||||
<Element_theme
|
||||
hide={$ae_loc.sys_menu.hide_app_cfg}
|
||||
expand={$ae_loc.sys_menu.expand_app_cfg}
|
||||
set_theme_mode={true}
|
||||
set_theme_name={true}
|
||||
/>
|
||||
</span>
|
||||
<!-- {/if} -->
|
||||
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
|
||||
<span class:hidden={!$ae_loc.edit_mode}>
|
||||
<Element_app_cfg
|
||||
hide={$ae_loc.sys_menu.hide_app_cfg}
|
||||
expand={$ae_loc.sys_menu.expand_app_cfg}
|
||||
/>
|
||||
</span>
|
||||
<span class:hidden={!$ae_loc.edit_mode}>
|
||||
<Element_theme
|
||||
hide={$ae_loc.sys_menu.hide_app_cfg}
|
||||
expand={$ae_loc.sys_menu.expand_app_cfg}
|
||||
set_theme_mode={true}
|
||||
set_theme_name={true}
|
||||
/>
|
||||
</span>
|
||||
<!-- {/if} -->
|
||||
|
||||
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
|
||||
<!-- hide={$ae_loc.sys_menu.hide_user} -->
|
||||
<!-- expand={$ae_loc.sys_menu.expand_user} -->
|
||||
<Element_sign_in_out
|
||||
data={data}
|
||||
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
|
||||
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
|
||||
<Element_access_type
|
||||
bind:hide={$ae_loc.sys_menu.hide_access_type}
|
||||
bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
|
||||
bind:expand={$ae_loc.sys_menu.expand_access_type}
|
||||
bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
|
||||
bind:trigger_clear_access={trigger_clear_access}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
|
||||
<!-- hide={$ae_loc.sys_menu.hide_user} -->
|
||||
<!-- expand={$ae_loc.sys_menu.expand_user} -->
|
||||
<Element_sign_in_out
|
||||
{data}
|
||||
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
|
||||
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
|
||||
<Element_access_type
|
||||
bind:hide={$ae_loc.sys_menu.hide_access_type}
|
||||
bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
|
||||
bind:expand={$ae_loc.sys_menu.expand_access_type}
|
||||
bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
|
||||
bind:trigger_clear_access
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,27 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { Moon, Sun } from '@lucide/svelte';
|
||||
|
||||
import {
|
||||
Moon, Sun
|
||||
} from '@lucide/svelte';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null|boolean;
|
||||
expand?: boolean;
|
||||
set_theme_mode: any;
|
||||
set_theme_name: any;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
set_theme_mode,
|
||||
set_theme_name
|
||||
}: Props = $props();
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null | boolean;
|
||||
expand?: boolean;
|
||||
set_theme_mode: any;
|
||||
set_theme_name: any;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
set_theme_mode,
|
||||
set_theme_name
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<!-- Change light and dark mode -->
|
||||
@@ -35,8 +31,8 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
|
||||
}
|
||||
-->
|
||||
<section
|
||||
id="AE-App-Theme"
|
||||
class="
|
||||
id="AE-App-Theme"
|
||||
class="
|
||||
ae_app_theme
|
||||
hidden-print
|
||||
|
||||
@@ -53,179 +49,175 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
|
||||
duration-300 delay-150 hover:delay-1000 hover:ease-out
|
||||
transition-all
|
||||
"
|
||||
class:hidden={hide}
|
||||
>
|
||||
class:hidden={hide}
|
||||
>
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
|
||||
>
|
||||
<!-- Theme Name: -->
|
||||
<span class="text-sm font-semibold">
|
||||
{$ae_loc.theme_name}
|
||||
</span>
|
||||
<select
|
||||
onchange={(event) => {
|
||||
// $slct_trigger = 'set_theme_name';
|
||||
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
|
||||
>
|
||||
<!-- Theme Name: -->
|
||||
<span class="text-sm font-semibold">
|
||||
{$ae_loc.theme_name}
|
||||
</span>
|
||||
<select
|
||||
onchange={(event) => {
|
||||
// $slct_trigger = 'set_theme_name';
|
||||
let new_theme_name = event.target.value;
|
||||
// document.documentElement.theme = new_theme_name;
|
||||
|
||||
let new_theme_name = event.target.value;
|
||||
// document.documentElement.theme = new_theme_name;
|
||||
console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
|
||||
// $slct_trigger = null;
|
||||
// Update the body attribute named "data-theme" to the current theme name.
|
||||
// document.body.setAttribute('data-theme', new_theme_name);
|
||||
// document.body.setAttribute('data-theme', $ae_loc?.theme_name);
|
||||
|
||||
console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
|
||||
// $slct_trigger = null;
|
||||
// Update the body attribute named "data-theme" to the current theme name.
|
||||
// document.body.setAttribute('data-theme', new_theme_name);
|
||||
// document.body.setAttribute('data-theme', $ae_loc?.theme_name);
|
||||
// NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
|
||||
document.documentElement.setAttribute('data-theme', new_theme_name);
|
||||
|
||||
// NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
|
||||
document.documentElement.setAttribute('data-theme', new_theme_name);
|
||||
// if ($ae_loc.theme_mode == 'light') {
|
||||
// document.documentElement.classList.remove('dark');
|
||||
// document.documentElement.classList.add('light');
|
||||
// } else if ($ae_loc.theme_mode == 'dark') {
|
||||
// document.documentElement.classList.remove('light');
|
||||
// document.documentElement.classList.add('dark');
|
||||
// }
|
||||
}}
|
||||
bind:value={$ae_loc.theme_name}
|
||||
class="select w-32"
|
||||
title="Theme name"
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
<option value="cerberus">Cerberus</option>
|
||||
<option value="concord">Concord</option>
|
||||
<option value="crimson">Crimson</option>
|
||||
<option value="hamlindigo">Hamlindigo</option>
|
||||
<option value="modern">Modern</option>
|
||||
<option value="nouveau">Nouveau</option>
|
||||
<option value="rocket">Rocket</option>
|
||||
<option value="terminus">Terminus</option>
|
||||
<option value="vintage">Vintage</option>
|
||||
<option value="wintry">Wintry</option>
|
||||
<!-- <option value="ae_c_osit">OSIT</option> -->
|
||||
<option value="AE_OSIT_default">OSIT</option>
|
||||
<option value="AE_c_IDAA_light">IDAA - light</option>
|
||||
<option value="AE_c_LCI">LCI</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
// if ($ae_loc.theme_mode == 'light') {
|
||||
// document.documentElement.classList.remove('dark');
|
||||
// document.documentElement.classList.add('light');
|
||||
// } else if ($ae_loc.theme_mode == 'dark') {
|
||||
// document.documentElement.classList.remove('light');
|
||||
// document.documentElement.classList.add('dark');
|
||||
// }
|
||||
}}
|
||||
bind:value={$ae_loc.theme_name}
|
||||
class="select w-32"
|
||||
title="Theme name"
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
<option value="cerberus">Cerberus</option>
|
||||
<option value="concord">Concord</option>
|
||||
<option value="crimson">Crimson</option>
|
||||
<option value="hamlindigo">Hamlindigo</option>
|
||||
<option value="modern">Modern</option>
|
||||
<option value="nouveau">Nouveau</option>
|
||||
<option value="rocket">Rocket</option>
|
||||
<option value="terminus">Terminus</option>
|
||||
<option value="vintage">Vintage</option>
|
||||
<option value="wintry">Wintry</option>
|
||||
<!-- <option value="ae_c_osit">OSIT</option> -->
|
||||
<option value="AE_OSIT_default">OSIT</option>
|
||||
<option value="AE_c_IDAA_light">IDAA - light</option>
|
||||
<option value="AE_c_LCI">LCI</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-2 items-center w-full"
|
||||
class:justify-between={expand}
|
||||
class:justify-end={!expand}
|
||||
>
|
||||
|
||||
{#if expand}
|
||||
<!-- Hide theme options -->
|
||||
<button
|
||||
class="
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-2 items-center w-full"
|
||||
class:justify-between={expand}
|
||||
class:justify-end={!expand}
|
||||
>
|
||||
{#if expand}
|
||||
<!-- Hide theme options -->
|
||||
<button
|
||||
class="
|
||||
btn btn-sm text-xs
|
||||
preset-tonal-secondary hover:preset-filled-secondary-500
|
||||
transition-all group
|
||||
"
|
||||
onclick={() => {
|
||||
expand = !expand;
|
||||
}}
|
||||
title="Hide Theme Options"
|
||||
>
|
||||
<!-- <span class="fas fa-compress-alt"></span> -->
|
||||
<span class="fas fa-compress-arrows-alt m-1"></span>
|
||||
<span
|
||||
class="
|
||||
onclick={() => {
|
||||
expand = !expand;
|
||||
}}
|
||||
title="Hide Theme Options"
|
||||
>
|
||||
<!-- <span class="fas fa-compress-alt"></span> -->
|
||||
<span class="fas fa-compress-arrows-alt m-1"></span>
|
||||
<span
|
||||
class="
|
||||
hidden
|
||||
group-hover:inline-block
|
||||
text-xs
|
||||
"
|
||||
>
|
||||
Hide Theme Options
|
||||
</span>
|
||||
</button>
|
||||
>
|
||||
Hide Theme Options
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="
|
||||
<button
|
||||
class="
|
||||
btn btn-sm text-xs
|
||||
preset-tonal-secondary hover:preset-filled-secondary-500
|
||||
transition-all group
|
||||
"
|
||||
onclick={() => {
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
$ae_loc.theme_mode = 'dark';
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
$ae_loc.theme_mode = 'light';
|
||||
}
|
||||
onclick={() => {
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
$ae_loc.theme_mode = 'dark';
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
$ae_loc.theme_mode = 'light';
|
||||
}
|
||||
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
document.documentElement.classList.remove('light');
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
}}
|
||||
title="Change light and dark mode"
|
||||
>
|
||||
<!-- <span class="fas fa-adjust"></span> -->
|
||||
{#if $ae_loc.theme_mode == 'light'}
|
||||
<Sun class="m-1" />
|
||||
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
|
||||
{:else if $ae_loc.theme_mode == 'dark'}
|
||||
<Moon class="m-1" />
|
||||
<span class="hidden group-hover:inline-block">Dark Mode</span>
|
||||
{/if}
|
||||
<span
|
||||
class="
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
document.documentElement.classList.remove('light');
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
}}
|
||||
title="Change light and dark mode"
|
||||
>
|
||||
<!-- <span class="fas fa-adjust"></span> -->
|
||||
{#if $ae_loc.theme_mode == 'light'}
|
||||
<Sun class="m-1" />
|
||||
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
|
||||
{:else if $ae_loc.theme_mode == 'dark'}
|
||||
<Moon class="m-1" />
|
||||
<span class="hidden group-hover:inline-block">Dark Mode</span>
|
||||
{/if}
|
||||
<span
|
||||
class="
|
||||
hidden
|
||||
group-hover:inline-block
|
||||
text-xs
|
||||
"
|
||||
>
|
||||
Change
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 group"
|
||||
onclick={() => {
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
$ae_loc.theme_mode = 'dark';
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
$ae_loc.theme_mode = 'light';
|
||||
}
|
||||
>
|
||||
Change
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 group"
|
||||
onclick={() => {
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
$ae_loc.theme_mode = 'dark';
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
$ae_loc.theme_mode = 'light';
|
||||
}
|
||||
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
document.documentElement.classList.remove('light');
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
if ($ae_loc.theme_mode == 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
} else if ($ae_loc.theme_mode == 'dark') {
|
||||
document.documentElement.classList.remove('light');
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
|
||||
expand = !expand;
|
||||
}}
|
||||
title="Change light and dark mode"
|
||||
>
|
||||
{#if $ae_loc.theme_mode == 'light'}
|
||||
<span class="inline-block" title="Light Mode">
|
||||
<Sun />
|
||||
</span>
|
||||
<span class="hidden group-hover:inline-block">Light Mode</span>
|
||||
{:else if $ae_loc.theme_mode == 'dark'}
|
||||
<span class="inline-block" title="Dark Mode">
|
||||
<Moon />
|
||||
</span>
|
||||
<span class="hidden group-hover:inline-block">Dark Mode</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
expand = !expand;
|
||||
}}
|
||||
title="Change light and dark mode"
|
||||
>
|
||||
{#if $ae_loc.theme_mode == 'light'}
|
||||
<span class="inline-block" title="Light Mode">
|
||||
<Sun />
|
||||
</span>
|
||||
<span class="hidden group-hover:inline-block">Light Mode</span>
|
||||
{:else if $ae_loc.theme_mode == 'dark'}
|
||||
<span class="inline-block" title="Dark Mode">
|
||||
<Moon />
|
||||
</span>
|
||||
<span class="hidden group-hover:inline-block">Dark Mode</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <section class="space-y-2">
|
||||
<!-- <section class="space-y-2">
|
||||
<h2 class="strong">Theme:</h2> -->
|
||||
<!-- Light/Dark Theme: -->
|
||||
<!-- <div>
|
||||
<!-- Light/Dark Theme: -->
|
||||
<!-- <div>
|
||||
<RadioGroup
|
||||
active="variant-glass-success"
|
||||
hover="hover:variant-ringed-surface"
|
||||
@@ -252,7 +244,4 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
|
||||
</RadioItem>
|
||||
</RadioGroup>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user