Making the code easier to read and more consistent.
This commit is contained in:
Scott Idem
@@ -1,74 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Clock, Globe, Info, Landmark, List, ListFilter, MapPin, RefreshCcw, Star } from '@lucide/svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Clock,
|
||||
Globe,
|
||||
Info,
|
||||
Landmark,
|
||||
List,
|
||||
ListFilter,
|
||||
MapPin,
|
||||
RefreshCcw,
|
||||
Star
|
||||
} from '@lucide/svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
|
||||
let loading = $state(true);
|
||||
let tz_only_priority = $state(false);
|
||||
let lookups: any = $state({
|
||||
countries: [],
|
||||
time_zones: [],
|
||||
subdivisions: []
|
||||
});
|
||||
let loading = $state(true);
|
||||
let tz_only_priority = $state(false);
|
||||
let lookups: any = $state({
|
||||
countries: [],
|
||||
time_zones: [],
|
||||
subdivisions: []
|
||||
});
|
||||
|
||||
async function load_lookups() {
|
||||
loading = true;
|
||||
try {
|
||||
const [countries, subdivisions, time_zones] = await Promise.all([
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 1 }),
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country_subdivision', log_lvl: 1 }),
|
||||
api.get_ae_obj_li_for_lu({
|
||||
api_cfg: $ae_api,
|
||||
for_lu_type: 'time_zone',
|
||||
only_priority: tz_only_priority,
|
||||
log_lvl: 1
|
||||
})
|
||||
]);
|
||||
async function load_lookups() {
|
||||
loading = true;
|
||||
try {
|
||||
const [countries, subdivisions, time_zones] = await Promise.all([
|
||||
api.get_ae_obj_li_for_lu({
|
||||
api_cfg: $ae_api,
|
||||
for_lu_type: 'country',
|
||||
log_lvl: 1
|
||||
}),
|
||||
api.get_ae_obj_li_for_lu({
|
||||
api_cfg: $ae_api,
|
||||
for_lu_type: 'country_subdivision',
|
||||
log_lvl: 1
|
||||
}),
|
||||
api.get_ae_obj_li_for_lu({
|
||||
api_cfg: $ae_api,
|
||||
for_lu_type: 'time_zone',
|
||||
only_priority: tz_only_priority,
|
||||
log_lvl: 1
|
||||
})
|
||||
]);
|
||||
|
||||
console.log('Lookup Results - Countries:', countries);
|
||||
console.log('Lookup Results - Subdivisions:', subdivisions);
|
||||
console.log('Lookup Results - Time Zones:', time_zones);
|
||||
console.log('Lookup Results - Countries:', countries);
|
||||
console.log('Lookup Results - Subdivisions:', subdivisions);
|
||||
console.log('Lookup Results - Time Zones:', time_zones);
|
||||
|
||||
lookups.countries = countries || [];
|
||||
lookups.subdivisions = subdivisions || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load lookups:', error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
lookups.countries = countries || [];
|
||||
lookups.subdivisions = subdivisions || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load lookups:', error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_lookups();
|
||||
});
|
||||
|
||||
// Handle TZ priority toggle
|
||||
function toggle_tz_priority() {
|
||||
tz_only_priority = !tz_only_priority;
|
||||
load_lookups();
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_lookups();
|
||||
});
|
||||
|
||||
// Handle TZ priority toggle
|
||||
function toggle_tz_priority() {
|
||||
tz_only_priority = !tz_only_priority;
|
||||
load_lookups();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<header
|
||||
class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<List size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">System Lookups</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Global Reference Data</p>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
Global Reference Data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={load_lookups}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
|
||||
{:else}
|
||||
@@ -80,22 +105,29 @@
|
||||
|
||||
{#if loading && !lookups.countries.length}
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-6 animate-fade-in">
|
||||
<!-- 1. Countries -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Globe size={20} class="text-secondary-500" />
|
||||
Country Reference
|
||||
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
|
||||
<span
|
||||
class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold"
|
||||
>{lookups.countries.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<div
|
||||
class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Name</th>
|
||||
<th class="text-center">ISO Alpha-2</th>
|
||||
</tr>
|
||||
@@ -103,8 +135,13 @@
|
||||
<tbody>
|
||||
{#each lookups.countries as c (c.alpha_2_code)}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{c.name || c.english_short_name}</td>
|
||||
<td class="text-center"><span class="badge preset-tonal-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
|
||||
<td class="font-bold"
|
||||
>{c.name || c.english_short_name}</td>
|
||||
<td class="text-center"
|
||||
><span
|
||||
class="badge preset-tonal-surface font-mono text-primary-500"
|
||||
>{c.alpha_2_code}</span
|
||||
></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -113,17 +150,23 @@
|
||||
</div>
|
||||
|
||||
<!-- 2. Subdivisions -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<MapPin size={20} class="text-primary-500" />
|
||||
Country Subdivisions (States/Provinces)
|
||||
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
|
||||
<span
|
||||
class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold"
|
||||
>{lookups.subdivisions.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<div
|
||||
class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Country</th>
|
||||
<th>Name</th>
|
||||
<th class="text-center">Code</th>
|
||||
@@ -132,9 +175,14 @@
|
||||
<tbody>
|
||||
{#each lookups.subdivisions as s, i (i)}
|
||||
<tr class="transition-colors">
|
||||
<td class="opacity-60">{s.country_alpha_2_code}</td>
|
||||
<td class="opacity-60"
|
||||
>{s.country_alpha_2_code}</td>
|
||||
<td class="font-bold">{s.name}</td>
|
||||
<td class="text-center"><span class="badge preset-tonal-surface font-mono">{s.code}</span></td>
|
||||
<td class="text-center"
|
||||
><span
|
||||
class="badge preset-tonal-surface font-mono"
|
||||
>{s.code}</span
|
||||
></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -143,27 +191,40 @@
|
||||
</div>
|
||||
|
||||
<!-- 3. Time Zones -->
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<div
|
||||
class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
|
||||
<h3 class="h4 font-bold flex items-center gap-2">
|
||||
<Clock size={20} class="text-tertiary-500" />
|
||||
Time Zone Reference
|
||||
<span class="badge preset-tonal-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
<span
|
||||
class="badge preset-tonal-secondary text-[10px] uppercase font-bold"
|
||||
>{lookups.time_zones.length} Zones</span>
|
||||
</h3>
|
||||
<button
|
||||
class="btn btn-sm transition-all {tz_only_priority ? 'preset-filled-warning' : 'preset-tonal-surface'}"
|
||||
class="btn btn-sm transition-all {tz_only_priority
|
||||
? 'preset-filled-warning'
|
||||
: 'preset-tonal-surface'}"
|
||||
onclick={toggle_tz_priority}
|
||||
disabled={loading}
|
||||
>
|
||||
<Star size={14} class="mr-2 {tz_only_priority ? 'fill-current' : ''}" />
|
||||
{tz_only_priority ? 'Showing Priority' : 'Show Only Priority'}
|
||||
disabled={loading}>
|
||||
<Star
|
||||
size={14}
|
||||
class="mr-2 {tz_only_priority
|
||||
? 'fill-current'
|
||||
: ''}" />
|
||||
{tz_only_priority
|
||||
? 'Showing Priority'
|
||||
: 'Show Only Priority'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<div
|
||||
class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<tr
|
||||
class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Zone Name</th>
|
||||
<th class="text-right">Offset (Hours)</th>
|
||||
</tr>
|
||||
@@ -172,7 +233,11 @@
|
||||
{#each lookups.time_zones as tz (tz.name)}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{tz.name}</td>
|
||||
<td class="text-right"><span class="badge preset-tonal-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
|
||||
<td class="text-right"
|
||||
><span
|
||||
class="badge preset-tonal-surface font-mono"
|
||||
>{tz.offset_seconds / 3600}h</span
|
||||
></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -181,9 +246,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<div
|
||||
class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<Info size={16} class="text-primary-500" />
|
||||
<p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
|
||||
<p class="text-xs opacity-70">
|
||||
Lookup data is synchronized with the global system database and
|
||||
used for addresses, event scheduling, and localized displays.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user