Making things look nicer. Also more respect for show/hide toggles.

src/lib/ae_events/ae_events__event.ts

@@ -985,6 +985,8 @@ export function sync_config__event_pres_mgmt(
         pres_mgmt_cfg_local.hide__location_code = pres_mgmt_cfg_remote?.hide__location_code ?? false;
 
         pres_mgmt_cfg_local.hide__presentation_code = pres_mgmt_cfg_remote?.hide__presentation_code ?? false;
+        pres_mgmt_cfg_local.hide__presentation_datetime = pres_mgmt_cfg_remote?.hide__presentation_datetime ?? false;
+        pres_mgmt_cfg_local.show_content__presentation_description = pres_mgmt_cfg_remote?.show_content__presentation_description ?? false;
 
         pres_mgmt_cfg_local.hide__presenter_code = pres_mgmt_cfg_remote?.hide__presenter_code ?? false;
         pres_mgmt_cfg_local.hide__presenter_biography = pres_mgmt_cfg_remote?.hide__presenter_biography ?? false;

src/routes/events/ae_comp__event_presentation_obj_li.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 // Imports
 // import type { key_val } from '$lib/ae_stores';
-// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_util } from '$lib/ae_utils/ae_utils';
 // import Element_ae_crud from '$lib/element_ae_crud.svelte';
 // import { liveQuery } from "dexie";
 // import { core_func } from '$lib/ae_core_functions';
@@ -14,15 +14,26 @@ import Element_ae_crud from '$lib/element_ae_crud.svelte';
 import Comp_event_presenter_obj_li from '../events/[event_id]/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
 import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_all.svelte';
 
-// Exports
-export let container_class_li: string|Array<string> = [];
-export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
-// export let link_to_type: string;
-// export let link_to_id: string;
-export let lq__event_presentation_obj_li: any;
-export let log_lvl: number = 0;
 
-// Variables
+// export let link_to_type: string;
+
+interface Props {
+    // Exports
+    container_class_li?: string|Array<string>;
+    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+    // export let link_to_id: string;
+    lq__event_presentation_obj_li: any;
+    log_lvl?: number; // Variables
+}
+
+let {
+    container_class_li = [],
+    display_mode = 'default',
+    lq__event_presentation_obj_li,
+    log_lvl = 0
+}: Props = $props();
+
+
 // let ae_promises: key_val = {};
 // let ae_tmp: key_val = {};
 // let ae_triggers: key_val = {};
@@ -34,7 +45,7 @@ export let log_lvl: number = 0;
 <section
     class="
     ae_comp event_presentation_obj_li
-    border border-2 border-dashed border-x-red-500 border-y-white
+    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
@@ -49,7 +60,7 @@ export let log_lvl: number = 0;
     {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             console.log('Add Presentation');
             if (!confirm('Add a new presentation to the session? You will be able to edit the details after the presentation is created.')) {
                 return;
@@ -116,7 +127,7 @@ export let log_lvl: number = 0;
         {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 console.log('Add Presenter');
                 if (!confirm('Add a new presenter to the presentation? You will be able to edit their details after the presenter record is created.')) {
                     return;
@@ -214,7 +225,7 @@ export let log_lvl: number = 0;
                     });
                 }}
                 >
-            {#if event_presentation_obj?.code || event_presentation_obj?.abstract_code}
+            {#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !$events_loc.pres_mgmt.hide__presentation_code}
             <span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
                 title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}"
                 >
@@ -222,18 +233,101 @@ export let log_lvl: number = 0;
                 {event_presentation_obj?.code ?? ''} {event_presentation_obj?.abstract_code ?? ''}
             </span>
             {:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
-                <strong class="text-sm font-normal">Code:</strong>
+                <strong class="text-sm font-normal"><span class="fas fa-barcode"></span> Code:</strong>
                 <span class="font-normal"
                     title="No code provided for this presentation"
                     >
-                    {@html ae_snip.html__not_set}
+                    {@html event_presentation_obj?.code ?? ae_snip.html__not_set}
                 </span>
             {/if}
             </Element_ae_crud>
+            <!-- Can not edit the abstract code here at this time. -->
         </h4>
 
         <div
-            class:hidden={!$events_loc.pres_mgmt.show_content__presentation_description && !($ae_loc.administrator_access && $ae_loc.edit_mode)}
+            class:hidden={$events_loc.pres_mgmt.hide__presentation_datetime && !($ae_loc.trusted_access && $ae_loc.edit_mode)}
+            >
+            <strong class="text-sm">
+            Date
+            &
+            <button
+                type="button"
+                onclick={() => {
+                    if ($events_loc.pres_mgmt.time_hours == 12) {
+                        $events_loc.pres_mgmt.time_hours = 24;
+                        $events_loc.pres_mgmt.datetime_format = 'datetime_long';
+                        $events_loc.pres_mgmt.time_format = 'time_short';
+                    } else {
+                        $events_loc.pres_mgmt.time_hours = 12;
+                        $events_loc.pres_mgmt.datetime_format = 'datetime_12_long';
+                        $events_loc.pres_mgmt.time_format = 'time_12_short';
+                    }
+                }}
+                >
+                time
+            </button>
+            :</strong>
+            <span class="fas fa-calendar-alt"></span>
+            <Element_ae_crud
+                api_cfg={$ae_api}
+                object_type={'event_presentation'}
+                object_id={event_presentation_obj?.event_presentation_id}
+                field_name={'start_datetime'}
+                field_type={'datetime'}
+                field_value={event_presentation_obj.start_datetime}
+                allow_null={false}
+                hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
+                outline_element={false}
+                show_crud={false}
+                display_inline={true}
+                class_li={''}
+                on:ae_crud_updated={e => {
+                    console.log(`ae_crud_updated:`, e.detail);
+
+                    events_func.load_ae_obj_id__event_presentation({
+                        api_cfg: $ae_api,
+                        event_presentation_id: event_presentation_obj?.event_presentation_id
+                        });
+                    // $events_trigger = 'load__event_presentation_obj_id';
+                    // $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
+                }}
+                >
+                {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, 'dddd')}
+                <!-- , -->
+                <!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
+                 {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.time_format)}
+            </Element_ae_crud>
+            -
+            <Element_ae_crud
+                api_cfg={$ae_api}
+                object_type={'event_presentation'}
+                object_id={event_presentation_obj?.event_presentation_id}
+                field_name={'end_datetime'}
+                field_type={'datetime'}
+                field_value={event_presentation_obj.end_datetime}
+                allow_null={false}
+                hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
+                outline_element={false}
+                show_crud={false}
+                display_inline={true}
+                class_li={''}
+                on:ae_crud_updated={e => {
+                    console.log(`ae_crud_updated:`, e.detail);
+
+                    events_func.load_ae_obj_id__event_presentation({
+                        api_cfg: $ae_api,
+                        event_presentation_id: event_presentation_obj?.event_presentation_id
+                        });
+                    // $events_trigger = 'load__event_presentation_obj_id';
+                    // $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
+                }}
+                >
+                {ae_util.iso_datetime_formatter(event_presentation_obj.end_datetime, $events_loc.pres_mgmt.time_format)}
+            </Element_ae_crud>
+        </div>
+
+        <div
+            class:hidden={!$events_loc.pres_mgmt.show_content__presentation_description && !($ae_loc.trusted_access && $ae_loc.edit_mode)}
             >
         <Element_ae_crud
             api_cfg={$ae_api}
@@ -263,7 +357,7 @@ export let log_lvl: number = 0;
             {#if event_presentation_obj?.description}
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     console.log('Show/Hide Description');
                     if ($events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id_random) {
                         $events_sess.pres_mgmt.show_content__presentation_description = null;