Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Starting to import the IDAA files.

Browse Source
This commit is contained in:
Scott Idem
2024-09-24 18:32:19 -04:00
parent 267b5052c9
commit 6dc89083ec
21 changed files with 8539 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

835
src/routes/idaa/(idaa)/recovery_meetings/0_events__main.svelte Normal file
View File

@@ -0,0 +1,835 @@
<script lang="ts">
type key_val = {
[key: string]: any;
};
// *** Import Svelte core
import { onMount } from 'svelte';
// import { Spinner } from 'flowbite-svelte';
// *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app } from './stores';
// *** Import Aether core components
// import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';
// *** Import Aether module variables and functions
// *** Import Aether module components
import Edit_event_obj from './10_edit__event_obj.svelte';
import List_event_obj from './10_list__event_obj.svelte';
import View_event_obj from './10_view__event_obj.svelte';
// *** Export/Exposed variables and functions for component
// export let account_id: string = $page['page_for']['account_id'];
export let account_id: string = $ae_app.account_id;
export let event_id: string = $ae_app.events.event_id;
export let novi_uuid: string = $ae_app.novi_uuid;
export let novi_email: string = $ae_app.novi_email;
export let novi_full_name: string = $ae_app.novi_full_name;
export let novi_admin_li: string = $ae_app.novi_admin_li;
export let novi_trusted_li: string = $ae_app.novi_trusted_li;
// *** Set initial variables
$ae_app.novi_uuid = novi_uuid;
$ae_app.novi_email = decodeURIComponent(novi_email);
$ae_app.novi_full_name = decodeURIComponent(novi_full_name);
$ae_app.novi_admin_li = novi_admin_li;
$ae_app.novi_trusted_li = novi_trusted_li;
$ae_app.current_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (!$ae_app.lu_country_subdivision_list) {
$ae_app.lu_country_subdivision_list = [];
}
if (!$ae_app.lu_country_list ) {
$ae_app.lu_country_list = [];
}
if (!$ae_app.lu_timezone_list) {
$ae_app.lu_timezone_list = [];
}
$ae_app.events.show_main__options = true; // Section for: search area, buttons for filtering events, create new event (Meeting).
$ae_app.events.show_list__event_obj_li = true;
$ae_app.events.fulltext_search_qry_str = '';
$ae_app.events.qry_virtual = false;
$ae_app.events.qry_physical = false;
$ae_app.events.qry_type = '';
// NOTE: Check if the novi_uuid is in the novi_admin_li list
if ($ae_app.novi_uuid && $ae_app.novi_admin_li) {
if ($ae_app.novi_admin_li.includes($ae_app.novi_uuid)) {
$ae_app.access_type = 'administrator';
$ae_app.administrator_access = true;
$ae_app.trusted_access = true;
}
}
// NOTE: Check if the novi_uuid is in the novi_trusted_li list
if ($ae_app.novi_uuid && $ae_app.novi_trusted_li) {
if ($ae_app.novi_trusted_li.includes($ae_app.novi_uuid)) {
$ae_app.access_type = 'trusted';
$ae_app.trusted_access = true;
}
}
if ($ae_app.administrator_access) {
$ae_app.events.enabled = 'enabled';
$ae_app.events.hidden = 'not_hidden';
$ae_app.events.limit = 150;
} else if ($ae_app.trusted_access) {
$ae_app.events.enabled = 'enabled';
$ae_app.events.hidden = 'not_hidden';
$ae_app.events.limit = 75;
} else {
$ae_app.events.enabled = 'enabled';
$ae_app.events.hidden = 'not_hidden';
$ae_app.events.limit = 25;
}
let idaa_event_obj_li_get_promise;
let idaa_event_obj_get_promise;
let data_store_obj_get_promise;
let get_ds_submitter_help_promise = handle_get_data_store_obj_w_code({code: 'recovery_meetings_info'});
if (account_id) {
$slct.account_id = account_id;
handle_load_idaa_event_obj_li({account_id: $slct.account_id, try_cache: false});
}
// NOTE: This if event_id is not fully ready yet -2023-09-08
if (event_id) {
console.log(`Selected Event ID: ${event_id}`);
$slct.event_id = event_id;
$slct_trigger = 'load__event_obj';
// handle_load_event_id_obj({event_id: $slct.event_id, try_cache: false});
// // Auto show the selected Event ID
// // Set the URL param "event_id" to the current Event ID. This is a just in case.
// const url = new URL(location);
// url.searchParams.set('event_id', $slct.event_id);
// history.pushState({}, '', url);
// let message = {'event_id': $slct.event_id};
// window.parent.postMessage(message, "*");
$ae_app.events.show_main__options = true;
$ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_view__event_obj = true;
$ae_app.events.show_edit__event_obj = false;
}
if (!$ae_app.client_content) {
$ae_app.client_content = {};
}
onMount(() => {
console.log('** Component Mounted: ** IDAA Recovery Meetings - AE Events: Main');
document.getElementById('meeting_fulltext_search_qry_str').focus();
});
$: if ($ae_app.iframe_height && $ae_app.iframe_height_modal_body) {
console.log('getting new dimensions for iframe:', $ae_app.iframe_height, $ae_app.iframe_height_modal_body);
let iframe_height = 0;
if ($ae_app.iframe_height > $ae_app.iframe_height_modal_body) {
iframe_height = $ae_app.iframe_height;
} else {
iframe_height = $ae_app.iframe_height_modal_body;
// console.log($ae_app.modal_dimensions);
if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.header_height) {
iframe_height = iframe_height + $ae_app.modal_dimensions.header_height;
}
if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.footer_height) {
iframe_height = iframe_height + $ae_app.modal_dimensions.footer_height;
}
// iframe_height = iframe_height + 50; // Just in case
}
console.log(`Suggested new iframe_height: ${iframe_height}`);
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_app.iframe_height) {
console.log('setting new iframe_height:', $ae_app.iframe_height);
// let iframe_height = $ae_app.iframe_height;
window.parent.postMessage({'iframe_height': $ae_app.iframe_height}, "*"); // This should be in pixels
}
$: if ($slct_trigger == 'load__event_obj_li' && $slct.account_id) {
if ($ae_app.events.qry_status == 'loading') {
console.log('*** $ae_app.events.qry_status == loading ***');
setTimeout(() => {
console.log("Delayed for X second.");
$slct_trigger = null;
handle_load_idaa_event_obj_li({account_id: $slct.account_id, try_cache: false});
}, 250);
} else {
console.log('*** $ae_app.events.qry_status != loading ***');
$slct_trigger = null;
handle_load_idaa_event_obj_li({account_id: $slct.account_id, try_cache: false});
}
}
async function handle_load_idaa_event_obj_li({account_id, try_cache=true}) {
console.log('*** handle_load_idaa_event_obj_li() ***');
console.log($ae_app.events);
// The fulltext search should be lower case
// let fulltext_search_qry_str = $ae_app.events.fulltext_search_qry_str.toLowerCase();
let fulltext_search_qry_str = $ae_app.events.fulltext_search_qry_str;
let qry_virtual = $ae_app.events.qry_virtual;
let qry_physical = $ae_app.events.qry_physical;
let qry_type = $ae_app.events.qry_type;
let enabled = $ae_app.events.enabled;
let hidden = $ae_app.events.hidden;
let limit = $ae_app.events.limit;
let offset = $ae_app.events.offset;
let params = {};
let params_json: key_val = {};
if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) {
params_json['ft_qry'] = {
'default_qry_str': fulltext_search_qry_str,
'location_address_json_ext': fulltext_search_qry_str, // JSON extracted text DB field
'contact_li_json_ext': fulltext_search_qry_str, // JSON extracted text DB field
};
}
if (qry_virtual || qry_physical || qry_type) {
params_json['and_qry'] = {};
if (qry_virtual) params_json['and_qry']['virtual'] = true;
if (qry_physical) params_json['and_qry']['physical'] = true;
if (qry_type) params_json['and_qry']['type'] = qry_type;
}
console.log('params_json:', params_json);
console.log(params_json);
// NOTE: I am not sure if this is actually needed. It may save a little space in the URL.
// if (JSON.stringify(params_json) == JSON.stringify({})) {
// params_json = null;
// }
$ae_app.events.qry_status = 'loading';
idaa_event_obj_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'event', // Event in this case is a recovery meeting.
for_obj_type: 'account',
for_obj_id: account_id,
use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: true, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
enabled: enabled,
hidden: hidden,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
// order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
limit: limit,
offset: offset,
params_json: params_json,
params: params,
log_lvl: 1
})
.then(function (event_obj_li_get_result) {
if (event_obj_li_get_result) {
$slct.event_obj_li = event_obj_li_get_result;
console.log(`Event list:`, $slct.event_obj_li);
} else {
$slct.event_obj_li = [];
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
})
.finally(function () {
$ae_app.events.qry_status = 'done';
});
return idaa_event_obj_li_get_promise;
}
$: if ($slct_trigger == 'load__event_obj' && $slct.event_id) {
$slct_trigger = null;
handle_load_event_id_obj({event_id: $slct.event_id, try_cache: false});
// Auto show the selected Event ID
// Is this pushState needed here?
// Set the URL param "event_id" to the current Event ID. This is a just in case.
// const url = new URL(location);
// url.searchParams.set('event_id', $slct.event_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'event_id': $slct.event_id};
// window.parent.postMessage(message, "*");
// $ae_app.events.show_main__options = false;
// $ae_app.events.show_list__event_obj_li = false;
// $ae_app.events.show_view__event_obj = true;
// $ae_app.events.show_edit__event_obj = false;
}
async function handle_load_event_id_obj({event_id, try_cache=false}) {
console.log('*** handle_load_event_id_obj() ***');
// let enabled = $ae_app.events.enabled;
// let hidden = $ae_app.events.hidden;
// let limit = $ae_app.events.limit;
// let offset = $ae_app.events.offset;
let params = {};
idaa_event_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'event',
obj_id: event_id,
use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: true, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
params: params,
log_lvl: 0
})
.then(function (event_obj_get_result) {
if (event_obj_get_result) {
$slct.event_obj = event_obj_get_result;
console.log(`Event object:`, $slct.event_obj);
}
// Auto show the selected Event ID
// Is this pushState needed here?
// Set the URL param "event_id" to the current Event ID.
const url = new URL(location);
url.searchParams.set('event_id', $slct.event_id);
history.pushState({}, '', url);
// Is this postMessage needed here?
let message = {'event_id': $slct.event_id};
window.parent.postMessage(message, "*");
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return idaa_event_obj_get_promise;
}
function handle_created_event_obj(event) {
console.log('*** handle_created_event_obj() ***');
console.log(event.detail);
handle_load_event_id_obj({event_id: $slct.event_id, try_cache: false});
const url = new URL(location);
url.searchParams.set('event_id', $slct.event_id);
history.pushState({}, '', url);
let message = {'event_id': $slct.event_id};
window.parent.postMessage(message, "*");
// $slct_trigger = 'load__event_obj';
$slct_trigger = 'load__event_obj_li';
$ae_app.events.show_main__options = false;
$ae_app.events.show_list__event_obj_li = false;
$ae_app.events.show_view__event_obj = true;
$ae_app.events.show_edit__event_obj = false;
}
function handle_updated_event_obj(event) {
console.log('*** handle_updated_event_obj() ***');
console.log(event.detail);
// $slct_trigger = 'load__event_obj';
$slct_trigger = 'load__event_obj_li';
$ae_app.events.show_main__options = false;
$ae_app.events.show_list__event_obj_li = false;
$ae_app.events.show_view__event_obj = true;
$ae_app.events.show_edit__event_obj = false;
}
function handle_deleted_event_obj(event) {
console.log('*** handle_deleted_event_obj() ***');
console.log(event.detail);
const url = new URL(location);
url.searchParams.delete('event_id');
history.pushState({}, '', url);
let message = {'event_id': null};
window.parent.postMessage(message, "*");
$slct_trigger = 'load__event_obj_li';
$ae_app.events.show_main__options = true;
$ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_view__event_obj = false;
$ae_app.events.show_edit__event_obj = false;
}
function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
console.log(event);
event.preventDefault();
event.stopPropagation();
return false;
}
function handle_cancel_form(event) {
console.log('*** handle_cancel_form() ***');
console.log(event);
event.preventDefault();
event.stopPropagation();
return false;
}
function handle_oninput_fulltext_search_qry_str(event) {
console.log('*** handle_oninput_fulltext_search_qry_str() ***');
console.log(event);
// Check if this variable is a promise. The last query may still be being processed.
// if (!idaa_event_obj_li_get_promise.promise) {
// console.log('*** handle_oninput_fulltext_search_qry_str() ***');
// console.log('*** Promise is still processing. ***');
// console.log(idaa_event_obj_li_get_promise);
// idaa_event_obj_li_get_promise.promise.finally(() => { idaa_event_obj_li_get_promise.promise.done = true; });
// } else {
// $slct_trigger = 'load__event_obj_li';
// }
// if (idaa_event_obj_li_get_promise && idaa_event_obj_li_get_promise.then) {
// console.log('*** handle_oninput_fulltext_search_qry_str() ***');
// console.log('*** Promise is still processing. ***');
// console.log(idaa_event_obj_li_get_promise);
// $slct_trigger = 'load__event_obj_li';
// return;
// }
// fulltext_search_qry_str = event.target.value;
// if ($ae_app.events.fulltext_search_qry_str.length > 2) {
// } else {
// $ae_app.events.fulltext_search_qry_str = '';
// }
$slct_trigger = 'load__event_obj_li';
}
async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
console.log('*** handle_get_data_store_obj_w_code() ***');
let get_item_result = window.localStorage.getItem(code);
if (get_item_result) {
$ae_app.events.ds[code] = get_item_result;
} else {
console.log('Get local storage item miss.');
}
data_store_obj_get_promise = api.get_data_store_obj_w_code({
api_cfg: $ae_app.ae_api,
data_store_code: code,
data_type: data_type,
log_lvl: 1
})
.then(function (get_data_store_result) {
if (get_data_store_result) {
if (data_type == 'text') {
// console.log(get_data_store_result.text);
$ae_app.events.ds[code] = get_data_store_result.text;
} else if (data_type == 'json') {
// console.log(get_data_store_result.json);
$ae_app.events.ds[code] = get_data_store_result.json;
}
// console.log(`Code: ${$ae_app.events.ds[code]}`);
// console.log(`Code:`, $ae_app.events.ds[code]);
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
}
</script>
<!-- <svelte:window
bind:outerHeight={ae_iframe_height}
/> -->
<section id="osit_idaa_recovery_meetings" class="osit_events ae_main c_idaa c_idaa_recovery_meetings ae_main" bind:clientHeight={$ae_app.iframe_height}>
<!-- <header>
<h1>Recovery Meetings for Healthcare Professionals</h1>
</header> -->
<section class="ae_section ae_meta">
<p>
Novi: {$ae_app.novi_full_name}
<span class="details">
(
{$ae_app.novi_email}
{#if $ae_app.administrator_access}
<span class="access_type administrator_access">Administrator</span>
{:else if $ae_app.trusted_access}
<span class="access_type trusted_access">Trusted</span>
{/if}
<span class="novi_uuid">UUID: {$ae_app.novi_uuid}</span>
)
</span>
</p>
<!-- <p>Page height: {window.innerHeight}</p> -->
</section>
<!-- <div class="ae_overview">
<p>IDAA-inclusive for all addictions. If a meeting is listed as an IDAA meeting, anyone may attend if they choose and are respectful of others. <strong>The door may be closed, but it is never locked.</strong></p>
<p>Caduceus—Includes some IDAA members, but other healthcare workers attend depending on the individual meeting. These are listed as a courtesy.</p>
<p>If a member wishes to start a virtual meeting with specific focus for IDAA members only, that may be indicated in the description. An announcement or invitation can also be placed on the Bulletin Board.</p>
<p>If you are interested in Starting a Meeting, IDAA has developed a guide. <a href="https://static.oneskyit.com/c/IDAA/files/IDAA_-_How_to_Start_A_Meeting_Guide.pdf" class="ae_btn btn_md btn_outline_info"><span class="fas fa-file-pdf"></span> Open IDAA's How to Start an IDAA Recovery Meeting PDF</a> for additional information.</p>
</div> -->
{#if $ae_app.events.show_main__options}
<section class="ae_section ae_options ae_column event_obj__options">
<div class="filters_and_search">
<div class="ae_info recovery_meetings_info note">
{@html $ae_app.events.ds.recovery_meetings_info}
</div>
<!-- <div class="note">Note: The state/province filter only includes states and provinces that are set for at least one meeting. Many virtual/online meetings do not have a state/province set. Some in-person meetings also do not have a state/province set. Please ask one of the meeting contacts to update this information if it is missing.</div> -->
<form on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="search_form">
<!-- <div class="ae_group">
<input
type="search"
placeholder="Search (day of week, location, time, chair, etc.)"
name="fulltext_search_qry_str"
on:keyup={handle_oninput_fulltext_search_qry_str}
bind:value={$ae_app.events.fulltext_search_qry_str}
>
</div> -->
<div class="ae_group">
<input
type="search"
placeholder="Search (day of week, location, chair, etc.)"
id="meeting_fulltext_search_qry_str"
name="fulltext_search_qry_str"
bind:value={$ae_app.events.fulltext_search_qry_str}
style="width: 50%;"
class="bs-input"
>
<button
on:click={handle_oninput_fulltext_search_qry_str}
>
<span class="fas fa-search"></span> Search
</button>
</div>
<fieldset>
<legend>Location?</legend>
<div class="ae_row ae_flex_justify_around ae_width_md">
<label>Virtual
<input
name="qry_virtual"
type="checkbox"
bind:checked={$ae_app.events.qry_virtual}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
>
</label>
<label>In-person
<input
name="qry_physical"
type="checkbox"
bind:checked={$ae_app.events.qry_physical}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
>
</label>
</div>
</fieldset>
<fieldset>
<legend>Type?</legend>
<div class="ae_row ae_flex_justify_around ae_width_100">
<label>All
<input
name="qry_type"
type="radio"
value=""
bind:group={$ae_app.events.qry_type}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
title="Show all meeting types"
>
</label>
<label>IDAA
<input
name="qry_type"
type="radio"
value="IDAA"
bind:group={$ae_app.events.qry_type}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
title="Open to IDAA members only"
>
</label>
<label>Caduceus
<input
name="qry_type"
type="radio"
value="Caduceus"
bind:group={$ae_app.events.qry_type}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
title="Open to all healthcare workers including those who do not qualify for IDAA"
>
</label>
<label>Family Recovery
<input
name="qry_type"
type="radio"
value="Family Recovery"
bind:group={$ae_app.events.qry_type}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
title="Open to spouses, parents, and children of medical professionals who have substance use disorder."
>
</label>
<!-- {#if $ae_app.administrator_access}
<label>Al-Anon (old)
<input
name="qry_type"
type="radio"
value="Al-Anon"
bind:group={$ae_app.events.qry_type}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
>
</label>
<label>Other (old)
<input
name="qry_type"
type="radio"
value="Other"
bind:group={$ae_app.events.qry_type}
on:change={() => {$slct_trigger = 'load__event_obj_li';}}
>
</label>
{/if} -->
</div>
</fieldset>
</form>
<!-- {#await idaa_event_obj_li_get_promise}
<div>Loading events...</div>
{:catch error}
<div>Error: {error.message}</div>
{/await} -->
<div class="ae_group ae_row">
{#if $ae_app.trusted_access && $ae_app.events.hidden == 'not_hidden'}
<button
on:click={() => {
$ae_app.events.hidden = 'all';
$ae_app.events.limit = 150;
$slct_trigger = 'load__event_obj_li';
}}
class="btn_show_bb_post ae_btn btn btn-info"
>
<span class="fas fa-eye"></span> Show Hidden Events
</button>
{:else if $ae_app.trusted_access && $ae_app.events.hidden == 'all'}
<button
on:click={() => {
$ae_app.events.hidden = 'not_hidden';
$slct_trigger = 'load__event_obj_li';
}}
class="btn_hide_bb_post ae_btn btn btn-info"
>
<span class="fas fa-eye-slash"></span> Hide Hidden Events
</button>
{/if}
{#if $ae_app.administrator_access && $ae_app.events.enabled == 'enabled'}
<button
on:click={() => {
$ae_app.events.hidden = 'all';
$ae_app.events.enabled = 'all';
$ae_app.events.limit = 500;
$slct_trigger = 'load__event_obj_li';
}}
class="btn_show_bb_post ae_btn btn btn-warning"
>
<span class="fas fa-eye"></span> Show Disabled Events
</button>
{:else if $ae_app.administrator_access && $ae_app.events.enabled == 'all'}
<button
on:click={() => {
$ae_app.events.enabled = 'enabled';
$slct_trigger = 'load__event_obj_li';
}}
class="btn_hide_bb_post ae_btn btn btn-warning"
>
<span class="fas fa-eye-slash"></span> Hide Disabled Events
</button>
{/if}
<button
on:click={() => {
$slct.event_id = null;
$slct.event_obj = {};
const url = new URL(location);
url.searchParams.delete('event_id');
history.pushState({}, '', url);
$ae_app.events.show_main__options = false;
$ae_app.events.show_list__event_obj_li = false;
$ae_app.events.show_view__event_obj = false;
$ae_app.events.show_edit__event_obj = true;
}}
class="btn_new_recovery_meeting ae_btn btn btn-secondary"
>
<span class="fas fa-plus"></span> Create new Meeting
</button>
</div>
</div> <!-- END: div filters_and_search -->
</section>
{/if}
{#if $ae_app.events.show_list__event_obj_li}
<List_event_obj />
{/if}
{#if $ae_app.events.show_edit__event_obj}
<!-- <section class="ae_edit event_obj event_id idaa_event_id_edit"> -->
<Element_modal_v3
show = { true }
modal_cover_body = { false }
report_client_dimensions = { true }
on:close={ () => {
$ae_app.events.show_main__options = true;
$ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_edit__event_obj = false;
$ae_app.events.show_view__event_obj = false;
const url = new URL(location);
url.searchParams.delete('event_id');
history.pushState({}, '', url);
let message = {'event_id': null};
window.parent.postMessage(message, "*");
}}
on:report__modal_dimensions={ (event) => {
console.log('*** on:report__modal_dimensions ***');
console.log(event.detail);
$ae_app.modal_dimensions = event.detail.modal_dimensions;
}}
>
<span slot="header_title">{@html ($slct.event_obj.name ? $slct.event_obj.name : 'New Recovery Meeting')}</span>
<span slot="body">
<Edit_event_obj
on:created__meeting_obj={handle_created_event_obj}
on:updated__meeting_obj={handle_updated_event_obj}
on:deleted__meeting_obj={handle_deleted_event_obj}
/>
</span>
</Element_modal_v3>
<!-- </section> -->
{/if}
{#if $ae_app.events.show_view__event_obj && $slct.event_obj}
<!-- <section class="ae_view event_obj event_id idaa_event_id_view"> -->
<Element_modal_v3
show = { true }
modal_cover_body = { false }
report_client_dimensions = { true }
on:close={ () => {
$slct.event_id = null;
$slct.event_obj = {};
$ae_app.events.show_main__options = true;
$ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_view__event_obj = false;
$ae_app.events.show_edit__event_obj = false;
const url = new URL(location);
url.searchParams.delete('event_id');
history.pushState({}, '', url);
let message = {'event_id': null};
window.parent.postMessage(message, "*");
}}
on:report__modal_dimensions={ (event) => {
console.log('*** on:report__modal_dimensions ***');
console.log(event.detail);
$ae_app.modal_dimensions = event.detail.modal_dimensions;
}}
>
<span slot="header_title">{@html $slct.event_obj.name}</span>
<span slot="body">
<View_event_obj />
</span>
</Element_modal_v3>
<!-- </section> -->
{/if}
</section>
<style>
/* .ae_meta {
font-size: smaller;
color: hsla(0,0%,50%,1);
} */
/* .ae_edit.event_obj {
border: dashed thin hsla(0,0%,70%,1);
margin: .5em .25em;
padding: .5em .25em;
background-color: hsla(0,0%,90%,1);
} */
/* .ae_view.event_obj {
border: dashed thin hsla(0,0%,70%,1);
margin: .5em .25em;
padding: .5em .25em;
background-color: hsla(0,0%,90%,1);
} */
/* :global(.ae_edit.event_id .element_ae_modal) {
border: dashed thin hsla(0,0%,70%,1);
margin: .5em .25em;
padding: .5em .25em;
background-color: hsla(0,0%,90%,1);
} */
</style>

1207
src/routes/idaa/(idaa)/recovery_meetings/10_edit__event_obj.svelte Normal file
View File

File diff suppressed because it is too large Load Diff

303
src/routes/idaa/(idaa)/recovery_meetings/10_list__event_obj.svelte Normal file
View File

@@ -0,0 +1,303 @@
<script lang="ts">
// *** Import Svelte core
import { onMount } from 'svelte';
import { Spinner } from 'flowbite-svelte';
// *** Import Aether core variables and functions
import { ae } from 'aether_npm_lib';
import { slct, ae_app, slct_trigger } from './stores';
export let container_class_li = [];
onMount(() => {
console.log('** Component Mounted: ** List - Event Obj');
});
</script>
<section class="svelte_component ae_section ae_list event_obj_li list__event_obj recovery_meeting_list {container_class_li.join(' ')}">
{#if $slct.event_obj_li && $slct.event_obj_li.length}
{#each $slct.event_obj_li as idaa_event_obj, index}
<div
id={`idaa_recovery_meeting_id__${idaa_event_obj.event_id_random}`}
class="container recovery_meeting ae_object event_obj"
class:meeting_physical={idaa_event_obj.physical}
class:meeting_virtual={idaa_event_obj.virtual}
>
<header class="ae_header event__header">
<h3>
<span class="event__name">{idaa_event_obj.name}</span>
<span class="badge badge-info bg-info">{#if idaa_event_obj.physical && idaa_event_obj.virtual}<span class="fas fa-home"></span> F2F and <span class="fas fa-laptop"></span> Virtual{:else if idaa_event_obj.physical}<span class="fas fa-home"></span> F2F{:else if idaa_event_obj.virtual}<span class="fas fa-laptop"></span> Virtual{/if}</span>
{#if idaa_event_obj.type}<span class="badge badge-info bg-info"><span class="fas fa-user-md"></span> {idaa_event_obj.type}</span>{/if}
{#if $ae_app.trusted_access && idaa_event_obj.hide}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Hidden</span>{/if}
{#if $ae_app.administrator_access && !idaa_event_obj.enable}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Not enabled</span>{/if}
</h3>
</header>
<div class="ae_options event_obj__options">
<button
on:click={() => {
$slct.event_id = idaa_event_obj.event_id_random;
$slct.event_obj = idaa_event_obj;
$slct_trigger = 'load__event_obj';
// // handle_load_event_id_obj({event_id: $slct.event_id, try_cache: false});
// const url = new URL(location);
// url.searchParams.set('event_id', idaa_event_obj.event_id_random);
// history.pushState({}, '', url);
// let message = {'event_id': idaa_event_obj.event_id_random};
// window.parent.postMessage(message, "*");
$ae_app.events.show_main__options = true;
$ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_view__event_obj = true;
$ae_app.events.show_edit__event_obj = false;
}}
class="btn btn-primary"
title={`Open to see details: ${idaa_event_obj.name}`}
>
<span class="fas fa-envelope-open"></span>
<!-- <span class="fas fa-info-circle"></span> -->
Info
</button>
<!-- This checks if the currently logged in Novi user has a matching UUID or email address. -->
{#if $ae_app.trusted_access || idaa_event_obj.external_person_id === $ae_app.novi_uuid || idaa_event_obj.contact_li_json[0].email === $ae_app.novi_email}
<button
on:click={() => {
$slct.event_id = idaa_event_obj.event_id_random;
$slct.event_obj = idaa_event_obj;
$slct_trigger = 'load__event_obj';
// const url = new URL(location);
// url.searchParams.set('event_id', idaa_event_obj.event_id_random);
// history.pushState({}, '', url);
// $ae_app.events.show_main__options = true;
// $ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_view__event_obj = false;
$ae_app.events.show_edit__event_obj = true;
}}
class="ae_btn ae_smallest btn btn-secondary"
title={`Edit meeting: ${idaa_event_obj.name}`}
>
<span class="fas fa-edit"></span> Edit Meeting
</button>
<!-- <button
on:click={() => {
// Copy URL to clipboard
// Is there a URL anymore?
// const copy_text = document.getElementById(`meeting_edit_url_${idaa_event_obj.event_id_random}`);
}}
class="ae_btn btn_sm btn_outline_info meeting_edit_help"
>
<span class="fas fa-link"></span> URL
</button> -->
{/if}
</div>
<section class="ae_section event__content">
<!-- <div
class="meeting_description description"
>
<div class="ae_label event__description">Description:</div>
<pre class="ae_value event__description">
{@html idaa_event_obj.description}
</pre>
</div> -->
<div
class="event__type"
class:ae_d_none={!idaa_event_obj.type}
>
<span class="ae_label">Type of Recovery Meeting:</span>
<span class="ae_value">{idaa_event_obj.type}</span>
</div>
<div
class="ae_group event__timezone event__recurring_start_time"
>
<span class="ae_label">
<span class="fas fa-clock"></span>
When:
</span>
<!-- class:ae_d_none={!idaa_event_obj.timezone} -->
{#if idaa_event_obj.weekday_sunday || idaa_event_obj.weekday_monday || idaa_event_obj.weekday_tuesday || idaa_event_obj.weekday_wednesday || idaa_event_obj.weekday_thursday || idaa_event_obj.weekday_friday || idaa_event_obj.weekday_saturday}
<span class="event__weekdays event__recurring_days_of_week">
<!-- <span class="ae_label">Days of week:</span> -->
{#if idaa_event_obj.weekday_sunday}<span class="ae_value">Sunday</span>{/if}
{#if idaa_event_obj.weekday_monday}<span class="ae_value">Monday</span>{/if}
{#if idaa_event_obj.weekday_tuesday}<span class="ae_value">Tuesday</span>{/if}
{#if idaa_event_obj.weekday_wednesday}<span class="ae_value">Wednesday</span>{/if}
{#if idaa_event_obj.weekday_thursday}<span class="ae_value">Thursday</span>{/if}
{#if idaa_event_obj.weekday_friday}<span class="ae_value">Friday</span>{/if}
{#if idaa_event_obj.weekday_saturday}<span class="ae_value">Saturday</span>{/if}
</span>
{/if}
{#if idaa_event_obj.recurring_start_time}
<!-- <span class="ae_label">Time:</span> -->
<span class="ae_value">{ae.util.iso_datetime_formatter(`2023-01-01 ${idaa_event_obj.recurring_start_time}`, 'time_short')}</span>
{/if}
{#if idaa_event_obj.timezone}
<!-- <span class="ae_label">Timezone:</span> -->
(<span class="ae_value">{idaa_event_obj.timezone}</span>)
{:else}
<div class="event__tiemzone ae_warning">Required: No timezone was given!</div>
{/if}
</div>
<div class="event__contacts">
{#if idaa_event_obj.contact_li_json && idaa_event_obj.contact_li_json.length && idaa_event_obj.contact_li_json[0].full_name}
<div class="event__contact"
class:ae_d_none={!idaa_event_obj.contact_li_json[0].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
</span>
{idaa_event_obj.contact_li_json[0].full_name}
{#if idaa_event_obj.contact_li_json[0].email}
| <a href="mailto:{idaa_event_obj.contact_li_json[0].email}?Subject={idaa_event_obj.full_name}">{idaa_event_obj.contact_li_json[0].email}</a>
{/if}
{#if idaa_event_obj.contact_li_json[0].phone_mobile}
<span class="ae_label">| Mobile:</span>
<a href="tel:{idaa_event_obj.contact_li_json[0].phone_mobile}">{idaa_event_obj.contact_li_json[0].phone_mobile}</a>
{/if}
{#if idaa_event_obj.contact_li_json[0].phone_home}
<span class="ae_label">| Home:</span>
<a href="tel:{idaa_event_obj.contact_li_json[0].phone_home}">{idaa_event_obj.contact_li_json[0].phone_home}</a>
{/if}
{#if idaa_event_obj.contact_li_json[0].phone_office}
<span class="ae_label">| Office:</span>
<a href="tel:{idaa_event_obj.contact_li_json[0].phone_office}">{idaa_event_obj.contact_li_json[0].phone_office}</a>
{/if}
{#if idaa_event_obj.contact_li_json[0].other_text}| {idaa_event_obj.contact_li_json[0].other_text}{/if}
</div>
{:else}
{#if $ae_app.trusted_access}
<div class="event__contact ae_warning">
ALERT: The primary contact information may be missing? This meeting should be checked and updated. Please Edit and Save to use the new format.
<!-- This must be done by March 1, 2024. -->
</div>
{/if}
{/if}
{#if idaa_event_obj.contact_li_json && idaa_event_obj.contact_li_json.length && idaa_event_obj.contact_li_json[1].full_name}
<div class="event__contact"
class:ae_d_none={!idaa_event_obj.contact_li_json[1].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
</span>
{idaa_event_obj.contact_li_json[1].full_name}
{#if idaa_event_obj.contact_li_json[1].email}
| <a href="mailto:{idaa_event_obj.contact_li_json[1].email}?Subject={idaa_event_obj.full_name}">{idaa_event_obj.contact_li_json[1].email}</a>
{/if}
{#if idaa_event_obj.contact_li_json[1].phone_mobile}
<span class="ae_label">| Mobile:</span>
<a href="tel:{idaa_event_obj.contact_li_json[1].phone_mobile}">{idaa_event_obj.contact_li_json[1].phone_mobile}</a>
{/if}
{#if idaa_event_obj.contact_li_json[1].phone_home}
<span class="ae_label">| Home:</span>
<a href="tel:{idaa_event_obj.contact_li_json[1].phone_home}">{idaa_event_obj.contact_li_json[1].phone_home}</a>
{/if}
{#if idaa_event_obj.contact_li_json[1].phone_office}
<span class="ae_label">| Office:</span>
<a href="tel:{idaa_event_obj.contact_li_json[1].phone_office}">{idaa_event_obj.contact_li_json[1].phone_office}</a>
{/if}
{#if idaa_event_obj.contact_li_json[0].other_text}| {idaa_event_obj.contact_li_json[0].other_text}{/if}
</div>
{/if}
{#if $ae_app.trusted_access}
{#if (idaa_event_obj.contact_li_json && idaa_event_obj.contact_li_json.length && !idaa_event_obj.contact_li_json[0].full_name)}
<div class="event__contact ae_warning">Required: No primary contact information was found!</div>
{/if}
{#if !idaa_event_obj.external_person_id}
<div class="event__contact ae_warning">Warning: Not linked to a Novi record!</div>
{/if}
{/if}
</div>
</section>
{#if $ae_app.administrator_access}
<section class="ae_section ae_footer ae_meta event__meta">
<!-- {#if idaa_event_obj.location_address_json}
<span
class="event__location_address_json"
>
Found location JSON: {idaa_event_obj.location_address_json}
</span>
{/if}
{#if idaa_event_obj.contact_li_json && idaa_event_obj.contact_li_json.length}
<span
class="event__contact_li_json"
>
Found contact JSON: {idaa_event_obj.contact_li_json}
</span>
{/if} -->
<div class="ae_group">
<span
class="event__created_on"
>
Created on: {ae.util.iso_datetime_formatter(idaa_event_obj.created_on, 'datetime_short')}
</span>
<span
class="event__updated_on"
class:ae_d_none={!idaa_event_obj.updated_on}
>
Updated on: {ae.util.iso_datetime_formatter(idaa_event_obj.updated_on, 'datetime_short')}
</span>
</div>
</section>
{/if}
</div>
{/each}
{:else}
{#if $ae_app.events.qry_status === 'loading'}
<div class="ae_highlight ae_padding_md ae_row ae_flex_justify_center"><Spinner class="me-3" /> Loading...</div>
{:else}
<div class="ae_highlight ae_padding_md ae_row ae_flex_justify_center"> No recovery meetings avalible to show. The search may need to be changed.</div>
{/if}
{/if}
</section>
<style>
.ae_label {
font-size: smaller;
}
.ae_value {
font-weight: bold;
}
.ae_header h3 {
font-size: 1.2em;
margin: 0;
/* padding: 0; */
}
.event_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.event_obj .ae_meta .ae_group {
flex-direction: row;
}
.event_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
</style>

392
src/routes/idaa/(idaa)/recovery_meetings/10_view__event_obj.svelte Normal file
View File

@@ -0,0 +1,392 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { ae } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app } from './stores';
export let container_class_li = [];
const dispatch = createEventDispatcher();
if ($slct.event_id) {
console.log(`Event ID selected: ${$slct.event_id}`);
console.log(`Event Object selected: ${$slct.event_obj}`)
$slct_trigger = 'load__event_obj';
}
onMount(() => {
console.log('** Component Mounted: ** View - Event Obj');
});
dayjs.extend(window.dayjs_plugin_utc)
dayjs.extend(window.dayjs_plugin_timezone);
console.log(`UTC offset: ${dayjs().utcOffset()}`);
console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
// let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
// let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
console.log(test_time.format('YYYY-MM-DD HH:mm'));
let adjusted_to_local_tz = test_time.tz('America/New_York');
console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
console.log(adjusted_to_local_tz_v2);
</script>
<section class="svelte_component ae_section ae_view event_obj view__event_obj {container_class_li.join(' ')}">
<!-- <div class="event__header">
<h2 class="event__name">{@html $slct.event_obj.name}</h2>
</div> -->
<div class="event__content">
<div
class="meeting_description description"
>
<div class="ae_label event__description">Description:</div>
<pre class="ae_value event__description">{@html $slct.event_obj.description}</pre>
</div>
<div
class:ae_d_none={!$slct.event_obj.type}
class="meeting_type"
>
<span class="ae_label">Type of Recovery Meeting:</span>
<span class="ae_value">{$slct.event_obj.type}</span>
</div>
<div class="meeting_physical_virtual how_to_attended">
<div class="col-6 meeting_physical"
class:ae_d_none={(!$slct.event_obj.address_city && !$slct.event_obj.location_address_json) || ($slct.event_obj.location_address_json && !$slct.event_obj.location_address_json.city && !$slct.event_obj.location_address_json.country_subdivision_code && !$slct.event_obj.location_address_json.postal_code)}
>
<div class="meeting_address_location">
Address:
<address class="ae_value event__address">
{#if $slct.event_obj.location_address_json}
{#if $slct.event_obj.physical}
{#if $slct.event_obj.location_address_json.name}{$slct.event_obj.location_address_json.name}<br>{/if}
{#if $slct.event_obj.location_address_json.line_1}{$slct.event_obj.location_address_json.line_1}<br>{/if}
{#if $slct.event_obj.location_address_json.line_2}{$slct.event_obj.location_address_json.line_2}<br>{/if}
{#if $slct.event_obj.location_address_json.line_3}{$slct.event_obj.location_address_json.line_3}<br>{/if}
{/if}
{#if $slct.event_obj.location_address_json.city}{$slct.event_obj.location_address_json.city}, {/if}
{#if $slct.event_obj.location_address_json.state_province}{$slct.event_obj.location_address_json.state_province}{/if}
{#if $slct.event_obj.physical}
{#if $slct.event_obj.location_address_json.postal_code}{$slct.event_obj.location_address_json.postal_code}{/if}
{/if}
{#if $slct.event_obj.location_address_json.country}
<br>
{$slct.event_obj.location_address_json.country}
{/if}
{:else}
{#if $slct.event_obj.physical}
{#if $slct.event_obj.address_name}{$slct.event_obj.address_name}<br>{/if}
{#if $slct.event_obj.address_line_1}{$slct.event_obj.address_line_1}<br>{/if}
{#if $slct.event_obj.address_line_2}{$slct.event_obj.address_line_2}<br>{/if}
{#if $slct.event_obj.address_line_3}{$slct.event_obj.address_line_3}<br>{/if}
{/if}
{#if $slct.event_obj.address_city}{$slct.event_obj.address_city}, {/if}
{#if $slct.event_obj.address_country_subdivision_name}{$slct.event_obj.address_country_subdivision_name}{/if}
{#if $slct.event_obj.physical}
{#if $slct.event_obj.address_postal_code}{$slct.event_obj.address_postal_code}{/if}
{/if}
{#if $slct.event_obj.address_country_name}
<br>
{$slct.event_obj.address_country_name}
{/if}
{/if}
</address>
{#if $slct.event_obj.physical}
<div
class:ae_d_none={!$slct.event_obj.location_text}
>
Additional information: {@html $slct.event_obj.location_text}
</div>
{/if}
</div>
</div>
<div class="col-6"
class:meeting_virtual={$slct.event_obj.virtual}
class:ae_d_none={!$slct.event_obj.virtual}
>
<div class="meeting_attend_url"
class:ae_d_none={!$slct.event_obj.attend_url}
>
<span class="ae_label">
<span class="fas fa-link"></span>
URL:
</span>
<span class="ae_value">
<a href="{$slct.event_obj.attend_url}">{$slct.event_obj.attend_url}</a>
</span>
<span class="ae_label">
<span class="fas fa-lock"></span>
Passcode:
</span>
<span class="ae_value">
{$slct.event_obj.attend_url_passcode}
</span>
</div>
<div class="meeting_attend_phone"
class:ae_d_none={!$slct.event_obj.attend_phone}
>
<span class="ae_label">
<span class="fas fa-phone"></span>
Phone:
</span>
<span class="ae_value">
<a href="tel:{$slct.event_obj.attend_phone}">{$slct.event_obj.attend_phone}</a>
</span>
<span class="ae_label">
<span class="fas fa-lock"></span>
Passcode:
</span>
<span class="ae_value">
{$slct.event_obj.attend_phone_passcode}
</span>
</div>
<div class="attend_text"
class:ae_d_none={!$slct.event_obj.attend_text}
>
Additional information: {@html $slct.event_obj.attend_text}
</div>
</div>
</div>
<div class="meeting_when">
<div class="meeting_recurring"
class:ae_d_none={!$slct.event_obj.recurring}
>
<div class="meeting_recurring_text">
<span class="ae_label">
<span class="fas fa-calendar-alt"></span>
Frequency:
</span>
{#if $slct.event_obj.recurring_pattern == 'weekly'}<span>Weekly</span>
{:else if $slct.event_obj.recurring_pattern == 'monthly'}<span>Monthly</span>
{:else if $slct.event_obj.recurring_pattern == 'every other week'}<span>Every Other Week</span>
{:else if $slct.event_obj.recurring_pattern == 'other'}<span>Other</span>
{/if}
{#if $slct.event_obj.recurring_text && $slct.event_obj.recurring_text.length > 0}
{#if $slct.event_obj.recurring_text.includes('*gen*') && $ae_app.administrator_access}
<span class="ae_value ae_highlight">{@html $slct.event_obj.recurring_text}</span>
{:else if (!$slct.event_obj.recurring_text.includes('*gen*'))}
<span class="ae_value">{@html $slct.event_obj.recurring_text}</span>
{/if}
<!-- - <span class="ae_value">{@html $slct.event_obj.recurring_text}</span> -->
{/if}
</div>
<div class="meeting_recurring_days_of_week">
<span class="ae_label">
<span class="fas fa-calendar-week"></span>
Days of week:
</span>
{#if $slct.event_obj.weekday_sunday}<span class="ae_value">Sunday</span>{/if}
{#if $slct.event_obj.weekday_monday}<span class="ae_value">Monday</span>{/if}
{#if $slct.event_obj.weekday_tuesday}<span class="ae_value">Tuesday</span>{/if}
{#if $slct.event_obj.weekday_wednesday}<span class="ae_value">Wednesday</span>{/if}
{#if $slct.event_obj.weekday_thursday}<span class="ae_value">Thursday</span>{/if}
{#if $slct.event_obj.weekday_friday}<span class="ae_value">Friday</span>{/if}
{#if $slct.event_obj.weekday_saturday}<span class="ae_value">Saturday</span>{/if}
</div>
<div class="meeting_recurring_time">
{#if $slct.event_obj.recurring_start_time}
<span class="meeting_recurring_start_time">
<span class="ae_label">
<span class="fas fa-clock"></span> Start time:
</span>
<span class="ae_value">{ae.util.iso_datetime_formatter(`2024-01-01 ${$slct.event_obj.recurring_start_time}`, 'time_short')}</span>
</span>
<span
class:ae_d_none={!$slct.event_obj.recurring_end_time}
>
- <span class="meeting_recurring_end_time">
<span class="ae_label">End time:</span>
<span class="ae_value">{ae.util.iso_datetime_formatter(`2024-01-01 ${$slct.event_obj.recurring_end_time}`, 'time_short')}
</span>
</span>
</span>
<span
class:ae_d_none={!$slct.event_obj.timezone}
>
- <span class="meeting_timezone">
<span class="ae_label">Timezone:</span>
<span class="ae_value">{$slct.event_obj.timezone}</span>
</span>
</span>
{#if $slct.event_obj.timezone}
<span class="event__user_timezone">
(
<span class="ae_label">Your TZ:</span>
<span class="ae_value">
{dayjs.tz(`${$ae_app.current_date_str} ${$slct.event_obj.recurring_start_time}`, $slct.event_obj.timezone).tz($ae_app.current_timezone).format('hh:mm A')} {$ae_app.current_timezone}
</span>
)
</span>
{/if}
{:else}
<span class="meeting_recurring_no_time">No times set</span>
{/if}
<!-- {dayjs.tz(`2024-01-08 20:00`, $slct.event_obj.timezone).format('hh:mm A')} -->
</div>
</div>
</div>
<div class="ae_list event__contacts">
{#if $slct.event_obj.contact_li_json && $slct.event_obj.contact_li_json.length && $slct.event_obj.contact_li_json[0].full_name}
<div class="event__contact"
class:ae_d_none={!$slct.event_obj.contact_li_json[0].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
</span>
{$slct.event_obj.contact_li_json[0].full_name}
{#if $slct.event_obj.contact_li_json[0].email}
| <a href="mailto:{$slct.event_obj.contact_li_json[0].email}?Subject={$slct.event_obj.full_name}">{$slct.event_obj.contact_li_json[0].email}</a>
{/if}
{#if $slct.event_obj.contact_li_json[0].phone_mobile}
<span class="ae_label">| Mobile:</span>
<a href="tel:{$slct.event_obj.contact_li_json[0].phone_mobile}">{$slct.event_obj.contact_li_json[0].phone_mobile}</a>
{/if}
{#if $slct.event_obj.contact_li_json[0].phone_home}
<span class="ae_label">| Home:</span>
<a href="tel:{$slct.event_obj.contact_li_json[0].phone_home}">{$slct.event_obj.contact_li_json[0].phone_home}</a>
{/if}
{#if $slct.event_obj.contact_li_json[0].phone_office}
<span class="ae_label">| Office:</span>
<a href="tel:{$slct.event_obj.contact_li_json[0].phone_office}">{$slct.event_obj.contact_li_json[0].phone_office}</a>
{/if}
{#if $slct.event_obj.contact_li_json[0].other_text}| {$slct.event_obj.contact_li_json[0].other_text}{/if}
</div>
{/if}
{#if $slct.event_obj.contact_li_json && $slct.event_obj.contact_li_json.length && $slct.event_obj.contact_li_json[1].full_name}
<div class="event__contact"
class:ae_d_none={!$slct.event_obj.contact_li_json[1].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
</span>
{$slct.event_obj.contact_li_json[1].full_name}
{#if $slct.event_obj.contact_li_json[1].email}
| <a href="mailto:{$slct.event_obj.contact_li_json[1].email}?Subject={$slct.event_obj.full_name}">{$slct.event_obj.contact_li_json[1].email}</a>
{/if}
{#if $slct.event_obj.contact_li_json[1].phone_mobile}
<span class="ae_label">| Mobile:</span>
<a href="tel:{$slct.event_obj.contact_li_json[1].phone_mobile}">{$slct.event_obj.contact_li_json[1].phone_mobile}</a>
{/if}
{#if $slct.event_obj.contact_li_json[1].phone_home}
<span class="ae_label">| Home:</span>
<a href="tel:{$slct.event_obj.contact_li_json[1].phone_home}">{$slct.event_obj.contact_li_json[1].phone_home}</a>
{/if}
{#if $slct.event_obj.contact_li_json[1].phone_office}
<span class="ae_label">| Office:</span>
<a href="tel:{$slct.event_obj.contact_li_json[1].phone_office}">{$slct.event_obj.contact_li_json[1].phone_office}</a>
{/if}
{#if $slct.event_obj.contact_li_json[1].other_text}| {$slct.event_obj.contact_li_json[1].other_text}{/if}
</div>
{/if}
</div>
<section class="ae_section ae_meta event__meta">
<div class="ae_group">
<span
class="event__id"
class:ae_d_none={!$ae_app.administrator_access}>
ID:
{$slct.event_obj.event_id_random}
</span>
<span
class="event__created_on"
>
Created on: {ae.util.iso_datetime_formatter($slct.event_obj.created_on, 'datetime_short')}
</span>
<span
class="event__updated_on"
class:ae_d_none={!$slct.event_obj.updated_on}
>
Updated on: {ae.util.iso_datetime_formatter($slct.event_obj.updated_on, 'datetime_short')}
</span>
</div>
{#if $ae_app.trusted_access || $slct.event_obj.external_person_id === $ae_app.novi_uuid || $slct.event_obj.contact_li_json[0].email === $ae_app.novi_email}
<div class="ae_options">
<button
on:click={() => {
// $slct.event_id = $slct.event_obj.event_id_random;
// $slct.event_obj = $slct.event_obj;
// const url = new URL(location);
// url.searchParams.set('event_id', $slct.event_obj.event_id_random);
// history.pushState({}, '', url);
// $ae_app.events.show_main__options = true;
// $ae_app.events.show_list__event_obj_li = true;
$ae_app.events.show_view__event_obj = false;
$ae_app.events.show_edit__event_obj = true;
}}
class="btn btn-xs btn-secondary"
title={`Edit meeting: ${$slct.event_obj.name}`}
>
<span class="fas fa-edit"></span> Edit
</button>
</div>
{/if}
</section>
</div>
</section>
<style>
.ae_label {
font-size: smaller;
}
.ae_value {
font-weight: bold;
}
.event__user_timezone {
font-size: smaller;
font-style: italic;
}
.event_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.event_obj .ae_meta .ae_group {
flex-direction: row;
}
.event_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
/* a {
color: #82B6E1;
} */
</style>