From 115751bcd7d4198c983192e5db7bb370b5184a34 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 14 Oct 2024 14:25:29 -0400
Subject: [PATCH] Code updates for IDAA migration

---
 .../ae_idaa_comp__event_obj_id_edit.svelte    | 168 ++++++++++--------
 1 file changed, 89 insertions(+), 79 deletions(-)

diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
index e545c8e9..41c521fb 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { fade } from 'svelte/transition';
+import Editor from '@tinymce/tinymce-svelte';
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api';
@@ -25,7 +26,7 @@ let disable_submit_btn = true;
 let event_location_select_option_li = {}; // This is a list (dict) of key value pairs
 
 if ($idaa_slct.event_id) {
-    // console.log(`Event ID selected: ${$slct.event_id}`);
+    // console.log(`Event ID selected: ${$idaa_slct.event_id}`);
     // console.log(`Event Object selected: ${$lq__event_obj}`)
 
     $slct_trigger = 'load__event_obj';
@@ -453,7 +454,7 @@ async function handle_submit_form(event){
 
     console.log(event_data);
 
-    if (!$slct.event_id) {
+    if (!$idaa_slct.event_id) {
         create_event_obj_promise = api.create_ae_obj_crud({
             api_cfg: $ae_api,
             obj_type: 'event',
@@ -468,12 +469,12 @@ async function handle_submit_form(event){
             }
             console.log(event_obj_create_result);
 
-            $slct.event_id = event_obj_create_result.obj_id_random;
+            $idaa_slct.event_id = event_obj_create_result.obj_id_random;
 
             dispatch(
                 'created__meeting_obj',
                 {
-                    event_id: $slct.event_id,
+                    event_id: $idaa_slct.event_id,
                 }
             );
 
@@ -491,7 +492,7 @@ async function handle_submit_form(event){
         update_event_obj_promise = api.update_ae_obj_id_crud({
             api_cfg: $ae_api,
             obj_type: 'event',
-            obj_id: $slct.event_id,
+            obj_id: $idaa_slct.event_id,
             fields: event_data,
             key: $ae_api.api_crud_super_key,
             log_lvl: 1
@@ -507,7 +508,7 @@ async function handle_submit_form(event){
             dispatch(
                 'updated__meeting_obj',
                 {
-                    event_id: $slct.event_id,
+                    event_id: $idaa_slct.event_id,
                 }
             );
 
@@ -524,28 +525,28 @@ async function handle_submit_form(event){
 
 
 
-    // if (!$slct.event_id) {
-    //     event_meeting_data['event_id_random'] = $slct.event_id;
+    // if (!$idaa_slct.event_id) {
+    //     event_meeting_data['event_id_random'] = $idaa_slct.event_id;
     //     event_meeting_data['enable'] = true;
 
-    //     create_event_obj_promise = await create_event_obj({event_id: $slct.event_id, data: event_meeting_data})
+    //     create_event_obj_promise = await create_event_obj({event_id: $idaa_slct.event_id, data: event_meeting_data})
     //     console.log(create_event_obj_promise);
-    //     $slct.event_id = create_event_obj_promise;
+    //     $idaa_slct.event_id = create_event_obj_promise;
 
     //     dispatch(
     //         'created__event_obj',
     //         {
-    //             event_id: $slct.event_id,
+    //             event_id: $idaa_slct.event_id,
     //         }
     //     );
     // } else {
-    //     update_event_obj_promise = await update_event_obj({event_id: $slct.event_id, data: event_meeting_data, log_lvl: 0})
+    //     update_event_obj_promise = await update_event_obj({event_id: $idaa_slct.event_id, data: event_meeting_data, log_lvl: 0})
     //     console.log(update_event_obj_promise);
 
     //     dispatch(
     //         'updated__event_obj',
     //         {
-    //             event_id: $slct.event_id,
+    //             event_id: $idaa_slct.event_id,
     //         }
     //     );
     // }
@@ -593,7 +594,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
 <section
     class="svelte_component ae_section ae_edit event_obj edit__event_obj"
-    class:ae_create={!$slct.event_id}
+    class:ae_create={!$idaa_slct.event_id}
     bind:clientHeight={$ae_loc.iframe_height_modal_body}
     >
 
@@ -611,43 +612,52 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
     <!-- <h3>Recovery Meeting</h3> -->
 
-    <input type="hidden" value={$slct.event_id} />
+    <input type="hidden" value={$idaa_slct.event_id} />
 
     <section class="ae_section event__general_information"> <!-- BEGIN: section event__general_information -->
 
         <label for="name">Name of Recovery Meeting
-        <input type="text" id="name" name="name" required max="200" value={$lq__event_obj?.name} placeholder="Name of Recovery Meeting" autocomplete="off" class="input" />
+        <input type="text" id="name" name="name" required max="200" value={$lq__event_obj?.name} placeholder="Name of Recovery Meeting" autocomplete="off" class="input w-96" />
         </label>
 
         <label class="ae_label event__description">Short description
-        <!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} placeholder="A short description or overview of this recovery meeting"></textarea> -->
+            <!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} placeholder="A short description or overview of this recovery meeting"></textarea> -->
+
         </label>
 
-        <label>Type of Recovery Meeting
-            <!-- <input name="type" value={$lq__event_obj.type} /> -->
-            <select name="type" class="select">
-                <option value="IDAA" selected={($lq__event_obj?.type == 'IDAA' ? 'selected' : '')}>IDAA</option>
-                <option value="Caduceus" selected={($lq__event_obj?.type == 'Caduceus' ? 'selected' : '')}>Caduceus</option>
-                <option value="Family Recovery" selected={($lq__event_obj?.type == 'Family Recovery' ? 'selected' : '')}>Family Recovery</option>
-            </select>
+        <Editor
+            id="description"
+            bind:value={$idaa_slct.event_obj.description}
+            licenseKey="gpl"
+            license_key="gpl"
+            ></Editor>
 
+        <div>
+            <label class="">
+                Type of Recovery Meeting
+                <select name="type" class="select w-40" value={$lq__event_obj?.type}>
+                    <option value="IDAA">IDAA</option>
+                    <option value="Caduceus">Caduceus</option>
+                    <option value="Family Recovery">Family Recovery</option>
+                </select>
+            </label>
             <ul>
                 <li><strong>IDAA</strong> - Open to IDAA members only</li>
                 <li><strong>Caduceus</strong> - Open to all healthcare workers including those who do not qualify for IDAA</li>
                 <li><strong>Family Recovery</strong> -  Open to spouses, parents, and adult children of medical professionals who have substance use disorder.
                 </li>
             </ul>
-        </label>
+        </div>
 
     </section> <!-- BEGIN: section event__general_information -->
 
     <hr>
 
     <section class="ae_section event__how_to_attend"> <!-- BEGIN: section event__how_to_attend -->
-        <h3>How to Attended</h3>
+        <h3 class="h2">How to Attended</h3>
 
         <fieldset class="event__physical_virtual">
-            <legend>Face-to-Face or Virtual</legend>
+            <legend class="legend">Face-to-Face or Virtual</legend>
             <p>Is this a face-to-face/in person meeting, a virtual/online meeting, or both?</p>
             <div class="ae_group">
                 <label for="physical" class="">Face-to-Face/In person
@@ -673,27 +683,27 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
         <fieldset
             id="physical_address"
-            class="physical_address"
-            class:ae_d_none={!$lq__event_obj?.physical}>
+            class="physical_address fieldset"
+            class:hidden={!$idaa_slct.event_obj?.physical}>
 
             <legend>Address</legend>
 
             <input id="" name="address_location_id_random" type="hidden" value="{$lq__event_obj?.address_location_id_random}">
 
             <label for="address_name">Location name
-                <input type="text" class="input" id="address_name" name="address_name" placeholder="The name of the place or location" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.name ? $lq__event_obj?.location_address_json.name : $lq__event_obj?.address_name)}" autocomplete="off">
+                <input type="text" class="input w-72" id="address_name" name="address_name" placeholder="The name of the place or location" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json?.name ? $lq__event_obj?.location_address_json?.name : $lq__event_obj?.address_name ?? '')}" autocomplete="off">
             </label>
 
             <label for="address_line_1">Line 1
-                <input type="text" class="input" id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_1 ? $lq__event_obj?.location_address_json.line_1 : $lq__event_obj?.address_line_1)}" autocomplete="address-line1">
+                <input type="text" class="input w-72" id="address_line_1" name="address_line_1" placeholder="Address line 1" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_1 ? $lq__event_obj?.location_address_json.line_1 : $lq__event_obj?.address_line_1 ?? '')}" autocomplete="address-line1">
             </label>
 
             <label for="address_line_2">Line 2
-                <input type="text" class="input" id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_2 ? $lq__event_obj?.location_address_json.line_2 : $lq__event_obj?.address_line_2)}" autocomplete="address-line2">
+                <input type="text" class="input w-72" id="address_line_2" name="address_line_2" placeholder="Address line 2" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_2 ? $lq__event_obj?.location_address_json.line_2 : $lq__event_obj?.address_line_2 ?? '')}" autocomplete="address-line2">
             </label>
 
             <label for="address_line_3">Line 3
-                <input type="text" class="input" id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_3 ? $lq__event_obj?.location_address_json.line_3 : $lq__event_obj?.address_line_3)}" autocomplete="address-line3">
+                <input type="text" class="input w-72" id="address_line_3" name="address_line_3" placeholder="Address line 3" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.line_3 ? $lq__event_obj?.location_address_json.line_3 : $lq__event_obj?.address_line_3 ?? '')}" autocomplete="address-line3">
             </label>
 
         </fieldset>
@@ -703,12 +713,12 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
             class="physical_city_state_province_postal_code_country">
 
             <label for="address_city">City
-                <input type="text" class="input" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city)}" autocomplete="address-level2">
+                <input type="text" class="input w-40" id="address_city" name="address_city" placeholder="Name of the city" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.city ? $lq__event_obj?.location_address_json.city : $lq__event_obj?.address_city ?? '')}" autocomplete="address-level2">
             </label>
 
             {#if $ae_loc.lu_country_subdivision_list}
             <label for="address_country_subdivision_code" class="">State or province
-                <select class="select" id="address_country_subdivision_code" name="address_country_subdivision_code" title="Select the state or province for the meeting">
+                <select class="select w-56" id="address_country_subdivision_code" name="address_country_subdivision_code" title="Select the state or province for the meeting">
                     <option value="">-- None --</option>
                     {#each $ae_loc.lu_country_subdivision_list as lu_country_subdivision}
                         <option value="{lu_country_subdivision.code}" selected={(($lq__event_obj?.location_address_json && lu_country_subdivision.code == $lq__event_obj?.location_address_json.country_subdivision_code) || ( lu_country_subdivision.code == $lq__event_obj?.address_country_subdivision_code) ? 'selected' : '')}>{lu_country_subdivision.country_alpha_2_code} - {lu_country_subdivision.name}</option>
@@ -717,17 +727,17 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
             </label>
             {:else}
             <label for="address_country_subdivision_code">State or province code
-                <input type="text" class="input" id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code)}" autocomplete="address-level1">
+                <input type="text" class="input w-40" id="address_country_subdivision_code" name="address_country_subdivision_code" placeholder="State or province code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_subdivision_code ? $lq__event_obj?.location_address_json.country_subdivision_code : $lq__event_obj?.address_country_subdivision_code)}" autocomplete="address-level1">
             </label>
             {/if}
 
             <label for="address_postal_code">Postal code or zip code
-                <input type="text" class="input" id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.postal_code ? $lq__event_obj?.location_address_json.postal_code : $lq__event_obj?.address_postal_code)}" autocomplete="postal-code">
+                <input type="text" class="input w-32" id="address_postal_code" name="address_postal_code" placeholder="Postal code or zip code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.postal_code ? $lq__event_obj?.location_address_json.postal_code : $lq__event_obj?.address_postal_code ?? '')}" autocomplete="postal-code">
             </label>
 
             {#if $ae_loc.lu_country_list}
             <label for="address_country_alpha_2_code" class="">Country
-                <select class="select" id="address_country_alpha_2_code" name="address_country_alpha_2_code" title="Select the country for the meeting">
+                <select class="select w-56" id="address_country_alpha_2_code" name="address_country_alpha_2_code" title="Select the country for the meeting">
                     <option value="">-- None --</option>
                     {#each $ae_loc.lu_country_list as lu_country}
                         <option value="{lu_country.alpha_2_code}" selected={(($lq__event_obj?.location_address_json && lu_country.alpha_2_code == $lq__event_obj?.location_address_json.country_alpha_2_code) || (lu_country.alpha_2_code == $lq__event_obj?.address_country_alpha_2_code) ? 'selected' : '')}>{lu_country.english_short_name}</option>
@@ -753,23 +763,23 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
             <legend>Virtual/Online</legend>
 
             <label for="attend_url">URL to access the virtual meeting
-                <input type="url" class="input" id="attend_url" name="attend_url" placeholder="URL to access the virtual meeting" value={$lq__event_obj?.attend_url} autocomplete="url">
+                <input type="url" class="input w-72" id="attend_url" name="attend_url" placeholder="URL to access the virtual meeting" value={$lq__event_obj?.attend_url ?? ''} autocomplete="url">
             </label>
             <label for="attend_url_passcode">Passcode to join at URL
-                <input type="text" class="input" id="attend_url_passcode" name="attend_url_passcode" placeholder="Passcode to join at URL" value={$lq__event_obj?.attend_url_passcode} autocomplete="off">
+                <input type="text" class="input w-72" id="attend_url_passcode" name="attend_url_passcode" placeholder="Passcode to join at URL" value={$lq__event_obj?.attend_url_passcode ?? ''} autocomplete="off">
             </label>
 
             <label for="attend_phone">Phone number for meeting conference call
-                <input type="tel" class="input" id="attend_phone" name="attend_phone" placeholder="Phone number for meeting conference call" value={$lq__event_obj?.attend_phone} autocomplete="tel">
+                <input type="tel" class="input w-72" id="attend_phone" name="attend_phone" placeholder="Phone number for meeting conference call" value={$lq__event_obj?.attend_phone ?? ''} autocomplete="tel">
             </label>
             <label for="attend_phone_passcode">Passcode to join conference call
-                <input type="text" class="input" id="attend_phone_passcode" name="attend_phone_passcode" placeholder="Passcode to join conference call" value={$lq__event_obj?.attend_phone_passcode} autocomplete="off">
+                <input type="text" class="input w-72" id="attend_phone_passcode" name="attend_phone_passcode" placeholder="Passcode to join conference call" value={$lq__event_obj?.attend_phone_passcode ?? ''} autocomplete="off">
             </label>
 
         </fieldset>
 
         <label for="attend_text" class="">Additional information on how to attend
-            <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text}></textarea>
+            <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea>
         </label>
 
     </section> <!-- END: section event__how_to_attend -->
@@ -777,10 +787,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
     <hr>
 
     <section class="ae_section event__timing"> <!-- BEGIN: section event__timing -->
-        <h3>Recurring and When</h3>
+        <h3 class="h2">Recurring and When</h3>
 
         <fieldset class="event__recurring">
-            <legend class="">Recurring</legend>
+            <legend class="legend">Recurring</legend>
             <div class="ae_group">
             <label for="recurring_no" class="">No, only once
                 <input
@@ -810,11 +820,11 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
         <fieldset
             id="recurring_details"
             class="recurring_details"
-            class:ae_d_none={!$lq__event_obj?.recurring}
+            class:hidden={!$idaa_slct.event_obj.recurring}
             >
 
-            <legend class="">Recurring</legend>
-            <label for="recurring_pattern">Repeats
+            <!-- <legend class="legend">Recurring</legend> -->
+            <label for="recurring_pattern">Recurring Repeats
                 <select class="select" name="recurring_pattern" id="recurring_pattern">
                     <option value="weekly" selected={($lq__event_obj?.recurring_pattern == 'weekly' ? 'selected' : '')}>Weekly</option>
                     <option value="every other week" selected={($lq__event_obj?.recurring_pattern == 'every other week' ? 'selected' :  '')}>Every Other Week</option>
@@ -838,18 +848,18 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
         <fieldset class="flex_row flex_gap_md flex_justify_around">
             <label>Timezone
                 {#if $ae_loc?.lu_time_zone_list && $ae_loc?.lu_time_zone_list.length > 0}
-                    <select name="timezone" required>
+                    <select name="timezone" required class="select w-40">
                         {#each $ae_loc?.lu_time_zone_list as lu_timezone}
                             <option value="{lu_timezone.name}" selected={((($lq__event_obj?.timezone && lu_timezone.name == $lq__event_obj?.timezone) || lu_timezone.name == $ae_loc?.current_timezone) ? 'selected' : '')}>{lu_timezone.name}</option>
                         {/each}
                     </select>
                 {:else}
-                    <input type="text" name="timezone" value={($lq__event_obj?.timezone ? $lq__event_obj?.timezone : $ae_loc?.current_timezone)} class="input" />
+                    <input type="text" name="timezone" value={($lq__event_obj?.timezone ? $lq__event_obj?.timezone : $ae_loc?.current_timezone)} class="input w-40" />
                 {/if}
                 <!-- client TZ: {$ae_loc?.current_timezone} -->
             </label>
-            <label>Start Time <input name="recurring_start_time" type="time" value={$lq__event_obj?.recurring_start_time} max="8" class="input" /></label>
-            <label>End Time <input name="recurring_end_time" type="time" value={$lq__event_obj?.recurring_end_time} max="8" class="input" /></label>
+            <label>Start Time <input name="recurring_start_time" type="time" value={$lq__event_obj?.recurring_start_time} max="8" class="input w-40" /></label>
+            <label>End Time <input name="recurring_end_time" type="time" value={$lq__event_obj?.recurring_end_time} max="8" class="input w-40" /></label>
         </fieldset>
 
         {#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
@@ -902,7 +912,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
     <hr>
 
     <section class="ae_section event__contacts">
-        <h3>Contacts</h3>
+        <h3 class="h2">Contacts</h3>
 
         <!-- {#if $ae_loc.trusted_access} -->
         <label for="external_person_id"><span class="fas fa-link"></span> Linked with Novi ID
@@ -932,7 +942,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
         <!-- {/if} -->
 
         <fieldset class="event__contact_1">
-            <legend>Contact 1</legend>
+            <legend class="legend">Contact 1</legend>
             <div class="ae_highlight">Contact 1 is the primary contact for this meeting.</div>
 
             <span class="ae_group">
@@ -969,7 +979,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
                 {/if}
                 <input
                     type="text"
-                    class="input"
+                    class="input w-72"
                     id="contact_1_full_name" name="contact_1_full_name"
                     placeholder="Full name"
                     value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].full_name ? $lq__event_obj?.contact_li_json[0].full_name : '')}
@@ -986,7 +996,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
                 {/if}
                 <input
                     type="email"
-                    class="input"
+                    class="input w-72"
                     id="contact_1_email"
                     name="contact_1_email"
                     placeholder="Email"
@@ -999,36 +1009,36 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
             </span>
             <span class="ae_group">
             <label for="contact_1_phone_mobile">Mobile phone
-                <input type="tel" class="input" id="contact_1_phone_mobile" name="contact_1_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_mobile ? $lq__event_obj?.contact_li_json[0].phone_mobile : '')} autocomplete="tel">
+                <input type="tel" class="input w-40" id="contact_1_phone_mobile" name="contact_1_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_mobile ? $lq__event_obj?.contact_li_json[0].phone_mobile : '')} autocomplete="tel">
             </label>
             <label for="contact_1_phone_home">Home phone
-                <input type="tel" class="input" id="contact_1_phone_home" name="contact_1_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_home ? $lq__event_obj?.contact_li_json[0].phone_home : '')} autocomplete="tel">
+                <input type="tel" class="input w-40" id="contact_1_phone_home" name="contact_1_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_home ? $lq__event_obj?.contact_li_json[0].phone_home : '')} autocomplete="tel">
             </label>
             <label for="contact_1_phone_office">Office phone
-                <input type="tel" class="input" id="contact_1_phone_office" name="contact_1_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_office ? $lq__event_obj?.contact_li_json[0].phone_office : '')} autocomplete="tel">
+                <input type="tel" class="input w-40" id="contact_1_phone_office" name="contact_1_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[0] && $lq__event_obj?.contact_li_json[0].phone_office ? $lq__event_obj?.contact_li_json[0].phone_office : '')} autocomplete="tel">
             </label>
             </span>
         </fieldset>
 
         <fieldset class="event__contact_2">
-            <legend>Contact 2</legend>
+            <legend class="legend">Contact 2</legend>
             <span class="ae_group">
             <label for="contact_2_full_name">Full name
-                <input type="text" class="input" id="contact_2_full_name" name="contact_2_full_name" placeholder="Full name" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].full_name ? $lq__event_obj?.contact_li_json[1].full_name : '')} autocomplete="name">
+                <input type="text" class="input w-72" id="contact_2_full_name" name="contact_2_full_name" placeholder="Full name" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].full_name ? $lq__event_obj?.contact_li_json[1].full_name : '')} autocomplete="name">
             </label>
             <label for="contact_2_email">Email
-                <input type="email" class="input" id="contact_2_email" name="contact_2_email" placeholder="Email" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].email ? $lq__event_obj?.contact_li_json[1].email : '')} autocomplete="email">
+                <input type="email" class="input w-72" id="contact_2_email" name="contact_2_email" placeholder="Email" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].email ? $lq__event_obj?.contact_li_json[1].email : '')} autocomplete="email">
             </label>
             </span>
             <span class="ae_group">
             <label for="contact_2_phone_mobile">Mobile phone
-                <input type="tel" class="input" id="contact_2_phone_mobile" name="contact_2_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_mobile ? $lq__event_obj?.contact_li_json[1].phone_mobile : '')} autocomplete="tel">
+                <input type="tel" class="input w-40" id="contact_2_phone_mobile" name="contact_2_phone_mobile" placeholder="Mobile phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_mobile ? $lq__event_obj?.contact_li_json[1].phone_mobile : '')} autocomplete="tel">
             </label>
             <label for="contact_2_phone_home">Home phone
-                <input type="tel" class="input" id="contact_2_phone_home" name="contact_2_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_home ? $lq__event_obj?.contact_li_json[1].phone_home : '')} autocomplete="tel">
+                <input type="tel" class="input w-40" id="contact_2_phone_home" name="contact_2_phone_home" placeholder="Home phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_home ? $lq__event_obj?.contact_li_json[1].phone_home : '')} autocomplete="tel">
             </label>
             <label for="contact_2_phone_office">Office phone
-                <input type="tel" class="input" id="contact_2_phone_office" name="contact_2_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_office ? $lq__event_obj?.contact_li_json[1].phone_office : '')} autocomplete="tel">
+                <input type="tel" class="input w-40" id="contact_2_phone_office" name="contact_2_phone_office" placeholder="Office phone" value={($lq__event_obj?.contact_li_json && $lq__event_obj?.contact_li_json[1] && $lq__event_obj?.contact_li_json[1].phone_office ? $lq__event_obj?.contact_li_json[1].phone_office : '')} autocomplete="tel">
             </label>
             </span>
         </fieldset>
@@ -1038,7 +1048,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
     <section class="ae_section event__admin_options"> <!-- BEGIN: section event__admin_options -->
 
-        <h3>
+        <h3 class="h2">
             Admin Options
             <button
                 type="button"
@@ -1047,7 +1057,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
                     document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in');
                 }}
                 >
-                <span class="fas fa-eye"></span>
+                <span class="fas fa-eye m-1"></span>
                 Show/Hide Admin
             </button>
         </h3>
@@ -1073,9 +1083,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
                 >
         </label>
 
-        <label>Sort <input type="number" name="sort" value={$lq__event_obj?.sort} class="input" /></label>
+        <label>Sort <input type="number" name="sort" value={$lq__event_obj?.sort} class="input w-24" /></label>
 
-        <label>Group <input type="text" name="group" value={$lq__event_obj?.group ? $lq__event_obj?.group : ''} max="100" class="input" /></label>
+        <label>Group <input type="text" name="group" value={$lq__event_obj?.group ? $lq__event_obj?.group : ''} max="100" class="input w-40" /></label>
 
         {#if $ae_loc.administrator_access}
         <label>Enable
@@ -1101,13 +1111,13 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
 
     <section class="ae_section ae_options ae_row ae_actions event__options event__actions"> <!-- BEGIN: section event__options -->
-        {#if $slct.event_id}
+        {#if $idaa_slct.event_id}
             <button
                 type="submit"
                 disabled={(disable_submit_btn)}
                 class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
                 >
-                <span class="fas fa-check"></span> Save
+                <span class="fas fa-check m-1"></span> Save
             </button>
         {:else}
             <button
@@ -1115,7 +1125,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
                 disabled={(disable_submit_btn)}
                 on:click={() => {
                     if (!confirm('Are you sure you want to create this event?')) {return false;}
-                    // handle_save_event_obj({event_id: $slct.event_id, method: 'create'});
+                    // handle_save_event_obj({event_id: $idaa_slct.event_id, method: 'create'});
                 }}
                 class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
                 >
@@ -1123,14 +1133,14 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
             </button>
         {/if}
 
-        {#if $slct.event_id}
+        {#if $idaa_slct.event_id}
         {#if $ae_loc.administrator_access}
         <button
             on:click={() => {
                 if (!confirm('Are you sure you want to delete this event?')) {return false;}
-                handle_delete_event_obj({event_id: $slct.event_id, method: 'delete'});
+                handle_delete_event_obj({event_id: $idaa_slct.event_id, method: 'delete'});
 
-                $slct.event_id = null;
+                $idaa_slct.event_id = null;
                 $lq__event_obj = {};
             }}
             class="ae_btn ae_smallest btn btn-danger" type="button"
@@ -1142,9 +1152,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
         <button
             on:click={() => {
                 if (!confirm('Are you sure you want to disable this event?')) {return false;}
-                handle_delete_event_obj({event_id: $slct.event_id, method: 'disable'});
+                handle_delete_event_obj({event_id: $idaa_slct.event_id, method: 'disable'});
 
-                $slct.event_id = null;
+                $idaa_slct.event_id = null;
                 $lq__event_obj = {};
             }}
             class="ae_btn ae_smallest btn btn-danger" type="button"
@@ -1156,9 +1166,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
         <button
             on:click={() => {
                 if (!confirm('Are you sure you want to hide this event?')) {return false;}
-                handle_delete_event_obj({event_id: $slct.event_id, method: 'hide'});
+                handle_delete_event_obj({event_id: $idaa_slct.event_id, method: 'hide'});
 
-                $slct.event_id = null;
+                $idaa_slct.event_id = null;
                 $lq__event_obj = {};
             }}
             class="ae_btn ae_smallest btn btn-danger" type="button"