OSIT-AE-App-Svelte/src/routes/+page.svelte

<script lang="ts">
// console.log(`ae_root +page data:`, data);

import { onMount } from 'svelte';

import {
    Brain,
    House,
    Library,
    Pencil,
    RefreshCw,
    RefreshCcwDot,
    Satellite,
    ToggleLeft,
    ToggleRight,
    UserRound,
} from '@lucide/svelte';

// import { PUBLIC_TESTING } from '$env/static/public';
// console.log(`AE Config - +page.svelte PUBLIC_TESTING:`, PUBLIC_TESTING);

import Element_data_store from '$lib/elements/element_data_store.svelte';

// import { api } from '$lib/api';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
interface Props {
    /** @type {import('./$types').PageData} */
    data: any;
}

let { data }: Props = $props();
// import type { key_val } from '$lib/ae_stores';
// console.log($ae_loc, $ae_sess, $ae_api);

onMount(() => {
    console.log(`Root: +page.svelte; URL: ${data.url}`);
});
</script>

<svelte:head>
    <title>{$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>

<section
    class="ae_root mx-auto flex h-full flex-col items-center space-y-12 p-4 md:container"
    class:ae_root--auth_access={$ae_loc.auth_access}
    class:ae_root--public_access={$ae_loc.public_access}
    class:ae_root--trusted_access={$ae_loc.trusted_access}
    class:ae_root--administrator_access={$ae_loc.administrator_access}
    class:ae_root--manager_access={$ae_loc.manager_access}
    class:ae_root--super_access={$ae_loc.super_access}>
    <Element_data_store
        ds_code="hub__site__root_page_header"
        ds_type="html"
        for_type={null}
        for_id={null}
        ds_name="Default: AE Hub - Site root page header HTML"
        class_li={!$ae_loc.manager_access &&
        $ae_sess.ds_loaded.hub__site__root_page_header === false
            ? 'hidden'
            : ''}
        bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_header} />
    <!-- page header DS: {$ae_sess.ds_loaded.hub__site__root_page_header} -->

    <Element_data_store
        ds_code="hub__site__root_page_content"
        ds_type="html"
        for_type={null}
        for_id={null}
        ds_name="Default: AE Hub - Site root page content HTML"
        show_edit={false}
        class_li={!$ae_loc.manager_access &&
        $ae_sess.ds_loaded.hub__site__root_page_content === false
            ? 'hidden'
            : 'grow'}
        bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_content} />
    <!-- page content DS: {$ae_sess.ds_loaded.hub__site__root_page_content} -->

    <section class="flex flex-col items-center gap-2 space-y-6 p-4">
        <div
            data-sveltekit-preload-data="false"
            class="flex flex-row flex-wrap items-center justify-center">
            <button
                type="button"
                onclick={async () => {
                    const edit_mode = $ae_loc.edit_mode;
                    const confirm_msg = edit_mode
                        ? 'Clear all IDB caches, localStorage, and sessionStorage? Your sign-in will be preserved. This will reload the page.'
                        : 'Clear all IDB caches? This will reload the page.';

                    if (!confirm(confirm_msg)) return;

                    const db_list = await indexedDB.databases();
                    for (const db of db_list) {
                        if (db.name) indexedDB.deleteDatabase(db.name);
                    }

                    if (edit_mode) {
                        const ae_loc_saved = localStorage.getItem('ae_loc');
                        localStorage.clear();
                        sessionStorage.clear();
                        if (ae_loc_saved) localStorage.setItem('ae_loc', ae_loc_saved);
                    }

                    window.location.reload();
                }}
                class="btn btn-sm preset-tonal-surface hover:preset-outlined-warning text-error-300 hover:text-error-800 m-1 transition-all"
                title="Clear & Reload: Delete all IDB caches and reload. In edit mode also clears localStorage/sessionStorage, preserving your sign-in.">
                <!-- <span class="fas fa-sync mx-1"></span> -->
                <RefreshCw class="mx-1" />
                Reload
            </button>
            <button
                type="button"
                onclick={async () => {
                    if (
                        !confirm(
                            'FULL RESET: Delete ALL IndexedDB databases, clear localStorage and sessionStorage, then reload? This cannot be undone.'
                        )
                    ) {
                        return;
                    }

                    const db_list = await indexedDB.databases();
                    console.log('[clear_all] IDB databases found:', db_list.map((d) => d.name));
                    for (const db of db_list) {
                        if (db.name) indexedDB.deleteDatabase(db.name);
                    }

                    localStorage.clear();
                    sessionStorage.clear();

                    window.location.reload();
                }}
                class="btn btn-sm preset-tonal-surface hover:preset-outlined-warning text-error-300 hover:text-error-800 m-1 p-1 transition-all"
                title="Full Reset: Delete ALL IndexedDB databases, clear localStorage and sessionStorage for this origin, then reload.">
                <!-- <span class="fas fa-sync mx-1"></span> -->
                <RefreshCcwDot class="mx-1" />
                Clear Storage and Reload
            </button>

            {#if $ae_loc?.trusted_access}
                {#if $ae_loc?.edit_mode}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.edit_mode = false;
                        }}
                        class="btn btn-sm preset-tonal-surface hover:preset-outlined-warning text-error-300 hover:text-error-800 m-1 p-1 transition-all"
                        title="Turn off edit mode">
                        <ToggleRight size="1em" class="m-1" />
                        <span class="grow">
                            <Pencil size="1em" class="m-1" />
                            Edit Mode Off
                        </span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            $ae_loc.edit_mode = true;
                        }}
                        class="btn btn-sm preset-tonal-surface hover:preset-outlined-warning text-surface-300 hover:text-error-800 m-1 p-1 transition-all"
                        title="Turn on edit mode">
                        <ToggleLeft size="1em" class="m-1" />
                        <span class="grow">
                            <UserRound size="1em" class="m-1" />
                            Edit Mode?
                        </span>
                    </button>
                {/if}
            {/if}
        </div>

        <Element_data_store
            expire_minutes={2}
            ds_code="hub__site__root_page_footer"
            ds_type="html"
            for_type={null}
            for_id={null}
            ds_name="Default: AE Hub - Site root page footer HTML"
            display="block"
            class_li={!$ae_loc.manager_access &&
            $ae_sess.ds_loaded.hub__site__root_page_footer === false
                ? 'hidden'
                : ''}
            bind:ds_loaded={$ae_sess.ds_loaded.hub__site__root_page_footer} />
        <!-- page footer DS: {$ae_sess.ds_loaded.hub__site__root_page_footer} -->

        <ol class="hidden list-decimal">
            <li>Placeholder for Tailwind</li>
        </ol>
    </section>
</section>

<style lang="postcss">
</style>