The initial migration for IDAA Recovery Meetings. Progress

src/lib/ae_events__event.ts

@@ -67,11 +67,12 @@ export async function handle_load_ae_obj_id__event(
 }
 
 
-// Updated 2024-05-24
+// Updated 2024-09-27
-export async function handle_load_ae_obj_li__event(
+export async function load_ae_obj_li__event(
         {
             api_cfg,
-            account_id,
+            for_obj_type = 'account',
+            for_obj_id,
             inc_file_li = false,
             inc_location_li = false,
             inc_presentation_li = false,
@@ -83,7 +84,8 @@ export async function handle_load_ae_obj_li__event(
             log_lvl = 0
         }: {
             api_cfg: any,
-            account_id: string,
+            for_obj_type: string,
+            for_obj_id: string,
             inc_file_li?: boolean,
             inc_location_li?: boolean,
             inc_presentation_li?: boolean,
@@ -95,7 +97,7 @@ export async function handle_load_ae_obj_li__event(
             log_lvl?: number
         }
     ) {
-    console.log(`*** handle_load_ae_obj_li__event() *** account_id=${account_id}`);
+    console.log(`*** load_ae_obj_li__event() *** for_obj_id=${for_obj_id}`);
 
     let enabled: string = (params.qry__enabled ?? 'enabled'); // all, disabled, enabled
     let hidden: string = (params.qry__hidden ?? 'not_hidden'); // all, hidden, not_hidden
@@ -110,8 +112,8 @@ export async function handle_load_ae_obj_li__event(
     ae_promises.load__event_obj_li = await api.get_ae_obj_li_for_obj_id_crud({
         api_cfg: api_cfg,
         obj_type: 'event',
-        for_obj_type: 'account',
+        for_obj_type: for_obj_type,
-        for_obj_id: account_id,
+        for_obj_id: for_obj_id,
         use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
         use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
         enabled: enabled,
@@ -316,6 +318,23 @@ export function handle_db_save_ae_obj_li__event(
                     created_on: obj.created_on,
                     updated_on: obj.updated_on,
 
+                    // IDAA Recovery Meetings
+                    contact_li_json: obj.contact_li_json,
+                    external_person_id: obj.external_person_id,
+
+                    physical: obj.physical,
+                    virtual: obj.virtual,
+
+                    weekday_sunday: obj.weekday_sunday,
+                    weekday_monday: obj.weekday_monday,
+                    weekday_tuesday: obj.weekday_tuesday,
+                    weekday_wednesday: obj.weekday_wednesday,
+                    weekday_thursday: obj.weekday_thursday,
+                    weekday_friday: obj.weekday_friday,
+                    weekday_saturday: obj.weekday_saturday,
+
+                    recurring_start_time: obj.recurring_start_time,
+
                     // From SQL view
                     file_count: obj.file_count,
                     file_count_all: obj.file_count_all,

src/lib/ae_events_functions.ts

@@ -2,7 +2,7 @@
 
 import {
     handle_load_ae_obj_id__event,
-    handle_load_ae_obj_li__event,
+    load_ae_obj_li__event,
     create_ae_obj__event,
     update_ae_obj__event,
     handle_db_save_ae_obj_li__event,
@@ -78,7 +78,7 @@ import {
 
 let export_obj = {
     handle_load_ae_obj_id__event: handle_load_ae_obj_id__event,
-    handle_load_ae_obj_li__event: handle_load_ae_obj_li__event,
+    load_ae_obj_li__event: load_ae_obj_li__event,
     create_ae_obj__event: create_ae_obj__event,
     update_ae_obj__event: update_ae_obj__event,
     handle_db_save_ae_obj_li__event: handle_db_save_ae_obj_li__event,

src/lib/ae_idaa_stores.ts

@@ -0,0 +1,113 @@
+import { localStorageStore } from '@skeletonlabs/skeleton';
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+
+import type { key_val } from '$lib/ae_stores';
+
+// Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
+let ver = '2024-08-21_1646';
+let ver_idb = '2024-08-21_1645';
+
+/* *** BEGIN *** Initialize idaa_local_data_struct */
+// Longer-term app data. This should be stored to *local* storage.
+// Updated 2024-03-06
+let idaa_local_data_struct: key_val = {
+    ver: ver,
+    ver_idb: ver_idb,
+
+    // Shared
+    name: 'Aether - IDAA (SvelteKit 2.x Svelte 4.x)',
+    title: `OSIT's Æ IDAA`, // - Dev SvelteKit`, // Æ
+
+    'ds': {},
+
+    'idaa_cfg_json': {},
+
+    // all, disabled, enabled
+    'qry__enabled': 'enabled',
+    // all, hidden, not_hidden
+    'qry__hidden': 'not_hidden',
+    'qry__limit': 20,
+    'qry__offset': 0,
+
+    archives: {
+
+    },
+
+    posts: {
+
+    },
+
+    recovery_meetings: {
+
+    },
+};
+// console.log(`AE Stores - App IDAA Local Storage Data:`, idaa_local_data_struct);
+
+// This works, but does not uses local storage:
+// export let ae_loc = writable(idaa_local_data_struct);
+
+// This works and uses *local* storage:
+export let idaa_loc: Writable<key_val> = localStorageStore('ae_idaa_loc', idaa_local_data_struct);
+// console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
+
+
+/* *** BEGIN *** Initialize idaa_session_data_struct */
+// Temporary app data. This should be stored to session storage.
+// Updated 2024-03-06
+let idaa_session_data_struct: key_val = {
+    ver: ver,
+    ver_idb: ver_idb,
+    log_lvl: 1,
+
+    archives: {
+
+    },
+
+    posts: {
+
+    },
+
+    recovery_meetings: {
+
+    },
+
+};
+// console.log(`AE Stores - App IDAA Session Storage Data:`, idaa_session_data_struct);
+export let idaa_sess = writable(idaa_session_data_struct);
+
+
+/* *** BEGIN *** Initialize idaa_slct and idaa_trigger */
+/* The slct and slct_trigger variable should not be stored in local storage. Only use session storage because browser tabs can be open to different idaa, badges, exhibits, etc. */
+
+// Intended for temporary session storage.
+// Updated 2024-03-06
+let idaa_slct_obj_template: key_val = {
+    // Top level
+    'event_id': null,
+    'event_obj': {},
+    'event_obj_li': [],
+
+    'archive_id': null,
+    'archive_obj': {},
+    'archive_obj_li': [],
+
+    'archive_content_id': null,
+    'archive_content_obj': {},
+    'archive_content_obj_li': [],
+
+    'post_id': null,
+    'post_obj': {},
+    'post_obj_li': [],
+
+    'post_comment_id': null,
+    'post_comment_obj': {},
+    'post_comment_obj_li': [],
+};
+// console.log(`AE Stores - Selected IDAA Objects:`, idaa_slct_obj_template);
+
+// This works, and uses *session* (not local) storage:
+export let idaa_slct = writable(idaa_slct_obj_template);
+
+// This works and uses *local* storage:
+// export let idaa_slct: Writable<key_val> = localStorageStore('ae_idaa_slct', idaa_slct_obj_template);

src/lib/db_events.ts

@@ -42,6 +42,23 @@ export interface Event {
     created_on: Date;
     updated_on: null|Date;
 
+    // IDAA Recovery Meetings
+    contact_li_json?: null|string[]; // full_name, email, phone_mobile, phone_home, phone_office, other_text
+    external_person_id?: null|string;
+
+    physical?: null|boolean;
+    virtual?: null|boolean;
+
+    weekday_sunday?: null|boolean;
+    weekday_monday?: null|boolean;
+    weekday_tuesday?: null|boolean;
+    weekday_wednesday?: null|boolean;
+    weekday_thursday?: null|boolean;
+    weekday_friday?: null|boolean;
+    weekday_saturday?: null|boolean;
+
+    recurring_start_time?: null|string;
+
     // Additional fields for convenience (database views)
     file_count?: null|number;
     file_count_all?: null|number;

src/routes/core/+layout.ts

@@ -22,7 +22,7 @@ export async function load({ parent }) {
     // }
 
     // // // Should we limit these to event.conference = true?
-    // // let load_event_obj_li = events_func.handle_load_ae_obj_li__event({
+    // // let load_event_obj_li = events_func.load_ae_obj_li__event({
     // //     api_cfg: ae_acct.api,
     // //     account_id: account_id,
     // //     params: {enabled: 'enabled', qry__limit: 25},
@@ -38,7 +38,7 @@ export async function load({ parent }) {
     //     return false;
     // }
 
-    // let load_event_obj = events_func.handle_load_ae_obj_id__event({
+    // let load_event_obj = events_func.load_ae_obj_id__event({
     //     api_cfg: ae_acct.api,
     //     event_id: event_id,
     //     try_cache: true

src/routes/events_pres_mgmt/+layout.ts

@@ -31,7 +31,7 @@ export async function load({ parent }) {
 
     if (browser) {
         // Should we limit these to event.conference = true?
-        let load_event_obj_li = events_func.handle_load_ae_obj_li__event({
+        let load_event_obj_li = events_func.load_ae_obj_li__event({
             api_cfg: ae_acct.api,
             account_id: account_id,
             params: {enabled: 'enabled', qry__limit: 25},
@@ -41,7 +41,7 @@ export async function load({ parent }) {
         ae_acct.slct.event_obj_li = load_event_obj_li;
     }
 
-    // let load_event_obj = events_func.handle_load_ae_obj_id__event({
+    // let load_event_obj = events_func.load_ae_obj_id__event({
     //     api_cfg: ae_acct.api,
     //     event_id: event_id,
     //     try_cache: false
@@ -51,7 +51,7 @@ export async function load({ parent }) {
 
     // if (browser) {
     //     console.log(`Browser: ${browser}`);
-    //     events_func.handle_db_save_ae_obj_li__event({
+    //     events_func.db_save_ae_obj_li__event({
     //         obj_type: 'event',
     //         obj_li: [load_event_obj_li],
     //     });

src/routes/events_pres_mgmt/+page.ts

@@ -19,7 +19,7 @@ export async function load({ parent }) {
     // let ae_acct = data[account_id];
 
     // Should we limit these to event.conference = true?
-    // let load_event_obj_li = await events_func.handle_load_ae_obj_li__event({
+    // let load_event_obj_li = await events_func.load_ae_obj_li__event({
     //     api_cfg: ae_acct.api,
     //     account_id: account_id,
     //     params: {enabled: 'enabled', qry__limit: 25},

src/routes/events_speakers/+page.svelte

@@ -259,7 +259,7 @@ async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}
 
 
 
-// handle_load_ae_obj_li__event() was done in layout.ts
+// load_ae_obj_li__event() was done in layout.ts
 // This is different from how the sponsorships are loaded.
 // Do we need anything from the event object to load the presenters?
 

src/routes/idaa/(idaa)/+layout.svelte

@@ -0,0 +1,2 @@
+
+<slot />

src/routes/idaa/(idaa)/recovery_meetings/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+/** @type {import('./$types').LayoutData} */
+export let data: any;
+let log_lvl = 2;
+console.log(`ae_idaa_recovery_meetings +layout.svelte data:`, data);
+
+// import { browser } from '$app/environment';
+
+// import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+
+// import { liveQuery } from "dexie";
+// import { core_func } from '$lib/ae_core_functions';
+// import { db_events } from "$lib/db_events";
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+// import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+// import { events_func } from '$lib/ae_events_functions';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+
+// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
+$slct.account_id = data.account_id;
+// console.log(`$slct.account_id = `, $slct.account_id);
+let ae_acct = data[$slct.account_id];
+console.log(`ae_acct = `, ae_acct);
+
+$idaa_slct.event_obj_li = ae_acct.slct.event_obj_li;
+
+</script>
+
+
+<slot />

src/routes/idaa/(idaa)/recovery_meetings/+layout.ts

@@ -0,0 +1,45 @@
+/** @type {import('./$types').LayoutLoad} */
+console.log(`IDAA Recovery Meetings - [account_id] +layout.ts start`);
+
+import { error } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { events_func } from '$lib/ae_events_functions';
+
+export async function load({ params, parent }) { // route
+    let log_lvl = 0;
+
+    let data = await parent();
+    data.log_lvl = log_lvl;
+
+    let account_id = data.account_id;
+    let ae_acct = data[account_id];
+    // console.log(`ae_acct = `, ae_acct);
+
+    if (!account_id) {
+        console.log(`ae IDAA Recovery Meetings - [account_id] +page.ts: The account_id was not found!!!`);
+        error(404, {
+			message: 'Account ID not found'
+		});
+    }
+
+    ae_acct.slct.account_id = account_id;
+
+    if (browser) {
+        let load_event_obj_li = events_func.load_ae_obj_li__event({
+            api_cfg: ae_acct.api,
+            for_obj_type: 'account',
+            for_obj_id: account_id,
+            order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC', 'name': 'ASC'},
+            params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
+            try_cache: true,
+            log_lvl: log_lvl
+        });
+        console.log(`load_event_obj_li = `, load_event_obj_li);
+        ae_acct.slct.event_obj_li = load_event_obj_li;
+    }
+
+    // WARNING: Precaution against shared data between sites and sessions.
+    data[account_id] = ae_acct;
+
+    return data;
+}

src/routes/idaa/(idaa)/recovery_meetings/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+/** @type {import('./$types').PageData} */
+export let data: any;
+let log_lvl = 2;
+// console.log(`ae_events_pres_mgmt event [event_id] +page.svelte data:`, data);
+
+import { browser } from '$app/environment';
+// import { goto, invalidate, pushState, replaceState } from '$app/navigation';
+
+import { Modal } from 'flowbite-svelte';
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+// import Element_data_store from '$lib/element_data_store_v2.svelte';
+// import Comp_event_session_obj_li from '../../events_pres_mgmt/ae_comp__event_session_obj_li.svelte';
+
+import { liveQuery } from "dexie";
+import { core_func } from '$lib/ae_core_functions';
+import { db_events } from "$lib/db_events";
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+import Comp__event_obj_li from './ae_idaa_comp__event_obj_li.svelte';
+import Comp__event_obj_id_view from './ae_idaa_comp__event_obj_id_view.svelte';
+
+
+$: lq__event_obj_li = liveQuery(async () => {
+    let results = await db_events.events
+        .where('account_id')
+        .equals($slct.account_id)
+        .sortBy('name');
+
+    return results;
+});
+
+$: lq__event_obj = liveQuery(async () => {
+    let results = await db_events.events
+        .get($idaa_slct.event_id);
+
+    return results;
+});
+
+</script>
+
+
+<section
+    class="
+        ae_idaa__recovery_meetings
+        container h-full mx-auto
+        flex flex-col gap-1
+        py-1 px-2 pb-16
+        items-center
+        min-w-full
+        max-w-max
+        "
+    >
+
+
+<h1>Recovery Meetings {$lq__event_obj_li?.length}</h1>
+{#if $lq__event_obj_li && $lq__event_obj_li?.length }
+    <Comp__event_obj_li
+        lq__event_obj_li={lq__event_obj_li}
+        />
+    <!-- {#each $lq__event_obj_li as event_obj}
+        <div>{event_obj.name}</div>
+    {/each} -->
+{/if}
+
+
+</section>
+
+
+<!-- Main modal -->
+<Modal
+    title="{$lq__event_obj?.name} - {$lq__event_obj?.id}"
+    bind:open={$idaa_slct.event_id}
+    autoclose={false}
+    size="xl"
+    class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
+    >
+
+    <Comp__event_obj_id_view
+        lq__event_obj={lq__event_obj}
+        />
+
+</Modal>

src/routes/idaa/(idaa)/recovery_meetings/0_events__main.svelte

@@ -18,8 +18,8 @@ import { slct, slct_trigger, ae_app } from './stores';
 
 // *** Import Aether module components
 import Edit_event_obj from './10_edit__event_obj.svelte';
-import List_event_obj from './10_list__event_obj.svelte';
+import List_event_obj from './ae_idaa_comp__event_obj_li.svelte';
-import View_event_obj from './10_view__event_obj.svelte';
+import View_event_obj from './ae_idaa_comp__event_obj_id_view.svelte';
 
 // *** Export/Exposed variables and functions for component
 // export let account_id: string = $page['page_for']['account_id'];

src/routes/idaa/(idaa)/recovery_meetings/10_view__event_obj.svelte

@@ -1,392 +0,0 @@
-<script lang="ts">
-import { createEventDispatcher, onMount } from 'svelte';
-import { fade } from 'svelte/transition';
-
-import { ae } from 'aether_npm_lib';
-import { slct, slct_trigger, ae_app } from './stores';
-
-export let container_class_li = [];
-
-const dispatch = createEventDispatcher();
-
-if ($slct.event_id) {
-    console.log(`Event ID selected: ${$slct.event_id}`);
-    console.log(`Event Object selected: ${$slct.event_obj}`)
-
-    $slct_trigger = 'load__event_obj';
-}
-
-onMount(() => {
-    console.log('** Component Mounted: ** View - Event Obj');
-});
-
-
-dayjs.extend(window.dayjs_plugin_utc)
-dayjs.extend(window.dayjs_plugin_timezone);
-console.log(`UTC offset: ${dayjs().utcOffset()}`);
-console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
-// let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
-// let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
-let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
-console.log(test_time.format('YYYY-MM-DD HH:mm'));
-let adjusted_to_local_tz = test_time.tz('America/New_York');
-console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
-
-let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
-console.log(adjusted_to_local_tz_v2);
-
-</script>
-
-
-<section class="svelte_component ae_section ae_view event_obj view__event_obj {container_class_li.join(' ')}">
-
-<!-- <div class="event__header">
-    <h2 class="event__name">{@html $slct.event_obj.name}</h2>
-</div> -->
-
-<div class="event__content">
-    <div
-        class="meeting_description description"
-        >
-        <div class="ae_label event__description">Description:</div>
-        <pre class="ae_value event__description">{@html $slct.event_obj.description}</pre>
-    </div>
-
-    <div
-        class:ae_d_none={!$slct.event_obj.type}
-        class="meeting_type"
-        >
-        <span class="ae_label">Type of Recovery Meeting:</span>
-        <span class="ae_value">{$slct.event_obj.type}</span>
-    </div>
-
-    <div class="meeting_physical_virtual how_to_attended">
-
-        <div class="col-6 meeting_physical"
-            class:ae_d_none={(!$slct.event_obj.address_city && !$slct.event_obj.location_address_json) || ($slct.event_obj.location_address_json && !$slct.event_obj.location_address_json.city && !$slct.event_obj.location_address_json.country_subdivision_code && !$slct.event_obj.location_address_json.postal_code)}
-            >
-            <div class="meeting_address_location">
-                Address:
-                <address class="ae_value event__address">
-                    {#if $slct.event_obj.location_address_json}
-
-                        {#if $slct.event_obj.physical}
-                            {#if $slct.event_obj.location_address_json.name}{$slct.event_obj.location_address_json.name}<br>{/if}
-                            {#if $slct.event_obj.location_address_json.line_1}{$slct.event_obj.location_address_json.line_1}<br>{/if}
-                            {#if $slct.event_obj.location_address_json.line_2}{$slct.event_obj.location_address_json.line_2}<br>{/if}
-                            {#if $slct.event_obj.location_address_json.line_3}{$slct.event_obj.location_address_json.line_3}<br>{/if}
-                        {/if}
-                        {#if $slct.event_obj.location_address_json.city}{$slct.event_obj.location_address_json.city}, {/if}
-                        {#if $slct.event_obj.location_address_json.state_province}{$slct.event_obj.location_address_json.state_province}{/if}
-                        {#if $slct.event_obj.physical}
-                        {#if $slct.event_obj.location_address_json.postal_code}{$slct.event_obj.location_address_json.postal_code}{/if}
-                        {/if}
-                        {#if $slct.event_obj.location_address_json.country}
-                            <br>
-                            {$slct.event_obj.location_address_json.country}
-                        {/if}
-
-                    {:else}
-
-                        {#if $slct.event_obj.physical}
-                            {#if $slct.event_obj.address_name}{$slct.event_obj.address_name}<br>{/if}
-                            {#if $slct.event_obj.address_line_1}{$slct.event_obj.address_line_1}<br>{/if}
-                            {#if $slct.event_obj.address_line_2}{$slct.event_obj.address_line_2}<br>{/if}
-                            {#if $slct.event_obj.address_line_3}{$slct.event_obj.address_line_3}<br>{/if}
-                        {/if}
-                        {#if $slct.event_obj.address_city}{$slct.event_obj.address_city}, {/if}
-                        {#if $slct.event_obj.address_country_subdivision_name}{$slct.event_obj.address_country_subdivision_name}{/if}
-                        {#if $slct.event_obj.physical}
-                        {#if $slct.event_obj.address_postal_code}{$slct.event_obj.address_postal_code}{/if}
-                        {/if}
-                        {#if $slct.event_obj.address_country_name}
-                            <br>
-                            {$slct.event_obj.address_country_name}
-                        {/if}
-
-                    {/if}
-                </address>
-                {#if $slct.event_obj.physical}
-                <div
-                    class:ae_d_none={!$slct.event_obj.location_text}
-                    >
-                    Additional information: {@html $slct.event_obj.location_text}
-                </div>
-                {/if}
-            </div>
-        </div>
-
-        <div class="col-6"
-            class:meeting_virtual={$slct.event_obj.virtual}
-            class:ae_d_none={!$slct.event_obj.virtual}
-            >
-            <div class="meeting_attend_url"
-                class:ae_d_none={!$slct.event_obj.attend_url}
-                >
-                <span class="ae_label">
-                    <span class="fas fa-link"></span>
-                    URL:
-                </span>
-                <span class="ae_value">
-                    <a href="{$slct.event_obj.attend_url}">{$slct.event_obj.attend_url}</a>
-                </span>
-                <span class="ae_label">
-                    <span class="fas fa-lock"></span>
-                    Passcode:
-                </span>
-                <span class="ae_value">
-                    {$slct.event_obj.attend_url_passcode}
-                </span>
-            </div>
-            <div class="meeting_attend_phone"
-                class:ae_d_none={!$slct.event_obj.attend_phone}
-                >
-                <span class="ae_label">
-                    <span class="fas fa-phone"></span>
-                    Phone:
-                </span>
-                <span class="ae_value">
-                    <a href="tel:{$slct.event_obj.attend_phone}">{$slct.event_obj.attend_phone}</a>
-                </span>
-                <span class="ae_label">
-                    <span class="fas fa-lock"></span>
-                    Passcode:
-                </span>
-                <span class="ae_value">
-                    {$slct.event_obj.attend_phone_passcode}
-                </span>
-            </div>
-            <div class="attend_text"
-                class:ae_d_none={!$slct.event_obj.attend_text}
-                >
-                Additional information: {@html $slct.event_obj.attend_text}
-            </div>
-        </div>
-
-    </div>
-
-    <div class="meeting_when">
-
-        <div class="meeting_recurring"
-            class:ae_d_none={!$slct.event_obj.recurring}
-            >
-            <div class="meeting_recurring_text">
-                <span class="ae_label">
-                    <span class="fas fa-calendar-alt"></span>
-                    Frequency:
-                </span>
-                {#if $slct.event_obj.recurring_pattern == 'weekly'}<span>Weekly</span>
-                {:else if $slct.event_obj.recurring_pattern == 'monthly'}<span>Monthly</span>
-                {:else if $slct.event_obj.recurring_pattern == 'every other week'}<span>Every Other Week</span>
-                {:else if $slct.event_obj.recurring_pattern == 'other'}<span>Other</span>
-                {/if}
-                {#if $slct.event_obj.recurring_text && $slct.event_obj.recurring_text.length > 0}
-                    {#if $slct.event_obj.recurring_text.includes('*gen*') && $ae_app.administrator_access}
-                        <span class="ae_value ae_highlight">{@html $slct.event_obj.recurring_text}</span>
-                    {:else if (!$slct.event_obj.recurring_text.includes('*gen*'))}
-                        <span class="ae_value">{@html $slct.event_obj.recurring_text}</span>
-                    {/if}
-                <!-- - <span class="ae_value">{@html $slct.event_obj.recurring_text}</span> -->
-                {/if}
-            </div>
-            <div class="meeting_recurring_days_of_week">
-                <span class="ae_label">
-                    <span class="fas fa-calendar-week"></span>
-                    Days of week:
-                </span>
-                {#if $slct.event_obj.weekday_sunday}<span class="ae_value">Sunday</span>{/if}
-                {#if $slct.event_obj.weekday_monday}<span class="ae_value">Monday</span>{/if}
-                {#if $slct.event_obj.weekday_tuesday}<span class="ae_value">Tuesday</span>{/if}
-                {#if $slct.event_obj.weekday_wednesday}<span class="ae_value">Wednesday</span>{/if}
-                {#if $slct.event_obj.weekday_thursday}<span class="ae_value">Thursday</span>{/if}
-                {#if $slct.event_obj.weekday_friday}<span class="ae_value">Friday</span>{/if}
-                {#if $slct.event_obj.weekday_saturday}<span class="ae_value">Saturday</span>{/if}
-            </div>
-            <div class="meeting_recurring_time">
-                {#if $slct.event_obj.recurring_start_time}
-                <span class="meeting_recurring_start_time">
-                    <span class="ae_label">
-                        <span class="fas fa-clock"></span> Start time:
-                    </span>
-                    <span class="ae_value">{ae.util.iso_datetime_formatter(`2024-01-01 ${$slct.event_obj.recurring_start_time}`, 'time_short')}</span>
-                </span>
-                <span
-                    class:ae_d_none={!$slct.event_obj.recurring_end_time}
-                    >
-                    - <span class="meeting_recurring_end_time">
-                        <span class="ae_label">End time:</span>
-                        <span class="ae_value">{ae.util.iso_datetime_formatter(`2024-01-01 ${$slct.event_obj.recurring_end_time}`, 'time_short')}
-                        </span>
-                    </span>
-                </span>
-                <span
-                    class:ae_d_none={!$slct.event_obj.timezone}
-                    >
-                    - <span class="meeting_timezone">
-                        <span class="ae_label">Timezone:</span>
-                        <span class="ae_value">{$slct.event_obj.timezone}</span>
-                    </span>
-                </span>
-                {#if $slct.event_obj.timezone}
-                <span class="event__user_timezone">
-                    (
-                    <span class="ae_label">Your TZ:</span>
-                    <span class="ae_value">
-                        {dayjs.tz(`${$ae_app.current_date_str} ${$slct.event_obj.recurring_start_time}`, $slct.event_obj.timezone).tz($ae_app.current_timezone).format('hh:mm A')} {$ae_app.current_timezone}
-                    </span>
-                    )
-                </span>
-                {/if}
-                {:else}
-                    <span class="meeting_recurring_no_time">No times set</span>
-                {/if}
-
-
-
-                <!-- {dayjs.tz(`2024-01-08 20:00`, $slct.event_obj.timezone).format('hh:mm A')} -->
-            </div>
-        </div>
-
-    </div>
-
-
-    <div class="ae_list event__contacts">
-
-        {#if $slct.event_obj.contact_li_json && $slct.event_obj.contact_li_json.length && $slct.event_obj.contact_li_json[0].full_name}
-        <div class="event__contact"
-            class:ae_d_none={!$slct.event_obj.contact_li_json[0].full_name}
-            >
-            <span class="ae_label">
-                <span class="fas fa-user"></span> Contact:
-            </span>
-            {$slct.event_obj.contact_li_json[0].full_name}
-            {#if $slct.event_obj.contact_li_json[0].email}
-                | <a href="mailto:{$slct.event_obj.contact_li_json[0].email}?Subject={$slct.event_obj.full_name}">{$slct.event_obj.contact_li_json[0].email}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[0].phone_mobile}
-                <span class="ae_label">| Mobile:</span>
-                <a href="tel:{$slct.event_obj.contact_li_json[0].phone_mobile}">{$slct.event_obj.contact_li_json[0].phone_mobile}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[0].phone_home}
-                <span class="ae_label">| Home:</span>
-                <a href="tel:{$slct.event_obj.contact_li_json[0].phone_home}">{$slct.event_obj.contact_li_json[0].phone_home}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[0].phone_office}
-                <span class="ae_label">| Office:</span>
-                <a href="tel:{$slct.event_obj.contact_li_json[0].phone_office}">{$slct.event_obj.contact_li_json[0].phone_office}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[0].other_text}| {$slct.event_obj.contact_li_json[0].other_text}{/if}
-        </div>
-        {/if}
-
-        {#if $slct.event_obj.contact_li_json && $slct.event_obj.contact_li_json.length && $slct.event_obj.contact_li_json[1].full_name}
-        <div class="event__contact"
-            class:ae_d_none={!$slct.event_obj.contact_li_json[1].full_name}
-            >
-            <span class="ae_label">
-                <span class="fas fa-user"></span> Contact:
-            </span>
-            {$slct.event_obj.contact_li_json[1].full_name}
-            {#if $slct.event_obj.contact_li_json[1].email}
-                | <a href="mailto:{$slct.event_obj.contact_li_json[1].email}?Subject={$slct.event_obj.full_name}">{$slct.event_obj.contact_li_json[1].email}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[1].phone_mobile}
-                <span class="ae_label">| Mobile:</span>
-                <a href="tel:{$slct.event_obj.contact_li_json[1].phone_mobile}">{$slct.event_obj.contact_li_json[1].phone_mobile}</a>
-                {/if}
-            {#if $slct.event_obj.contact_li_json[1].phone_home}
-                <span class="ae_label">| Home:</span>
-                <a href="tel:{$slct.event_obj.contact_li_json[1].phone_home}">{$slct.event_obj.contact_li_json[1].phone_home}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[1].phone_office}
-                <span class="ae_label">| Office:</span>
-                <a href="tel:{$slct.event_obj.contact_li_json[1].phone_office}">{$slct.event_obj.contact_li_json[1].phone_office}</a>
-            {/if}
-            {#if $slct.event_obj.contact_li_json[1].other_text}| {$slct.event_obj.contact_li_json[1].other_text}{/if}
-        </div>
-        {/if}
-
-    </div>
-
-    <section class="ae_section ae_meta event__meta">
-        <div class="ae_group">
-            <span
-                class="event__id"
-                class:ae_d_none={!$ae_app.administrator_access}>
-                ID:
-                {$slct.event_obj.event_id_random}
-            </span>
-            <span
-                class="event__created_on"
-                >
-                Created on: {ae.util.iso_datetime_formatter($slct.event_obj.created_on, 'datetime_short')}
-            </span>
-            <span
-                class="event__updated_on"
-                class:ae_d_none={!$slct.event_obj.updated_on}
-                >
-                Updated on: {ae.util.iso_datetime_formatter($slct.event_obj.updated_on, 'datetime_short')}
-            </span>
-        </div>
-
-        {#if $ae_app.trusted_access || $slct.event_obj.external_person_id === $ae_app.novi_uuid || $slct.event_obj.contact_li_json[0].email === $ae_app.novi_email}
-        <div class="ae_options">
-            <button
-                on:click={() => {
-                    // $slct.event_id = $slct.event_obj.event_id_random;
-                    // $slct.event_obj = $slct.event_obj;
-
-                    // const url = new URL(location);
-                    // url.searchParams.set('event_id', $slct.event_obj.event_id_random);
-                    // history.pushState({}, '', url);
-
-                    // $ae_app.events.show_main__options = true;
-                    // $ae_app.events.show_list__event_obj_li = true;
-                    $ae_app.events.show_view__event_obj = false;
-                    $ae_app.events.show_edit__event_obj = true;
-                }}
-                class="btn btn-xs btn-secondary"
-                title={`Edit meeting: ${$slct.event_obj.name}`}
-                >
-                <span class="fas fa-edit"></span> Edit
-            </button>
-        </div>
-        {/if}
-    </section>
-
-</div>
-
-</section>
-
-
-<style>
-.ae_label {
-    font-size: smaller;
-}
-.ae_value {
-    font-weight: bold;
-}
-
-.event__user_timezone {
-    font-size: smaller;
-    font-style: italic;
-}
-
-.event_obj .ae_meta {
-    flex-direction: column;
-    /* justify-content: space-between; */
-}
-
-.event_obj .ae_meta .ae_group {
-    flex-direction: row;
-}
-
-.event_obj .ae_meta .ae_options {
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-/* a {
-    color: #82B6E1;
-} */
-</style>

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_view.svelte

@@ -0,0 +1,394 @@
+<script lang="ts">
+import { createEventDispatcher, onMount } from 'svelte';
+import { fade } from 'svelte/transition';
+
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+
+export let lq__event_obj: any;
+export let container_class_li = [];
+
+const dispatch = createEventDispatcher();
+
+if ($idaa_slct.event_id) {
+    console.log(`Event ID selected: ${$idaa_slct.event_id}`);
+    console.log(`Event Object selected: ${$lq__event_obj}`)
+
+    $slct_trigger = 'load__event_obj';
+}
+
+onMount(() => {
+    console.log('** Component Mounted: ** View - Event Obj');
+});
+
+
+// dayjs.extend(window.dayjs_plugin_utc)
+// dayjs.extend(window.dayjs_plugin_timezone);
+// console.log(`UTC offset: ${dayjs().utcOffset()}`);
+// console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
+// // let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
+// // let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
+// let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
+// console.log(test_time.format('YYYY-MM-DD HH:mm'));
+// let adjusted_to_local_tz = test_time.tz('America/New_York');
+// console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
+
+// let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
+// console.log(adjusted_to_local_tz_v2);
+
+</script>
+
+
+<section class="svelte_component ae_section ae_view event_obj view__event_obj {container_class_li.join(' ')}">
+
+<!-- <div class="event__header">
+    <h2 class="event__name">{@html $lq__event_obj?.name}</h2>
+</div> -->
+
+<div class="event__content">
+    <div
+        class="meeting_description description"
+        >
+        <div class="ae_label event__description">Description:</div>
+        <pre class="ae_value event__description">{@html $lq__event_obj?.description}</pre>
+    </div>
+
+    <div
+        class:ae_d_none={!$lq__event_obj?.type}
+        class="meeting_type"
+        >
+        <span class="ae_label">Type of Recovery Meeting:</span>
+        <span class="ae_value">{$lq__event_obj?.type}</span>
+    </div>
+
+    <div class="meeting_physical_virtual how_to_attended">
+
+        <div class="col-6 meeting_physical"
+            class:ae_d_none={(!$lq__event_obj?.address_city && !$lq__event_obj?.location_address_json) || ($lq__event_obj?.location_address_json && !$lq__event_obj?.location_address_json.city && !$lq__event_obj?.location_address_json.country_subdivision_code && !$lq__event_obj?.location_address_json.postal_code)}
+            >
+            <div class="meeting_address_location">
+                Address:
+                <address class="ae_value event__address">
+                    {#if $lq__event_obj?.location_address_json}
+
+                        {#if $lq__event_obj?.physical}
+                            {#if $lq__event_obj?.location_address_json.name}{$lq__event_obj?.location_address_json.name}<br>{/if}
+                            {#if $lq__event_obj?.location_address_json.line_1}{$lq__event_obj?.location_address_json.line_1}<br>{/if}
+                            {#if $lq__event_obj?.location_address_json.line_2}{$lq__event_obj?.location_address_json.line_2}<br>{/if}
+                            {#if $lq__event_obj?.location_address_json.line_3}{$lq__event_obj?.location_address_json.line_3}<br>{/if}
+                        {/if}
+                        {#if $lq__event_obj?.location_address_json.city}{$lq__event_obj?.location_address_json.city}, {/if}
+                        {#if $lq__event_obj?.location_address_json.state_province}{$lq__event_obj?.location_address_json.state_province}{/if}
+                        {#if $lq__event_obj?.physical}
+                        {#if $lq__event_obj?.location_address_json.postal_code}{$lq__event_obj?.location_address_json.postal_code}{/if}
+                        {/if}
+                        {#if $lq__event_obj?.location_address_json.country}
+                            <br>
+                            {$lq__event_obj?.location_address_json.country}
+                        {/if}
+
+                    {:else}
+
+                        {#if $lq__event_obj?.physical}
+                            {#if $lq__event_obj?.address_name}{$lq__event_obj?.address_name}<br>{/if}
+                            {#if $lq__event_obj?.address_line_1}{$lq__event_obj?.address_line_1}<br>{/if}
+                            {#if $lq__event_obj?.address_line_2}{$lq__event_obj?.address_line_2}<br>{/if}
+                            {#if $lq__event_obj?.address_line_3}{$lq__event_obj?.address_line_3}<br>{/if}
+                        {/if}
+                        {#if $lq__event_obj?.address_city}{$lq__event_obj?.address_city}, {/if}
+                        {#if $lq__event_obj?.address_country_subdivision_name}{$lq__event_obj?.address_country_subdivision_name}{/if}
+                        {#if $lq__event_obj?.physical}
+                        {#if $lq__event_obj?.address_postal_code}{$lq__event_obj?.address_postal_code}{/if}
+                        {/if}
+                        {#if $lq__event_obj?.address_country_name}
+                            <br>
+                            {$lq__event_obj?.address_country_name}
+                        {/if}
+
+                    {/if}
+                </address>
+                {#if $lq__event_obj?.physical}
+                <div
+                    class:ae_d_none={!$lq__event_obj?.location_text}
+                    >
+                    Additional information: {@html $lq__event_obj?.location_text}
+                </div>
+                {/if}
+            </div>
+        </div>
+
+        <div class="col-6"
+            class:meeting_virtual={$lq__event_obj?.virtual}
+            class:ae_d_none={!$lq__event_obj?.virtual}
+            >
+            <div class="meeting_attend_url"
+                class:ae_d_none={!$lq__event_obj?.attend_url}
+                >
+                <span class="ae_label">
+                    <span class="fas fa-link"></span>
+                    URL:
+                </span>
+                <span class="ae_value">
+                    <a href="{$lq__event_obj?.attend_url}">{$lq__event_obj?.attend_url}</a>
+                </span>
+                <span class="ae_label">
+                    <span class="fas fa-lock"></span>
+                    Passcode:
+                </span>
+                <span class="ae_value">
+                    {$lq__event_obj?.attend_url_passcode}
+                </span>
+            </div>
+            <div class="meeting_attend_phone"
+                class:ae_d_none={!$lq__event_obj?.attend_phone}
+                >
+                <span class="ae_label">
+                    <span class="fas fa-phone"></span>
+                    Phone:
+                </span>
+                <span class="ae_value">
+                    <a href="tel:{$lq__event_obj?.attend_phone}">{$lq__event_obj?.attend_phone}</a>
+                </span>
+                <span class="ae_label">
+                    <span class="fas fa-lock"></span>
+                    Passcode:
+                </span>
+                <span class="ae_value">
+                    {$lq__event_obj?.attend_phone_passcode}
+                </span>
+            </div>
+            <div class="attend_text"
+                class:ae_d_none={!$lq__event_obj?.attend_text}
+                >
+                Additional information: {@html $lq__event_obj?.attend_text}
+            </div>
+        </div>
+
+    </div>
+
+    <div class="meeting_when">
+
+        <div class="meeting_recurring"
+            class:ae_d_none={!$lq__event_obj?.recurring}
+            >
+            <div class="meeting_recurring_text">
+                <span class="ae_label">
+                    <span class="fas fa-calendar-alt"></span>
+                    Frequency:
+                </span>
+                {#if $lq__event_obj?.recurring_pattern == 'weekly'}<span>Weekly</span>
+                {:else if $lq__event_obj?.recurring_pattern == 'monthly'}<span>Monthly</span>
+                {:else if $lq__event_obj?.recurring_pattern == 'every other week'}<span>Every Other Week</span>
+                {:else if $lq__event_obj?.recurring_pattern == 'other'}<span>Other</span>
+                {/if}
+                {#if $lq__event_obj?.recurring_text && $lq__event_obj?.recurring_text.length > 0}
+                    {#if $lq__event_obj?.recurring_text.includes('*gen*') && $ae_loc.administrator_access}
+                        <span class="ae_value ae_highlight">{@html $lq__event_obj?.recurring_text}</span>
+                    {:else if (!$lq__event_obj?.recurring_text.includes('*gen*'))}
+                        <span class="ae_value">{@html $lq__event_obj?.recurring_text}</span>
+                    {/if}
+                <!-- - <span class="ae_value">{@html $lq__event_obj?.recurring_text}</span> -->
+                {/if}
+            </div>
+            <div class="meeting_recurring_days_of_week">
+                <span class="ae_label">
+                    <span class="fas fa-calendar-week"></span>
+                    Days of week:
+                </span>
+                {#if $lq__event_obj?.weekday_sunday}<span class="ae_value">Sunday</span>{/if}
+                {#if $lq__event_obj?.weekday_monday}<span class="ae_value">Monday</span>{/if}
+                {#if $lq__event_obj?.weekday_tuesday}<span class="ae_value">Tuesday</span>{/if}
+                {#if $lq__event_obj?.weekday_wednesday}<span class="ae_value">Wednesday</span>{/if}
+                {#if $lq__event_obj?.weekday_thursday}<span class="ae_value">Thursday</span>{/if}
+                {#if $lq__event_obj?.weekday_friday}<span class="ae_value">Friday</span>{/if}
+                {#if $lq__event_obj?.weekday_saturday}<span class="ae_value">Saturday</span>{/if}
+            </div>
+            <div class="meeting_recurring_time">
+                {#if $lq__event_obj?.recurring_start_time}
+                <span class="meeting_recurring_start_time">
+                    <span class="ae_label">
+                        <span class="fas fa-clock"></span> Start time:
+                    </span>
+                    <span class="ae_value">{ae_util.iso_datetime_formatter(`2024-01-01 ${$lq__event_obj?.recurring_start_time}`, 'time_short')}</span>
+                </span>
+                <span
+                    class:ae_d_none={!$lq__event_obj?.recurring_end_time}
+                    >
+                    - <span class="meeting_recurring_end_time">
+                        <span class="ae_label">End time:</span>
+                        <span class="ae_value">{ae_util.iso_datetime_formatter(`2024-01-01 ${$lq__event_obj?.recurring_end_time}`, 'time_short')}
+                        </span>
+                    </span>
+                </span>
+                <span
+                    class:ae_d_none={!$lq__event_obj?.timezone}
+                    >
+                    - <span class="meeting_timezone">
+                        <span class="ae_label">Timezone:</span>
+                        <span class="ae_value">{$lq__event_obj?.timezone}</span>
+                    </span>
+                </span>
+                {#if $lq__event_obj?.timezone}
+                <span class="event__user_timezone">
+                    (
+                    <span class="ae_label">Your TZ:</span>
+                    <span class="ae_value">
+                        {dayjs.tz(`${$ae_loc.current_date_str} ${$lq__event_obj?.recurring_start_time}`, $lq__event_obj?.timezone).tz($ae_loc.current_timezone).format('hh:mm A')} {$ae_loc.current_timezone}
+                    </span>
+                    )
+                </span>
+                {/if}
+                {:else}
+                    <span class="meeting_recurring_no_time">No times set</span>
+                {/if}
+
+
+
+                <!-- {dayjs.tz(`2024-01-08 20:00`, $lq__event_obj?.timezone).format('hh:mm A')} -->
+            </div>
+        </div>
+
+    </div>
+
+
+    <div class="ae_list event__contacts">
+
+        {#if $lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json.length && $lq__event_obj?.contact_li_json[0].full_name}
+        <div class="event__contact"
+            class:ae_d_none={!$lq__event_obj?.contact_li_json[0].full_name}
+            >
+            <span class="ae_label">
+                <span class="fas fa-user"></span> Contact:
+            </span>
+            {$lq__event_obj?.contact_li_json[0].full_name}
+            {#if $lq__event_obj?.contact_li_json[0].email}
+                | <a href="mailto:{$lq__event_obj?.contact_li_json[0].email}?Subject={$lq__event_obj?.full_name}">{$lq__event_obj?.contact_li_json[0].email}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[0].phone_mobile}
+                <span class="ae_label">| Mobile:</span>
+                <a href="tel:{$lq__event_obj?.contact_li_json[0].phone_mobile}">{$lq__event_obj?.contact_li_json[0].phone_mobile}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[0].phone_home}
+                <span class="ae_label">| Home:</span>
+                <a href="tel:{$lq__event_obj?.contact_li_json[0].phone_home}">{$lq__event_obj?.contact_li_json[0].phone_home}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[0].phone_office}
+                <span class="ae_label">| Office:</span>
+                <a href="tel:{$lq__event_obj?.contact_li_json[0].phone_office}">{$lq__event_obj?.contact_li_json[0].phone_office}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[0].other_text}| {$lq__event_obj?.contact_li_json[0].other_text}{/if}
+        </div>
+        {/if}
+
+        {#if $lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json.length && $lq__event_obj?.contact_li_json[1].full_name}
+        <div class="event__contact"
+            class:ae_d_none={!$lq__event_obj?.contact_li_json[1].full_name}
+            >
+            <span class="ae_label">
+                <span class="fas fa-user"></span> Contact:
+            </span>
+            {$lq__event_obj?.contact_li_json[1].full_name}
+            {#if $lq__event_obj?.contact_li_json[1].email}
+                | <a href="mailto:{$lq__event_obj?.contact_li_json[1].email}?Subject={$lq__event_obj?.full_name}">{$lq__event_obj?.contact_li_json[1].email}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[1].phone_mobile}
+                <span class="ae_label">| Mobile:</span>
+                <a href="tel:{$lq__event_obj?.contact_li_json[1].phone_mobile}">{$lq__event_obj?.contact_li_json[1].phone_mobile}</a>
+                {/if}
+            {#if $lq__event_obj?.contact_li_json[1].phone_home}
+                <span class="ae_label">| Home:</span>
+                <a href="tel:{$lq__event_obj?.contact_li_json[1].phone_home}">{$lq__event_obj?.contact_li_json[1].phone_home}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[1].phone_office}
+                <span class="ae_label">| Office:</span>
+                <a href="tel:{$lq__event_obj?.contact_li_json[1].phone_office}">{$lq__event_obj?.contact_li_json[1].phone_office}</a>
+            {/if}
+            {#if $lq__event_obj?.contact_li_json[1].other_text}| {$lq__event_obj?.contact_li_json[1].other_text}{/if}
+        </div>
+        {/if}
+
+    </div>
+
+    <section class="ae_section ae_meta event__meta">
+        <div class="ae_group">
+            <span
+                class="event__id"
+                class:ae_d_none={!$ae_loc.administrator_access}>
+                ID:
+                {$lq__event_obj?.event_id_random}
+            </span>
+            <span
+                class="event__created_on"
+                >
+                Created on: {ae_util.iso_datetime_formatter($lq__event_obj?.created_on, 'datetime_short')}
+            </span>
+            <span
+                class="event__updated_on"
+                class:ae_d_none={!$lq__event_obj?.updated_on}
+                >
+                Updated on: {ae_util.iso_datetime_formatter($lq__event_obj?.updated_on, 'datetime_short')}
+            </span>
+        </div>
+
+        {#if $ae_loc.trusted_access || $lq__event_obj?.external_person_id === $ae_loc.novi_uuid || $lq__event_obj?.contact_li_json[0].email === $ae_loc.novi_email}
+        <div class="ae_options">
+            <button
+                on:click={() => {
+                    // $idaa_slct.event_id = $lq__event_obj?.event_id_random;
+                    // $lq__event_obj = $lq__event_obj;
+
+                    // const url = new URL(location);
+                    // url.searchParams.set('event_id', $lq__event_obj?.event_id_random);
+                    // history.pushState({}, '', url);
+
+                    // $idaa_loc.recovery_meetings.show_main__options = true;
+                    // $idaa_loc.recovery_meetings.show_list__event_obj_li = true;
+                    $idaa_loc.recovery_meetings.show_view__event_obj = false;
+                    $idaa_loc.recovery_meetings.show_edit__event_obj = true;
+                }}
+                class="btn btn-md variant-ghost-warning hover:variant-filled-warning transition"
+                title={`Edit meeting: ${$lq__event_obj?.name}`}
+                >
+                <span class="fas fa-edit"></span> Edit
+            </button>
+        </div>
+        {/if}
+    </section>
+
+</div>
+
+</section>
+
+
+<style>
+.ae_label {
+    font-size: smaller;
+}
+.ae_value {
+    font-weight: bold;
+}
+
+.event__user_timezone {
+    font-size: smaller;
+    font-style: italic;
+}
+
+.event_obj .ae_meta {
+    flex-direction: column;
+    /* justify-content: space-between; */
+}
+
+.event_obj .ae_meta .ae_group {
+    flex-direction: row;
+}
+
+.event_obj .ae_meta .ae_options {
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+/* a {
+    color: #82B6E1;
+} */
+</style>

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte

@@ -4,24 +4,27 @@ import { onMount } from 'svelte';
 import { Spinner } from 'flowbite-svelte';
 
 // *** Import Aether core variables and functions
-import { ae } from 'aether_npm_lib';
+import { ae_util } from '$lib/ae_utils/ae_utils';
-import { slct, ae_app, slct_trigger } from './stores';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
+
+export let lq__event_obj_li: any;
 
 export let container_class_li = [];
 
 onMount(() => {
-    console.log('** Component Mounted: ** List - Event Obj');
+    console.log('** Component Mounted: ** List - Recovery Meeting (Event) Obj');
 });
 </script>
 
 
 <section class="svelte_component ae_section ae_list event_obj_li list__event_obj recovery_meeting_list {container_class_li.join(' ')}">
-{#if $slct.event_obj_li && $slct.event_obj_li.length}
+{#if $lq__event_obj_li && $lq__event_obj_li.length}
 
-{#each $slct.event_obj_li as idaa_event_obj, index}
+{#each $lq__event_obj_li as idaa_event_obj, index}
     <div
         id={`idaa_recovery_meeting_id__${idaa_event_obj.event_id_random}`}
-        class="container recovery_meeting ae_object event_obj"
+        class="container recovery_meeting ae_object event_obj border border-1 rounded p-2 mb-2"
         class:meeting_physical={idaa_event_obj.physical}
         class:meeting_virtual={idaa_event_obj.virtual}
         >
@@ -29,22 +32,35 @@ onMount(() => {
         <header class="ae_header event__header">
             <h3>
                 <span class="event__name">{idaa_event_obj.name}</span>
-                <span class="badge badge-info bg-info">{#if idaa_event_obj.physical && idaa_event_obj.virtual}<span class="fas fa-home"></span> F2F and <span class="fas fa-laptop"></span> Virtual{:else if idaa_event_obj.physical}<span class="fas fa-home"></span> F2F{:else if idaa_event_obj.virtual}<span class="fas fa-laptop"></span> Virtual{/if}</span>
+                <span class="badge badge-info bg-info">
-                {#if idaa_event_obj.type}<span class="badge badge-info bg-info"><span class="fas fa-user-md"></span> {idaa_event_obj.type}</span>{/if}
+                    {#if idaa_event_obj.physical && idaa_event_obj.virtual}
-
+                        <span class="fas fa-home m-1"></span> F2F and <span class="fas fa-laptop m-1"></span> Virtual
-                {#if $ae_app.trusted_access && idaa_event_obj.hide}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Hidden</span>{/if}
+                    {:else if idaa_event_obj.physical}
-                {#if $ae_app.administrator_access && !idaa_event_obj.enable}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Not enabled</span>{/if}
+                        <span class="fas fa-home m-1"></span> F2F
+                    {:else if idaa_event_obj.virtual}
+                        <span class="fas fa-laptop m-1"></span> Virtual
+                    {/if}
+                </span>
+                {#if idaa_event_obj.type}
+                    <span class="badge badge-info bg-info"><span class="fas fa-user-md m-1"></span> {idaa_event_obj.type}</span>
+                {/if}
+                {#if $ae_loc.trusted_access && idaa_event_obj.hide}
+                    <span class="badge badge-warning"><span class="fas fa-exclamation-triangle m-1"></span> Hidden</span>
+                {/if}
+                {#if $ae_loc.administrator_access && !idaa_event_obj.enable}
+                    <span class="badge badge-warning"><span class="fas fa-exclamation-triangle m-1"></span> Not enabled</span>
+                {/if}
             </h3>
         </header>
 
         <div class="ae_options event_obj__options">
             <button
                 on:click={() => {
-                    $slct.event_id = idaa_event_obj.event_id_random;
+                    $idaa_slct.event_id = idaa_event_obj.event_id_random;
-                    $slct.event_obj = idaa_event_obj;
+                    $idaa_slct.event_obj = idaa_event_obj;
                     $slct_trigger = 'load__event_obj';
 
-                    // // handle_load_event_id_obj({event_id: $slct.event_id, try_cache: false});
+                    // // handle_load_event_id_obj({event_id: $idaa_slct.event_id, try_cache: false});
 
                     // const url = new URL(location);
                     // url.searchParams.set('event_id', idaa_event_obj.event_id_random);
@@ -53,40 +69,41 @@ onMount(() => {
                     // let message = {'event_id': idaa_event_obj.event_id_random};
                     // window.parent.postMessage(message, "*");
 
-                    $ae_app.events.show_main__options = true;
+                    $idaa_loc.recovery_meetings.show_main__options = true;
-                    $ae_app.events.show_list__event_obj_li = true;
+                    $idaa_loc.recovery_meetings.show_list__event_obj_li = true;
-                    $ae_app.events.show_view__event_obj = true;
+                    $idaa_loc.recovery_meetings.show_view__event_obj = true;
-                    $ae_app.events.show_edit__event_obj = false;
+                    $idaa_loc.recovery_meetings.show_edit__event_obj = false;
                 }}
-                class="btn btn-primary"
+                class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition"
                 title={`Open to see details: ${idaa_event_obj.name}`}
                 >
-                <span class="fas fa-envelope-open"></span>
+                <span class="fas fa-envelope-open m-1"></span>
                 <!-- <span class="fas fa-info-circle"></span> -->
                 Info
             </button>
 
             <!-- This checks if the currently logged in Novi user has a matching UUID or email address. -->
-            {#if $ae_app.trusted_access || idaa_event_obj.external_person_id === $ae_app.novi_uuid || idaa_event_obj.contact_li_json[0].email === $ae_app.novi_email}
+            {#if $ae_loc.trusted_access || idaa_event_obj.external_person_id === $ae_loc.novi_uuid || idaa_event_obj.contact_li_json[0].email === $ae_loc.novi_email}
                 <button
                     on:click={() => {
-                        $slct.event_id = idaa_event_obj.event_id_random;
+                        $idaa_slct.event_id = idaa_event_obj.event_id_random;
-                        $slct.event_obj = idaa_event_obj;
+                        $idaa_slct.event_obj = idaa_event_obj;
                         $slct_trigger = 'load__event_obj';
 
                         // const url = new URL(location);
                         // url.searchParams.set('event_id', idaa_event_obj.event_id_random);
                         // history.pushState({}, '', url);
 
-                        // $ae_app.events.show_main__options = true;
+                        // $idaa_loc.recovery_meetings.show_main__options = true;
-                        // $ae_app.events.show_list__event_obj_li = true;
+                        // $idaa_loc.recovery_meetings.show_list__event_obj_li = true;
-                        $ae_app.events.show_view__event_obj = false;
+                        $idaa_loc.recovery_meetings.show_view__event_obj = false;
-                        $ae_app.events.show_edit__event_obj = true;
+                        $idaa_loc.recovery_meetings.show_edit__event_obj = true;
                     }}
-                    class="ae_btn ae_smallest btn btn-secondary"
+                    class="btn btn-md variant-ghost-warning hover:variant-filled-warning transition"
                     title={`Edit meeting: ${idaa_event_obj.name}`}
                     >
-                    <span class="fas fa-edit"></span> Edit Meeting
+                    <span class="fas fa-edit m-1"></span>
+                    Edit Meeting
                 </button>
                 <!-- <button
                     on:click={() => {
@@ -96,7 +113,7 @@ onMount(() => {
                     }}
                     class="ae_btn btn_sm btn_outline_info meeting_edit_help"
                     >
-                    <span class="fas fa-link"></span> URL
+                    <span class="fas fa-link m-1"></span> URL
                 </button> -->
             {/if}
         </div>
@@ -124,7 +141,7 @@ onMount(() => {
                 class="ae_group event__timezone event__recurring_start_time"
                 >
                 <span class="ae_label">
-                <span class="fas fa-clock"></span>
+                <span class="fas fa-clock m-1"></span>
                 When:
                 </span>
                 <!-- class:ae_d_none={!idaa_event_obj.timezone} -->
@@ -143,7 +160,7 @@ onMount(() => {
 
                 {#if idaa_event_obj.recurring_start_time}
                     <!-- <span class="ae_label">Time:</span> -->
-                    <span class="ae_value">{ae.util.iso_datetime_formatter(`2023-01-01 ${idaa_event_obj.recurring_start_time}`, 'time_short')}</span>
+                    <span class="ae_value">{ae_util.iso_datetime_formatter(`2023-01-01 ${idaa_event_obj.recurring_start_time}`, 'time_short')}</span>
                 {/if}
                 {#if idaa_event_obj.timezone}
                     <!-- <span class="ae_label">Timezone:</span> -->
@@ -160,7 +177,7 @@ onMount(() => {
                         class:ae_d_none={!idaa_event_obj.contact_li_json[0].full_name}
                         >
                         <span class="ae_label">
-                            <span class="fas fa-user"></span> Contact:
+                            <span class="fas fa-user m-1"></span> Contact:
                         </span>
                         {idaa_event_obj.contact_li_json[0].full_name}
                         {#if idaa_event_obj.contact_li_json[0].email}
@@ -181,7 +198,7 @@ onMount(() => {
                         {#if idaa_event_obj.contact_li_json[0].other_text}| {idaa_event_obj.contact_li_json[0].other_text}{/if}
                     </div>
                 {:else}
-                    {#if $ae_app.trusted_access}
+                    {#if $ae_loc.trusted_access}
                     <div class="event__contact ae_warning">
                         ALERT: The primary contact information may be missing? This meeting should be checked and updated. Please Edit and Save to use the new format.
                         <!-- This must be done by March 1, 2024. -->
@@ -194,7 +211,7 @@ onMount(() => {
                     class:ae_d_none={!idaa_event_obj.contact_li_json[1].full_name}
                     >
                     <span class="ae_label">
-                        <span class="fas fa-user"></span> Contact:
+                        <span class="fas fa-user m-1"></span> Contact:
                     </span>
                     {idaa_event_obj.contact_li_json[1].full_name}
                     {#if idaa_event_obj.contact_li_json[1].email}
@@ -215,7 +232,7 @@ onMount(() => {
                     {#if idaa_event_obj.contact_li_json[0].other_text}| {idaa_event_obj.contact_li_json[0].other_text}{/if}
                 </div>
                 {/if}
-                {#if $ae_app.trusted_access}
+                {#if $ae_loc.trusted_access}
                 {#if (idaa_event_obj.contact_li_json && idaa_event_obj.contact_li_json.length && !idaa_event_obj.contact_li_json[0].full_name)}
                     <div class="event__contact ae_warning">Required: No primary contact information was found!</div>
                 {/if}
@@ -228,7 +245,7 @@ onMount(() => {
         </section>
 
 
-        {#if $ae_app.administrator_access}
+        {#if $ae_loc.administrator_access}
         <section class="ae_section ae_footer ae_meta event__meta">
             <!-- {#if idaa_event_obj.location_address_json}
             <span
@@ -249,13 +266,13 @@ onMount(() => {
                 <span
                     class="event__created_on"
                     >
-                    Created on: {ae.util.iso_datetime_formatter(idaa_event_obj.created_on, 'datetime_short')}
+                    Created on: {ae_util.iso_datetime_formatter(idaa_event_obj.created_on, 'datetime_short')}
                 </span>
                 <span
                     class="event__updated_on"
                     class:ae_d_none={!idaa_event_obj.updated_on}
                     >
-                    Updated on: {ae.util.iso_datetime_formatter(idaa_event_obj.updated_on, 'datetime_short')}
+                    Updated on: {ae_util.iso_datetime_formatter(idaa_event_obj.updated_on, 'datetime_short')}
                 </span>
             </div>
         </section>
@@ -264,7 +281,7 @@ onMount(() => {
 {/each}
 
 {:else}
-    {#if $ae_app.events.qry_status === 'loading'}
+    {#if $idaa_loc.recovery_meetings.qry_status === 'loading'}
         <div class="ae_highlight ae_padding_md ae_row ae_flex_justify_center"><Spinner class="me-3" /> Loading...</div>
     {:else}
         <div class="ae_highlight ae_padding_md ae_row ae_flex_justify_center"> No recovery meetings avalible to show. The search may need to be changed.</div>

src/routes/notes/+layout.ts

@@ -31,7 +31,7 @@ export async function load({ parent }) {
 
     if (browser) {
         // Should we limit these to event.conference = true?
-        let load_event_obj_li = events_func.handle_load_ae_obj_li__event({
+        let load_event_obj_li = events_func.load_ae_obj_li__event({
             api_cfg: ae_acct.api,
             account_id: account_id,
             params: {enabled: 'enabled', qry__limit: 25},
@@ -41,7 +41,7 @@ export async function load({ parent }) {
         ae_acct.slct.event_obj_li = load_event_obj_li;
     }
 
-    // let load_event_obj = events_func.handle_load_ae_obj_id__event({
+    // let load_event_obj = events_func.load_ae_obj_id__event({
     //     api_cfg: ae_acct.api,
     //     event_id: event_id,
     //     try_cache: false
@@ -51,7 +51,7 @@ export async function load({ parent }) {
 
     // if (browser) {
     //     console.log(`Browser: ${browser}`);
-    //     events_func.handle_db_save_ae_obj_li__event({
+    //     events_func.db_save_ae_obj_li__event({
     //         obj_type: 'event',
     //         obj_li: [load_event_obj_li],
     //     });