From 19a6ff6dbedde65688c6a0fce1861245cecd76b7 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Mon, 4 Mar 2024 20:55:48 -0500 Subject: [PATCH] Work on expanding the routes --- src/app.html | 5 +- src/app.postcss | 16 +- src/lib/ae_stores.ts | 3 +- src/lib/ae_utils.ts | 40 ++- src/lib/element_access_type.svelte | 34 +-- src/lib/element_app_cfg.svelte | 261 +++++++++++++------- src/routes/+layout.svelte | 10 +- src/routes/+page.svelte | 11 +- src/routes/events_badges/+layout.svelte | 66 +++++ src/routes/events_badges/+layout.ts | 33 +++ src/routes/events_badges/+page.svelte | 40 +++ src/routes/events_badges/+page.ts | 6 + src/routes/events_speakers/+layout.svelte | 6 + src/routes/hosted_files/+page.svelte | 245 ++++++++++++++++++ src/routes/sponsorships/+layout.svelte | 5 + src/routes/sponsorships/[slug]/+page.svelte | 1 + static/OSIT_logo_2022_96px.png | Bin 0 -> 5999 bytes static/favicon.ico | Bin 0 -> 5999 bytes static/favicon.png | Bin 15086 -> 5999 bytes static/hold manifest.webmanifest | 91 +++++++ static/manifest.json | 91 +++++++ static/skeleton_favicon.png | Bin 0 -> 15086 bytes 22 files changed, 846 insertions(+), 118 deletions(-) create mode 100644 src/routes/events_badges/+layout.svelte create mode 100644 src/routes/events_badges/+layout.ts create mode 100644 src/routes/events_badges/+page.svelte create mode 100644 src/routes/events_badges/+page.ts create mode 100644 src/routes/hosted_files/+page.svelte create mode 100755 static/OSIT_logo_2022_96px.png create mode 100755 static/favicon.ico mode change 100644 => 100755 static/favicon.png create mode 100644 static/hold manifest.webmanifest create mode 100644 static/manifest.json create mode 100644 static/skeleton_favicon.png diff --git a/src/app.html b/src/app.html index b8b98bd5..4e74793b 100644 --- a/src/app.html +++ b/src/app.html @@ -2,10 +2,13 @@ + + + - OSIT's Æ - Dev SvelteKit Structure + OSIT's Æ - Dev SvelteKit diff --git a/src/app.postcss b/src/app.postcss index 0458ff0c..3e5e6120 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -43,10 +43,18 @@ body { opacity: .5; } + +/* Tailwind: This "fixes" Tailwind's default group button styles that do not seem to allow hidding buttons. */ +.btn-group a.hidden, .btn-group button.hidden { + display: none; +} + + .ae_d_none { display: none; } + /* Allow content to scroll horizontal if too wide */ .ae_h_scrollfix { max-width: 100%; @@ -80,10 +88,10 @@ body[data-theme] { /* Remove the background from the body if using iframes */ body[data-theme]:has(#page.iframe) { - background: none; - background-image: none; - background-image: url('https://static.oneskyit.com/c/CHOW/images/CHOW_2024_yellow_background.png'); - background-size: cover; + /* background: none; */ + /* background-image: none; */ + /* background-image: url('https://static.oneskyit.com/c/CHOW/images/CHOW_2024_yellow_background.png'); */ + /* background-size: cover; */ } main { diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts index 7303da31..983b0d72 100644 --- a/src/lib/ae_stores.ts +++ b/src/lib/ae_stores.ts @@ -37,9 +37,10 @@ export type key_val = { // *** BEGIN *** Longer-term app data. This should be stored to local storage. export let ae_app_local_data_struct: key_val = { 'ver': '2024-03-04_10', - 'name': 'Aether App Template', + 'name': 'Aether App SvelteKit Template', 'theme': 'light', 'iframe': false, + 'title': `OSIT's Æ - Dev SvelteKit`, // Æ 'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY 'site_domain': null, // https://example.com, https://dev.example.com, etc. diff --git a/src/lib/ae_utils.ts b/src/lib/ae_utils.ts index 98d7e8f1..9d54ac36 100644 --- a/src/lib/ae_utils.ts +++ b/src/lib/ae_utils.ts @@ -415,23 +415,36 @@ export let process_permission_checks = function process_permission_checks(access // Svelte specific: // WARNING: Avoid using `history.pushState(...)` and `history.replaceState(...)` as these will conflict with SvelteKit's router. Use the `pushState` and `replaceState` imports from `$app/navigation` instead. // Updated 2024-03-02 +import { pushState, replaceState } from '$app/navigation'; + function handle_url_and_message(name: string, value: null|string) { console.log(`*** handle_url_and_message() *** name=${name} value=${value}`); + let location = window.location.href; + // console.log('location:', location); + const url = new URL(location); + // console.log('url:', url); + if (value) { - let location = window.location.href; - const url = new URL(location); url.searchParams.set(name, value); history.pushState({}, '', url); + // console.log('url:', url); + // pushState(url.href, {}); + // pushState(url.search, {}); + // replaceState(url.href, {}); + let message = {name: value}; window.parent.postMessage(message, "*"); } else { - let location = window.location.href; - const url = new URL(location); url.searchParams.delete(name); history.pushState({}, '', url); + // console.log('url:', url); + // pushState({}, '', url.search); + // pushState(url.href, {}); + // replaceState(url.href, {}); + let message = {name: null}; window.parent.postMessage(message, "*"); } @@ -476,6 +489,25 @@ function create_video_element({account_id, base_url, hosted_file_id, filename=nu } +// // Clear the quick access type +// function clear_access_type() { +// // NOTE: I think it makes since to reset this to anonymous even if logged in as an admin or similar. +// window.localStorage.setItem('access_type', 'anonymous'); + +// // $ae_loc.access_type = null; // 'anonymous'; +// $ae_loc.access_type = 'anonymous'; +// trigger = 'process_permission_check'; + +// show_passcode_input = false; + +// // $ae_loc = $ae_loc; // Trigger Svelte just in case +// // ae_loc.set($ae_loc); +// // console.log($ae_loc); + +// return true; +// } + + export let ae_util = { iso_datetime_formatter: iso_datetime_formatter, number_w_commas: number_w_commas, diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte index 7b326d19..39a22594 100644 --- a/src/lib/element_access_type.svelte +++ b/src/lib/element_access_type.svelte @@ -161,7 +161,7 @@ function dispatch_access_type_changed() { -
+
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'} {#if $ae_loc.access_type == 'super'} Super Access @@ -232,15 +232,16 @@ function dispatch_access_type_changed() { /* lightyellow */ /* background-color: hsla(60,100%,90%,.30); */ - background-color: rgba(var(--color-surface-500) / .5); + /* background-color: rgba(var(--color-surface-500) / .5); */ - border-top: solid thin black; - border-left: solid thin black; - border-bottom: solid thin black; + border-top: solid thin hsla(0,0%,0%,.5); + border-left: solid thin hsla(0,0%,0%,.5); + border-bottom: solid thin hsla(0,0%,0%,.5); border-top-left-radius: .5em; border-bottom-left-radius: .5em; - opacity: .50; + opacity: .15; + /* opacity: 1; */ font-size: .75rem; @@ -248,22 +249,27 @@ function dispatch_access_type_changed() { /* NOTE: transition when no longer hovering */ transition-property: opacity, background-color; - transition-delay: .1s; - transition-duration: .4s; - transition-timing-function: linear; + transition-delay: 1.25s; + transition-duration: .5s; + transition-timing-function: ease-out; } #AE-Quick-Access-Type:hover { /* lightyellow */ /* background-color: hsla(60,100%,90%,.95); */ - background-color: rgba(var(--color-surface-500) / 1); + /* background-color: rgba(var(--color-surface-500) / 1); */ + + border-top: solid thin hsla(0,0%,0%,.95); + border-left: solid thin hsla(0,0%,0%,.95); + border-bottom: solid thin hsla(0,0%,0%,.95); + opacity: 1; /* NOTE: transition when hover starts */ transition-property: opacity, background-color; - /* transition-delay: .5s; */ + transition-delay: .5s; transition-duration: .10s; - transition-timing-function: linear; + transition-timing-function: ease-in; } /* #Access-Type .unlock_text { @@ -280,11 +286,11 @@ function dispatch_access_type_changed() { /* outline: solid thin red; */ } -.access_type .current_text { +.ae_access_type .current_text { display: none; } -.access_type:hover .current_text { +.ae_access_type:hover .current_text { display: initial; /* outline: solid thin red; */ } diff --git a/src/lib/element_app_cfg.svelte b/src/lib/element_app_cfg.svelte index 37f8fdf2..1b9c1dae 100644 --- a/src/lib/element_app_cfg.svelte +++ b/src/lib/element_app_cfg.svelte @@ -90,100 +90,173 @@ function dispatch_something_changed() { -
+ +
-
- {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'} - {#if $ae_loc.access_type == 'super'} - Super Access - {:else if $ae_loc.access_type == 'manager'} - Manager Access - {:else if $ae_loc.access_type == 'administrator'} - Administrator Access - {:else if $ae_loc.access_type == 'trusted'} - Trusted Access - {:else if $ae_loc.access_type == 'authenticated'} - Authenticated Access - {:else if $ae_loc.access_type == 'anonymous'} - Anonymous Access - {:else} - Unknown Access - {/if} - +
+
+

Access Type:

+
+{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'} + {#if $ae_loc.access_type == 'super'} + Super Access + {:else if $ae_loc.access_type == 'manager'} + Manager Access + {:else if $ae_loc.access_type == 'administrator'} + Administrator Access + {:else if $ae_loc.access_type == 'trusted'} + Trusted Access + {:else if $ae_loc.access_type == 'authenticated'} + Authenticated Access + {:else if $ae_loc.access_type == 'anonymous'} + Anonymous Access {:else} - Not logged in + Unknown Access {/if} -
-
- Theme: -
- - - { - $slct_trigger = 'set_theme_mode'; - }} - bind:group={$ae_loc.hub.theme_mode} - name="theme_light" - value={'light'} - > - Light - - { - $slct_trigger = 'set_theme_mode'; - }} - bind:group={$ae_loc.hub.theme_mode} - name="theme_dark" - value={'dark'} - > - Dark - - -
- -
- - { + $slct_trigger = 'set_theme_name'; + }} + bind:value={$ae_loc.hub.theme_name} + class="select" + title="Theme name" + > + + + + + + + +
+
+ + + +
+ +

Utilities:

+ + + Util: Convert Videos + + +{#if $ae_loc.iframe} + + + Exit iframe Mode + +{:else} + + + Use iframe Mode + +{/if} + +
+ + +
+ +
+ +
+ +
@@ -211,15 +285,16 @@ function dispatch_something_changed() { /* lightyellow */ /* background-color: hsla(60,100%,90%,.30); */ - background-color: rgba(var(--color-surface-500) / .5); + /* background-color: rgba(var(--color-surface-500) / .95); */ - border-top: solid thin black; - border-right: solid thin black; - border-bottom: solid thin black; + border-top: solid thin hsla(0,0%,0%,.5); + border-right: solid thin hsla(0,0%,0%,.5); + border-bottom: solid thin hsla(0,0%,0%,.5); border-top-right-radius: .5em; border-bottom-right-radius: .5em; - opacity: .50; + opacity: .15; + /* opacity: 1; */ font-size: .75rem; @@ -227,22 +302,28 @@ function dispatch_something_changed() { /* NOTE: transition when no longer hovering */ transition-property: opacity, background-color; - transition-delay: .1s; - transition-duration: .4s; - transition-timing-function: linear; + transition-delay: 1.25s; + transition-duration: .5s; + transition-timing-function: ease-out; } #AE-App-Cfg:hover { /* lightyellow */ /* background-color: hsla(60,100%,90%,.95); */ - background-color: rgba(var(--color-surface-500) / 1); + /* background-color: rgba(var(--color-surface-100) / 1); */ + /* color: black; */ + + border-top: solid thin hsla(0,0%,0%,.95); + border-right: solid thin hsla(0,0%,0%,.95); + border-bottom: solid thin hsla(0,0%,0%,.95); + opacity: 1; /* NOTE: transition when hover starts */ transition-property: opacity, background-color; - /* transition-delay: .5s; */ + transition-delay: .5s; transition-duration: .10s; - transition-timing-function: linear; + transition-timing-function: ease-in; } .ae_cfg_btn .cfg_text { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a0492cd7..cbd70910 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -213,6 +213,14 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c // } + + + {data.ae_loc.title} + + + + + -
+
{@html $ae_loc.ds['hub__site__appshell_footer']}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4de2933c..7d7e0cfe 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -52,7 +52,7 @@ onMount(() => {
-{#if $ae_loc.iframe} +
diff --git a/src/routes/events_badges/+layout.svelte b/src/routes/events_badges/+layout.svelte new file mode 100644 index 00000000..a50c1078 --- /dev/null +++ b/src/routes/events_badges/+layout.svelte @@ -0,0 +1,66 @@ + + + + + Events Badges - {data.ae_loc.title} + + + + +
+ + {#each Object.entries(data.submenu) as [key, item]} + + + {#if item.disable} + + {:else} + + {item.name} + + {/if} + + + {/each} + +
+ + diff --git a/src/routes/events_badges/+layout.ts b/src/routes/events_badges/+layout.ts new file mode 100644 index 00000000..38bdbffc --- /dev/null +++ b/src/routes/events_badges/+layout.ts @@ -0,0 +1,33 @@ +/** @type {import('./$types').LayoutLoad} */ + +import { get } from 'svelte/store'; + +import { api } from '$lib/api'; +import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores'; +import type { key_val } from '$lib/ae_stores'; + + +export async function load({ params, parent, url }) { // route + // console.log(`Svelte Events Badges layout.ts data = params:`, params); + // console.log(`Svelte Events Badges layout.ts data = route:`, route); + // console.log(`Svelte Events Badges layout.ts data = url:`, url); + + // const { ae_init, root_layout_ts } = await parent(); + let data = await parent(); + console.log(`Svelte Events Badges layout.ts data = data:`, data); + + data.ae_events_badges_layout_ts = true; + + let submenu = { + main: {name: 'Main', href: '/events_badges', access: false}, + manage: {name: 'Manage', href: '/events_badges/manage', access: 'administrator', disable: true}, + review: {name: 'Review', href: '/events_badges/review', access: false}, + print: {name: 'Print', href: '/events_badges/print', access: 'trusted', disable: true}, + view: {name: 'View', href: '/events_badges/view', access: 'trusted', hide: true}, // event_badge_id + // new: {name: 'New', href: '/events_badges/new'}, + test: {name: 'Test', href: '/sponsorships'}, + }; + data.submenu = submenu + + return data; +} diff --git a/src/routes/events_badges/+page.svelte b/src/routes/events_badges/+page.svelte new file mode 100644 index 00000000..e8c40c25 --- /dev/null +++ b/src/routes/events_badges/+page.svelte @@ -0,0 +1,40 @@ + + + +
+ + +
+ + + diff --git a/src/routes/events_badges/+page.ts b/src/routes/events_badges/+page.ts new file mode 100644 index 00000000..baff2197 --- /dev/null +++ b/src/routes/events_badges/+page.ts @@ -0,0 +1,6 @@ +/** @type {import('./$types').PageLoad} */ +export function load() { + return { + ae_events_badges_page_ts: true, + }; +} diff --git a/src/routes/events_speakers/+layout.svelte b/src/routes/events_speakers/+layout.svelte index 39faff39..3633195f 100644 --- a/src/routes/events_speakers/+layout.svelte +++ b/src/routes/events_speakers/+layout.svelte @@ -3,4 +3,10 @@ export let data; + + + Events Speakers - {data.ae_loc.title} + + + \ No newline at end of file diff --git a/src/routes/hosted_files/+page.svelte b/src/routes/hosted_files/+page.svelte new file mode 100644 index 00000000..672f1a85 --- /dev/null +++ b/src/routes/hosted_files/+page.svelte @@ -0,0 +1,245 @@ + + + +
+ +

Convert mp3 to mp4

+

This AV utility will take an mp3 audio file and a static image template and create a mp4 video file. This process may take a few seconds to a handful of minutes. Please be patient while it is processing.

+
e.key === 'Escape' && handle_cancel_form} class="av_util_mp3_to_mp4 space-y-4"> + + + + + + + + + + + + + + + + + +
+ +
+ + {#await file_uploads_post_promise} +

Converting... This may take a few minutes.

+ {:then} + {#if file_uploads_post_promise} + Ready to Download + {:else} +

Fill out the form and select the audio file and static image template file.

+ {/if} + {/await} + + + +
+ + +

Clip mp4

+

This AV utility will take an mp4 video file create a clipped mp4 video file. This process may take a few seconds to a handful of minutes. Re-encoding will take longer. Please be patient while it is processing.

+
e.key === 'Escape' && handle_cancel_form_clip} class="av_util_mp4_clip space-y-4"> + + + + + + + + + + + +
+ +
+ + {#await file_uploads_clip_post_promise} +

Converting... This may take a few minutes.

+ {:then} + {#if file_uploads_clip_post_promise} + Ready to Download + {:else} +

Fill out the form and select the video file to clip.

+ {/if} + {/await} + +
+ + + diff --git a/src/routes/sponsorships/+layout.svelte b/src/routes/sponsorships/+layout.svelte index 405ddae9..bc399204 100644 --- a/src/routes/sponsorships/+layout.svelte +++ b/src/routes/sponsorships/+layout.svelte @@ -3,6 +3,11 @@ export let data; + + + Sponsorships - {data.ae_loc.title} + +