Quickly saving lots of changes before they might be lost.
This commit is contained in:
159
src/routes/events/[event_id]/(pres_mgmt)/locations/+page.svelte
Normal file
159
src/routes/events/[event_id]/(pres_mgmt)/locations/+page.svelte
Normal file
@@ -0,0 +1,159 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
/** @type {import('./$types').PageData} */
|
||||
data: any;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
let log_lvl: number = 0;
|
||||
// console.log(`ae_events_pres_mgmt event [slug] +page.svelte data:`, data);
|
||||
|
||||
// Imports
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import Element_data_store from '$lib/elements/element_data_store_v2.svelte';
|
||||
|
||||
let ae_promises: key_val = {};
|
||||
let ae_tmp: key_val = {};
|
||||
let ae_triggers: key_val = {};
|
||||
|
||||
import { liveQuery } from 'dexie';
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import { db_events } from '$lib/ae_events/db_events';
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import {
|
||||
events_loc,
|
||||
events_sess,
|
||||
events_slct,
|
||||
events_trigger,
|
||||
events_trig_kv
|
||||
} from '$lib/stores/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
import Comp_event_location_obj_li from './ae_comp__event_location_obj_li.svelte';
|
||||
import Locations_page_menu from './locations_page_menu.svelte';
|
||||
// import Sign_in_out from './../../sign_in_out.svelte';
|
||||
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
// Variables
|
||||
if (browser) {
|
||||
console.log('Browser environment detected.');
|
||||
}
|
||||
|
||||
// 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];
|
||||
// console.log(`ae_acct = `, ae_acct);
|
||||
|
||||
$ae_loc.url_origin = data.url.origin;
|
||||
|
||||
$events_slct.event_id = ae_acct.slct.event_id;
|
||||
|
||||
let lq__event_obj = $derived(
|
||||
liveQuery(async () => {
|
||||
let results = await db_events.event.get($events_slct.event_id);
|
||||
return results;
|
||||
})
|
||||
);
|
||||
|
||||
let lq__event_location_obj_li = $derived(
|
||||
liveQuery(async () => {
|
||||
let results = await db_events.location
|
||||
.where('event_id')
|
||||
.equals(ae_acct.slct.event_id)
|
||||
.sortBy('name');
|
||||
return results;
|
||||
})
|
||||
);
|
||||
|
||||
// *** Functions and Logic
|
||||
onMount(() => {
|
||||
if (log_lvl) {
|
||||
console.log('Events [event_id] Locations: +page.svelte');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
Locations: {ae_util.shorten_string({
|
||||
string: $lq__event_obj?.name ?? 'Loading...',
|
||||
max_length: 12
|
||||
})} ({$lq__event_obj?.event_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="
|
||||
ae_events_pres_mgmt_event_location
|
||||
md:container
|
||||
flex flex-col gap-1
|
||||
items-center
|
||||
justify-start
|
||||
mx-auto
|
||||
py-1 px-2 pb-16
|
||||
h-full
|
||||
min-w-full
|
||||
max-w-max
|
||||
"
|
||||
>
|
||||
<Locations_page_menu {lq__event_obj} />
|
||||
|
||||
{#if !$lq__event_location_obj_li}
|
||||
<div>
|
||||
<span class="fas fa-spinner fa-spin m-1"></span>
|
||||
<span>Loading locations...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<header class="ae_module_header">
|
||||
<h2
|
||||
class="
|
||||
text-2xl font-bold text-center
|
||||
flex flex-row gap-0.25 items-center justify-between w-full
|
||||
"
|
||||
>
|
||||
<span class="flex flex-row gap-1 items-center">
|
||||
<span class="fas fa-map-marked m-1 text-neutral-800/80"></span>
|
||||
Locations/Rooms
|
||||
<!-- Button to toggle between the regular location view and managing locations??? -->
|
||||
</span>
|
||||
<!-- Locations for: -->
|
||||
{#if $lq__event_obj?.cfg_json?.short_name}
|
||||
{@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
|
||||
{:else}
|
||||
{@html $lq__event_obj?.name ?? ae_snip.html__not_set}
|
||||
{/if}
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<Element_data_store
|
||||
ds_code="events__pres_mgmt__locations_msg"
|
||||
ds_name="Default: Events - Pres Mgmt Locations Message"
|
||||
ds_type="html"
|
||||
for_type="event"
|
||||
for_id={$lq__event_obj?.event_id}
|
||||
class_li="w-full max-w-(--breakpoint-lg) text-lg text-blue-500 font-bold text-center p-1 m-auto border border-blue-200 rounded-md bg-blue-100 space-y-2"
|
||||
hide={!$ae_loc.manager_access || $events_loc.pres_mgmt.hide__locations_msg}
|
||||
show_edit={false}
|
||||
show_edit_btn={true}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<Comp_event_location_obj_li {lq__event_location_obj_li} />
|
||||
</section>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
@@ -0,0 +1,420 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
container_class_li?: string | Array<string>;
|
||||
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
|
||||
// link_to_type: string;
|
||||
link_to_id: string;
|
||||
lq__event_location_obj_li: any;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
container_class_li = [],
|
||||
// link_to_type,
|
||||
link_to_id,
|
||||
lq__event_location_obj_li
|
||||
}: Props = $props();
|
||||
|
||||
// Imports
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import {
|
||||
events_loc,
|
||||
events_sess,
|
||||
events_slct,
|
||||
events_trigger,
|
||||
events_trig_kv
|
||||
} from '$lib/stores/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
import Comp_event_session_obj_li from '../../ae_comp__event_session_obj_li_wrapper.svelte';
|
||||
import Element_ae_crud_v2 from '$lib/elements/element_ae_crud_v2.svelte';
|
||||
import Comp_event_device_obj_li from './../device/ae_comp__event_device_obj_li_wrapper.svelte';
|
||||
|
||||
// if (log_lvl) {
|
||||
// console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
|
||||
// }
|
||||
|
||||
// Variables
|
||||
// let ae_promises: key_val = {};
|
||||
// let ae_tmp: key_val = {};
|
||||
// let ae_triggers: key_val = {};
|
||||
|
||||
if (!$events_loc.pres_mgmt?.location_kv) {
|
||||
$events_loc.pres_mgmt.location_kv = {};
|
||||
}
|
||||
|
||||
// *** Functions and Logic
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="
|
||||
ae_comp event_location_obj_li
|
||||
border-2 border-dashed border-x-red-500 border-y-white
|
||||
sm:border-x-red-400 md:border-x-yellow-400 lg:border-x-gray-100
|
||||
px-0.5 py-2 space-y-2
|
||||
min-w-full
|
||||
w-full
|
||||
container overflow-x-scroll {container_class_li}
|
||||
"
|
||||
>
|
||||
<div class="float-right flex flex-row items-center">
|
||||
{#if $ae_loc.administrator_access && $ae_loc.edit_mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Add Location');
|
||||
if (
|
||||
!confirm(
|
||||
'Add a new location to the event? You will be able to edit the details after the location is created.'
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let location_data = {
|
||||
event_id_random: $events_slct.event_id,
|
||||
name: 'TEMP Location Name',
|
||||
enable: true
|
||||
};
|
||||
|
||||
events_func.create_ae_obj__event_location({
|
||||
api_cfg: $ae_api,
|
||||
event_id: $events_slct.event_id,
|
||||
data_kv: location_data,
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
|
||||
>
|
||||
<span class="fas fa-plus mx-1"></span>
|
||||
Add Location
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h3 class="h5">
|
||||
Locations:
|
||||
<span
|
||||
class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
|
||||
class:hidden={!$lq__event_location_obj_li?.length}
|
||||
title="Locations: {$lq__event_location_obj_li?.length ?? 'None'}"
|
||||
>
|
||||
<span class="fas fa-map-marked m-1 text-neutral-800/80"></span>
|
||||
{@html $lq__event_location_obj_li?.length
|
||||
? `${$lq__event_location_obj_li?.length}×`
|
||||
: ''}
|
||||
</span>
|
||||
|
||||
{#if !$lq__event_location_obj_li?.length}
|
||||
<span class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200">
|
||||
<span class="fas fa-exclamation-triangle mx-1"></span>
|
||||
No locations available.
|
||||
</span>
|
||||
{/if}
|
||||
</h3>
|
||||
|
||||
<!-- Show locations for this LiveQuery -->
|
||||
{#if $lq__event_location_obj_li?.length}
|
||||
<ul class="space-y-4 p-4 m-2 bg-gray-100 rounded-md">
|
||||
{#each $lq__event_location_obj_li as event_location_obj}
|
||||
<li
|
||||
class="space-y-2 border border-gray-200 p-2 rounded-md"
|
||||
class:dim={event_location_obj?.hide}
|
||||
class:hidden={event_location_obj?.hide && !$ae_loc.edit_mode}
|
||||
>
|
||||
<h4
|
||||
class="h5 rounded-md p-2 bg-gray-200 flex flex-row gap-1 items-center justify-between"
|
||||
>
|
||||
<span>
|
||||
<Element_ae_crud_v2
|
||||
api_cfg={$ae_api}
|
||||
object_type={'event_location'}
|
||||
object_id={event_location_obj?.event_location_id}
|
||||
object_reload={true}
|
||||
field_name={'name'}
|
||||
field_type={'text'}
|
||||
current_field_value={event_location_obj?.name}
|
||||
allow_null={false}
|
||||
hide_element={!$ae_loc.edit_mode}
|
||||
hide_edit_btn={false}
|
||||
outline_element={false}
|
||||
display_block={false}
|
||||
display_absolute_edit={false}
|
||||
class_li={'m-1'}
|
||||
>
|
||||
<!-- <strong class="text-sm">Name/Title:</strong> -->
|
||||
<span class="fas fa-map-marker-alt m-1 text-neutral-800/80"></span>
|
||||
"{event_location_obj?.name ?? '-- not set --'}"
|
||||
</Element_ae_crud_v2>
|
||||
|
||||
<!-- "{event_location_obj.name}" -->
|
||||
{#if event_location_obj?.code && !$events_loc.pres_mgmt?.hide__location_code}
|
||||
<span
|
||||
class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
|
||||
title="Location code {event_location_obj?.code}"
|
||||
>
|
||||
<span class="fas fa-barcode"></span>
|
||||
{event_location_obj?.code ?? ''}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="links">
|
||||
<a
|
||||
href="/events/{event_location_obj?.event_id}/location/{event_location_obj?.event_location_id}"
|
||||
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all hover:transition-all *:hover:inline text-xs"
|
||||
title="View this location"
|
||||
>
|
||||
<span class="fas fa-map-marker-alt m-1"></span>
|
||||
<span class="hidden">View</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/event/{event_location_obj?.event_id}/launcher/{event_location_obj?.event_location_id}"
|
||||
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all hover:transition-all *:hover:inline text-xs"
|
||||
title="The legacy launcher that not actively being developed. Use with the native launcher for oral sessions."
|
||||
>
|
||||
<span class="fas fa-paper-plane m-1"></span>
|
||||
<span class="hidden">Launcher</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/events/{event_location_obj?.event_id}/launcher/{event_location_obj?.event_location_id}"
|
||||
class="btn btn-sm preset-tonal-tertiary border border-tertiary-500 hover:preset-filled-secondary-500 transition-all hover:transition-all *:hover:inline text-xs"
|
||||
title="The new launcher that is actively being developed. Do not use with the native launcher."
|
||||
>
|
||||
<span class="fas fa-plane m-1"></span>
|
||||
<span class="hidden">Dev Launcher</span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Show/Hide Location');
|
||||
if (!$events_loc.pres_mgmt.location_kv) {
|
||||
$events_loc.pres_mgmt.location_kv = {
|
||||
[event_location_obj.event_location_id]: { collapse: true }
|
||||
};
|
||||
} else if (
|
||||
!$events_loc.pres_mgmt.location_kv[
|
||||
event_location_obj.event_location_id
|
||||
]
|
||||
) {
|
||||
$events_loc.pres_mgmt.location_kv[
|
||||
event_location_obj.event_location_id
|
||||
] = {
|
||||
collapse: true
|
||||
};
|
||||
} else {
|
||||
$events_loc.pres_mgmt.location_kv[
|
||||
event_location_obj.event_location_id
|
||||
].collapse =
|
||||
!$events_loc.pres_mgmt.location_kv[
|
||||
event_location_obj.event_location_id
|
||||
].collapse;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition-all hover:transition-all *:hover:inline text-xs"
|
||||
class:preset-tonal-warning={$events_loc.pres_mgmt?.location_kv[
|
||||
event_location_obj.event_location_id
|
||||
]?.collapse}
|
||||
>
|
||||
{#if $events_loc.pres_mgmt.location_kv && $events_loc.pres_mgmt.location_kv[event_location_obj.event_location_id]?.collapse}
|
||||
<!-- <span class="fas fa-minus mx-1"></span> -->
|
||||
<span class="fas fa-chevron-up m-1"></span>
|
||||
<span class="hidden"> Show?</span>
|
||||
{:else}
|
||||
<span class="fas fa-chevron-down m-1"></span>
|
||||
<!-- <span class="fas fa-plus mx-1"></span> -->
|
||||
<!-- <span>Location</span> -->
|
||||
{/if}
|
||||
</button>
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class:hidden={$events_loc.pres_mgmt.location_kv &&
|
||||
$events_loc.pres_mgmt.location_kv[event_location_obj.event_location_id]
|
||||
?.collapse}
|
||||
>
|
||||
<div
|
||||
class:hidden={!$events_loc.pres_mgmt.show_content__location_description}
|
||||
>
|
||||
<!-- <Element_ae_crud
|
||||
api_cfg={$ae_api}
|
||||
object_type={'event_location'}
|
||||
object_id={event_location_obj?.event_location_id_random}
|
||||
field_name={'description'}
|
||||
field_type={'textarea'}
|
||||
field_value={event_location_obj?.description}
|
||||
allow_null={false}
|
||||
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
|
||||
outline_element={false}
|
||||
show_crud={false}
|
||||
display_inline={true}
|
||||
display_block_edit={true}
|
||||
textarea_rows={15}
|
||||
class_li={''}
|
||||
on:ae_crud_updated={e => {
|
||||
console.log(`ae_crud_updated:`, e.detail);
|
||||
|
||||
events_func.load_ae_obj_id__event_location({api_cfg: $ae_api, event_location_id: event_location_obj.event_location_id_random, log_lvl: 1});
|
||||
}}
|
||||
>
|
||||
<strong class="text-sm">
|
||||
Description:
|
||||
</strong>
|
||||
|
||||
{#if event_location_obj?.description}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Show/Hide Description');
|
||||
if ($events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id_random) {
|
||||
$events_sess.pres_mgmt.show_content__location_description = null;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_location_id = null;
|
||||
} else {
|
||||
$events_sess.pres_mgmt.show_content__location_description = event_location_obj.event_location_id_random;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_location_id = event_location_obj.event_location_id_random;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
|
||||
>
|
||||
{#if $events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id_random}
|
||||
<span class="fas fa-eye-slash mx-1"></span>
|
||||
<span>Hide Description</span>
|
||||
{:else}
|
||||
<span class="fas fa-eye mx-1"></span>
|
||||
<span>Show</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<pre
|
||||
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
|
||||
class:hidden={$events_sess.pres_mgmt.show_content__location_description !== event_location_obj.event_location_id_random}
|
||||
>{event_location_obj.description}</pre>
|
||||
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
{/if}
|
||||
</Element_ae_crud> -->
|
||||
|
||||
<Element_ae_crud_v2
|
||||
api_cfg={$ae_api}
|
||||
object_type={'event_location'}
|
||||
object_id={event_location_obj?.event_location_id_random}
|
||||
object_reload={true}
|
||||
field_name={'description'}
|
||||
field_type={'textarea'}
|
||||
current_field_value={event_location_obj?.description}
|
||||
allow_null={true}
|
||||
hide_element={!$ae_loc.edit_mode}
|
||||
hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
|
||||
outline_element={false}
|
||||
display_block={false}
|
||||
display_absolute_edit={false}
|
||||
textarea_rows={15}
|
||||
class_li={'m-1'}
|
||||
>
|
||||
<strong class="text-sm"> Description: </strong>
|
||||
|
||||
{#if event_location_obj?.description}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Show/Hide Description');
|
||||
if (
|
||||
$events_sess.pres_mgmt
|
||||
.show_content__location_description ==
|
||||
event_location_obj.event_location_id_random
|
||||
) {
|
||||
$events_sess.pres_mgmt.show_content__location_description =
|
||||
null;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_location_id = null;
|
||||
} else {
|
||||
$events_sess.pres_mgmt.show_content__location_description =
|
||||
event_location_obj.event_location_id_random;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_location_id =
|
||||
event_location_obj.event_location_id_random;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
|
||||
>
|
||||
{#if $events_sess.pres_mgmt.show_content__location_description == event_location_obj.event_location_id_random}
|
||||
<span class="fas fa-eye-slash mx-1"></span>
|
||||
<span>Hide Description</span>
|
||||
{:else}
|
||||
<span class="fas fa-eye mx-1"></span>
|
||||
<span>Show</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<pre
|
||||
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
|
||||
class:hidden={$events_sess.pres_mgmt
|
||||
.show_content__location_description !==
|
||||
event_location_obj.event_location_id_random}>{event_location_obj.description}</pre>
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
{/if}
|
||||
</Element_ae_crud_v2>
|
||||
</div>
|
||||
|
||||
{#if !$events_loc.pres_mgmt.show_content__location_devices_sessions || $events_loc.pres_mgmt.show_content__location_devices_sessions == 'default' || $events_loc.pres_mgmt.show_content__location_devices_sessions == 'sessions'}
|
||||
<!-- Show sessions for this location -->
|
||||
{#if event_location_obj?.event_location_id_random}
|
||||
<Comp_event_session_obj_li
|
||||
link_to_type={'event_location'}
|
||||
link_to_id={event_location_obj?.event_location_id_random}
|
||||
event_session_id_random_li={[]}
|
||||
{log_lvl}
|
||||
></Comp_event_session_obj_li>
|
||||
{/if}
|
||||
{:else if $events_loc.pres_mgmt.show_content__location_devices_sessions == 'devices'}
|
||||
<!-- Show devices for this location -->
|
||||
{#if event_location_obj?.event_location_id_random}
|
||||
<Comp_event_device_obj_li
|
||||
link_to_type={'event_location'}
|
||||
link_to_id={event_location_obj?.event_location_id_random}
|
||||
event_device_id_random_li={[]}
|
||||
auto_refresh={$events_loc.pres_mgmt.refresh_interval ?? 90000}
|
||||
{log_lvl}
|
||||
></Comp_event_device_obj_li>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Show files for this location -->
|
||||
<!-- <Element_manage_event_file_li_wrap
|
||||
link_to_type={'event_location'}
|
||||
link_to_id={event_location_obj?.event_location_id_random}
|
||||
allow_basic={$events_loc.trusted_access}
|
||||
allow_moderator={$events_loc.trusted_access}
|
||||
container_class_li={''}
|
||||
/> -->
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<!-- <p class:hidden={display_mode != 'default'}>
|
||||
No locations available to show at this time
|
||||
</p> -->
|
||||
{/if}
|
||||
</section>
|
||||
@@ -0,0 +1,236 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
// export let data: any;
|
||||
log_lvl?: number;
|
||||
// export let event_location_id: string;
|
||||
lq__event_obj: any; // export let lq__auth__event_presenter_obj: any;
|
||||
}
|
||||
|
||||
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/stores/ae_stores';
|
||||
import {
|
||||
events_loc,
|
||||
events_sess,
|
||||
events_slct,
|
||||
events_trigger,
|
||||
events_trig_kv
|
||||
} from '$lib/stores/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/elements/element_data_store_v2.svelte';
|
||||
import Comp__events_menu_nav from './../../ae_comp__events_menu_nav.svelte';
|
||||
|
||||
// let ae_tmp: key_val = {};
|
||||
// let ae_triggers: key_val = {};
|
||||
</script>
|
||||
|
||||
<!-- New standard page specific menu 2025-06-20 -->
|
||||
<div class="pres_mgmt__location_menu ae_container_module_menu">
|
||||
<!-- BEGIN: The menu button options -->
|
||||
<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
|
||||
<Comp__events_menu_nav
|
||||
hide={!$ae_loc.authenticated_access}
|
||||
event_id={$lq__event_obj?.event_id}
|
||||
ae_core={$ae_loc.administrator_access}
|
||||
events__reports={$ae_loc.trusted_access}
|
||||
events__session_search={$events_slct.event_id}
|
||||
/>
|
||||
|
||||
<span
|
||||
class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
|
||||
>
|
||||
<!-- Button to toggle between showing and not showing the extended options menu -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($events_loc.pres_mgmt.show_menu__location == 'options') {
|
||||
$events_loc.pres_mgmt.show_menu__location = null;
|
||||
} else {
|
||||
$events_loc.pres_mgmt.show_menu__location = 'options';
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm mx-1"
|
||||
class:ae_btn_info_filled={$events_loc.pres_mgmt.show_menu__location == 'options'}
|
||||
class:ae_btn_info={$events_loc.pres_mgmt.show_menu__location != 'options'}
|
||||
class:hidden={!$ae_loc.trusted_access}
|
||||
title="Options for the event locations"
|
||||
>
|
||||
<span class="fas fa-cog m-1"></span>
|
||||
{#if $events_loc.pres_mgmt.show_menu__location == 'options'}
|
||||
Hide
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
Options?
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($events_loc.pres_mgmt.show_menu__location == 'help') {
|
||||
$events_loc.pres_mgmt.show_menu__location = null;
|
||||
} else {
|
||||
$events_loc.pres_mgmt.show_menu__location = 'help';
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm mx-1"
|
||||
class:ae_btn_info_filled={$events_loc.pres_mgmt.show_menu__location == 'help'}
|
||||
class:ae_btn_info={$events_loc.pres_mgmt.show_menu__location != 'help'}
|
||||
title="Help and information about the location"
|
||||
>
|
||||
<span class="fas fa-question-circle m-1"></span>
|
||||
{#if $events_loc.pres_mgmt.show_menu__location == 'help'}
|
||||
Hide Help?
|
||||
{:else}
|
||||
Help?
|
||||
{/if}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<!-- END: The menu button options -->
|
||||
|
||||
<!-- BEGIN: The expanded menu area for information and options -->
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-0.5 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__location != 'options'}
|
||||
>
|
||||
<!-- <div
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-center w-full"
|
||||
> -->
|
||||
<!-- Show the session list or device list -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($events_loc.pres_mgmt.show_content__location_devices_sessions == 'sessions') {
|
||||
$events_loc.pres_mgmt.show_content__location_devices_sessions = 'devices';
|
||||
} else {
|
||||
$events_loc.pres_mgmt.show_content__location_devices_sessions = 'sessions';
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm"
|
||||
class:ae_btn_surface={$events_loc.pres_mgmt?.show_content__location_devices_sessions ==
|
||||
'sessions'}
|
||||
class:ae_btn_surface_outlined={$events_loc.pres_mgmt
|
||||
?.show_content__location_devices_sessions == 'devices'}
|
||||
title="Show the session list or device list for each location."
|
||||
>
|
||||
{#if $events_loc.pres_mgmt.show_content__location_devices_sessions == 'sessions'}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Location's Session List
|
||||
{:else}
|
||||
<span class="fas fa-toggle-off m-1"></span>
|
||||
Location's Device List
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Show or hide the device code -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_loc.pres_mgmt.hide__device_code = !$events_loc.pres_mgmt.hide__device_code;
|
||||
}}
|
||||
class="btn btn-sm"
|
||||
class:ae_btn_surface={!$events_loc.pres_mgmt?.hide__device_code}
|
||||
class:ae_btn_surface_outlined={$events_loc.pres_mgmt?.hide__device_code}
|
||||
title="Show or hide the device code."
|
||||
>
|
||||
{#if !$events_loc.pres_mgmt.hide__device_code}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Device Code
|
||||
{:else}
|
||||
<span class="fas fa-toggle-off m-1"></span>
|
||||
Device Code
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Show or hide the location code -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_loc.pres_mgmt.hide__location_code =
|
||||
!$events_loc.pres_mgmt.hide__location_code;
|
||||
}}
|
||||
class="btn btn-sm"
|
||||
class:ae_btn_surface={!$events_loc.pres_mgmt?.hide__location_code}
|
||||
class:ae_btn_surface_outlined={$events_loc.pres_mgmt?.hide__location_code}
|
||||
title="Show or hide the location code."
|
||||
>
|
||||
{#if !$events_loc.pres_mgmt.hide__location_code}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Showing Location Code
|
||||
{:else}
|
||||
<span class="fas fa-toggle-off m-1"></span>
|
||||
Show Location Code?
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Show or hide the session code -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_loc.pres_mgmt.hide__session_code =
|
||||
!$events_loc.pres_mgmt.hide__session_code;
|
||||
}}
|
||||
class="btn btn-sm"
|
||||
class:ae_btn_surface={!$events_loc.pres_mgmt?.hide__session_code}
|
||||
class:ae_btn_surface_outlined={$events_loc.pres_mgmt?.hide__session_code}
|
||||
title="Show or hide the session code."
|
||||
>
|
||||
{#if !$events_loc.pres_mgmt.hide__session_code}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Showing Session Code
|
||||
{:else}
|
||||
<span class="fas fa-toggle-off m-1"></span>
|
||||
Show Session Code?
|
||||
{/if}
|
||||
</button>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<!-- END: The expanded menu area for information and options -->
|
||||
|
||||
<Element_data_store
|
||||
ds_code="events__pres_mgmt__location_help"
|
||||
ds_name="Default: Events - Pres Mgmt Session Help"
|
||||
ds_type="html"
|
||||
for_type="event"
|
||||
for_id={$lq__event_obj?.event_id}
|
||||
class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md max-w-xl"
|
||||
show_edit={false}
|
||||
show_edit_btn={true}
|
||||
hide={$events_loc.pres_mgmt.show_menu__location != 'help'}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_loc.pres_mgmt.show_menu__location =
|
||||
!$events_loc.pres_mgmt.show_menu__location;
|
||||
}}
|
||||
class="btn btn-sm mx-1 preset-tonal-error border border-error-500 hover:preset-filled-error-500"
|
||||
class:hidden={!$events_loc.pres_mgmt.show_menu__location}
|
||||
title="Collapse the expanded menu"
|
||||
>
|
||||
<span class="fas fa-chevron-up m-1"></span>
|
||||
{#if $events_loc.pres_mgmt.show_menu__location}
|
||||
Hide
|
||||
<!-- Collapse -->
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
<!-- Menu? -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of the new standard page specific menu -->
|
||||
Reference in New Issue
Block a user