From 7f6f063f00a9f86dcb8944adbec2144f1b6171a4 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Fri, 9 Feb 2024 18:24:07 -0500 Subject: [PATCH] Work on the new Hub to manage the header, footer, menu, quick access, etc --- index.html | 64 +++++++----- package-lock.json | 24 ++--- public/ae_bridge_init.js | 167 ++++++++++++++++++++++++++++++++ src/0_hub__main.svelte | 145 +++++++++++++++++++++++++++ src/0_sponsorships__main.svelte | 8 +- src/app.css | 12 +++ src/main.ts | 32 ++++-- src/stores.ts | 36 ++++++- svelte.config.js | 32 +++++- 9 files changed, 476 insertions(+), 44 deletions(-) create mode 100644 public/ae_bridge_init.js create mode 100644 src/0_hub__main.svelte diff --git a/index.html b/index.html index 99ef9761..d9f1b827 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,49 @@ - - - - - - - + + + + + + + + - + - + - - Æ AE App - Sponsorships - Vite + Svelte + TS - - - -
+ + Æ AE App (The Hub) - Sponsorships - Vite + Svelte + TS + - - + + + + + + +
Notifications
+ +
+ +
+ + + +
+ +
+ + + + + diff --git a/package-lock.json b/package-lock.json index 23cb17a2..037b9c1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -781,8 +781,8 @@ } }, "node_modules/aether_npm_lib": { - "version": "1.5.0", - "resolved": "git+ssh://git@bitbucket.org/oneskyit/one-sky-it-npm-library.git#c4fa1d707ad713d1f408554c26687b6c3183efe0", + "version": "1.6.0", + "resolved": "git+ssh://git@bitbucket.org/oneskyit/one-sky-it-npm-library.git#24d17b091de194f961bfb8a608698a7a13045894", "dependencies": { "axios": "^1.1.3", "html5-qrcode": "^2.1.6", @@ -1571,9 +1571,9 @@ } }, "node_modules/postcss": { - "version": "8.4.34", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.34.tgz", - "integrity": "sha512-4eLTO36woPSocqZ1zIrFD2K1v6wH7pY1uBh0JIM2KKfrVtGvPFiAku6aNOP0W1Wr9qwnaCsF0Z+CrVnryB2A8Q==", + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", "dev": true, "funding": [ { @@ -1829,9 +1829,9 @@ } }, "node_modules/svelte-check": { - "version": "3.6.3", - "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.3.tgz", - "integrity": "sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==", + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.4.tgz", + "integrity": "sha512-mY/dqucqm46p72M8yZmn81WPZx9mN6uuw8UVfR3ZKQeLxQg5HDGO3HHm5AZuWZPYNMLJ+TRMn+TeN53HfQ/vsw==", "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.17", @@ -1978,13 +1978,13 @@ } }, "node_modules/vite": { - "version": "5.0.12", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz", - "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.1.tgz", + "integrity": "sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==", "dev": true, "dependencies": { "esbuild": "^0.19.3", - "postcss": "^8.4.32", + "postcss": "^8.4.35", "rollup": "^4.2.0" }, "bin": { diff --git a/public/ae_bridge_init.js b/public/ae_bridge_init.js new file mode 100644 index 00000000..947c65fe --- /dev/null +++ b/public/ae_bridge_init.js @@ -0,0 +1,167 @@ + +// These localStorage values were created when generating the HTML +// ae value is reset every page load +// ae_com value is ? +// let ae_local = window.localStorage.getItem('ae'); // Includes: cfg, client, page, other +// let ae_session = window.sessionStorage.getItem('ae'); // Includes: cfg, client, page, other +// let ae_com_local = window.localStorage.getItem('ae_com'); +// let ae_com_session = window.sessionStorage.getItem('ae_com'); + +if (window.sessionStorage.getItem('ae') === null) { + window.sessionStorage.setItem('ae', JSON.stringify({ 'cfg': {}, 'client': {}, 'page': {}, 'other': {}, 'test': {} })); +} +// JSON.parse(window.sessionStorage.getItem('ae')) + +// export let ae_bridge = { +const ae_bridge = { + // example_var: 'Example Default Value', + // get example() { + // return this.example_var; + // }, + // set example(new_value) { + // this.example_var = new_value; + // this.example_var_listener(new_value); + // this.example_var_core_listener(new_value); + // this.example_var_mods_listener(new_value); + // }, + + // example_var_listener: function (new_value) {}, + // registerNewListener: function (external_listener_function) { + // this.example_var_listener = external_listener_function; + // }, + + // example_var_core_listener: function (new_value) {}, + // registerNewCoreListener: function (external_core_listener_function) { + // this.example_var_core_listener = external_core_listener_function; + // }, + + // example_var_mods_listener: function (new_value) {}, + // registerNewModsListener: function (external_mods_listener_function) { + // this.example_var_mods_listener = external_mods_listener_function; + // }, + + + // Monitor change in local storage AE + // Created and set when generating and then rendering the inital HTML and JS + // ae_local_var: true, + ae_local_var: JSON.parse(window.localStorage.getItem('ae')), + get ae_local() { + return this.ae_local_var; + }, + set ae_local(new_value) { + this.ae_local_var = new_value; + this.ae_local_listener(new_value); + window.localStorage.setItem('ae', new_value); + }, + + ae_local_listener: function (new_value) {}, + register_ae_local_listener: function (external_listener_function) { + this.ae_local_listener = external_listener_function; + }, + + + // Monitor change in session storage AE + // Created and set when generating and then rendering the inital HTML and JS + // ae_session_var: true, + // ae_session_var: JSON.parse((window.sessionStorage.getItem('ae') ? window.sessionStorage.getItem('ae') : {'cfg': true, 'client': true, 'page': true, 'other': true})), + // ae_session_var: {'example': 'This is just an example from init.js!'}, + ae_session_var: JSON.parse(window.sessionStorage.getItem('ae')), + get ae_session() { + return this.ae_session_var; + }, + set ae_session(new_value) { + this.ae_session_var = new_value; + this.ae_session_listener(new_value); + window.sessionStorage.setItem('ae', new_value); + }, + + ae_session_listener: function (new_value) {}, + register_ae_session_listener: function (external_listener_function) { + this.ae_session_listener = external_listener_function; + }, + + + // Monitor change in Access Type + access_type_var: 'anonymous', + get access_type() { + return this.access_type_var; + }, + set access_type(new_value) { + this.access_type_var = new_value; + this.access_type_var_core_listener(new_value); + this.access_type_var_mods_listener(new_value); + }, + + access_type_var_core_listener: function (new_value) {}, + register_core_access_type_listener: function (external_core_listener_function) { + this.access_type_var_core_listener = external_core_listener_function; + }, + + access_type_var_mods_listener: function (new_value) {}, + register_mods_access_type_listener: function (external_mods_listener_function) { + this.access_type_var_mods_listener = external_mods_listener_function; + }, + + + // Monitor change in AE Common + // ae_com_var: true, + ae_com_var: JSON.parse(window.localStorage.getItem('ae_com')), + get ae_com() { + return this.ae_com_var; + }, + set ae_com(new_value) { + this.ae_com_var = new_value; + this.ae_com_var_core_listener(new_value); + this.ae_com_var_mods_listener(new_value); + }, + + ae_com_var_core_listener: function (new_value) {}, + register_core_ae_com_listener: function (external_core_listener_function) { + this.ae_com_var_core_listener = external_core_listener_function; + }, + + ae_com_var_mods_listener: function (new_value) {}, + register_mods_ae_com_listener: function (external_mods_listener_function) { + this.ae_com_var_mods_listener = external_mods_listener_function; + }, + + + // Monitor change in Client + client_var: true, + get client() { + return this.client_var; + }, + set client(new_value) { + this.client_var = new_value; + this.client_var_core_listener(new_value); + this.client_var_mods_listener(new_value); + }, + + client_var_core_listener: function (new_value) {}, + register_core_client_listener: function (external_core_listener_function) { + this.client_var_core_listener = external_core_listener_function; + }, + + client_var_mods_listener: function (new_value) {}, + register_mods_client_listener: function (external_mods_listener_function) { + this.client_var_mods_listener = external_mods_listener_function; + }, + +}; +console.log('ae_bridge_init.js loaded'); +// console.log(ae_bridge.example); +// console.log(ae_bridge.ae_com); + +// export let ae_bridge = ae_bridge; + +// export { default as Element_sql_qry } + +/* Add this to the stores.ts */ +export let ae_example = writable(ae_bridge.ae_example); +ae_bridge.register_ae_example_listener((new_value) => { + console.log(`AE Bridge: AE Example: ${new_value}`); + console.log(new_value); + + ae_example.set(new_value); + console.log(ae_example); +}); \ No newline at end of file diff --git a/src/0_hub__main.svelte b/src/0_hub__main.svelte new file mode 100644 index 00000000..6fb040c1 --- /dev/null +++ b/src/0_hub__main.svelte @@ -0,0 +1,145 @@ + + +
+Hello World Hub! +
+
+{$ae_session.test.general}
+{$ae_session.test.hub}
+{$ae_session.test.sponsorships}
+
+ +{#await data_store_obj_get_promises['hub_site_header']} +

Loading site header...

+{:then} +

Site header loaded.

+ + +{:catch error} +

{error.message}

+{/await} + +{#await data_store_obj_get_promises['hub_site_footer']} +

Loading site footer...

+{:then} +

Site footer loaded.

+ + +{:catch error} +

{error.message}

+{/await} + +
+ + + diff --git a/src/0_sponsorships__main.svelte b/src/0_sponsorships__main.svelte index e340156a..7690b69a 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 } 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" > diff --git a/src/app.css b/src/app.css index 6af84ace..f14887ee 100644 --- a/src/app.css +++ b/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; diff --git a/src/main.ts b/src/main.ts index 1727b4e3..ccec3116 100644 --- a/src/main.ts +++ b/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 diff --git a/src/stores.ts b/src/stores.ts index 258db398..66072f66 100644 --- a/src/stores.ts +++ b/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); +}); \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js index 7f8ec285..32ed157e 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,15 +1,19 @@ + import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' // import adapter from '@sveltejs/adapter-static'; // import adapter from '@sveltejs/adapter-node'; -export default { + +const config = { // Consult https://svelte.dev/docs#compile-time-svelte-preprocess // for more information about preprocessors preprocess: vitePreprocess(), // Disable accessibility warnings onwarn: (warning, handler) => { + console.log('HERE'); if (warning.code.includes("a11y")) return; + // if (warning.code === 'a11y-distracting-elements') return; handler(warning); }, @@ -35,3 +39,29 @@ export default { // }) // } } +export default config; + + + +// import adapter from '@sveltejs/adapter-auto'; + +// /** @type {import('@sveltejs/kit').Config} */ +// const config = { +// // Consult https://svelte.dev/docs#compile-time-svelte-preprocess +// // for more information about preprocessors +// preprocess: vitePreprocess(), + +// // Disable accessibility warnings +// onwarn: (warning, handler) => { +// console.log('HERE'); +// if (warning.code.includes("a11y")) return; +// handler(warning); +// }, + +// kit: { +// adapter: adapter() +// } +// }; + +// export default config; +