From 2177f6c37917fdca1bf2b8f582e1d25b417ffb62 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Thu, 1 Aug 2024 19:52:52 -0400 Subject: [PATCH] Now with the event session search menu separated out. Also other clean up. --- src/lib/ae_string_snippets.ts | 2 +- .../event/[slug]/+page.svelte | 88 ++---------- .../events_pres_mgmt/event_page_menu.svelte | 128 ++++++++++++++++++ .../presenter/[slug]/+page.svelte | 3 +- .../session/[slug]/+page.svelte | 3 +- 5 files changed, 142 insertions(+), 82 deletions(-) create mode 100644 src/routes/events_pres_mgmt/event_page_menu.svelte diff --git a/src/lib/ae_string_snippets.ts b/src/lib/ae_string_snippets.ts index af9978d4..08b70a56 100644 --- a/src/lib/ae_string_snippets.ts +++ b/src/lib/ae_string_snippets.ts @@ -16,7 +16,7 @@ string_snippets['classes__core_menu__button_highlight'] = 'btn btn-sm mx-1 varia string_snippets['classes__core_menu__button_warning'] = 'btn btn-sm mx-1 variant-soft-warning text-info-300 hover:text-info-800'; // string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center space-y-1 border border-blue-200 rounded-md py-1 px-2 hover:bg-blue-100 transition-all duration-700 hover:duration-300'; -string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center gap-1 border border-gray-200 rounded-md p-1 hover:bg-gray-100 transition-all duration-700 hover:duration-300'; +string_snippets['classes__events_pres_mgmt_menu'] = 'w-full flex flex-col items-center gap-1 border border-gray-200 rounded-md p-1 hover:bg-gray-100 transition-all duration-700 hover:duration-300'; string_snippets['classes__events_pres_mgmt_menu__button'] = 'btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800'; string_snippets['classes__events_pres_mgmt_menu__button_highlight'] = 'btn btn-sm mx-1 variant-filled-tertiary text-info-300 hover:text-info-800'; diff --git a/src/routes/events_pres_mgmt/event/[slug]/+page.svelte b/src/routes/events_pres_mgmt/event/[slug]/+page.svelte index 961eb5ce..8d35b96a 100644 --- a/src/routes/events_pres_mgmt/event/[slug]/+page.svelte +++ b/src/routes/events_pres_mgmt/event/[slug]/+page.svelte @@ -22,6 +22,8 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores'; import { events_func } from '$lib/ae_events_functions'; +import Event_page_menu from './../../event_page_menu.svelte'; + // 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); @@ -378,6 +380,7 @@ async function handle_search__event_session( + Event: {ae_util.shorten_string({string: $lq__event_obj?.name, max_length: 12})} @@ -389,11 +392,9 @@ async function handle_search__event_session( <section class=" ae_events_pres_mgmt_event - h-full mx-auto - flex flex-col + md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16 items-center - space-y-2 pt-0 pb-8 - min-w-fit + min-w-100 w-3/4 max-w-max " @@ -409,83 +410,12 @@ async function handle_search__event_session( </header> {/if} -<div - class="pres_mgmt__session_search_help {ae_snip.classes__events_pres_mgmt_menu}" - class:border-none={!$events_loc.pres_mgmt.show_content__session_search_help} - > - <div> - <!-- <a href="/events_pres_mgmt/x/" class="{ae_snip.classes__events_pres_mgmt_menu__button}"> - <span class="fas fa-home mx-1"></span> - X - </a> --> - <a - href="/core" - class="{ae_snip.classes__events_pres_mgmt_menu__button}" - class:hidden={!$ae_loc.administrator_access} - > - <span class="fas fa-cogs mx-1"></span> - Æ Core - </a> - <a - href="/events_pres_mgmt/event/{$lq__event_obj?.event_id_random}/reports" - class="{ae_snip.classes__events_pres_mgmt_menu__button}" - class:hidden={!$ae_loc.trusted_access} - > - <span class="fas fa-chart-line mx-1"></span> - Pres Mgmt Reports - </a> +<Event_page_menu + data={data} + lq__event_obj={lq__event_obj} + /> - <button - type="button" - on:click={() => { - $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help; - }} - class="{ae_snip.classes__events_pres_mgmt_menu__button}" - title="Help and information about the session search" - > - <span class="fas fa-question-circle mx-1"></span> - {#if $events_loc.pres_mgmt.show_content__session_search_help} - Hide - {:else} - Show - {/if} - Help? - </button> - </div> - - <Element_data_store - ds_code="events__pres_mgmt__session_search_help" - ds_name="Default: Events - Pres Mgmt Session Search Help" - ds_type="html" - for_type="event" - for_id={$events_slct.event_id} - class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200" - show_edit={false} - show_edit_btn={true} - hide={!$events_loc.pres_mgmt.show_content__session_search_help} - /> - - <div> - <button - type="button" - on:click={() => { - $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help; - }} - class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error" - class:hidden={!$events_loc.pres_mgmt.show_content__session_search_help} - title="Help and information about the session search" - > - <span class="fas fa-question-circle mx-1"></span> - {#if $events_loc.pres_mgmt.show_content__session_search_help} - Hide - {:else} - Show - {/if} - Help? - </button> - </div> -</div> <div class="variant-ghost-success my-2 p-2 rounded-md flex flex-row items-center"> diff --git a/src/routes/events_pres_mgmt/event_page_menu.svelte b/src/routes/events_pres_mgmt/event_page_menu.svelte new file mode 100644 index 00000000..cbb3e505 --- /dev/null +++ b/src/routes/events_pres_mgmt/event_page_menu.svelte @@ -0,0 +1,128 @@ +<script lang="ts"> +export let data: any; + +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'; + +import Element_ae_crud from '$lib/element_ae_crud.svelte'; +import Element_data_store from '$lib/element_data_store.svelte'; +// import Sign_in_out from './sign_in_out.svelte'; + +export let lq__event_obj: any; + +let ae_tmp: key_val = {}; +let ae_triggers: key_val = {}; + +</script> + + +<!-- New standard page specific menu 2024-08-01 --> +<div + class="pres_mgmt__session_search {ae_snip.classes__events_pres_mgmt_menu}" + class:border-none={!$events_loc.pres_mgmt.show_menu__session_search} + > + + <!-- BEGIN: The menu button options --> + <div + class="flex flex-row flex-wrap gap-1 items-center justify-around w-full"> + + <span + class="ae_menu__navigation_options" + > + <a + href="/core" + class="{ae_snip.classes__events_pres_mgmt_menu__button}" + class:hidden={!$ae_loc.administrator_access} + > + <span class="fas fa-cogs m-1"></span> + Æ Core + </a> + + <a + href="/events_pres_mgmt/event/{$lq__event_obj?.event_id_random}/reports" + class="{ae_snip.classes__events_pres_mgmt_menu__button}" + class:hidden={!$ae_loc.trusted_access} + > + <span class="fas fa-chart-line m-1"></span> + Pres Mgmt Reports + </a> + </span> + + <span + class="ae_menu__object_options" + > + <button + type="button" + on:click={() => { + if ($events_loc.pres_mgmt.show_menu__session_search == 'help') { + $events_loc.pres_mgmt.show_menu__session_search = null; + } else { + $events_loc.pres_mgmt.show_menu__session_search = 'help'; + } + }} + class="{ae_snip.classes__events_pres_mgmt_menu__button}" + title="Help and information about the session search" + > + <span class="fas fa-question-circle m-1"></span> + {#if $events_loc.pres_mgmt.show_menu__session_search} + Hide + {:else} + Show + {/if} + Help? + </button> + </span> + + <span + class="ae_menu__action_options" + class:hidden={true} + > + Nothing here yet. + </span> + + + </div> <!-- END: The menu button options --> + + + <!-- BEGIN: The expanded menu area for information and options --> + <div + class="flex flex-row items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md" + class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'} + > + + </div> <!-- END: The expanded menu area for information and options --> + + <Element_data_store + ds_code="events__pres_mgmt__session_search_help" + ds_name="Default: Events - Pres Mgmt Session Search Help" + ds_type="html" + for_type="event" + for_id={$events_slct.event_id} + class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md" + show_edit={false} + show_edit_btn={true} + hide={$events_loc.pres_mgmt.show_menu__session_search != 'help'} + /> + + <div> + <button + type="button" + on:click={() => { + $events_loc.pres_mgmt.show_menu__session_search = !$events_loc.pres_mgmt.show_menu__session_search; + }} + class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error" + class:hidden={!$events_loc.pres_mgmt.show_menu__session_search} + title="Collapse the expanded menu" + > + <span class="fas fa-chevron-up m-1"></span> + {#if $events_loc.pres_mgmt.show_menu__session_search} + Hide + {:else} + Show + {/if} + <!-- Menu? --> + </button> + </div> +</div> diff --git a/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte b/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte index e528cd6a..95bacca7 100644 --- a/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte +++ b/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte @@ -57,7 +57,8 @@ let lq__event_presenter_obj = liveQuery( <section - class="ae_events_pres_mgmt_event_presenter md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16" + class="ae_events_pres_mgmt_event_presenter + md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16" > diff --git a/src/routes/events_pres_mgmt/session/[slug]/+page.svelte b/src/routes/events_pres_mgmt/session/[slug]/+page.svelte index a5f823ab..83a466c4 100644 --- a/src/routes/events_pres_mgmt/session/[slug]/+page.svelte +++ b/src/routes/events_pres_mgmt/session/[slug]/+page.svelte @@ -214,7 +214,8 @@ onMount(() => { <section - class="ae_events_pres_mgmt_event_session md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16" + class="ae_events_pres_mgmt_event_session + md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16" >