From ccbb783378c8f20903d85e9b6d8d33196b394b80 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Thu, 15 Feb 2024 09:20:57 -0500 Subject: [PATCH] Variouu changes from a few days ago. --- index.html | 4 +- public/ae_bridge_init.js | 2 + src/0_hub__main.svelte | 123 ++++++++++++++++++++++++++++---- src/0_sponsorships__main.svelte | 9 +-- src/10_hub__site_menu.svelte | 63 ++++++++++++++++ src/app.css | 54 ++++++++++++++ src/main.ts | 11 +++ src/stores.ts | 67 ++++++++++++++++- svelte.config.js | 2 +- 9 files changed, 312 insertions(+), 23 deletions(-) create mode 100644 src/10_hub__site_menu.svelte diff --git a/index.html b/index.html index d9f1b827..a10d881e 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,8 @@ - -
Notifications
+ +
diff --git a/public/ae_bridge_init.js b/public/ae_bridge_init.js index a73f555e..a6f2a11b 100644 --- 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); diff --git a/src/0_hub__main.svelte b/src/0_hub__main.svelte index 18b5e4d3..be6e452d 100644 --- 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': ' 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); +} -
-Hello World Hub! -
+

+
+The Hub!
+
+
+{#if $ae_app.administrator_access}
+    Administrator
+{:else if $ae_app.trusted_access}
+    Trusted
+{/if}
+
+

 
-{$ae_session.test.general}
-{$ae_session.test.hub}
-{$ae_session.test.sponsorships}
-
+ + + + {#await data_store_obj_get_promises['hub_site_header']}

Loading site header...

@@ -143,4 +232,8 @@ Hello World Hub! diff --git a/src/0_sponsorships__main.svelte b/src/0_sponsorships__main.svelte index 7690b69a..250482cc 100644 --- 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'}) {

- ae: {$ae_app.ae_full_name} + ae: {($ae_app.ae_full_name ? $ae_app.ae_full_name : 'Name not set')} ( - {$ae_app.ae_email} + {($ae_app.ae_email ? $ae_app.ae_email : 'Email not set')} {#if $ae_app.administrator_access} Administrator {:else if $ae_app.trusted_access} Trusted {/if} - user: {$ae_app.ae_user} + {$ae_app.ae_user ? $ae_app.ae_user : 'User not set'} )

@@ -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" > diff --git a/src/10_hub__site_menu.svelte b/src/10_hub__site_menu.svelte new file mode 100644 index 00000000..38d9a724 --- /dev/null +++ b/src/10_hub__site_menu.svelte @@ -0,0 +1,63 @@ + + + + + + + diff --git a/src/app.css b/src/app.css index f14887ee..aef7c5a2 100644 --- 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; diff --git a/src/main.ts b/src/main.ts index ccec3116..7947f644 100644 --- 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 diff --git a/src/stores.ts b/src/stores.ts index 66072f66..ad385978 100644 --- 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); -}); \ No newline at end of file +}); + + +// 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); \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js index 32ed157e..46f8166f 100644 --- 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);