Variouu changes from a few days ago.

2024-02-15 09:20:57 -05:00
parent 970e7567fc
commit ccbb783378
9 changed files with 312 additions and 23 deletions
--- a/index.html
+++ b/index.html
@@ -29,8 +29,8 @@

    <body>
        <section id="Site-Header">Site-Header</section>
-        <nav id="Site-Nav-Menu">Site-Nav-Menu</nav>
-        <section id="Notifications">Notifications</section>
+        <section id="Site-Nav-Menu"></section>
+        <!-- <section id="Notifications">Notifications</section> -->

        <div class="svelte_target ae_svelte_app ae_sponsorships_main"></div>

--- a/public/ae_bridge_init.js
+++ b/public/ae_bridge_init.js
@@ -52,6 +52,7 @@ const ae_bridge = {
        return this.ae_local_var;
    },
    set ae_local(new_value) {
+            console.log('ae_local_var: new_value: ', new_value);
            this.ae_local_var = new_value;
            this.ae_local_listener(new_value);
            window.localStorage.setItem('ae', new_value);
@@ -73,6 +74,7 @@ const ae_bridge = {
        return this.ae_session_var;
    },
    set ae_session(new_value) {
+            console.log('ae_session_var: new_value: ', new_value);
            this.ae_session_var = new_value;
            this.ae_session_listener(new_value);
            window.sessionStorage.setItem('ae', new_value);
--- a/src/0_hub__main.svelte
+++ b/src/0_hub__main.svelte
@@ -10,7 +10,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, ae_session } from './stores';
+import { slct, slct_trigger, ae_app, ae_session, ae_local } from './stores';

 export let ae_obj_type: string = 'example';
 export let ae_obj_id: string = 'abc123';
@@ -21,6 +21,7 @@ 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'});

+handle_build_site_nav_menu();

 onMount(() => {
    console.log('** Component Mounted: ** OSIT - AE Hub: Main');
@@ -83,13 +84,14 @@ $: if ($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_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) {
+//         /* Add the HTML to the site_menu_element DOM 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']);
@@ -104,16 +106,103 @@ $: if ($ae_app.hub.ds['hub_notifications']) {
 //     document.getElementById('Site-Header').innerHTML = $ae_app.hub.ds['hub_site_header'];
 // }

+function handle_build_site_nav_menu() {
+    $ae_session.site_nav_menu = {};
+
+    // let menu_item_tmp = {};
+
+
+    // Navigation button group
+    // $ae_session.site_nav_menu['options'] = []; // group
+
+    $ae_session.site_nav_menu['home'] = {
+        'access_level': 'all',
+        'state': 'active', // active, inactive, disabled
+        'text': '<span class="fas fa-home"></span> Home',
+        'href': '/',
+        'action': 'navigate', // navigate, modal, action
+        'class_li': ['ae_btn', 'btn_outline_primary']
+        };
+
+    $ae_session.site_nav_menu['reports_exports'] = {
+        'access_level': 'trusted',
+        'state': 'active', // active, inactive, disabled
+        'text': 'Reports & Exports',
+        'href': '/',
+        'action': 'navigate', // navigate, modal, action
+        'class_li': ['ae_btn', 'btn_outline_secondary']
+        };
+
+    $ae_session.site_nav_menu['manage'] = {
+        'access_level': 'administrator',
+        'state': 'active', // active, inactive, disabled
+        'text': 'Manage',
+        'href': '/manage',
+        'action': 'navigate', // navigate, modal, action
+        'class_li': ['ae_btn', 'btn_outline_secondary']
+        };
+
+    $ae_session.site_nav_menu['help'] = {
+        'access_level': 'all',
+        'state': 'active', // active, inactive, disabled
+        'text': 'Help',
+        'href': '/',
+        'class_li': ['ae_btn', 'btn_outline_secondary']
+        };
+
+
+    // // Trusted button group
+    // $ae_session.site_nav_menu['trusted'] = []; // group
+
+    // menu_item_tmp = $event_defaults.event_manage_btn;
+    // menu_item_tmp['href'] = `/event/${$slct.event_id}/manage`;
+    // menu_item_tmp['class_li'].push('btn_sm', 'btn_outline_warning');
+    // $ae_session.site_nav_menu['trusted'].push(menu_item_tmp);
+
+    // menu_item_tmp = $event_defaults.event_location_view_li_btn;
+    // menu_item_tmp['href'] = `/event/${$slct.event_id}/locations`;
+    // menu_item_tmp['class_li'].push('btn_sm', 'btn_outline_secondary');
+    // $ae_session.site_nav_menu['trusted'].push(menu_item_tmp);
+
+    // // Admin button group
+    // $ae_session.site_nav_menu['admin'] = []; // group
+
+    // menu_item_tmp = $event_defaults.event_edit_btn;
+    // menu_item_tmp['href'] = `/event/${$slct.event_id}/edit`;
+    // menu_item_tmp['class_li'].push('btn_sm', 'btn_outline_warning');
+    // $ae_session.site_nav_menu['admin'].push(menu_item_tmp);
+}
 </script>

-<section>
-Hello World Hub!
-<pre>
+<section class="ae_hub ae_debug">
+
+The Hub!
+<button
+    on:click={() => {
+        $ae_session.site_nav_menu['home'].text = '<span class="fas fa-house-damage"></span> Home';
+        // console.log('ae_session:', $ae_session);
+
+        $ae_local.testing = 'Hello World!';
+        $ae_local.test = 'Hello World!';
+        // $ae_local.set('Hello World!');
+        console.log('ae_local:', $ae_local);
+    }}
+    >
+    <span class="fas fa-biohazard"></span> Test
+</button>
+
+{#if $ae_app.administrator_access}
+    <span class="access_type administrator_access">Administrator</span>
+{:else if $ae_app.trusted_access}
+    <span class="access_type trusted_access">Trusted</span>
+{/if}
+
+<div>
 <!-- {$ae_session.test.example} -->
-{$ae_session.test.general}
-{$ae_session.test.hub}
-{$ae_session.test.sponsorships}
-</pre>
+<!-- {$ae_session.test.general} -->
+<!-- {$ae_session.test.hub} -->
+<!-- {$ae_session.test.sponsorships} -->
+</div>

 {#await data_store_obj_get_promises['hub_site_header']}
 <p>Loading site header...</p>
@@ -143,4 +232,8 @@ Hello World Hub!


 <style>
+
+/* .ae_hub.ae_debug {
+
+} */
 </style>
--- a/src/0_sponsorships__main.svelte
+++ b/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, ae_session } from './stores';
+import { slct, slct_trigger, ae_app, ae_local, ae_session } from './stores';

 // *** Import Aether core components
 // import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';
@@ -483,16 +483,16 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {

 <section class="ae_section ae_meta">
    <p>
-    ae: {$ae_app.ae_full_name}
+    ae: {($ae_app.ae_full_name ? $ae_app.ae_full_name : 'Name not set')}
    <span class="details">
    (
-        {$ae_app.ae_email}
+        {($ae_app.ae_email ? $ae_app.ae_email : 'Email not set')}
        {#if $ae_app.administrator_access}
            <span class="access_type administrator_access">Administrator</span>
        {:else if $ae_app.trusted_access}
            <span class="access_type trusted_access">Trusted</span>
        {/if}
-        <span class="ae_user">user: {$ae_app.ae_user}</span>
+        <span class="ae_user">{$ae_app.ae_user ? $ae_app.ae_user : 'User not set'}</span>
    )
    </span>
    </p>
@@ -705,6 +705,7 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
                $ae_app.sponsorships.show_edit__sponsorship_obj = true;

                $ae_session.test.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
+                $ae_session.test_xyz.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
            }}
            class="btn_new_recovery_meeting ae_btn btn btn-secondary"
            >
--- a/src/10_hub__site_menu.svelte
+++ b/src/10_hub__site_menu.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+
+// *** Import Svelte core
+import { onMount } from 'svelte';
+
+import { slct, slct_trigger, ae_app, ae_session } from './stores';
+
+
+onMount(() => {
+    console.log('** Component Mounted: ** OSIT - AE Hub: Site Menu');
+});
+
+</script>
+
+
+<nav>
+{#if $ae_session.site_nav_menu}
+    <ul>
+        {#each Object.entries($ae_session.site_nav_menu) as [name, menu_item]}
+            <li>
+                <a href={menu_item.href} class={menu_item.class_li}>{@html menu_item.text}</a>
+            </li>
+        {/each}
+    </ul>
+{/if}
+</nav>
+
+
+<style>
+nav {
+    /* outline: dashed thick red; */
+    /* background-color: hsla(0, 0%, 100%, 0.85); */
+    /* padding: .5em 1em; */
+
+    display: flex;
+    justify-content: space-between;
+}
+nav ul {
+    list-style-type: none;
+    padding: 0;
+
+    width: 100%;
+
+    display: flex;
+    justify-content: space-around;
+}
+nav ul li {
+    /* display: inline; */
+    /* margin-right: 1em; */
+}
+nav ul li a {
+    text-decoration: none;
+}
+nav ul li a:hover {
+    text-decoration: underline;
+}
+nav ul li a.active {
+    font-weight: bold;
+}
+nav ul li a.active:hover {
+    text-decoration: none;
+}
+</style>
--- a/src/app.css
+++ b/src/app.css
@@ -44,7 +44,17 @@ body {
    color: black;
    font-size: x-small;

+    padding: .25em;
+
    z-index: 1000;
+
+    opacity: .5;
+
+    transition: all .25s ease-in-out;
+}
+.svelte_target.ae_svelte_app_hub:hover {
+    opacity: 1;
+    background-color: hsla(0, 50%, 80%, .75);
 }

 .svelte_target.ae_svelte_app {
@@ -83,6 +93,50 @@ body {
    overflow: scroll;
 }

+#Site-Header {
+    background-color: hsla(0, 0%, 100%, 0.85);
+    padding: .5em 1em;
+    margin-bottom: 1em;
+
+    /* display: flex; */
+    /* justify-content: space-between; */
+}
+
+#Site-Header h1 {
+    /* text-shadow: 0em 0em .75em hsla(240,100%,25%,1); */
+    /* text-shadow: 0em 0em .75em hsla(0,0%,5%,1); */
+
+    font-size: 2.5em;
+    line-height: 1.1;
+    margin: 0;
+    padding: 0;
+}
+
+#Site-Header h2 {
+    font-size: 1.5em;
+    line-height: 1.1;
+    margin: 0;
+    padding: 0;
+
+    /* Make font italic */
+    font-style: italic;
+}
+
+#Site-Nav-Menu {
+    background-color: hsla(0, 0%, 100%, 0.85);
+    /* padding: .5em 1em; */
+    margin-bottom: 1em;
+}
+
+#Site-Footer {
+    background-color: hsla(0, 0%, 100%, 0.85);
+    padding: .5em 1em;
+    margin-top: 1em;
+
+    display: flex;
+    justify-content: space-between;
+}
+

 address {
    margin-bottom: .25em;
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import './app.css';
 import { ae } from 'aether_npm_lib';

 import Hub_main from './0_hub__main.svelte';
+import Hub_site_menu from './10_hub__site_menu.svelte';
 import Sponsorships from './0_sponsorships__main.svelte';

 let url_params = ae.util.get_url_params();
@@ -32,6 +33,16 @@ if (document.querySelector('.svelte_target.ae_svelte_app_hub')) { // ae_hub_main



+if (document.querySelector('#Site-Nav-Menu')) { // ae_hub_main
+  const hub_main_app = new Hub_site_menu({
+      target: document.querySelector('#Site-Nav-Menu'), // ae_hub_main
+      props: {
+      }
+  });
+}
+
+
+
 if (document.querySelector('.svelte_target.ae_svelte_app')) { // ae_sponsorships_main
  const sponsorships_main_app = new Sponsorships({
      target: document.querySelector('.svelte_target.ae_svelte_app'), // ae_sponsorships_main
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -178,4 +178,69 @@ ae_bridge.register_ae_session_listener((new_value) => {

    ae_session.set(new_value);
    console.log(ae_session);
-});
+});
+
+
+// if (ae_bridge.ae_local && !ae_bridge.ae_local.app && ae_bridge.ae_local.app !== {}) {
+//     ae_bridge.ae_local.app = ae_app_struct; // .set({});
+// }
+
+// if (ae_bridge.ae_session && !ae_bridge.ae_session.app && ae_bridge.ae_session.app !== {}) {
+//     ae_bridge.ae_session.app = ae_app_struct; // .set({});
+// }
+
+// if (!ae_bridge.ae_session.app.sponsorships) {
+//     ae_bridge.ae_session.app.sponsorships = {
+//         'ver': ae_app_data_version,
+//         'app': ae_cfg_data.app, // Includes AE app base_url {'base_url': ae_cfg_data.app.base_url},
+//         'ae_api': ae_api_cfg_data, // Includes the AE API headers
+//         'novi_api': novi_api_cfg_data, // Includes the Novi API headers
+
+//         'access_type': fake_access_type,
+//         'administrator_access': fake_administrator_access,
+//         'trusted_access': fake_trusted_access,
+
+//         'account_id': account_id,
+
+//         // YYYY-MM-DD string of the current date
+//         'current_date_str': new Date().toISOString().slice(0, 10),
+
+//         'ae_user': null,
+//         'ae_key': null,
+//         'ae_full_name': null,
+//         'ae_admin_li': [],
+
+//         // Module - OSIT Aether - Sponsorships
+//         'sponsorships':{
+//             'show_sponsorship_id_view': false,
+//             'show_sponsorship_id_edit': false,
+
+//             'filter_meeting_type': 'all', // all, idaa, al-anon
+//             'filter_meeting_group': 'all', // all, in-person, virtual
+//             'filter_location': 'all', // all, something something
+
+//             // all, disabled, enabled
+//             'enabled': 'enabled', // all or nothing... easier for now
+
+//             // all, hidden, not_hidden
+//             'hidden': 'not_hidden', // all or nothing... easier for now
+
+//             'limit': 250, // all or nothing... easier for now
+//             'offset': 0, // all or nothing... easier for now
+
+//             'group_sort': 'ASC', // ASC or DESC
+
+//             'sponsorship_id': null,
+//             'sponsorship_cfg_id': null,
+
+//             'qry_status': null,
+
+//             'ds':{},
+//         },
+
+//         'ds':{},
+
+//         };
+// }
+
+console.log(ae_bridge.ae_session);
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,7 +11,7 @@ const config = {

    // Disable accessibility warnings
    onwarn: (warning, handler) => {
-        console.log('HERE');
+        // console.log('HERE');
        if (warning.code.includes("a11y")) return;
        // if (warning.code === 'a11y-distracting-elements') return;
        handler(warning);