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

Work on expanding the routes

Browse Source
This commit is contained in:
Scott Idem
2024-03-04 20:55:48 -05:00
parent 6c60ee3086
commit 19a6ff6dbe
22 changed files with 846 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.html
View File

@@ -2,10 +2,13 @@
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="manifest" href="%sveltekit.assets%/manifest.json">
<meta name="viewport" content="width=device-width" />
<title>OSIT's &AElig; - Dev SvelteKit Structure</title>
<title>OSIT's &AElig; - Dev SvelteKit</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com">

16
src/app.postcss
View File

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

3
src/lib/ae_stores.ts
View File

@@ -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`, // &AElig;
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
'site_domain': null, // https://example.com, https://dev.example.com, etc.

40
src/lib/ae_utils.ts
View File

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

34
src/lib/element_access_type.svelte
View File

@@ -161,7 +161,7 @@ function dispatch_access_type_changed() {
</script>
<section id="AE-Quick-Access-Type" class="access_type transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
<section id="AE-Quick-Access-Type" class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all hidden-print">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-unlock"></span> 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; */
}

261
src/lib/element_app_cfg.svelte
View File

@@ -90,100 +90,173 @@ function dispatch_something_changed() {
</script>
<section id="AE-App-Cfg" class="ae_app_cfg transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
<section id="AE-App-Cfg" class="ae_app_cfg bg-surface-100 text-surface-800 transition hover:transition-all hidden-print">
<div
class="ae_cfg_content"
class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.hub.show_element__cfg_detail}
data-sveltekit-preload-data="false"
>
<div>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users"></span> Anonymous Access
{:else}
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
<button
class="btn btn-sm variant-soft-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock
</button>
<section class="space-y-2">
<div>
<h2 class="strong">Access Type:</h2>
<div>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users"></span> Anonymous Access
{:else}
Not logged in
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
</div>
<div>
Theme:
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-soft"
hover="hover:variant-ringed-primary"
>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
on:change={() => {
$slct_trigger = 'set_theme_name';
<!-- <button
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
bind:value={$ae_loc.hub.theme_name}
class="select"
title="Theme name"
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</div>
<span class="fas fa-lock mx-1"></span> Lock
</button> -->
{:else}
Not logged in
{/if}
</section>
<!-- END: Access Type -->
<section class="space-y-2">
<h2 class="strong">Theme:</h2>
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-glass-success"
hover="hover:variant-ringed-surface"
>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
on:change={() => {
$slct_trigger = 'set_theme_name';
}}
bind:value={$ae_loc.hub.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</section>
<!-- END: Theme -->
<section class="space-y-2">
<h2 class="strong">Utilities:</h2>
<a
class="btn btn-sm variant-glass-secondary"
href="/hosted_files"
>
<span class="fas fa-code mx-1"></span>
Util: Convert Videos
</a>
{#if $ae_loc.iframe}
<a
class="btn btn-sm variant-glass-secondary"
href="/?iframe=false"
>
<span class="fas fa-code mx-1"></span>
Exit iframe Mode
</a>
{:else}
<a
class="btn btn-sm variant-glass-secondary"
href="/?iframe=true"
>
<span class="fas fa-code mx-1"></span>
Use iframe Mode
</a>
{/if}
<div>
<button
class="btn btn-sm variant-glass-warning"
title="Reload and clear the page cache"
on:click={() => {
// $ae_loc.
window.location.reload(true);
}}
>
<span class="fas fa-sync mx-1"></span>
Reload and
<span class="fas fa-trash mx-1"></span>
Clear Cache
</button>
<button
class="btn btn-sm variant-glass-warning"
title="Clear the browser storage for this page"
on:click={() => {
// $ae_loc.
localStorage.clear();
sessionStorage.clear();
alert('Local and Session Storage cleared. You will probably want to refresh the page.');
}}
>
<span class="fas fa-eraser mx-1"></span>
Clear Storage
</button>
</div>
</section>
<!-- END: Utilities -->
</div>
<button
class="btn btn-sm ae_cfg_btn hover:transition-all"
class="btn btn-sm variant-glass-warning ae_cfg_btn hover:transition-all"
on:click={() => {
$ae_loc.hub.show_element__cfg_detail = !$ae_loc.hub.show_element__cfg_detail;
}}
@@ -192,6 +265,7 @@ function dispatch_something_changed() {
<span class="cfg_text">Config</span>
</button>
</section>
@@ -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 {

10
src/routes/+layout.svelte
View File

@@ -213,6 +213,14 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
// }
</script>
<svelte:head>
<title>{data.ae_loc.title}</title>
<link rel="stylesheet" href="{data.ae_loc.site_style_href}">
<!-- <link rel="manifest" href="/manifest.json"> -->
</svelte:head>
<!-- regionFooter="flex justify-end space-x-2" -->
<Modal components={modalRegistry}
@@ -324,7 +332,7 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
<svelte:fragment slot="footer">
<div class="flex justify-between space-x-2">
<div class="flex justify-between space-x-2 text-slate-400 hover:text-slate-800 transition">
{@html $ae_loc.ds['hub__site__appshell_footer']}
</div>
</svelte:fragment>

11
src/routes/+page.svelte
View File

@@ -52,7 +52,7 @@ onMount(() => {
<div data-sveltekit-preload-data="false" class="">
{#if $ae_loc.iframe}
<!-- {#if $ae_loc.iframe}
<a
class="btn btn-sm variant-soft"
href="/?iframe=false"
@@ -73,7 +73,6 @@ onMount(() => {
class="btn btn-sm variant-soft"
title="Reload and clear the page cache"
on:click={() => {
// $ae_loc.
window.location.reload(true);
}}
>
@@ -84,7 +83,6 @@ onMount(() => {
class="btn btn-sm variant-soft"
title="Clear the browser storage for this page"
on:click={() => {
// $ae_loc.
localStorage.clear();
sessionStorage.clear();
alert('Local and Session Storage cleared. You will probably want to refresh the page.');
@@ -93,6 +91,13 @@ onMount(() => {
<span class="fas fa-sync mx-1"></span>
Clear Storage
</button>
<a
class="btn btn-sm variant-soft"
href="/hosted_files"
>
<span class="fas fa-code mx-1"></span>
Util: Convert Videos
</a> -->
</div>
</section>

66
src/routes/events_badges/+layout.svelte Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data;
import { goto } from '$app/navigation';
</script>
<svelte:head>
<title>Events Badges - {data.ae_loc.title}</title>
</svelte:head>
<!-- <h1>Events Badges Layout?</h1> -->
<div class="submenu flex flex-row justify-center">
<span class="btn-group variant-soft-secondary px-4 py-2">
{#each Object.entries(data.submenu) as [key, item]}
<!-- <a href="/settings/{item.slug}">{item.title}</a> -->
<!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
{#if item.disable}
<button
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
disabled={item.disable}
on:click={() => {
// window.location(item.href);
// href={item.href}
// invalidateAll
goto(item.href, { });
}}
>
{item.name}
</button>
{:else}
<a
href={item.href}
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
class:disabled={item.disable}
>
{item.name}
</a>
{/if}
<!-- <button
title={item.title}
class="hover:variant-ghost-secondary"
class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
disabled={item.disable}
on:click={() => {
// window.location(item.href);
// href={item.href}
// invalidateAll
goto(item.href, { });
}}
>
{item.name}
</button> -->
{/each}
</span>
</div>
<slot></slot>

33
src/routes/events_badges/+layout.ts Normal file
View File

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

40
src/routes/events_badges/+page.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
export let data;
// console.log(`ae_ Svelte Events Badges +page data:`, data);
import { onMount } from 'svelte';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';
onMount(() => {
console.log('Events Badges: +page.svelte');
let href_url = window.location.href;
// console.log(href_url);
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
// $slct_trigger = 'msg_parent';
ae_util.handle_url_and_message('event_id', $slct.event_id);
ae_util.handle_url_and_message('event_badge_id', $slct.event_badge_id);
if ($slct.event_badge_id) {
console.log(`Got an ID. Let's show the modal!`);
modalStore.trigger(modal_edit__event_badge_obj);
}
});
</script>
<section class="ae_events_badges md:container h-full mx-auto">
</section>
<style lang="postcss">
</style>

6
src/routes/events_badges/+page.ts Normal file
View File

@@ -0,0 +1,6 @@
/** @type {import('./$types').PageLoad} */
export function load() {
return {
ae_events_badges_page_ts: true,
};
}

6
src/routes/events_speakers/+layout.svelte
View File

@@ -3,4 +3,10 @@
export let data;
</script>
<svelte:head>
<title>Events Speakers - {data.ae_loc.title}</title>
</svelte:head>
<slot></slot>

245
src/routes/hosted_files/+page.svelte Normal file
View File

@@ -0,0 +1,245 @@
<script lang="ts">
export let data;
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
import { onMount } from 'svelte';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';
export let container_class_li = [];
let file_uploads_post_promise;
let download_src;
let download_filename;
let file_uploads_clip_post_promise;
let download_clip_src;
let download_clip_filename;
onMount(() => {
console.log('Hosted Files: AV Utilities +page.svelte');
});
function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
console.log(event.target.file_list);
const form_data = new FormData();
form_data.append('title_part_1', event.target.title_part_1.value);
form_data.append('title_part_2', event.target.title_part_2.value);
form_data.append('subtitle_part_1', event.target.subtitle_part_1.value);
form_data.append('subtitle_part_2', event.target.subtitle_part_2.value);
form_data.append('font_color', event.target.font_color.value);
form_data.append(`file`, event.target.audio_file.files[0]);
if (event.target.title_image.files.length > 0) {
form_data.append(`title_image`, event.target.title_image.files[0]);
}
download_filename = `${event.target.title_part_1.value}_${event.target.title_part_2.value}_${event.target.subtitle_part_1.value}_${event.target.subtitle_part_2.value}.mp4`
// for (let i = 0; i < event.target.file_list.files.length; i++) {
// form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
// }
let params = null;
let endpoint = '/hosted_file/create_video';
console.log(form_data);
params = null;
// Uncomment and the file_uploads_post_promise is not seen by the "await" below
// file_uploads_post_promise = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, data:form_data});
// Uncomment so that the file_uploads_post_promise is not seen by the "await" below
file_uploads_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
.then(function (result) {
console.log(result);
let file_blob = new Blob([result.data]);
// console.log(file_blob);
let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
// const url = window.URL.createObjectURL(new Blob([result.data]));
download_src = file_obj_url;
// download_filename = file_obj_url;
});
console.log(file_uploads_post_promise);
// let file_blob = new Blob([file_uploads_post_promise.data]);
// // console.log(file_blob);
// let file_obj_url = URL.createObjectURL(file_blob); // The img src
// download_src = file_obj_url;
// dispatch(
// 'event_file_obj_li_updated',
// {
// link_to_type: link_to_type,
// link_to_id: link_to_id,
// }
// );
return true;
}
function handle_submit_form_clip(event) {
console.log('*** handle_submit_form() ***');
console.log(event.target.file_list);
const form_data = new FormData();
form_data.append('start_time', event.target.start_time.value);
form_data.append('end_time', event.target.end_time.value);
if (event.target.reencode.value == '1' || event.target.reencode.value == 'true') {
form_data.append('reencode', 'true');
} else {
form_data.append('reencode', 'false');
}
// form_data.append('reencode', event.target.reencode.value);
form_data.append(`video_file`, event.target.video_file.files[0]);
download_filename = `clipped_file_test.mp4`
// for (let i = 0; i < event.target.file_list.files.length; i++) {
// form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
// }
let params = null;
let endpoint = '/hosted_file/clip_video';
console.log(form_data);
params = null;
file_uploads_clip_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
.then(function (result) {
console.log(result);
let file_blob = new Blob([result.data]);
// console.log(file_blob);
let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
// const url = window.URL.createObjectURL(new Blob([result.data]));
download_src = file_obj_url;
// download_filename = file_obj_url;
});
console.log(file_uploads_clip_post_promise);
return true;
}
</script>
<section
class="ae__hosted_files__av_util md:container h-full mx-auto space-y-4 {container_class_li.join(' ')}">
<h2>Convert mp3 to mp4</h2>
<p>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.</p>
<form on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="av_util_mp3_to_mp4 space-y-4">
<input type="text" name="title_part_1" value="Title Part 1" placeholder="Title Part 1" class="input" />
<input type="text" name="title_part_2" value="Title Part 2" placeholder="Title Part 2" class="input" />
<input type="text" name="subtitle_part_1" value="Sub-Title Part 1" placeholder="Sub-Title Part 1" class="input" />
<input type="text" name="subtitle_part_2" value="Sub-Title Part 2" placeholder="Sub-Title Part 2" class="input" />
<input type="text" name="font_color" value="black" placeholder="Font color" class="input w-32" />
<!-- File type extension is limited to mp3 only -->
<label class="label">
<div>Audio file (mp3)</div>
<input type="file" name="audio_file" accept="audio/*" class="input w-96" />
</label>
<!-- File type extension is limited to png only -->
<label class="label">
<div>Static image template (png)</div>
<input type="file" name="title_image" accept="image/*" class="input w-96" />
</label>
<button type="submit" class="btn variant-filled-warning mx-1">
<span class="fas fa-upload mx-1"></span>
Submit
</button>
</form>
<hr />
{#await file_uploads_post_promise}
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if file_uploads_post_promise}
<a href={download_src} download={download_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{:else}
<p>Fill out the form and select the audio file and static image template file.</p>
{/if}
{/await}
<hr>
<h2>Clip mp4</h2>
<p>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.</p>
<form on:submit|preventDefault={handle_submit_form_clip} on:keydown={e => e.key === 'Escape' && handle_cancel_form_clip} class="av_util_mp4_clip space-y-4">
<label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
<label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="00:00:00" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>
<label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label>
<!-- File type extension is limited to mp4 only -->
<label class="label">
<div>Video file (mp4)</div>
<input type="file" name="video_file" accept="video/*" class="input w-96" />
</label>
<button type="submit" class="btn variant-filled-warning mx-1">
<span class="fas fa-upload mx-1"></span>
Submit
</button>
</form>
<hr />
{#await file_uploads_clip_post_promise}
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if file_uploads_clip_post_promise}
<a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{:else}
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await}
</section>
<style>
</style>

5
src/routes/sponsorships/+layout.svelte
View File

@@ -3,6 +3,11 @@
export let data;
</script>
<svelte:head>
<title>Sponsorships - {data.ae_loc.title}</title>
</svelte:head>
<!-- <h1>Sponsorships Layout?</h1> -->
<!-- <div class="submenu">

1
src/routes/sponsorships/[slug]/+page.svelte
View File

@@ -79,6 +79,7 @@ onMount(() => {
$ae_loc.href_url = url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
ae_util.handle_url_and_message('sponsorship_cfg_id', $slct.sponsorship_id);
ae_util.handle_url_and_message('sponsorship_id', $slct.sponsorship_id);
if ($slct.sponsorship_id) {
console.log(`Got an ID. Let's show the modal!`);

BIN
static/OSIT_logo_2022_96px.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/favicon.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

91
static/hold manifest.webmanifest Normal file
View File

@@ -0,0 +1,91 @@
{
"background_color": "hsl(220, 65%, 31%)",
"description": "The One Sky IT Aether Progressive Web App for One Sky IT Demo",
"display": "fullscreen",
"icons": [
{
"sizes": "24x24",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_24px.png",
"type": "image/png"
},
{
"sizes": "48x48",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_48px.png",
"type": "image/png"
},
{
"sizes": "88x88",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_88px.webp",
"type": "image/webp"
},
{
"sizes": "88x88",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_88px.png",
"type": "image/png"
},
{
"sizes": "120x120",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_120px.png",
"type": "image/png"
},
{
"sizes": "144x144",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_144px.png",
"type": "image/png"
},
{
"sizes": "180x180",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_180px.png",
"type": "image/png"
},
{
"sizes": "192x192",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.webp",
"type": "image/webp"
},
{
"sizes": "192x192",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.png",
"type": "image/png"
},
{
"sizes": "256x256",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_256px.webp",
"type": "image/webp"
},
{
"sizes": "256x256",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_256px.png",
"type": "image/png"
},
{
"sizes": "300x300",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_300px.png",
"type": "image/png"
},
{
"sizes": "512x512",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_512px.webp",
"type": "image/webp"
},
{
"sizes": "512x512",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_512px.png",
"type": "image/png"
},
{
"sizes": "1024x1024",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_1024px.webp",
"type": "image/webp"
},
{
"sizes": "1024x1024",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_1024px.png",
"type": "image/png"
}
],
"name": "One Sky IT Demo - One Sky IT Aether PWA",
"short_name": "One Sky IT Demo OSIT AE PWA",
"start_url": "/",
"testing": "One Sky IT Demo"
}

91
static/manifest.json Normal file
View File

@@ -0,0 +1,91 @@
{
"background_color": "hsl(220, 65%, 31%)",
"description": "The One Sky IT Aether Progressive Web App for One Sky IT Demo",
"display": "fullscreen",
"icons": [
{
"sizes": "24x24",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_24px.png",
"type": "image/png"
},
{
"sizes": "48x48",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_48px.png",
"type": "image/png"
},
{
"sizes": "88x88",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_88px.webp",
"type": "image/webp"
},
{
"sizes": "88x88",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_88px.png",
"type": "image/png"
},
{
"sizes": "120x120",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_120px.png",
"type": "image/png"
},
{
"sizes": "144x144",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_144px.png",
"type": "image/png"
},
{
"sizes": "180x180",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_180px.png",
"type": "image/png"
},
{
"sizes": "192x192",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.webp",
"type": "image/webp"
},
{
"sizes": "192x192",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_192px.png",
"type": "image/png"
},
{
"sizes": "256x256",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_256px.webp",
"type": "image/webp"
},
{
"sizes": "256x256",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_256px.png",
"type": "image/png"
},
{
"sizes": "300x300",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_300px.png",
"type": "image/png"
},
{
"sizes": "512x512",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_512px.webp",
"type": "image/webp"
},
{
"sizes": "512x512",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_512px.png",
"type": "image/png"
},
{
"sizes": "1024x1024",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_1024px.webp",
"type": "image/webp"
},
{
"sizes": "1024x1024",
"src": "https://static.oneskyit.com/images/OSIT_logo_2022_1024px.png",
"type": "image/png"
}
],
"name": "One Sky IT Demo - One Sky IT Aether PWA",
"short_name": "One Sky IT Demo OSIT AE PWA",
"start_url": "/",
"testing": "One Sky IT Demo"
}

BIN
static/skeleton_favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB