Badges: center badge vertically + horizontally in print preview; scaffold print_margin_cfg
This commit is contained in:
Scott Idem
192
src/lib/ae_elements/AE_Record_Controls.svelte
Normal file
192
src/lib/ae_elements/AE_Record_Controls.svelte
Normal file
@@ -0,0 +1,192 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* AE_Record_Controls.svelte
|
||||
* GENERIC Aether Record Management Controls
|
||||
* Manages: priority, hide, enable, alert, delete/disable
|
||||
*
|
||||
* Emits events — NO API calls. Parent is responsible for:
|
||||
* 1. Calling the API (update_ae_obj_v3, delete_ae_obj_id__*)
|
||||
* 2. Refreshing the object from cache/API
|
||||
* 3. Navigating away on delete
|
||||
*
|
||||
* Usage:
|
||||
* <AE_Record_Controls
|
||||
* obj={$lq__event_session_obj}
|
||||
* obj_label="session"
|
||||
* allow_delete={$ae_loc.manager_access}
|
||||
* allow_disable={$ae_loc.administrator_access}
|
||||
* on_toggle={(field, val) => { ... }}
|
||||
* on_delete={(method) => { ... }}
|
||||
* />
|
||||
*/
|
||||
import {
|
||||
Star,
|
||||
Eye,
|
||||
EyeOff,
|
||||
ToggleLeft,
|
||||
ToggleRight,
|
||||
Bell,
|
||||
BellOff,
|
||||
Trash2,
|
||||
MinusCircle,
|
||||
Settings
|
||||
} from '@lucide/svelte';
|
||||
|
||||
interface Props {
|
||||
// The object whose flags are being displayed (read-only — parent owns state)
|
||||
obj: any;
|
||||
|
||||
// Human-readable label for confirm dialogs ("session", "presenter", "location", etc.)
|
||||
obj_label?: string;
|
||||
|
||||
// Visibility — hide any control that doesn't apply for this object type
|
||||
show_alert?: boolean;
|
||||
show_priority?: boolean;
|
||||
show_enable?: boolean;
|
||||
show_hide?: boolean;
|
||||
show_labels?: boolean;
|
||||
|
||||
// Permission gates — parent passes booleans derived from $ae_loc
|
||||
allow_delete?: boolean; // Hard permanent delete (manager+)
|
||||
allow_disable?: boolean; // Soft disable/remove (administrator+)
|
||||
|
||||
// Callbacks — parent handles API + refresh + navigation
|
||||
on_toggle?: (field: string, new_val: boolean) => void;
|
||||
on_delete?: (method: 'delete' | 'disable') => void;
|
||||
|
||||
// Styling
|
||||
container_class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
obj,
|
||||
obj_label = 'record',
|
||||
show_alert = true,
|
||||
show_priority = true,
|
||||
show_enable = true,
|
||||
show_hide = true,
|
||||
show_labels = true,
|
||||
allow_delete = false,
|
||||
allow_disable = false,
|
||||
on_toggle,
|
||||
on_delete,
|
||||
container_class = 'flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10'
|
||||
}: Props = $props();
|
||||
|
||||
function toggle(field: string) {
|
||||
if (on_toggle) on_toggle(field, !obj?.[field]);
|
||||
}
|
||||
|
||||
function handle_delete(method: 'delete' | 'disable') {
|
||||
const msg =
|
||||
method === 'delete'
|
||||
? `Permanently delete this ${obj_label}? This cannot be undone.`
|
||||
: `Remove (disable) this ${obj_label}?`;
|
||||
if (!confirm(msg)) return;
|
||||
if (on_delete) on_delete(method);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={container_class}>
|
||||
{#if show_labels}
|
||||
<span class="text-xs text-surface-500 flex items-center gap-1 uppercase font-bold tracking-wider mr-2">
|
||||
<Settings size="1.1em" /> Controls:
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<!-- Priority -->
|
||||
{#if show_priority}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggle('priority')}
|
||||
class="btn-icon btn-icon-sm transition"
|
||||
class:preset-filled-warning-500={obj?.priority}
|
||||
class:preset-tonal-secondary={!obj?.priority}
|
||||
class:hover:preset-filled-warning-500={!obj?.priority}
|
||||
title={obj?.priority ? 'Remove priority flag' : 'Mark as priority'}
|
||||
>
|
||||
<Star
|
||||
size="1.2em"
|
||||
class={obj?.priority ? 'fill-current' : 'opacity-50'}
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Hide / Visible -->
|
||||
{#if show_hide}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggle('hide')}
|
||||
class="btn-icon btn-icon-sm transition"
|
||||
class:preset-filled-warning-500={obj?.hide}
|
||||
class:preset-tonal-secondary={!obj?.hide}
|
||||
class:hover:preset-filled-warning-500={!obj?.hide}
|
||||
title={obj?.hide ? 'Unhide this record' : 'Hide this record'}
|
||||
>
|
||||
{#if obj?.hide}
|
||||
<EyeOff size="1.2em" class="text-warning-500" />
|
||||
{:else}
|
||||
<Eye size="1.2em" class="opacity-60" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Enable / Disable -->
|
||||
{#if show_enable}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggle('enable')}
|
||||
class="btn-icon btn-icon-sm transition"
|
||||
class:preset-filled-success-500={obj?.enable}
|
||||
class:preset-filled-error-500={!obj?.enable}
|
||||
class:hover:preset-filled-success-500={!obj?.enable}
|
||||
title={obj?.enable ? 'Disable this record' : 'Enable this record'}
|
||||
>
|
||||
{#if obj?.enable}
|
||||
<ToggleRight size="1.2em" class="text-success-300" />
|
||||
{:else}
|
||||
<ToggleLeft size="1.2em" class="text-error-300" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Alert -->
|
||||
{#if show_alert}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggle('alert')}
|
||||
class="btn-icon btn-icon-sm transition"
|
||||
class:preset-filled-error-500={obj?.alert}
|
||||
class:preset-tonal-secondary={!obj?.alert}
|
||||
class:hover:preset-filled-error-500={!obj?.alert}
|
||||
title={obj?.alert ? 'Remove alert status' : 'Mark as alert'}
|
||||
>
|
||||
{#if obj?.alert}
|
||||
<Bell size="1.2em" class="text-error-300" />
|
||||
{:else}
|
||||
<BellOff size="1.2em" class="opacity-40" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Delete / Disable buttons — only shown when permission granted -->
|
||||
{#if allow_delete}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handle_delete('delete')}
|
||||
class="btn-icon btn-icon-sm preset-filled-error-500 hover:preset-filled-error-600 transition"
|
||||
title="Permanently delete this {obj_label}"
|
||||
>
|
||||
<Trash2 size="1.2em" />
|
||||
</button>
|
||||
{:else if allow_disable}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handle_delete('disable')}
|
||||
class="btn-icon btn-icon-sm preset-filled-warning-500 hover:preset-filled-warning-600 transition"
|
||||
title="Disable / soft-remove this {obj_label}"
|
||||
>
|
||||
<MinusCircle size="1.2em" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -113,6 +113,18 @@
|
||||
// growing its width expands it leftward into the badge area automatically.
|
||||
// transition-all on both elements makes the layout shift smooth.
|
||||
let is_editing = $derived(preview_overrides !== null);
|
||||
|
||||
// Print margin config from badge template cfg_json.
|
||||
// When set, overrides the default @page margin: 0 for per-template positioning.
|
||||
// Expected format in cfg_json: { "print_margin": { "top": "0.25in", "right": "0.25in", "bottom": "0.25in", "left": "0.25in" } }
|
||||
// All four edges are optional; omitted edges fall back to 0.
|
||||
// TODO: inject into @page rule via a dynamic <style> block once a UI exists to set this value.
|
||||
let print_margin_cfg = $derived.by(() => {
|
||||
try {
|
||||
const cfg = JSON.parse($lq__event_badge_template_obj?.cfg_json ?? '{}');
|
||||
return (cfg?.print_margin as { top?: string; right?: string; bottom?: string; left?: string } | null) ?? null;
|
||||
} catch { return null; }
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -135,26 +147,51 @@
|
||||
it in the compiled layout CSS files.
|
||||
-->
|
||||
|
||||
<!-- Print chrome reset: applied regardless of layout. Hides app nav and removes
|
||||
the events layout container's background, flex layout, overflow clip, and
|
||||
width constraints so the badge fills the page cleanly. -->
|
||||
<!-- Print chrome reset + centering: applied regardless of layout.
|
||||
Hides app nav, resets the events layout container, and centers the badge
|
||||
both horizontally and vertically on the printed page.
|
||||
|
||||
Future manual margins: read from badge template cfg_json as
|
||||
{ "print_margin": { "top": "0.25in", ... } }
|
||||
and inject into @page margin via a dynamic <style> block. -->
|
||||
<style>
|
||||
@media print {
|
||||
/* Fill the physical page height so flex vertical-centering works */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Events layout nav bar */
|
||||
.submenu { display: none !important; }
|
||||
/* Events #ae_main_content — override flex, bg, overflow, and size constraints */
|
||||
|
||||
/* Events #ae_main_content — convert to a full-page flex centering container */
|
||||
#ae_main_content {
|
||||
display: block !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
overflow: visible !important;
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
min-height: 100vh !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
/* Badge render wrapper — strip screen-only right padding; flex-center the badge */
|
||||
#badge_render_area {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -276,8 +313,9 @@
|
||||
<!-- Badge render area.
|
||||
pr-64/pr-80 prevents the badge from hiding under the fixed right controls panel.
|
||||
Widens to pr-80 while a field is being edited (panel also widens to match).
|
||||
On print: pr-0 restores full width, controls panel is hidden. -->
|
||||
<div class="print:pr-0 transition-all duration-200" class:pr-80={is_editing} class:pr-64={!is_editing}>
|
||||
On print: pr-0 restores full width; the #badge_render_area id triggers flex-centering
|
||||
from the @media print rules above. -->
|
||||
<div id="badge_render_area" class="print:pr-0 transition-all duration-200" class:pr-80={is_editing} class:pr-64={!is_editing}>
|
||||
<!-- null → Element_fit_text auto-scales; a number → manual size override from controls. -->
|
||||
<!-- preview_overrides: non-null while a field card is open in controls — gives live preview. -->
|
||||
<Comp_badge_obj_view_v2
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
interface Props {
|
||||
data: any;
|
||||
log_lvl?: number;
|
||||
// export let event_session_id: string;
|
||||
lq__event_session_obj: any;
|
||||
lq__auth__event_presenter_obj: any;
|
||||
}
|
||||
@@ -15,22 +14,16 @@
|
||||
}: Props = $props();
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
import { Modal } from 'flowbite-svelte';
|
||||
import { Settings, X, HelpCircle } from '@lucide/svelte';
|
||||
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
ae_api
|
||||
} from '$lib/stores/ae_stores';
|
||||
import {
|
||||
events_loc,
|
||||
events_sess,
|
||||
events_slct,
|
||||
events_trigger,
|
||||
events_trig_kv
|
||||
events_slct
|
||||
} from '$lib/stores/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
@@ -38,136 +31,102 @@
|
||||
import Element_data_store from '$lib/elements/element_data_store_v3.svelte';
|
||||
import Sign_in_out from '../../../sign_in_out.svelte';
|
||||
import Comp__events_menu_nav from '../../../../ae_comp__events_menu_nav.svelte';
|
||||
// import Comp__global_menu_opts from '$lib/ae_comp__global_menu_opts.svelte';
|
||||
import Comp__pres_mgmt_menu_opts from '../../../../ae_comp__events_menu_opts.svelte';
|
||||
import AE_Record_Controls from '$lib/ae_elements/AE_Record_Controls.svelte';
|
||||
|
||||
let show_modal = $state(false);
|
||||
let show_help = $state(false);
|
||||
|
||||
async function on_toggle(field: string, new_val: boolean) {
|
||||
await api.update_ae_obj_v3({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'event_session',
|
||||
obj_id: $lq__event_session_obj?.event_session_id,
|
||||
fields: { [field]: new_val }
|
||||
});
|
||||
events_func.load_ae_obj_id__event_session({
|
||||
api_cfg: $ae_api,
|
||||
event_session_id: $lq__event_session_obj?.event_session_id,
|
||||
log_lvl
|
||||
});
|
||||
}
|
||||
|
||||
async function on_delete(method: 'delete' | 'disable') {
|
||||
await events_func.delete_ae_obj_id__event_session({
|
||||
api_cfg: $ae_api,
|
||||
event_session_id: $lq__event_session_obj.event_session_id,
|
||||
method
|
||||
});
|
||||
$events_slct.event_session_id = null;
|
||||
$events_slct.event_session_obj = {};
|
||||
goto(`/events/${$lq__event_session_obj.event_id}`);
|
||||
}
|
||||
|
||||
async function toggle_hide_launcher() {
|
||||
await api.update_ae_obj_v3({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: 'event_session',
|
||||
obj_id: $lq__event_session_obj?.event_session_id,
|
||||
fields: { hide_event_launcher: !$lq__event_session_obj?.hide_event_launcher }
|
||||
});
|
||||
events_func.load_ae_obj_id__event_session({
|
||||
api_cfg: $ae_api,
|
||||
event_session_id: $lq__event_session_obj?.event_session_id,
|
||||
log_lvl
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- New standard page specific menu 2025-06-20 -->
|
||||
<div class="pres_mgmt__session_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"
|
||||
>
|
||||
<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
|
||||
|
||||
<!-- launcher_id is the event_location_id; launcher_session_id pre-loads this session in the launcher -->
|
||||
<Comp__events_menu_nav
|
||||
hide={false}
|
||||
event_id={$lq__event_session_obj?.event_id}
|
||||
events__reports={$lq__event_session_obj?.event_id &&
|
||||
$ae_loc.trusted_access}
|
||||
events__reports={$lq__event_session_obj?.event_id && $ae_loc.trusted_access}
|
||||
events__session_search={$lq__event_session_obj?.event_id}
|
||||
events__launcher_id={$lq__event_session_obj?.event_location_id &&
|
||||
$ae_loc.administrator_access
|
||||
events__launcher_id={$lq__event_session_obj?.event_location_id && $ae_loc.administrator_access
|
||||
? $lq__event_session_obj?.event_location_id
|
||||
: null}
|
||||
events__launcher_session_id={$lq__event_session_obj?.event_session_id &&
|
||||
$ae_loc.administrator_access
|
||||
events__launcher_session_id={$lq__event_session_obj?.event_session_id && $ae_loc.administrator_access
|
||||
? $lq__event_session_obj?.event_session_id
|
||||
: null}
|
||||
events__location_id={$lq__event_session_obj?.event_location_id &&
|
||||
$ae_loc.trusted_access
|
||||
events__location_id={$lq__event_session_obj?.event_location_id && $ae_loc.trusted_access
|
||||
? $lq__event_session_obj?.event_location_id
|
||||
: null}
|
||||
events__locations={$ae_loc.administrator_access}
|
||||
/>
|
||||
|
||||
<span
|
||||
class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
|
||||
>
|
||||
<!-- Button to toggle between the regular session view and managing session files -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if (
|
||||
$events_loc.pres_mgmt.show_content__session_view ==
|
||||
'manage_files'
|
||||
) {
|
||||
$events_loc.pres_mgmt.show_content__session_view = null;
|
||||
} else {
|
||||
$events_loc.pres_mgmt.show_content__session_view =
|
||||
'manage_files';
|
||||
}
|
||||
}}
|
||||
class={ae_snip.classes__events_pres_mgmt_menu__button_special}
|
||||
class:preset-filled-primary-500={$events_loc.pres_mgmt
|
||||
.show_content__session_view == 'manage_files'}
|
||||
class:preset-tonal-primary={$events_loc.pres_mgmt
|
||||
.show_content__session_view != 'manage_files'}
|
||||
class:hidden={!$ae_loc.public_access || 1 == 1}
|
||||
title="Manage files for the session"
|
||||
>
|
||||
{#if $events_loc.pres_mgmt.show_content__session_view == 'manage_files'}
|
||||
<span class="fas fa-users m-1"></span>
|
||||
<!-- View Details -->
|
||||
Session Presenters?
|
||||
{:else}
|
||||
<span class="fas fa-file-archive m-1"></span>
|
||||
Session Files?
|
||||
<span
|
||||
class="badge badge-icon preset-tonal-success absolute -top-1.5 -right-1.5 z-10"
|
||||
class:hidden={!$lq__event_session_obj?.file_count}
|
||||
>
|
||||
{$lq__event_session_obj?.file_count}×
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
|
||||
<!-- Options modal trigger -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (show_modal = true)}
|
||||
class="btn btn-sm ae_btn_info"
|
||||
title="Session options"
|
||||
>
|
||||
<Settings size="1em" class="mr-1" />
|
||||
Options
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Help toggle -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($events_loc.pres_mgmt.show_menu__session == 'options') {
|
||||
$events_loc.pres_mgmt.show_menu__session = null;
|
||||
} else {
|
||||
$events_loc.pres_mgmt.show_menu__session = 'options';
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm mx-1"
|
||||
class:ae_btn_info_filled={$events_loc.pres_mgmt
|
||||
.show_menu__session == 'options'}
|
||||
class:ae_btn_info={$events_loc.pres_mgmt.show_menu__session !=
|
||||
'options'}
|
||||
class:hidden={!$ae_loc.trusted_access}
|
||||
title="Options for the session"
|
||||
>
|
||||
<span class="fas fa-cog m-1"></span>
|
||||
{#if $events_loc.pres_mgmt.show_menu__session == 'options'}
|
||||
Hide
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
Options?
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if ($events_loc.pres_mgmt.show_menu__session == 'help') {
|
||||
$events_loc.pres_mgmt.show_menu__session = null;
|
||||
} else {
|
||||
$events_loc.pres_mgmt.show_menu__session = 'help';
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm mx-1"
|
||||
class:ae_btn_info_filled={$events_loc.pres_mgmt
|
||||
.show_menu__session == 'help'}
|
||||
class:ae_btn_info={$events_loc.pres_mgmt.show_menu__session !=
|
||||
'help'}
|
||||
onclick={() => (show_help = !show_help)}
|
||||
class="btn btn-sm"
|
||||
class:ae_btn_info_filled={show_help}
|
||||
class:ae_btn_info={!show_help}
|
||||
title="Help and information about the session"
|
||||
>
|
||||
<span class="fas fa-question-circle m-1"></span>
|
||||
{#if $events_loc.pres_mgmt.show_menu__session == 'help'}
|
||||
Hide Help?
|
||||
{:else}
|
||||
Help?
|
||||
{/if}
|
||||
<HelpCircle size="1em" class="mr-1" />
|
||||
{show_help ? 'Hide Help' : 'Help'}
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="ae_menu__action_options"
|
||||
class:hidden={!$events_loc.auth__person?.id}
|
||||
>
|
||||
<span class="ae_menu__action_options" class:hidden={!$events_loc.auth__person?.id}>
|
||||
{#if $lq__event_session_obj?.event_id}
|
||||
<!-- The Sign_in_out component is usually just a button for Sign Out if they are signed in as a POC or presenter. -->
|
||||
<Sign_in_out
|
||||
{data}
|
||||
event_session_id={$lq__event_session_obj?.event_id}
|
||||
@@ -177,230 +136,78 @@
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- END: The menu button options -->
|
||||
|
||||
<!-- BEGIN: The expanded menu area for information and options -->
|
||||
<div
|
||||
class:ae_container_module_options={$events_loc.pres_mgmt
|
||||
.show_menu__session == 'options'}
|
||||
class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'}
|
||||
<!-- Options Modal -->
|
||||
<Modal
|
||||
bind:open={show_modal}
|
||||
autoclose={false}
|
||||
dismissable={true}
|
||||
placement="top-center"
|
||||
size="md"
|
||||
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-xl"
|
||||
headerClass="flex flex-row gap-2 items-center justify-between w-full bg-surface-100 dark:bg-surface-800 p-4 rounded-t-lg border-b border-surface-200 dark:border-surface-700"
|
||||
>
|
||||
<div class="ae_comp__session_menu_opts w-full">
|
||||
<h2 class="text-sm font-semibold text-center pb-1">
|
||||
Æ Session Menu Options
|
||||
</h2>
|
||||
{#snippet header()}
|
||||
<h3 class="flex-1 flex items-center gap-2 text-base font-bold">
|
||||
<Settings size="1.1em" class="text-primary-500" />
|
||||
Session Options
|
||||
</h3>
|
||||
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show_modal = false)}>
|
||||
<X size="1.1em" />
|
||||
</button>
|
||||
{/snippet}
|
||||
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row gap-1 items-center justify-evenly relative"
|
||||
>
|
||||
<!-- Toggle alert status -->
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
<!-- Launcher Settings -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<section>
|
||||
<h4 class="text-xs font-semibold uppercase tracking-wider text-surface-500 mb-2">Launcher</h4>
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_session', obj_id: $lq__event_session_obj?.event_session_id, fields: { alert: !$lq__event_session_obj?.alert } });
|
||||
events_func.load_ae_obj_id__event_session({ api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id, log_lvl });
|
||||
}}
|
||||
class:opacity-100={$lq__event_session_obj?.alert}
|
||||
class:opacity-50={!$lq__event_session_obj?.alert}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-warning hover:preset-tonal-error
|
||||
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
|
||||
hover:opacity-100
|
||||
transition-all
|
||||
"
|
||||
title={$lq__event_session_obj?.alert
|
||||
? 'Remove alert status'
|
||||
: 'Mark as alert'}
|
||||
>
|
||||
{#if $lq__event_session_obj?.alert}
|
||||
<!-- class="fas fa-exclamation-triangle" -->
|
||||
<span
|
||||
class="fas fa-bell-slash m-0.75 text-warning-600"
|
||||
title="This session is marked as an alert."
|
||||
></span>
|
||||
{:else}
|
||||
<span
|
||||
class="fas fa-bell m-0.75 text-gray-400"
|
||||
title="This session is not marked as an alert."
|
||||
></span>
|
||||
{/if}
|
||||
<span class="hidden">Toggle Alert</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_session', obj_id: $lq__event_session_obj?.event_session_id, fields: { hide_event_launcher: !$lq__event_session_obj?.hide_event_launcher } });
|
||||
events_func.load_ae_obj_id__event_session({ api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id, log_lvl });
|
||||
}}
|
||||
class="btn btn-sm m-1 group"
|
||||
onclick={toggle_hide_launcher}
|
||||
class="btn btn-sm w-full justify-between"
|
||||
class:ae_btn_surface_outlined={!$lq__event_session_obj?.hide_event_launcher}
|
||||
class:ae_btn_success={$lq__event_session_obj?.hide_event_launcher}
|
||||
disabled={!$ae_loc.trusted_access}
|
||||
title={$lq__event_session_obj?.hide_event_launcher
|
||||
? 'Not showing in the Launcher. Unhide from the Launcher?'
|
||||
: 'Currently showing in the Launcher. Hide from the Launcher?'}
|
||||
? 'Not showing in Launcher — click to unhide'
|
||||
: 'Showing in Launcher — click to hide'}
|
||||
>
|
||||
{#if $lq__event_session_obj?.hide_event_launcher}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Unhide from Launcher
|
||||
{:else}
|
||||
<span class="fas fa-paper-plane m-1"></span>
|
||||
<span class="hidden group-hover:inline">
|
||||
Hide from Launcher
|
||||
</span>
|
||||
{/if}
|
||||
<span>
|
||||
{#if $lq__event_session_obj?.hide_event_launcher}
|
||||
<span class="fas fa-toggle-on mr-1"></span>
|
||||
Unhide from Launcher
|
||||
{:else}
|
||||
<span class="fas fa-paper-plane mr-1"></span>
|
||||
Hide from Launcher?
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-evenly"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_session', obj_id: $lq__event_session_obj?.event_session_id, fields: { priority: !$lq__event_session_obj?.priority } });
|
||||
events_func.load_ae_obj_id__event_session({ api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id, log_lvl });
|
||||
}}
|
||||
class="btn btn-sm *:hover:inline"
|
||||
class:ae_btn_surface_outlined={!$lq__event_session_obj?.priority}
|
||||
class:ae_btn_success={$lq__event_session_obj?.priority}
|
||||
>
|
||||
{#if $lq__event_session_obj?.priority}
|
||||
<span class="fas fa-star m-1"></span>
|
||||
<span class="hidden"> Not Priority? </span>
|
||||
{:else}
|
||||
<span class="far fa-star m-1"></span>
|
||||
<span class="hidden"> Priority </span>
|
||||
?
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_session', obj_id: $lq__event_session_obj?.event_session_id, fields: { hide: !$lq__event_session_obj?.hide } });
|
||||
events_func.load_ae_obj_id__event_session({ api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id, log_lvl });
|
||||
}}
|
||||
class="btn btn-sm *:hover:inline"
|
||||
class:ae_btn_success_outlined={!$lq__event_session_obj?.hide}
|
||||
class:ae_btn_warning={$lq__event_session_obj?.hide}
|
||||
disabled={!$ae_loc.trusted_access}
|
||||
>
|
||||
{#if $lq__event_session_obj?.hide}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Unhide?
|
||||
{:else}
|
||||
<span class="fas fa-eye m-1"></span>
|
||||
<span class="hidden"> Not Hidden </span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Enable/Disable -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={async () => {
|
||||
await api.update_ae_obj_v3({ api_cfg: $ae_api, obj_type: 'event_session', obj_id: $lq__event_session_obj?.event_session_id, fields: { enable: !$lq__event_session_obj?.enable } });
|
||||
events_func.load_ae_obj_id__event_session({ api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id, log_lvl });
|
||||
}}
|
||||
class="btn btn-sm"
|
||||
class:ae_btn_success_outlined={$lq__event_session_obj?.enable}
|
||||
class:ae_btn_error={!$lq__event_session_obj?.enable}
|
||||
disabled={!$ae_loc.manager_access}
|
||||
>
|
||||
{#if $lq__event_session_obj?.enable}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Enabled
|
||||
{:else}
|
||||
<span class="fas fa-toggle-off m-1"></span>
|
||||
Enable?
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Sort -->
|
||||
|
||||
<!-- Group -->
|
||||
|
||||
{#if $ae_loc.manager_access}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
'Are you sure you want to delete this session?'
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
events_func
|
||||
.delete_ae_obj_id__event_session({
|
||||
api_cfg: $ae_api,
|
||||
event_session_id:
|
||||
$lq__event_session_obj.event_session_id,
|
||||
method: 'delete'
|
||||
})
|
||||
.then(function (delete_results) {
|
||||
$events_slct.event_session_id = null;
|
||||
$events_slct.event_session_obj = {};
|
||||
|
||||
goto(
|
||||
`/events/${$lq__event_session_obj.event_id}/session/${$lq__event_session_obj.event_session_id}`
|
||||
);
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm mx-1 ae_btn_error"
|
||||
title="Delete record permanently"
|
||||
>
|
||||
<span class="fas fa-minus-circle mx-1"></span>
|
||||
Delete
|
||||
</button>
|
||||
{:else if $ae_loc.administrator_access}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
'Are you sure you want to remove (disable) this session? This is not common.'
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
events_func
|
||||
.delete_ae_obj_id__event_session({
|
||||
api_cfg: $ae_api,
|
||||
event_session_id:
|
||||
$lq__event_session_obj.event_session_id,
|
||||
method: 'disable'
|
||||
})
|
||||
.then(function (delete_results) {
|
||||
$events_slct.event_session_id = null;
|
||||
$events_slct.event_session_obj = {};
|
||||
|
||||
goto(
|
||||
`/events/${$lq__event_session_obj.event_id}`
|
||||
);
|
||||
});
|
||||
}}
|
||||
class="btn btn-sm mx-1 ae_btn_warning"
|
||||
title="Disable record"
|
||||
>
|
||||
<span class="fas fa-minus mx-1"></span>
|
||||
Delete
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Record Controls -->
|
||||
{#if $ae_loc.trusted_access}
|
||||
<section>
|
||||
<h4 class="text-xs font-semibold uppercase tracking-wider text-surface-500 mb-2">Record</h4>
|
||||
<AE_Record_Controls
|
||||
obj={$lq__event_session_obj}
|
||||
obj_label="session"
|
||||
show_alert={true}
|
||||
show_priority={true}
|
||||
show_enable={true}
|
||||
show_hide={true}
|
||||
allow_delete={$ae_loc.manager_access}
|
||||
allow_disable={$ae_loc.administrator_access && !$ae_loc.manager_access}
|
||||
{on_toggle}
|
||||
{on_delete}
|
||||
container_class="flex flex-row flex-wrap gap-2 items-center justify-start"
|
||||
/>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Comp__pres_mgmt_menu_opts hide={!$ae_loc.authenticated_access} />
|
||||
</div>
|
||||
<!-- END: The expanded menu area for information and options -->
|
||||
|
||||
<!-- Help panel -->
|
||||
<Element_data_store
|
||||
ds_code="events__pres_mgmt__session_help"
|
||||
ds_name="Default: Events - Pres Mgmt Session Help"
|
||||
@@ -410,29 +217,6 @@
|
||||
class_li="ae_container_module_help"
|
||||
show_edit={false}
|
||||
show_edit_btn={true}
|
||||
hide={$events_loc.pres_mgmt.show_menu__session != 'help'}
|
||||
hide={!show_help}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_loc.pres_mgmt.show_menu__session =
|
||||
!$events_loc.pres_mgmt.show_menu__session;
|
||||
}}
|
||||
class="btn btn-sm mx-1 ae_btn_info_filled"
|
||||
class:hidden={!$events_loc.pres_mgmt.show_menu__session}
|
||||
title="Collapse the expanded menu"
|
||||
>
|
||||
<span class="fas fa-chevron-up m-1"></span>
|
||||
{#if $events_loc.pres_mgmt.show_menu__session}
|
||||
Hide
|
||||
<!-- Collapse -->
|
||||
{:else}
|
||||
Show
|
||||
{/if}
|
||||
<!-- Menu? -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of the new standard page specific menu -->
|
||||
|
||||
Reference in New Issue
Block a user