447 lines
20 KiB
Svelte
447 lines
20 KiB
Svelte
<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>
|
|
{:else if $slct.event_obj.contact_1_id_random}
|
|
<div class="event__contact"
|
|
class:ae_d_none={!$slct.event_obj.contact_1_name}
|
|
>
|
|
<span class="ae_label">
|
|
<span class="fas fa-user"></span> Contact:
|
|
</span>
|
|
{$slct.event_obj.contact_1_name}
|
|
{#if $slct.event_obj.contact_1_email}
|
|
| <a href="mailto:{$slct.event_obj.contact_1_email}?Subject={$slct.event_obj.name}">{$slct.event_obj.contact_1_email}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_1_phone_mobile}
|
|
<span class="ae_label">| Mobile:</span>
|
|
<a href="tel:{$slct.event_obj.contact_1_phone_mobile}">{$slct.event_obj.contact_1_phone_mobile}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_1_phone_home}
|
|
<span class="ae_label">| Home:</span>
|
|
<a href="tel:{$slct.event_obj.contact_1_phone_home}">{$slct.event_obj.contact_1_phone_home}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_1_phone_office}
|
|
<span class="ae_label">| Office:</span>
|
|
<a href="tel:{$slct.event_obj.contact_1_phone_office}">{$slct.event_obj.contact_1_phone_office}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_1_other_text}| {$slct.event_obj.contact_1_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>
|
|
{:else if $slct.event_obj.contact_2_id_random}
|
|
<div class="event__contact"
|
|
class:ae_d_none={!$slct.event_obj.contact_2_name}
|
|
>
|
|
<span class="ae_label">
|
|
<span class="fas fa-user"></span> Contact:
|
|
</span>
|
|
{$slct.event_obj.contact_2_name}
|
|
{#if $slct.event_obj.contact_2_email}
|
|
| <a href="mailto:{$slct.event_obj.contact_2_email}?Subject={$slct.event_obj.name}">{$slct.event_obj.contact_2_email}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_2_phone_mobile}
|
|
<span class="ae_label">| Mobile:</span>
|
|
<a href="tel:{$slct.event_obj.contact_2_phone_mobile}">{$slct.event_obj.contact_2_phone_mobile}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_2_phone_home}
|
|
<span class="ae_label">| Home:</span>
|
|
<a href="tel:{$slct.event_obj.contact_2_phone_home}">{$slct.event_obj.contact_2_phone_home}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_2_phone_office}
|
|
<span class="ae_label">| Office:</span>
|
|
<a href="tel:{$slct.event_obj.contact_2_phone_office}">{$slct.event_obj.contact_2_phone_office}</a>
|
|
{/if}
|
|
{#if $slct.event_obj.contact_2_other_text}| {$slct.event_obj.contact_2_other_text}{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !$slct.event_obj.contact_1_id_random && !$slct.event_obj.contact_2_id_random}
|
|
<div class="event__contact ae_warning">No contact information was given!</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_1_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>
|