Work on the new Hub to manage the header, footer, menu, quick access, etc

src/0_hub__main.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+type key_val = {
+    [key: string]: any;
+};
+
+
+// *** Import Svelte core
+import { onMount } from 'svelte';
+
+// *** Import Aether core variables and functions
+import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
+
+import { slct, slct_trigger, ae_app, ae_session } from './stores';
+
+export let ae_obj_type: string = 'example';
+export let ae_obj_id: string = 'abc123';
+
+
+// let data_store_obj_get_promise: Promise<any>;
+let data_store_obj_get_promises: key_val = {};
+let get_ds_hub_site_header_promise = handle_get_data_store_obj_w_code({code: 'hub_site_header'});
+let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hub_site_footer'});
+
+
+onMount(() => {
+    console.log('** Component Mounted: ** OSIT - AE Hub: Main');
+    $ae_session.test.hub = 'Hello World!';
+    $ae_session.test.general = 'Hello world from The Hub!';
+    console.log('ae_session:', $ae_session);
+});
+
+
+async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
+    console.log('*** handle_get_data_store_obj_w_code() ***');
+
+    let get_item_result = window.localStorage.getItem(code);
+    if (get_item_result) {
+        $ae_app.hub.ds[code] = get_item_result;
+    } else {
+        console.log('Get local storage item miss.');
+    }
+
+    data_store_obj_get_promises[code] = api.get_data_store_obj_w_code({
+        api_cfg: $ae_app.ae_api,
+        data_store_code: code,
+        data_type: data_type,
+        log_lvl: 0
+        })
+    .then(function (get_data_store_result) {
+        if (get_data_store_result) {
+
+            if (data_type == 'text') {
+                // console.log(get_data_store_result.text);
+                $ae_app.hub.ds[code] = get_data_store_result.text;
+            } else if (data_type == 'json') {
+                // console.log(get_data_store_result.json);
+                $ae_app.hub.ds[code] = get_data_store_result.json;
+            }
+
+            // console.log(`Code: ${$ae_app.hub.ds[code]}`);
+            // console.log(`Code:`, $ae_app.hub.ds[code]);
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
+    });
+}
+
+$: if ($ae_app.hub.ds['hub_site_header']) {
+    console.log('Hub Site Header:', $ae_app.hub.ds['hub_site_header']);
+    const site_header_element = document.getElementById('Site-Header');
+    if (site_header_element) {
+        site_header_element.innerHTML = $ae_app.hub.ds['hub_site_header'];
+    }
+}
+
+$: if ($ae_app.hub.ds['hub_site_footer']) {
+    console.log('Hub Site Footer:', $ae_app.hub.ds['hub_site_footer']);
+    const site_footer_element = document.getElementById('Site-Footer');
+    if (site_footer_element) {
+        site_footer_element.innerHTML = $ae_app.hub.ds['hub_site_footer'];
+    }
+}
+
+$: if ($ae_app.hub.ds['hub_site_nav_menu']) {
+    console.log('Hub Site Nav Menu:', $ae_app.hub.ds['hub_site_nav_menu']);
+    const site_menu_element = document.getElementById('Site-Nav-Menu');
+    if (site_menu_element) {
+        site_menu_element.innerHTML = $ae_app.hub.ds['hub_site_nav_menu'];
+    }
+}
+
+$: if ($ae_app.hub.ds['hub_notifications']) {
+    console.log('Hub Notifications:', $ae_app.hub.ds['hub_notifications']);
+    const site_notifications_element = document.getElementById('Notifications');
+    if (site_notifications_element) {
+        site_notifications_element.innerHTML = $ae_app.hub.ds['hub_notifications'];
+    }
+}
+
+// if $ae_app.hub.ds['hub_site_header'] {
+//     console.log('Hub Site Header:', $ae_app.hub.ds['hub_site_header']);
+//     document.getElementById('Site-Header').innerHTML = $ae_app.hub.ds['hub_site_header'];
+// }
+
+</script>
+
+<section>
+Hello World Hub!
+<pre>
+<!-- {$ae_session.test.example} -->
+{$ae_session.test.general}
+{$ae_session.test.hub}
+{$ae_session.test.sponsorships}
+</pre>
+
+{#await data_store_obj_get_promises['hub_site_header']}
+<p>Loading site header...</p>
+{:then}
+<p>Site header loaded.</p>
+<!-- <div class="">{@html $ae_app.hub.ds['hub_site_header']}</div> -->
+<!-- <pre>
+{$ae_app.hub.ds['hub_site_header']}
+</pre> -->
+{:catch error}
+    <p style="color: red">{error.message}</p>
+{/await}
+
+{#await data_store_obj_get_promises['hub_site_footer']}
+<p>Loading site footer...</p>
+{:then}
+<p>Site footer loaded.</p>
+<!-- <div class="">{@html $ae_app.hub.ds['hub_site_footer']}</div> -->
+<!-- <pre>
+{$ae_app.hub.ds['hub_site_footer']}
+</pre> -->
+{:catch error}
+    <p style="color: red">{error.message}</p>
+{/await}
+
+</section>
+
+
+<style>
+</style>

src/0_sponsorships__main.svelte

@@ -8,7 +8,7 @@ import { onMount } from 'svelte';
 // *** Import Aether core variables and functions
 import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
 
-import { slct, slct_trigger, ae_app } from './stores';
+import { slct, slct_trigger, ae_app, ae_session } from './stores';
 
 // *** Import Aether core components
 // import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';
@@ -127,6 +127,10 @@ onMount(() => {
     console.log('** Component Mounted: ** OSIT - AE Sponsorships: Main');
 
     document.getElementById('meeting_fulltext_search_qry_str').focus();
+
+    $ae_session.test.sponsorships = 'Hello World!';
+    $ae_session.test.general = 'Hello world from Sponsorships!';
+    console.log('ae_session:', $ae_session);
 });
 
 
@@ -699,6 +703,8 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
                 $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
                 $ae_app.sponsorships.show_view__sponsorship_obj = false;
                 $ae_app.sponsorships.show_edit__sponsorship_obj = true;
+
+                $ae_session.test.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
             }}
             class="btn_new_recovery_meeting ae_btn btn btn-secondary"
             >

src/app.css

@@ -35,6 +35,18 @@ body {
     /* Display as flex does not seem to work well here. */
 }
 
+.svelte_target.ae_svelte_app_hub {
+    position: fixed;
+    top: 0;
+    right: 0;
+
+    background-color: hsla(0, 0%, 100%, .50);
+    color: black;
+    font-size: x-small;
+
+    z-index: 1000;
+}
+
 .svelte_target.ae_svelte_app {
 
     box-sizing: border-box;

src/main.ts

@@ -1,17 +1,35 @@
-import { ae } from 'aether_npm_lib';
+// Import ae_bridge from ae_bridge_init.js
+// import './ae_bridge_init';
+// import './ae_bridge_init.js';
 import './app.css';
-// import App from './App.svelte';
+
+import { ae } from 'aether_npm_lib';
+
+import Hub_main from './0_hub__main.svelte';
 import Sponsorships from './0_sponsorships__main.svelte';
 
 let url_params = ae.util.get_url_params();
 // console.log(url_params);
 // IMPORTANT: The URL paramater 'uuid' is used to determine if the user is logged in or not. If the user is logged in, the uuid will be passed in as a url param. If the user is not logged in, the uuid will not be passed in as a url param.
 
-// if (document.getElementById('app')) {
-//   const app = new App({
-//     target: document.getElementById('app'),
-//   });
-// }
+
+if (document.querySelector('.svelte_target.ae_svelte_app_hub')) { // ae_hub_main
+  const hub_main_app = new Hub_main({
+      target: document.querySelector('.svelte_target.ae_svelte_app_hub'), // ae_hub_main
+      props: {
+          // NOTE: decodeURIComponent() is needed because the value is passed in as a url param. Should this be taken care of by the ae.util.get_url_params() function?
+          'ae_obj_type': url_params.ae_type,
+          'ae_obj_id': url_params.ae_id,
+          'user': decodeURIComponent(url_params.user),
+          'email': decodeURIComponent(url_params.email),
+          'key': (url_params.key ? url_params.key : false),
+          // 'results_limit_administrator': 75,
+          // 'results_limit_trusted': 50,
+          // 'results_limit_authenticated': 25,
+      }
+  });
+}
+
 
 
 if (document.querySelector('.svelte_target.ae_svelte_app')) { // ae_sponsorships_main

src/stores.ts

@@ -111,7 +111,18 @@ let ae_app_struct: key_val = {
     'ae_full_name': null,
     'ae_admin_li': [],
 
-	// Module - OSIT Aether - Sponsorships ()
+    // Module - OSIT Aether - The Hub
+    'hub':{
+        'show__site_header': true,
+        'show__site_menu': true,
+        'show__site_notificatons': true,
+        'show__site_footer': true,
+        'show__site_quick_access': false,
+
+        'ds':{},
+    },
+
+	// Module - OSIT Aether - Sponsorships
     'sponsorships':{
         'show_sponsorship_id_view': false,
         'show_sponsorship_id_edit': false,
@@ -145,3 +156,26 @@ let ae_app_struct: key_val = {
 }
 export let ae_app = writable(ae_app_struct);
 console.log(ae_app);
+
+
+
+
+// NOTE: read/write
+// Updated 2024-02-01
+export let ae_local = writable(ae_bridge.ae_local);
+ae_bridge.register_ae_local_listener((new_value) => {
+    console.log(`Bridge to all: AE localStorage: ${new_value}`);
+    console.log(new_value);
+
+    ae_local.set(new_value);
+    console.log(ae_local);
+});
+
+export let ae_session = writable(ae_bridge.ae_session);
+ae_bridge.register_ae_session_listener((new_value) => {
+    console.log(`Bridge to all: AE sessionStorage: ${new_value}`);
+    console.log(new_value);
+
+    ae_session.set(new_value);
+    console.log(ae_session);
+});