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

Style improvements for file uploads and related.

Browse Source
This commit is contained in:
Scott Idem
2025-07-23 13:22:34 -04:00
parent 5410717dcd
commit ced62cfd99
8 changed files with 134 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/events/[event_id]/+layout.svelte
View File

@@ -1,8 +1,14 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data: any;
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
let log_lvl: number = 0;
// console.log(`ae_events_pres_mgmt event [event_id] +page.svelte data:`, data);
// import { browser } from '$app/environment';
// import { goto, invalidate, pushState, replaceState } from '$app/navigation';
@@ -16,6 +22,7 @@ let log_lvl: number = 0;
// import { db_events } from "$lib/db_events";
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
@@ -24,7 +31,6 @@ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_ev
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
@@ -47,4 +53,4 @@ $events_slct.event_location_obj_li = ae_acct.slct.event_location_obj_li;
</script>
<slot />
{@render children?.()}

12
src/routes/events/[event_id]/+page.svelte
View File

@@ -540,11 +540,13 @@ max-w-max -->
<button
type="button"
class="btn btn-sm mx-1 ae_btn_warning"
onclick={() => {
$events_sess.pres_mgmt.fulltext_search_qry_str = '';
$events_trigger = 'load__event_session_obj_li';
}}
class:hidden={!$events_sess.pres_mgmt.fulltext_search_qry_str || $events_sess.pres_mgmt.fulltext_search_qry_str.length == 0}
class="btn btn-sm mx-1 ae_btn_warning"
title="Clear search text"
>
<!-- <span class="fas fa-backspace"></span> -->
@@ -663,16 +665,16 @@ max-w-max -->
link_to_id={$lq__event_obj?.event_id}
>
<span slot="label">
<div>
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class="bg-red-200 p-1">Upload global event files only!</strong>
<strong class="">Upload global event files only!</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Global event files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</span>
</div>
</span>
</Comp_event_files_upload>

45
src/routes/events/[event_id]/event_page_menu.svelte
View File

@@ -1,8 +1,16 @@
<script lang="ts">
// export let data: any;
export let log_lvl: number = 0;
interface Props {
// export let data: any;
log_lvl?: number;
lq__event_obj: any; // let ae_tmp: key_val = {};
}
import type { key_val } from '$lib/ae_stores';
let {
log_lvl = 0,
lq__event_obj
}: Props = $props();
// import type { key_val } from '$lib/ae_stores';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
@@ -11,11 +19,6 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv }
import Element_data_store from '$lib/element_data_store_v2.svelte';
import Comp__pres_mgmt_menu_nav from '../ae_comp__events_menu_nav.svelte';
export let lq__event_obj: any;
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
</script>
@@ -42,7 +45,7 @@ export let lq__event_obj: any;
<!-- Button to toggle between the regular event session search view and managing event files -->
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.show_content__event_view == 'manage_files') {
$events_loc.pres_mgmt.show_content__event_view = null;
} else {
@@ -75,7 +78,7 @@ export let lq__event_obj: any;
<!-- Button to toggle between showing and not showing the extended options menu -->
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.show_menu__session_search == 'options') {
$events_loc.pres_mgmt.show_menu__session_search = null;
} else {
@@ -101,7 +104,7 @@ export let lq__event_obj: any;
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.show_menu__session_search == 'help') {
$events_loc.pres_mgmt.show_menu__session_search = null;
} else {
@@ -145,7 +148,7 @@ export let lq__event_obj: any;
<!-- Save search text option toggle button? -->
<button
type="button"
on:click={() => {
onclick={() => {
$events_loc.pres_mgmt.save_search_text = !$events_loc.pres_mgmt.save_search_text;
}}
class="btn btn-sm"
@@ -248,7 +251,7 @@ export let lq__event_obj: any;
{#if $events_loc.pres_mgmt.show__launcher_link || $events_loc.pres_mgmt.show__location_link}
<button
disabled={!$ae_loc.trusted_access}
on:click={() => {
onclick={() => {
$events_loc.pres_mgmt.show__launcher_link = false;
$events_loc.pres_mgmt.show__launcher_link_legacy = false;
$events_loc.pres_mgmt.show__location_link = false;
@@ -261,7 +264,7 @@ export let lq__event_obj: any;
{:else}
<button
disabled={!$ae_loc.trusted_access}
on:click={() => {
onclick={() => {
$events_loc.pres_mgmt.show__launcher_link = true;
$events_loc.pres_mgmt.show__launcher_link_legacy = true;
$events_loc.pres_mgmt.show__location_link = true;
@@ -277,7 +280,7 @@ export let lq__event_obj: any;
{#if !$events_loc.pres_mgmt?.hide__session_li_poc_field}
<button
disabled={!$ae_loc.authenticated_access}
on:click={() => {
onclick={() => {
$events_loc.pres_mgmt.hide__session_li_poc_field = true;
}}
class="btn btn-sm ae_btn_surface"
@@ -288,7 +291,7 @@ export let lq__event_obj: any;
{:else}
<button
disabled={!$ae_loc.authenticated_access}
on:click={() => {
onclick={() => {
$events_loc.pres_mgmt.hide__session_li_poc_field = false;
}}
class="btn btn-sm ae_btn_surface_outlined"
@@ -302,7 +305,7 @@ export let lq__event_obj: any;
{#if $events_loc.pres_mgmt.qry_hidden == 'all'}
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.qry_hidden == 'all') {
$events_loc.pres_mgmt.qry_hidden = 'not_hidden';
} else {
@@ -318,7 +321,7 @@ export let lq__event_obj: any;
{:else}
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.qry_hidden == 'all') {
$events_loc.pres_mgmt.qry_hidden = 'not_hidden';
} else {
@@ -337,7 +340,7 @@ export let lq__event_obj: any;
{#if $events_loc.pres_mgmt.qry_enabled == 'all'}
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.qry_enabled == 'all') {
$events_loc.pres_mgmt.qry_enabled = 'enabled';
} else {
@@ -353,7 +356,7 @@ export let lq__event_obj: any;
{:else}
<button
type="button"
on:click={() => {
onclick={() => {
if ($events_loc.pres_mgmt.qry_enabled == 'all') {
$events_loc.pres_mgmt.qry_enabled = 'enabled';
} else {
@@ -389,7 +392,7 @@ export let lq__event_obj: any;
<div>
<button
type="button"
on:click={() => {
onclick={() => {
$events_loc.pres_mgmt.show_menu__session_search = !$events_loc.pres_mgmt.show_menu__session_search;
}}
class="btn btn-sm mx-1 ae_btn_info_filled"

8
src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
View File

@@ -267,16 +267,16 @@ onMount(() => {
link_to_id={$lq__event_location_obj.event_location_id}
>
<span slot="label">
<div>
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class="bg-orange-200 p-1">Upload location (room) specific files only!</strong>
<strong class="">Upload location (room) specific files only!</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Location (room) files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</span>
</div>
</span>
</Comp_event_files_upload>

52
src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
View File

@@ -306,20 +306,18 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
link_to_type="event_presenter"
link_to_id={$lq__event_presenter_obj?.event_presenter_id}
>
{#snippet label()}
<span >
<div>
<span class="fas fa-upload"></span>
<strong class="bg-green-100 p-1">Upload presenter (speaker) specific files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Presenter (speaker) presentation files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</span>
</span>
{/snippet}
<span slot="label">
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class="">Upload presenter (speaker) specific files</strong>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Presenter (speaker) presentation files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</div>
</span>
</Comp_event_files_upload>
{/if}
@@ -354,20 +352,18 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
link_to_type="event_presenter"
link_to_id={$lq__event_presenter_obj.event_presenter_id}
>
{#snippet label()}
<span >
<div>
<span class="fas fa-upload"></span>
<strong class="bg-green-100 p-1">Upload presenter (speaker) specific files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Presentation related files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</span>
</span>
{/snippet}
<span slot="label">
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class="">Upload presenter (speaker) specific files</strong>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Presentation related files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</div>
</span>
</Comp_event_files_upload>
{/if}

8
src/routes/events/[event_id]/session/[session_id]/+page.svelte
View File

@@ -338,16 +338,16 @@ onMount(() => {
link_to_id={$lq__event_session_obj.event_session_id}
>
<span slot="label">
<div>
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class="bg-yellow-100 p-1">Upload session (breakout) specific files only!</strong>
<strong class="">Upload session (breakout) specific files only!</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Session (breakout) files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key)<br>
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</span>
</div>
</span>
</Comp_event_files_upload>

29
src/routes/events/[event_id]/sign_in_out.svelte
View File

@@ -1,16 +1,25 @@
<script lang="ts">
// /** @type {import('./$types').PageData} */
export let data: any;
interface Props {
// /** @type {import('./$types').PageData} */
data: any;
event_session_id: string;
lq__event_session_obj: any;
lq__auth__event_presenter_obj: any;
}
let {
data,
event_session_id,
lq__event_session_obj,
lq__auth__event_presenter_obj
}: Props = $props();
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
export let event_session_id: string;
export let lq__event_session_obj: any;
export let lq__auth__event_presenter_obj: any;
if (browser) {
console.log('Browser environment detected.');
@@ -169,7 +178,7 @@ function sign_out() {
<button
type="button"
class="btn btn-sm preset-tonal-warning"
on:click={() => {
onclick={() => {
sign_out();
alert('You have been signed out.');
}}
@@ -193,18 +202,18 @@ function sign_out() {
class="input max-w-36"
placeholder="Key"
value={$events_sess.auth__entered_key ?? ''}
on:input={(e) => $events_sess.auth__entered_key = e.target.value}
oninput={(e) => $events_sess.auth__entered_key = e.target?.value}
>
<input
type="text"
class="input max-w-36"
placeholder="Passcode"
value={$events_sess.auth__entered_passcode ?? ''}
on:input={(e) => $events_sess.auth__entered_passcode = e.target.value}
oninput={(e) => $events_sess.auth__entered_passcode = e.target?.value}
>
<button
class="btn btn-md preset-tonal-primary border border-primary-500"
on:click={() => {
onclick={() => {
console.log('Sign in with URL values');
if ($events_sess.auth__person.presenter_id) {

52
src/routes/events/ae_comp__event_files_upload.svelte
View File

@@ -235,23 +235,35 @@ async function handle_input_upload_files(input_upload_files, task_id) {
</div>
{/await}
<div
class="
border-2 hover:border-2 border-dashed border-green-500
p-1
preset-filled-success-50-950 hover:border-green-800
cursor-pointer
"
>
<label
for="ae_comp__event_files_upload__input"
class="svelte_input_file_label text-center"
class="
svelte_input_file_label
text-center
cursor-pointer
"
class:hidden={$events_sess.files.disable_submit__event_file_obj}
>
<slot name="label">
<div>
<div class="text-lg">
<span class="fas fa-upload"></span>
<!-- Select files to upload -->
<!-- <span class="fas fa-file-archive"></span> -->
<strong class="bg-blue-300 p-1">Upload files</strong>
<strong class="">Upload files</strong>
<!-- (drag and drop) -->
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Presentation related files only</strong><br>
(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)
</span>
</div>
</slot>
</label>
@@ -263,9 +275,19 @@ async function handle_input_upload_files(input_upload_files, task_id) {
{required}
{accept}
name={input_name}
class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
class:hidden={$events_sess.files.disable_submit__event_file_obj}
class="
svelte_input_file_element file-dropzone-input
block w-full text-lg text-center
rounded-lg
cursor-pointer
p-1
preset-tonal-primary preset-outlined-primary-200-800 hover:preset-filled-success-200-800
transition-all
{input_class_li.join(' ')}
"
/>
</div>
<Element_input_files_tbl
bind:input_file_list={input_file_list}
@@ -277,7 +299,15 @@ async function handle_input_upload_files(input_upload_files, task_id) {
<button
type="submit"
class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500 hover:preset-tonal-success border border-success-500 w-54"
class="
btn btn-lg
text-lg
preset-tonal-primary hover:preset-tonal-success
flex items-center justify-center
w-54
transition-all
"
class:opacity-20={$events_sess.files.disable_submit__event_file_obj || $events_sess.files.status__file_list != 'ready'}
disabled={$events_sess.files.disable_submit__event_file_obj || $events_sess.files.status__file_list != 'ready'}
>
{#await ae_promises.upload__hosted_file_obj}
@@ -290,18 +320,18 @@ async function handle_input_upload_files(input_upload_files, task_id) {
</span>
{:then}
<span class="fas fa-upload m-1"></span>
<span class="text-sm">
Upload?
<span class="">
Upload
</span>
<!-- <span class="fas fa-save m-1"></span> -->
<span class="grow font-bold">
<span class="text-sm px-1 font-semibold bg-neutral-500/50 rounded">
{#if $events_sess.files.processed_file_list.length > 0}
<!-- {#each $events_sess.files.processed_file_list as file_obj, index}
<span class="text-xs">
{file_obj.filename}
</span>
{/each} -->
{$events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length} file` : `${$events_sess.files.processed_file_list.length} files`}
{@html $events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length}&times; file` : `${$events_sess.files.processed_file_list.length}&times; files`}
{:else}
<span class="text-xs">
No files selected