Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Variouu changes from a few days ago.

Browse Source
This commit is contained in:
Scott Idem
2024-02-15 09:20:57 -05:00
parent 970e7567fc
commit ccbb783378
9 changed files with 312 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -29,8 +29,8 @@
<body> <body>
<section id="Site-Header">Site-Header</section> <section id="Site-Header">Site-Header</section>
<nav id="Site-Nav-Menu">Site-Nav-Menu</nav> <section id="Site-Nav-Menu"></section>
<section id="Notifications">Notifications</section> <!-- <section id="Notifications">Notifications</section> -->
<div class="svelte_target ae_svelte_app ae_sponsorships_main"></div> <div class="svelte_target ae_svelte_app ae_sponsorships_main"></div>

2
public/ae_bridge_init.js
View File

@@ -52,6 +52,7 @@ const ae_bridge = {
return this.ae_local_var; return this.ae_local_var;
}, },
set ae_local(new_value) { set ae_local(new_value) {
console.log('ae_local_var: new_value: ', new_value);
this.ae_local_var = new_value; this.ae_local_var = new_value;
this.ae_local_listener(new_value); this.ae_local_listener(new_value);
window.localStorage.setItem('ae', new_value); window.localStorage.setItem('ae', new_value);
@@ -73,6 +74,7 @@ const ae_bridge = {
return this.ae_session_var; return this.ae_session_var;
}, },
set ae_session(new_value) { set ae_session(new_value) {
console.log('ae_session_var: new_value: ', new_value);
this.ae_session_var = new_value; this.ae_session_var = new_value;
this.ae_session_listener(new_value); this.ae_session_listener(new_value);
window.sessionStorage.setItem('ae', new_value); window.sessionStorage.setItem('ae', new_value);

123
src/0_hub__main.svelte
View File

@@ -10,7 +10,7 @@ import { onMount } from 'svelte';
// *** Import Aether core variables and functions // *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib'; 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_type: string = 'example';
export let ae_obj_id: string = 'abc123'; 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_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'}); let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hub_site_footer'});
handle_build_site_nav_menu();
onMount(() => { onMount(() => {
console.log('** Component Mounted: ** OSIT - AE Hub: Main'); 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']) { // $: if ($ae_app.hub.ds['hub_site_nav_menu']) {
console.log('Hub Site Nav Menu:', $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'); // const site_menu_element = document.getElementById('Site-Nav-Menu');
if (site_menu_element) { // if (site_menu_element) {
site_menu_element.innerHTML = $ae_app.hub.ds['hub_site_nav_menu']; // /* 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']) { $: if ($ae_app.hub.ds['hub_notifications']) {
console.log('Hub Notifications:', $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']; // 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> </script>
<section> <section class="ae_hub ae_debug">
Hello World Hub!
<pre> 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.example} -->
{$ae_session.test.general} <!-- {$ae_session.test.general} -->
{$ae_session.test.hub} <!-- {$ae_session.test.hub} -->
{$ae_session.test.sponsorships} <!-- {$ae_session.test.sponsorships} -->
</pre> </div>
{#await data_store_obj_get_promises['hub_site_header']} {#await data_store_obj_get_promises['hub_site_header']}
<p>Loading site header...</p> <p>Loading site header...</p>
@@ -143,4 +232,8 @@ Hello World Hub!
<style> <style>
/* .ae_hub.ae_debug {
} */
</style> </style>

9
src/0_sponsorships__main.svelte
View File

@@ -8,7 +8,7 @@ import { onMount } from 'svelte';
// *** Import Aether core variables and functions // *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib'; 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 Aether core components
// import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js'; // 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"> <section class="ae_section ae_meta">
<p> <p>
ae: {$ae_app.ae_full_name} ae: {($ae_app.ae_full_name ? $ae_app.ae_full_name : 'Name not set')}
<span class="details"> <span class="details">
( (
{$ae_app.ae_email} {($ae_app.ae_email ? $ae_app.ae_email : 'Email not set')}
{#if $ae_app.administrator_access} {#if $ae_app.administrator_access}
<span class="access_type administrator_access">Administrator</span> <span class="access_type administrator_access">Administrator</span>
{:else if $ae_app.trusted_access} {:else if $ae_app.trusted_access}
<span class="access_type trusted_access">Trusted</span> <span class="access_type trusted_access">Trusted</span>
{/if} {/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> </span>
</p> </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_app.sponsorships.show_edit__sponsorship_obj = true;
$ae_session.test.sponsorships = 'Hello World! Create new Sponsorship was clicked!'; $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" class="btn_new_recovery_meeting ae_btn btn btn-secondary"
> >

63
src/10_hub__site_menu.svelte Normal file
View File

@@ -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>

54
src/app.css
View File

@@ -44,7 +44,17 @@ body {
color: black; color: black;
font-size: x-small; font-size: x-small;
padding: .25em;
z-index: 1000; 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 { .svelte_target.ae_svelte_app {
@@ -83,6 +93,50 @@ body {
overflow: scroll; 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 { address {
margin-bottom: .25em; margin-bottom: .25em;

11
src/main.ts
View File

@@ -6,6 +6,7 @@ import './app.css';
import { ae } from 'aether_npm_lib'; import { ae } from 'aether_npm_lib';
import Hub_main from './0_hub__main.svelte'; 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'; import Sponsorships from './0_sponsorships__main.svelte';
let url_params = ae.util.get_url_params(); 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 if (document.querySelector('.svelte_target.ae_svelte_app')) { // ae_sponsorships_main
const sponsorships_main_app = new Sponsorships({ const sponsorships_main_app = new Sponsorships({
target: document.querySelector('.svelte_target.ae_svelte_app'), // ae_sponsorships_main target: document.querySelector('.svelte_target.ae_svelte_app'), // ae_sponsorships_main

67
src/stores.ts
View File

@@ -178,4 +178,69 @@ ae_bridge.register_ae_session_listener((new_value) => {
ae_session.set(new_value); ae_session.set(new_value);
console.log(ae_session); 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);

2
svelte.config.js
View File

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