Other areas of the AE SvelteKit primary routes.
This commit is contained in:
Scott Idem
File diff suppressed because it is too large
Load Diff
@@ -1,85 +1,100 @@
|
||||
<script lang="ts">
|
||||
import AE_Obj_Field_Editor_V3 from '$lib/elements/element_ae_obj_field_editor.svelte';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import { liveQuery } from 'dexie';
|
||||
import { db_journals } from '$lib/ae_journals/db_journals';
|
||||
import { load_ae_obj_id__journal } from '$lib/ae_journals/ae_journals__journal';
|
||||
import { load_ae_obj_id__journal_entry } from '$lib/ae_journals/ae_journals__journal_entry';
|
||||
import { Database, FileText, LoaderCircle, RefreshCw } from '@lucide/svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import AE_Obj_Field_Editor_V3 from '$lib/elements/element_ae_obj_field_editor.svelte';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import { liveQuery } from 'dexie';
|
||||
import { db_journals } from '$lib/ae_journals/db_journals';
|
||||
import { load_ae_obj_id__journal } from '$lib/ae_journals/ae_journals__journal';
|
||||
import { load_ae_obj_id__journal_entry } from '$lib/ae_journals/ae_journals__journal_entry';
|
||||
import { Database, FileText, LoaderCircle, RefreshCw } from '@lucide/svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let log_lvl = $state(1);
|
||||
let log_lvl = $state(1);
|
||||
|
||||
// Provided Test IDs
|
||||
let test_journal_id = $state('SWFK-48-89-90'); // 'BVYE-94-46-29'
|
||||
let test_journal_entry_id = $state('xRx-Y4-h3-fU');
|
||||
// Provided Test IDs
|
||||
let test_journal_id = $state('SWFK-48-89-90'); // 'BVYE-94-46-29'
|
||||
let test_journal_entry_id = $state('xRx-Y4-h3-fU');
|
||||
|
||||
// Fetch objects from API on mount to ensure local DB is populated
|
||||
onMount(async () => {
|
||||
if (log_lvl) console.log('Test Page: Initializing data from server...');
|
||||
try {
|
||||
await Promise.all([
|
||||
load_ae_obj_id__journal({
|
||||
api_cfg: $ae_api,
|
||||
journal_id: test_journal_id,
|
||||
log_lvl
|
||||
}),
|
||||
load_ae_obj_id__journal_entry({
|
||||
api_cfg: $ae_api,
|
||||
journal_entry_id: test_journal_entry_id,
|
||||
log_lvl
|
||||
})
|
||||
]);
|
||||
} catch (e) {
|
||||
console.error('Test Page: Error loading initial data', e);
|
||||
}
|
||||
});
|
||||
|
||||
// Dexie LiveQueries
|
||||
let lq__test_journal = $derived(
|
||||
liveQuery(async () => {
|
||||
return await db_journals.journal.get(test_journal_id);
|
||||
})
|
||||
);
|
||||
|
||||
let lq__test_journal_entry = $derived(
|
||||
liveQuery(async () => {
|
||||
return await db_journals.journal_entry.get(test_journal_entry_id);
|
||||
})
|
||||
);
|
||||
|
||||
function handle_success(data: any) {
|
||||
console.log('Test Page: Patch Success!', data);
|
||||
// Fetch objects from API on mount to ensure local DB is populated
|
||||
onMount(async () => {
|
||||
if (log_lvl) console.log('Test Page: Initializing data from server...');
|
||||
try {
|
||||
await Promise.all([
|
||||
load_ae_obj_id__journal({
|
||||
api_cfg: $ae_api,
|
||||
journal_id: test_journal_id,
|
||||
log_lvl
|
||||
}),
|
||||
load_ae_obj_id__journal_entry({
|
||||
api_cfg: $ae_api,
|
||||
journal_entry_id: test_journal_entry_id,
|
||||
log_lvl
|
||||
})
|
||||
]);
|
||||
} catch (e) {
|
||||
console.error('Test Page: Error loading initial data', e);
|
||||
}
|
||||
});
|
||||
|
||||
// Dexie LiveQueries
|
||||
let lq__test_journal = $derived(
|
||||
liveQuery(async () => {
|
||||
return await db_journals.journal.get(test_journal_id);
|
||||
})
|
||||
);
|
||||
|
||||
let lq__test_journal_entry = $derived(
|
||||
liveQuery(async () => {
|
||||
return await db_journals.journal_entry.get(test_journal_entry_id);
|
||||
})
|
||||
);
|
||||
|
||||
function handle_success(data: any) {
|
||||
console.log('Test Page: Patch Success!', data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-8 space-y-8 max-w-6xl mx-auto h-full overflow-y-auto">
|
||||
<header class="border-b border-surface-500/30 pb-4 flex justify-between items-center">
|
||||
<div class="mx-auto h-full max-w-6xl space-y-8 overflow-y-auto p-8">
|
||||
<header
|
||||
class="border-surface-500/30 flex items-center justify-between border-b pb-4">
|
||||
<div>
|
||||
<h1 class="h1">AE Obj Field Editor V3 Test</h1>
|
||||
<p class="opacity-70 font-mono text-xs">IDs: Journal={test_journal_id} | Entry={test_journal_entry_id}</p>
|
||||
<p class="font-mono text-xs opacity-70">
|
||||
IDs: Journal={test_journal_id} | Entry={test_journal_entry_id}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer bg-surface-200 dark:bg-surface-800 px-3 py-1.5 rounded-full shadow-inner">
|
||||
<span class="text-xs font-bold uppercase opacity-70">Edit Mode</span>
|
||||
<input type="checkbox" bind:checked={$ae_loc.edit_mode} class="checkbox" />
|
||||
<label
|
||||
class="bg-surface-200 dark:bg-surface-800 flex cursor-pointer items-center gap-2 rounded-full px-3 py-1.5 shadow-inner">
|
||||
<span class="text-xs font-bold uppercase opacity-70"
|
||||
>Edit Mode</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={$ae_loc.edit_mode}
|
||||
class="checkbox" />
|
||||
</label>
|
||||
<button class="btn variant-filled-primary" onclick={() => window.location.reload()}>
|
||||
<button
|
||||
class="btn variant-filled-primary"
|
||||
onclick={() => window.location.reload()}>
|
||||
<RefreshCw size="1em" class="mr-2" /> Reload Page
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<!-- COLUMN 1: JOURNAL TEST -->
|
||||
<div class="space-y-8">
|
||||
<h2 class="h2 flex items-center gap-2"><Database /> Journal Properties</h2>
|
||||
<h2 class="h2 flex items-center gap-2">
|
||||
<Database /> Journal Properties
|
||||
</h2>
|
||||
|
||||
{#if $lq__test_journal}
|
||||
<section class="card p-6 space-y-6 variant-soft-primary shadow-lg border border-primary-500/20">
|
||||
<section
|
||||
class="card variant-soft-primary border-primary-500/20 space-y-6 border p-6 shadow-lg">
|
||||
<div class="field_group">
|
||||
<label for="j_name" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Journal Name</label>
|
||||
<label
|
||||
for="j_name"
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
|
||||
>Journal Name</label>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
id="j_name"
|
||||
object_type="journal"
|
||||
@@ -88,12 +103,14 @@
|
||||
bind:current_value={$lq__test_journal.name}
|
||||
field_type="text"
|
||||
{log_lvl}
|
||||
on_success={handle_success}
|
||||
/>
|
||||
on_success={handle_success} />
|
||||
</div>
|
||||
|
||||
<div class="field_group">
|
||||
<label for="j_type" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Type Code</label>
|
||||
<label
|
||||
for="j_type"
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
|
||||
>Type Code</label>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
id="j_type"
|
||||
object_type="journal"
|
||||
@@ -102,17 +119,19 @@
|
||||
bind:current_value={$lq__test_journal.type_code}
|
||||
field_type="select"
|
||||
select_options={{
|
||||
'personal': 'Personal Journal',
|
||||
'work': 'Work Log',
|
||||
'shared': 'Shared Notes',
|
||||
'ai_brain': 'AI Context'
|
||||
personal: 'Personal Journal',
|
||||
work: 'Work Log',
|
||||
shared: 'Shared Notes',
|
||||
ai_brain: 'AI Context'
|
||||
}}
|
||||
{log_lvl}
|
||||
/>
|
||||
{log_lvl} />
|
||||
</div>
|
||||
|
||||
<div class="field_group">
|
||||
<label for="j_summary" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Summary</label>
|
||||
<label
|
||||
for="j_summary"
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
|
||||
>Summary</label>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
id="j_summary"
|
||||
object_type="journal"
|
||||
@@ -121,26 +140,34 @@
|
||||
bind:current_value={$lq__test_journal.summary}
|
||||
field_type="textarea"
|
||||
display_block={true}
|
||||
{log_lvl}
|
||||
/>
|
||||
{log_lvl} />
|
||||
</div>
|
||||
</section>
|
||||
{:else}
|
||||
<div class="card p-10 flex flex-col items-center justify-center opacity-50 gap-4 variant-soft-surface">
|
||||
<div
|
||||
class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
|
||||
<LoaderCircle size="32" class="animate-spin" />
|
||||
<p class="text-sm font-bold">Loading Journal {test_journal_id}...</p>
|
||||
<p class="text-sm font-bold">
|
||||
Loading Journal {test_journal_id}...
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- COLUMN 2: JOURNAL ENTRY TEST -->
|
||||
<div class="space-y-8">
|
||||
<h2 class="h2 flex items-center gap-2"><FileText /> Journal Entry Properties</h2>
|
||||
<h2 class="h2 flex items-center gap-2">
|
||||
<FileText /> Journal Entry Properties
|
||||
</h2>
|
||||
|
||||
{#if $lq__test_journal_entry}
|
||||
<section class="card p-6 space-y-6 variant-soft-secondary shadow-lg border border-secondary-500/20">
|
||||
<section
|
||||
class="card variant-soft-secondary border-secondary-500/20 space-y-6 border p-6 shadow-lg">
|
||||
<div class="field_group">
|
||||
<label for="e_name" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Entry Title</label>
|
||||
<label
|
||||
for="e_name"
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
|
||||
>Entry Title</label>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
id="e_name"
|
||||
object_type="journal_entry"
|
||||
@@ -148,39 +175,49 @@
|
||||
field_name="name"
|
||||
bind:current_value={$lq__test_journal_entry.name}
|
||||
field_type="text"
|
||||
{log_lvl}
|
||||
/>
|
||||
{log_lvl} />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="field_group">
|
||||
<label for="e_enabled" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Status</label>
|
||||
<label
|
||||
for="e_enabled"
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
|
||||
>Status</label>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
id="e_enabled"
|
||||
object_type="journal_entry"
|
||||
object_id={test_journal_entry_id}
|
||||
field_name="enable"
|
||||
bind:current_value={$lq__test_journal_entry.enable}
|
||||
bind:current_value={
|
||||
$lq__test_journal_entry.enable
|
||||
}
|
||||
field_type="checkbox"
|
||||
{log_lvl}
|
||||
/>
|
||||
{log_lvl} />
|
||||
</div>
|
||||
<div class="field_group">
|
||||
<label for="e_priority" class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Priority</label>
|
||||
<label
|
||||
for="e_priority"
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50"
|
||||
>Priority</label>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
id="e_priority"
|
||||
object_type="journal_entry"
|
||||
object_id={test_journal_entry_id}
|
||||
field_name="priority"
|
||||
bind:current_value={$lq__test_journal_entry.priority}
|
||||
bind:current_value={
|
||||
$lq__test_journal_entry.priority
|
||||
}
|
||||
field_type="checkbox"
|
||||
{log_lvl}
|
||||
/>
|
||||
{log_lvl} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field_group">
|
||||
<p class="label text-xs font-bold opacity-50 mb-1 uppercase tracking-tighter">Content (TipTap)</p>
|
||||
<p
|
||||
class="label mb-1 text-xs font-bold tracking-tighter uppercase opacity-50">
|
||||
Content (TipTap)
|
||||
</p>
|
||||
<AE_Obj_Field_Editor_V3
|
||||
object_type="journal_entry"
|
||||
object_id={test_journal_entry_id}
|
||||
@@ -188,34 +225,40 @@
|
||||
bind:current_value={$lq__test_journal_entry.content}
|
||||
field_type="tiptap"
|
||||
display_block={true}
|
||||
{log_lvl}
|
||||
/>
|
||||
{log_lvl} />
|
||||
</div>
|
||||
</section>
|
||||
{:else}
|
||||
<div class="card p-10 flex flex-col items-center justify-center opacity-50 gap-4 variant-soft-surface">
|
||||
<div
|
||||
class="card variant-soft-surface flex flex-col items-center justify-center gap-4 p-10 opacity-50">
|
||||
<LoaderCircle size="32" class="animate-spin" />
|
||||
<p class="text-sm font-bold">Loading Entry {test_journal_entry_id}...</p>
|
||||
<p class="text-sm font-bold">
|
||||
Loading Entry {test_journal_entry_id}...
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DEBUG FOOTER -->
|
||||
<section class="card p-4 space-y-4">
|
||||
<section class="card space-y-4 p-4">
|
||||
<h2 class="h3">Debug Context</h2>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-xs font-mono">
|
||||
<div class="bg-surface-900 text-success-500 p-2 rounded">
|
||||
<strong>Edit Mode:</strong> {$ae_loc.edit_mode}
|
||||
<div class="grid grid-cols-2 gap-4 font-mono text-xs lg:grid-cols-4">
|
||||
<div class="bg-surface-900 text-success-500 rounded p-2">
|
||||
<strong>Edit Mode:</strong>
|
||||
{$ae_loc.edit_mode}
|
||||
</div>
|
||||
<div class="bg-surface-900 text-success-500 p-2 rounded">
|
||||
<strong>Account ID:</strong> {$ae_loc.account_id}
|
||||
<div class="bg-surface-900 text-success-500 rounded p-2">
|
||||
<strong>Account ID:</strong>
|
||||
{$ae_loc.account_id}
|
||||
</div>
|
||||
<div class="bg-surface-900 text-success-500 p-2 rounded">
|
||||
<strong>Journal Status:</strong> {$lq__test_journal ? 'Cached' : 'Pending'}
|
||||
<div class="bg-surface-900 text-success-500 rounded p-2">
|
||||
<strong>Journal Status:</strong>
|
||||
{$lq__test_journal ? 'Cached' : 'Pending'}
|
||||
</div>
|
||||
<div class="bg-surface-900 text-success-500 p-2 rounded">
|
||||
<strong>Entry Status:</strong> {$lq__test_journal_entry ? 'Cached' : 'Pending'}
|
||||
<div class="bg-surface-900 text-success-500 rounded p-2">
|
||||
<strong>Entry Status:</strong>
|
||||
{$lq__test_journal_entry ? 'Cached' : 'Pending'}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,122 +1,141 @@
|
||||
<script lang="ts">
|
||||
import AE_Element_Data_Store from '$lib/elements/element_data_store.svelte';
|
||||
import { ae_loc } from '$lib/stores/ae_stores';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
import { RefreshCw, Trash2 } from '@lucide/svelte';
|
||||
// let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
|
||||
// let test_name_global = 'Global Header Test - hub__site__root_page_header';
|
||||
// let test_code_account = 'hub__site__root_page_header';
|
||||
// let test_name_account = 'Account Header Test - hub__site__root_page_header';
|
||||
// let test_code_specific = 'event_launcher_main_info';
|
||||
// let test_name_specific = 'Event Specific Test - event_launcher_main_info';
|
||||
import AE_Element_Data_Store from '$lib/elements/element_data_store.svelte';
|
||||
import { ae_loc } from '$lib/stores/ae_stores';
|
||||
import { db_core } from '$lib/ae_core/db_core';
|
||||
import { RefreshCw, Trash2 } from '@lucide/svelte';
|
||||
// let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
|
||||
// let test_name_global = 'Global Header Test - hub__site__root_page_header';
|
||||
// let test_code_account = 'hub__site__root_page_header';
|
||||
// let test_name_account = 'Account Header Test - hub__site__root_page_header';
|
||||
// let test_code_specific = 'event_launcher_main_info';
|
||||
// let test_name_specific = 'Event Specific Test - event_launcher_main_info';
|
||||
|
||||
let test_null_act_and_for = 'events__leads__overview'; // Expecting the Global Default
|
||||
let test_code_account = 'hub__site__root_page_header'; // Expecting the Account Default
|
||||
let test_code_and_for = 'event_launcher_main_info'; // Expecting the Specific Record (Event ID)
|
||||
let testing_event_id = 'pjrcghqwert'; // Per README test data
|
||||
|
||||
let test_null_act_and_for = 'events__leads__overview'; // Expecting the Global Default
|
||||
let test_code_account = 'hub__site__root_page_header'; // Expecting the Account Default
|
||||
let test_code_and_for = 'event_launcher_main_info'; // Expecting the Specific Record (Event ID)
|
||||
let testing_event_id = 'pjrcghqwert'; // Per README test data
|
||||
let log_lvl = $state(0);
|
||||
let refresh_trigger = $state(0);
|
||||
|
||||
async function clear_cache() {
|
||||
if (log_lvl) console.log('Asking to confirm clearing Data Store cache...');
|
||||
|
||||
let log_lvl = $state(0);
|
||||
let refresh_trigger = $state(0);
|
||||
|
||||
async function clear_cache() {
|
||||
if (log_lvl) console.log('Asking to confirm clearing Data Store cache...');
|
||||
|
||||
if (confirm('Are you sure you want to clear the local Data Store cache?')) {
|
||||
await db_core.data_store.clear();
|
||||
refresh_trigger++;
|
||||
alert('Cache cleared.');
|
||||
}
|
||||
if (confirm('Are you sure you want to clear the local Data Store cache?')) {
|
||||
await db_core.data_store.clear();
|
||||
refresh_trigger++;
|
||||
alert('Cache cleared.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-8 space-y-8 max-w-4xl mx-auto h-full overflow-y-auto">
|
||||
<header class="border-b border-surface-500/30 pb-4 flex justify-between items-center">
|
||||
<div class="mx-auto h-full max-w-4xl space-y-8 overflow-y-auto p-8">
|
||||
<header
|
||||
class="border-surface-500/30 flex items-center justify-between border-b pb-4">
|
||||
<div>
|
||||
<h1 class="h1">Data Store V3 Test Page</h1>
|
||||
<p class="opacity-70">Testing cascading lookup: Specific → Account → Global</p>
|
||||
<p class="opacity-70">
|
||||
Testing cascading lookup: Specific → Account → Global
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn variant-filled-warning" onclick={clear_cache}>
|
||||
<Trash2 size="1em" class="mr-2" /> Clear Cache
|
||||
</button>
|
||||
<button class="btn variant-filled-primary" onclick={() => refresh_trigger++}>
|
||||
<button
|
||||
class="btn variant-filled-primary"
|
||||
onclick={() => refresh_trigger++}>
|
||||
<RefreshCw size="1em" class="mr-2" /> Force Refresh
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#key refresh_trigger}
|
||||
<section class="card p-4 space-y-4 variant-soft-primary">
|
||||
<h2 class="h3">Scenario 1: Global Default</h2>
|
||||
<p class="text-sm">Fetching code <code>{test_null_act_and_for}</code>. Should fall back to <code>account_id = NULL</code> if not found for account.</p>
|
||||
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_null_act_and_for}
|
||||
ds_name={'Global Default Test'}
|
||||
{log_lvl}
|
||||
debug={true}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card variant-soft-primary space-y-4 p-4">
|
||||
<h2 class="h3">Scenario 1: Global Default</h2>
|
||||
<p class="text-sm">
|
||||
Fetching code <code>{test_null_act_and_for}</code>. Should fall
|
||||
back to <code>account_id = NULL</code> if not found for account.
|
||||
</p>
|
||||
<div
|
||||
class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_null_act_and_for}
|
||||
ds_name={'Global Default Test'}
|
||||
{log_lvl}
|
||||
debug={true} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card p-4 space-y-4 variant-soft-secondary">
|
||||
<h2 class="h3">Scenario 2: Account Default</h2>
|
||||
<p class="text-sm">Fetching code <code>{test_code_account}</code> for Account ID: <code>{$ae_loc.account_id}</code>.</p>
|
||||
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_code_account}
|
||||
ds_name={'Account Default Test'}
|
||||
{log_lvl}
|
||||
debug={true}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card variant-soft-secondary space-y-4 p-4">
|
||||
<h2 class="h3">Scenario 2: Account Default</h2>
|
||||
<p class="text-sm">
|
||||
Fetching code <code>{test_code_account}</code> for Account ID:
|
||||
<code>{$ae_loc.account_id}</code>.
|
||||
</p>
|
||||
<div
|
||||
class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_code_account}
|
||||
ds_name={'Account Default Test'}
|
||||
{log_lvl}
|
||||
debug={true} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card p-4 space-y-4 variant-soft-tertiary">
|
||||
<h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
|
||||
<p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {testing_event_id}</code>.</p>
|
||||
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_code_and_for}
|
||||
ds_name={'Specific Record Test'}
|
||||
for_type="event"
|
||||
for_id={testing_event_id}
|
||||
{log_lvl}
|
||||
debug={true}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card variant-soft-tertiary space-y-4 p-4">
|
||||
<h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
|
||||
<p class="text-sm">
|
||||
Fetching code <code>{test_code_and_for}</code> linked to
|
||||
<code>for_type: event</code>
|
||||
and <code>for_id: {testing_event_id}</code>.
|
||||
</p>
|
||||
<div
|
||||
class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_code_and_for}
|
||||
ds_name={'Specific Record Test'}
|
||||
for_type="event"
|
||||
for_id={testing_event_id}
|
||||
{log_lvl}
|
||||
debug={true} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card p-4 space-y-4 variant-soft-tertiary">
|
||||
<h2 class="h3">Scenario 4: Change Props Passed</h2>
|
||||
<p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {testing_event_id}</code>.</p>
|
||||
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_code_and_for}
|
||||
ds_name={'Specific Record Test'}
|
||||
ds_type="html"
|
||||
for_type="event"
|
||||
for_id={testing_event_id}
|
||||
class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
|
||||
show_edit={false}
|
||||
show_edit_btn={true}
|
||||
{log_lvl}
|
||||
debug={true}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card variant-soft-tertiary space-y-4 p-4">
|
||||
<h2 class="h3">Scenario 4: Change Props Passed</h2>
|
||||
<p class="text-sm">
|
||||
Fetching code <code>{test_code_and_for}</code> linked to
|
||||
<code>for_type: event</code>
|
||||
and <code>for_id: {testing_event_id}</code>.
|
||||
</p>
|
||||
<div
|
||||
class="bg-surface-100 dark:bg-surface-800 border-surface-500/20 rounded-lg border p-4">
|
||||
<AE_Element_Data_Store
|
||||
ds_code={test_code_and_for}
|
||||
ds_name={'Specific Record Test'}
|
||||
ds_type="html"
|
||||
for_type="event"
|
||||
for_id={testing_event_id}
|
||||
class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
|
||||
show_edit={false}
|
||||
show_edit_btn={true}
|
||||
{log_lvl}
|
||||
debug={true} />
|
||||
</div>
|
||||
</section>
|
||||
{/key}
|
||||
|
||||
<section class="card p-4 space-y-4">
|
||||
<section class="card space-y-4 p-4">
|
||||
<h2 class="h3">Current Context</h2>
|
||||
<div class="grid grid-cols-2 gap-4 text-xs font-mono">
|
||||
<div class="bg-surface-900 text-success-500 p-2 rounded">
|
||||
<strong>Account ID:</strong> {$ae_loc.account_id || 'NULL'}
|
||||
<div class="grid grid-cols-2 gap-4 font-mono text-xs">
|
||||
<div class="bg-surface-900 text-success-500 rounded p-2">
|
||||
<strong>Account ID:</strong>
|
||||
{$ae_loc.account_id || 'NULL'}
|
||||
</div>
|
||||
<div class="bg-surface-900 text-success-500 p-2 rounded">
|
||||
<strong>Edit Mode:</strong> {$ae_loc.edit_mode}
|
||||
<div class="bg-surface-900 text-success-500 rounded p-2">
|
||||
<strong>Edit Mode:</strong>
|
||||
{$ae_loc.edit_mode}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
<script lang="ts">
|
||||
import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
|
||||
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
|
||||
import { Code, Eye } from '@lucide/svelte';
|
||||
let test_content = $state('<h2>Welcome to the Visual Editor Test</h2><p>This editor uses <strong>native browser rich text</strong> capabilities.</p><ul><li>No library conflicts</li><li>Uses existing <em>.tiptap</em> styles</li><li>Instant performance</li></ul>');
|
||||
let log_lvl = 1;
|
||||
import AE_Comp_Editor_TipTap from '$lib/elements/element_editor_tiptap.svelte';
|
||||
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
|
||||
import { Code, Eye } from '@lucide/svelte';
|
||||
let test_content = $state(
|
||||
'<h2>Welcome to the Visual Editor Test</h2><p>This editor uses <strong>native browser rich text</strong> capabilities.</p><ul><li>No library conflicts</li><li>Uses existing <em>.tiptap</em> styles</li><li>Instant performance</li></ul>'
|
||||
);
|
||||
let log_lvl = 1;
|
||||
</script>
|
||||
|
||||
<div class="p-8 space-y-8 max-w-5xl mx-auto h-full overflow-y-auto">
|
||||
<header class="border-b border-surface-500/30 pb-4">
|
||||
<div class="mx-auto h-full max-w-5xl space-y-8 overflow-y-auto p-8">
|
||||
<header class="border-surface-500/30 border-b pb-4">
|
||||
<h1 class="h1">Rich Text Editor Test</h1>
|
||||
<p class="opacity-70">Testing the Zero-Dependency "TipTap" replacement.</p>
|
||||
<p class="opacity-70">
|
||||
Testing the Zero-Dependency "TipTap" replacement.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<!-- Visual Editor -->
|
||||
<section class="card p-4 space-y-4 variant-soft-primary">
|
||||
<section class="card variant-soft-primary space-y-4 p-4">
|
||||
<h2 class="h3 flex items-center gap-2">
|
||||
<Eye size="1em" class="text-primary-500" />
|
||||
Visual Editor (AE_Comp_Editor_TipTap)
|
||||
@@ -22,30 +26,33 @@
|
||||
<div class="bg-surface-100 dark:bg-surface-800 rounded-lg">
|
||||
<AE_Comp_Editor_TipTap
|
||||
bind:content={test_content}
|
||||
placeholder="Try writing something pretty..."
|
||||
/>
|
||||
placeholder="Try writing something pretty..." />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Source Code View -->
|
||||
<section class="card p-4 space-y-4 variant-soft-tertiary">
|
||||
<section class="card variant-soft-tertiary space-y-4 p-4">
|
||||
<h2 class="h3 flex items-center gap-2">
|
||||
<Code size="1em" class="text-tertiary-500" />
|
||||
Source View (AE_Comp_Editor_CodeMirror)
|
||||
</h2>
|
||||
<div class="bg-surface-100 dark:bg-surface-800 rounded-lg h-[250px]">
|
||||
<div
|
||||
class="bg-surface-100 dark:bg-surface-800 h-[250px] rounded-lg">
|
||||
<AE_Comp_Editor_CodeMirror
|
||||
bind:content={test_content}
|
||||
language="html"
|
||||
show_line_numbers={true}
|
||||
/>
|
||||
show_line_numbers={true} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- HTML Preview -->
|
||||
<section class="card p-4 space-y-4 bg-surface-900 text-green-400 font-mono text-xs overflow-auto max-h-96 shadow-2xl border border-white/10">
|
||||
<h2 class="text-sm font-bold opacity-50 uppercase tracking-widest border-b border-white/10 pb-2">Raw Bound Content (Saved to DB)</h2>
|
||||
<section
|
||||
class="card bg-surface-900 max-h-96 space-y-4 overflow-auto border border-white/10 p-4 font-mono text-xs text-green-400 shadow-2xl">
|
||||
<h2
|
||||
class="border-b border-white/10 pb-2 text-sm font-bold tracking-widest uppercase opacity-50">
|
||||
Raw Bound Content (Saved to DB)
|
||||
</h2>
|
||||
<pre class="whitespace-pre">{test_content}</pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,71 +1,76 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let status: string[] = $state([]);
|
||||
let status: string[] = $state([]);
|
||||
|
||||
function log(msg: string) {
|
||||
status = [...status, `${new Date().toLocaleTimeString()} - ${msg}`];
|
||||
console.log(`[FIX-SW] ${msg}`);
|
||||
function log(msg: string) {
|
||||
status = [...status, `${new Date().toLocaleTimeString()} - ${msg}`];
|
||||
console.log(`[FIX-SW] ${msg}`);
|
||||
}
|
||||
|
||||
async function nukeServiceWorkers() {
|
||||
log('Starting Service Worker cleanup...');
|
||||
|
||||
if (!('serviceWorker' in navigator)) {
|
||||
log('Service Workers not supported in this browser.');
|
||||
return;
|
||||
}
|
||||
|
||||
async function nukeServiceWorkers() {
|
||||
log('Starting Service Worker cleanup...');
|
||||
try {
|
||||
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||
log(`Found ${registrations.length} registrations.`);
|
||||
|
||||
if (!('serviceWorker' in navigator)) {
|
||||
log('Service Workers not supported in this browser.');
|
||||
return;
|
||||
for (const registration of registrations) {
|
||||
const scope = registration.scope;
|
||||
log(`Unregistering SW at scope: ${scope}`);
|
||||
const success = await registration.unregister();
|
||||
log(`Unregister success: ${success}`);
|
||||
}
|
||||
|
||||
try {
|
||||
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||
log(`Found ${registrations.length} registrations.`);
|
||||
|
||||
for (const registration of registrations) {
|
||||
const scope = registration.scope;
|
||||
log(`Unregistering SW at scope: ${scope}`);
|
||||
const success = await registration.unregister();
|
||||
log(`Unregister success: ${success}`);
|
||||
}
|
||||
|
||||
if (registrations.length === 0) {
|
||||
log('No active Service Workers found.');
|
||||
}
|
||||
|
||||
log('Clearing Cache Storage...');
|
||||
const cacheKeys = await caches.keys();
|
||||
for (const key of cacheKeys) {
|
||||
log(`Deleting cache: ${key}`);
|
||||
await caches.delete(key);
|
||||
}
|
||||
log('Cache storage cleared.');
|
||||
|
||||
log('DONE. Please reload the application now.');
|
||||
|
||||
} catch (err: any) {
|
||||
log(`ERROR: ${err.message}`);
|
||||
console.error(err);
|
||||
if (registrations.length === 0) {
|
||||
log('No active Service Workers found.');
|
||||
}
|
||||
|
||||
log('Clearing Cache Storage...');
|
||||
const cacheKeys = await caches.keys();
|
||||
for (const key of cacheKeys) {
|
||||
log(`Deleting cache: ${key}`);
|
||||
await caches.delete(key);
|
||||
}
|
||||
log('Cache storage cleared.');
|
||||
|
||||
log('DONE. Please reload the application now.');
|
||||
} catch (err: any) {
|
||||
log(`ERROR: ${err.message}`);
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
nukeServiceWorkers();
|
||||
});
|
||||
onMount(() => {
|
||||
nukeServiceWorkers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="p-8 max-w-2xl mx-auto font-mono">
|
||||
<h1 class="text-2xl font-bold mb-4 text-red-600">Service Worker Reset Tool</h1>
|
||||
<p class="mb-4">Attempting to unregister all service workers and clear caches to fix the TypeError loop.</p>
|
||||
<div class="mx-auto max-w-2xl p-8 font-mono">
|
||||
<h1 class="mb-4 text-2xl font-bold text-red-600">
|
||||
Service Worker Reset Tool
|
||||
</h1>
|
||||
<p class="mb-4">
|
||||
Attempting to unregister all service workers and clear caches to fix the
|
||||
TypeError loop.
|
||||
</p>
|
||||
|
||||
<div class="bg-gray-100 p-4 rounded border border-gray-300 min-h-[200px]">
|
||||
<div class="min-h-[200px] rounded border border-gray-300 bg-gray-100 p-4">
|
||||
{#each status as line, i (i)}
|
||||
<div class="border-b border-gray-200 last:border-0 py-1">{line}</div>
|
||||
<div class="border-b border-gray-200 py-1 last:border-0">
|
||||
{line}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||||
onclick={() => window.location.reload()}
|
||||
>
|
||||
class="mt-4 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
|
||||
onclick={() => window.location.reload()}>
|
||||
Reload Page
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,128 +1,151 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
|
||||
import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
|
||||
import * as Lucide from 'lucide-svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
|
||||
import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
|
||||
import * as Lucide from 'lucide-svelte';
|
||||
|
||||
let hosted_files: any[] = $state([]);
|
||||
let large_file_obj: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let hosted_files: any[] = $state([]);
|
||||
let large_file_obj: any = $state(null);
|
||||
let loading = $state(true);
|
||||
|
||||
// Testing Toggles
|
||||
let test_direct_download = $state(false);
|
||||
// Testing Toggles
|
||||
let test_direct_download = $state(false);
|
||||
|
||||
const LARGE_FILE_ID = 'sPw1he_RGCW';
|
||||
const test_ids = [
|
||||
'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
|
||||
'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
|
||||
'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
|
||||
'INVALID_ID_TEST'
|
||||
];
|
||||
const LARGE_FILE_ID = 'sPw1he_RGCW';
|
||||
const test_ids = [
|
||||
'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
|
||||
'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
|
||||
'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
|
||||
'INVALID_ID_TEST'
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
// Load the large file specifically first
|
||||
large_file_obj = await load_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: LARGE_FILE_ID,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
// Fallback for large file if API doesn't have it (for UI testing)
|
||||
if (!large_file_obj) {
|
||||
large_file_obj = {
|
||||
id: LARGE_FILE_ID,
|
||||
hosted_file_id: LARGE_FILE_ID,
|
||||
filename: 'Large_Test_File_Fallback.zip',
|
||||
extension: 'zip',
|
||||
hash_sha256: 'pending...'
|
||||
};
|
||||
}
|
||||
|
||||
const promises = test_ids.map(id =>
|
||||
load_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: id,
|
||||
log_lvl: 1
|
||||
})
|
||||
);
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
hosted_files = results.filter((f: any) => f !== null) as any[];
|
||||
|
||||
// Add a fake object for the invalid ID test
|
||||
hosted_files.push({
|
||||
id: 'INVALID_ID_TEST',
|
||||
hosted_file_id: 'INVALID_ID_TEST',
|
||||
filename: 'non_existent_file.txt',
|
||||
extension: 'txt',
|
||||
hash_sha256: '0000000000'
|
||||
});
|
||||
|
||||
loading = false;
|
||||
onMount(async () => {
|
||||
// Load the large file specifically first
|
||||
large_file_obj = await load_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: LARGE_FILE_ID,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
// Fallback for large file if API doesn't have it (for UI testing)
|
||||
if (!large_file_obj) {
|
||||
large_file_obj = {
|
||||
id: LARGE_FILE_ID,
|
||||
hosted_file_id: LARGE_FILE_ID,
|
||||
filename: 'Large_Test_File_Fallback.zip',
|
||||
extension: 'zip',
|
||||
hash_sha256: 'pending...'
|
||||
};
|
||||
}
|
||||
|
||||
const promises = test_ids.map((id) =>
|
||||
load_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: id,
|
||||
log_lvl: 1
|
||||
})
|
||||
);
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
hosted_files = results.filter((f: any) => f !== null) as any[];
|
||||
|
||||
// Add a fake object for the invalid ID test
|
||||
hosted_files.push({
|
||||
id: 'INVALID_ID_TEST',
|
||||
hosted_file_id: 'INVALID_ID_TEST',
|
||||
filename: 'non_existent_file.txt',
|
||||
extension: 'txt',
|
||||
hash_sha256: '0000000000'
|
||||
});
|
||||
|
||||
loading = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
|
||||
<div class="h-full w-full overflow-y-auto overflow-x-hidden bg-transparent">
|
||||
<div class="container mx-auto p-4 space-y-8 pb-20">
|
||||
<header class="flex flex-col md:flex-row justify-between items-start md:items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500 gap-4">
|
||||
<div class="h-full w-full overflow-x-hidden overflow-y-auto bg-transparent">
|
||||
<div class="container mx-auto space-y-8 p-4 pb-20">
|
||||
<header
|
||||
class="bg-surface-50-900-token rounded-container flex flex-col items-start justify-between gap-4 border border-gray-500 p-6 shadow-xl md:flex-row md:items-center">
|
||||
<div class="space-y-1">
|
||||
<h1 class="h1 flex items-center gap-3">
|
||||
<Lucide.Download class="text-primary-500" /> Hosted Files Testing
|
||||
</h1>
|
||||
<p class="opacity-60 text-sm">Testing the AE_Comp_Hosted_Files_Download_Button component</p>
|
||||
<p class="text-sm opacity-60">
|
||||
Testing the AE_Comp_Hosted_Files_Download_Button component
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3 items-center bg-black/20 p-3 rounded-lg border border-white/10">
|
||||
<div class="flex items-center gap-2 pr-3 border-r border-white/10">
|
||||
<span class="text-[10px] font-bold uppercase opacity-50">Edit Mode</span>
|
||||
<span class="badge {$ae_loc.edit_mode ? 'variant-filled-success' : 'variant-filled-surface'}">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-3 rounded-lg border border-white/10 bg-black/20 p-3">
|
||||
<div
|
||||
class="flex items-center gap-2 border-r border-white/10 pr-3">
|
||||
<span class="text-[10px] font-bold uppercase opacity-50"
|
||||
>Edit Mode</span>
|
||||
<span
|
||||
class="badge {$ae_loc.edit_mode
|
||||
? 'variant-filled-success'
|
||||
: 'variant-filled-surface'}">
|
||||
{$ae_loc.edit_mode ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-[10px] font-bold uppercase opacity-50">Direct Download</span>
|
||||
<span class="text-[10px] font-bold uppercase opacity-50"
|
||||
>Direct Download</span>
|
||||
<button
|
||||
class="btn btn-sm {test_direct_download ? 'variant-filled-primary' : 'variant-soft-surface'}"
|
||||
onclick={() => test_direct_download = !test_direct_download}
|
||||
>
|
||||
{test_direct_download ? 'Anchor Mode (<a>)' : 'Action Mode (<button>)'}
|
||||
class="btn btn-sm {test_direct_download
|
||||
? 'variant-filled-primary'
|
||||
: 'variant-soft-surface'}"
|
||||
onclick={() =>
|
||||
(test_direct_download = !test_direct_download)}>
|
||||
{test_direct_download
|
||||
? 'Anchor Mode (<a>)'
|
||||
: 'Action Mode (<button>)'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Dedicated Large File Section -->
|
||||
<div class="card p-6 variant-soft-primary border-2 border-primary-500 shadow-xl space-y-4">
|
||||
<header class="flex justify-between items-center border-b border-primary-500/30 pb-2">
|
||||
<div
|
||||
class="card variant-soft-primary border-primary-500 space-y-4 border-2 p-6 shadow-xl">
|
||||
<header
|
||||
class="border-primary-500/30 flex items-center justify-between border-b pb-2">
|
||||
<h2 class="h2 flex items-center gap-2">
|
||||
<Lucide.Zap class="text-warning-500" /> Large File Progress Test
|
||||
</h2>
|
||||
<div class="flex gap-2">
|
||||
<span class="badge variant-filled-warning animate-pulse">Testing Percentage</span>
|
||||
<span class="badge variant-filled-warning animate-pulse"
|
||||
>Testing Percentage</span>
|
||||
{#if test_direct_download}
|
||||
<span class="badge variant-filled-secondary">Direct Link</span>
|
||||
<span class="badge variant-filled-secondary"
|
||||
>Direct Link</span>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p class="text-sm opacity-80 italic">
|
||||
Use this file to verify the <strong>percentage counter</strong> and <strong>loading spinner</strong>.
|
||||
This file is ~100MB+, which should provide ample time to observe the progress state.
|
||||
<p class="text-sm italic opacity-80">
|
||||
Use this file to verify the <strong>percentage counter</strong>
|
||||
and <strong>loading spinner</strong>. This file is ~100MB+,
|
||||
which should provide ample time to observe the progress state.
|
||||
</p>
|
||||
|
||||
{#if large_file_obj}
|
||||
<div class="bg-black/20 p-4 rounded-container border border-primary-500/20 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div
|
||||
class="rounded-container border-primary-500/20 flex flex-col items-center justify-between gap-4 border bg-black/20 p-4 md:flex-row">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-primary-500/20 rounded-lg">
|
||||
<div class="bg-primary-500/20 rounded-lg p-3">
|
||||
<Lucide.FileArchive size={32} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">{large_file_obj.filename}</h3>
|
||||
<p class="text-xs font-mono opacity-50">ID: {LARGE_FILE_ID}</p>
|
||||
<h3 class="text-lg font-bold">
|
||||
{large_file_obj.filename}
|
||||
</h3>
|
||||
<p class="font-mono text-xs opacity-50">
|
||||
ID: {LARGE_FILE_ID}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -133,95 +156,112 @@
|
||||
show_direct_download={test_direct_download}
|
||||
variant="filled"
|
||||
color="primary"
|
||||
classes="w-full md:min-w-64 py-4"
|
||||
/>
|
||||
classes="w-full md:min-w-64 py-4" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card p-6 variant-soft-surface space-y-4 border border-gray-500 shadow-lg">
|
||||
<div
|
||||
class="card variant-soft-surface space-y-4 border border-gray-500 p-6 shadow-lg">
|
||||
<h2 class="h2">Style & Variant Trials</h2>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center gap-2 py-10 justify-center">
|
||||
<div class="flex items-center justify-center gap-2 py-10">
|
||||
<Lucide.LoaderCircle class="animate-spin" />
|
||||
<span>Loading test metadata gallery...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{#each hosted_files as file (file.id)}
|
||||
<div class="card p-4 variant-soft-secondary space-y-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="card variant-soft-secondary space-y-4 p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold">{file.filename}</h3>
|
||||
<p class="text-xs opacity-60 font-mono">ID: {file.id}</p>
|
||||
<p class="font-mono text-xs opacity-60">
|
||||
ID: {file.id}
|
||||
</p>
|
||||
</div>
|
||||
<span class="badge variant-filled-primary uppercase">{file.extension}</span>
|
||||
<span
|
||||
class="badge variant-filled-primary uppercase"
|
||||
>{file.extension}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 pt-2 sm:grid-cols-2">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Tonal</p>
|
||||
<p
|
||||
class="text-[10px] font-bold uppercase opacity-50">
|
||||
Variant: Tonal
|
||||
</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
show_direct_download={test_direct_download}
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
classes="w-full"
|
||||
/>
|
||||
classes="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Filled</p>
|
||||
<p
|
||||
class="text-[10px] font-bold uppercase opacity-50">
|
||||
Variant: Filled
|
||||
</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
show_direct_download={test_direct_download}
|
||||
variant="filled"
|
||||
color="secondary"
|
||||
classes="w-full"
|
||||
/>
|
||||
classes="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Outline</p>
|
||||
<p
|
||||
class="text-[10px] font-bold uppercase opacity-50">
|
||||
Variant: Outline
|
||||
</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
show_direct_download={test_direct_download}
|
||||
variant="outline"
|
||||
color="tertiary"
|
||||
classes="w-full"
|
||||
/>
|
||||
classes="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Ghost</p>
|
||||
<p
|
||||
class="text-[10px] font-bold uppercase opacity-50">
|
||||
Variant: Ghost
|
||||
</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
show_direct_download={test_direct_download}
|
||||
variant="ghost"
|
||||
color="surface"
|
||||
classes="w-full"
|
||||
/>
|
||||
classes="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 border-t border-surface-500/20">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Custom Label Snippet:</p>
|
||||
<div class="border-surface-500/20 border-t pt-2">
|
||||
<p
|
||||
class="text-[10px] font-bold uppercase opacity-50">
|
||||
Custom Label Snippet:
|
||||
</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
show_direct_download={test_direct_download}
|
||||
variant="tonal"
|
||||
color="success"
|
||||
classes="w-full mt-1"
|
||||
>
|
||||
classes="w-full mt-1">
|
||||
{#snippet label()}
|
||||
<Lucide.FileArchive size={16} class="mr-2" />
|
||||
<Lucide.FileArchive
|
||||
size={16}
|
||||
class="mr-2" />
|
||||
<span>Download Source</span>
|
||||
{/snippet}
|
||||
</AE_Comp_Hosted_Files_Download_Button>
|
||||
@@ -232,18 +272,20 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card p-6 variant-soft-warning border border-warning-500 shadow-lg">
|
||||
<h3 class="h3 font-bold text-warning-700 dark:text-warning-500 flex items-center gap-2">
|
||||
<div
|
||||
class="card variant-soft-warning border-warning-500 border p-6 shadow-lg">
|
||||
<h3
|
||||
class="h3 text-warning-700 dark:text-warning-500 flex items-center gap-2 font-bold">
|
||||
<Lucide.AlertTriangle size={20} /> Edge Case: Missing Metadata
|
||||
</h3>
|
||||
<p class="text-sm opacity-80 mt-2">
|
||||
Testing the component when <code>hosted_file_id</code> or <code>hosted_file_obj</code> is missing.
|
||||
<p class="mt-2 text-sm opacity-80">
|
||||
Testing the component when <code>hosted_file_id</code> or
|
||||
<code>hosted_file_obj</code> is missing.
|
||||
</p>
|
||||
<div class="flex gap-4 mt-4">
|
||||
<div class="mt-4 flex gap-4">
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={null}
|
||||
hosted_file_obj={null}
|
||||
/>
|
||||
hosted_file_obj={null} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user