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

More work on the IDAA Recovery Meetings edit styling and related

Browse Source
This commit is contained in:
Scott Idem
2025-07-14 14:30:00 -04:00
parent 3e36100b9b
commit 37bcb7940d
1 changed files with 160 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
View File

@@ -708,11 +708,11 @@ $effect(() => {
<input type="hidden" value={$idaa_slct.event_id} />
<div class="ae_section event__general_information border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section event__general_information -->
<div class="ae_section event__general_information p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"> <!-- BEGIN: section event__general_information -->
<div>
<label for="name" class="w-full">
<span class="text-base font-semibold">
<span class="text-lg font-semibold">
Name of Recovery Meeting
</span>
<input
@@ -734,7 +734,7 @@ $effect(() => {
</div>
<label for="description" class="ae_label event__description w-full">
<span class="text-base font-semibold">
<span class="text-lg font-semibold">
Short description
</span>
<!-- <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} ></textarea> -->
@@ -770,17 +770,17 @@ $effect(() => {
<div>
<label class="form-group w-100">
<span class="text-base font-semibold">
<span class="text-lg font-semibold">
Type of Recovery Meeting
</span>
<select
name="type"
class="
select w-48 px-1
preset-tonal-surface hover:preset-filled-surface-100-900
form-control col-sm-12
"
value={$lq__event_obj?.type}
class="
form-control col-sm-12
select w-48 p-1
preset-tonal-surface hover:preset-filled-surface-100-900
"
>
<option value="IDAA">IDAA</option>
<option value="Caduceus">Caduceus</option>
@@ -798,7 +798,7 @@ $effect(() => {
</div> <!-- END: section event__general_information -->
<div class="ae_section event__how_to_attend border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section event__how_to_attend -->
<div class="ae_section event__how_to_attend p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"> <!-- BEGIN: section event__how_to_attend -->
<h3 class="h2">How to Attended</h3>
<fieldset class="event__physical_virtual">
@@ -813,7 +813,7 @@ $effect(() => {
>
<span
class="
text-base font-semibold text-surface-600-400
text-base font-semibold text-neutral-600-400
"
>
<!-- <span class="fas fa-map-marker-alt"></span> -->
@@ -836,7 +836,7 @@ $effect(() => {
>
<span
class="
text-base font-semibold text-surface-600-400
text-base font-semibold text-neutral-600-400
"
>
<span class="fas fa-laptop"></span>
@@ -885,7 +885,11 @@ $effect(() => {
<fieldset
id="physical_address"
class="physical_address fieldset space-y-1"
class="
physical_address
fieldset space-y-1
flex flex-row flex-wrap gap-1
"
class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
>
@@ -893,41 +897,81 @@ $effect(() => {
<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 w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_name form-group">
<span class="text-sm font-semibold">
Location name
</span>
<input type="text"
class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
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 w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_line_1 form-group">
<span class="text-sm font-semibold">
Line 1
</span>
<input type="text"
class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
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 w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_line_2 form-group">
<span class="text-sm font-semibold">
Line 2
</span>
<input type="text"
class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
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 w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_line_3 form-group">
<span class="text-sm font-semibold">
Line 3
</span>
<input type="text"
class="form-control col-sm-4 input w-72 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
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>
<fieldset
id="physical_city_state_province_postal_code_country"
class="physical_city_state_province_postal_code_country space-y-1"
class="
physical_city_state_province_postal_code_country
fieldset space-y-1
flex flex-row flex-wrap gap-1
"
class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
>
<label for="address_city">City
<input type="text" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_city form-group w-56">
<span class="text-sm font-semibold">
City
</span>
<input type="text"
class="
form-control col-sm-4
input w-40
preset-tonal-surface hover:preset-filled-surface-100-900
"
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 lu_country_subdivision_list}
<label for="address_country_subdivision_code" class="">State or province
<label for="address_country_subdivision_code" class="form-group w-56">
<span class="text-sm font-semibold">
State or province
</span>
<select
id="address_country_subdivision_code"
name="address_country_subdivision_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 ?? '')}"
class="select w-56 preset-tonal-surface hover:preset-filled-surface-100-900 p-1"
class="
form-control col-sm-4
select w-56 p-1
preset-tonal-surface hover:preset-filled-surface-100-900
"
title="Select the state or province for the meeting">
<option value="">-- None --</option>
{#each lu_country_subdivision_list as lu_country_subdivision}
@@ -936,22 +980,46 @@ $effect(() => {
</select>
</label>
{:else}
<label for="address_country_subdivision_code">State or province code
<input type="text" class="input w-40 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_country_subdivision_code" class="form-group col-sm-2">
<span class="text-sm font-semibold">
State or province code
</span>
<input type="text"
class="
form-control col-sm-4
input w-40
preset-tonal-surface hover:preset-filled-surface-100-900
"
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 w-32 preset-tonal-surface hover:preset-filled-surface-100-900 form-control" 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 for="address_postal_code" class="form-group col-sm-2">
<span class="text-sm font-semibold">
Postal or zip code
</span>
<input type="text"
class="
form-control col-sm-4
input w-40
preset-tonal-surface hover:preset-filled-surface-100-900
"
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 lu_country_list}
<label for="address_country_alpha_2_code" class="">Country
<label for="address_country_alpha_2_code" class="form-group col-sm-3">
<span class="text-sm font-semibold">
Country
</span>
<select
id="address_country_alpha_2_code"
name="address_country_alpha_2_code"
value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_alpha_2_code ? $lq__event_obj?.location_address_json.country_alpha_2_code : $lq__event_obj?.address_country_alpha_2_code ?? '')}"
class="select w-64 preset-tonal-surface hover:preset-filled-surface-100-900 p-1"
class="
form-control
select w-64 p-1
preset-tonal-surface hover:preset-filled-surface-100-900
"
title="Select the country for the meeting">
<option value="">-- None --</option>
{#each lu_country_list as lu_country}
@@ -960,7 +1028,10 @@ $effect(() => {
</select>
</label>
{:else}
<label for="address_country_alpha_2_code">Country
<label for="address_country_alpha_2_code">
<span class="text-sm font-semibold">
Country alpha 2 code
</span>
<input type="text" class="input preset-tonal-surface hover:preset-filled-surface-100-900 form-control" id="address_country_alpha_2_code" name="address_country_alpha_2_code" placeholder="Country alpha 2 code" value="{($lq__event_obj?.location_address_json && $lq__event_obj?.location_address_json.country_alpha_2_code ? $lq__event_obj?.location_address_json.country_alpha_2_code : $lq__event_obj?.address_country_alpha_2_code)}" autocomplete="country">
</label>
{/if}
@@ -972,7 +1043,9 @@ $effect(() => {
class="w-full"
class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
>
Additional information the meeting location
<span class="text-lg font-semibold">
Additional information about the meeting location
</span>
<!-- <textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> -->
<Tiptap_editor
default_minimal={true}
@@ -1029,7 +1102,11 @@ $effect(() => {
<fieldset
id="virtual"
class="virtual space-y-1"
class="
virtual
fieldset space-y-1
flex flex-row flex-wrap gap-1
"
class:hidden={!$idaa_slct.event_obj.virtual && !$idaa_slct.event_obj?.more__virtual_fields}
>
<legend class="legend text-lg font-semibold">Virtual/Online</legend>
@@ -1050,7 +1127,10 @@ $effect(() => {
</fieldset>
<label for="attend_text" class="w-full">Additional information on how to attend
<label for="attend_text" class="w-full">
<span class="text-lg font-semibold">
Additional information on how to attend
</span>
<!-- <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> -->
<Tiptap_editor
default_minimal={true}
@@ -1081,7 +1161,7 @@ $effect(() => {
</div> <!-- END: section event__how_to_attend -->
<div class="ae_section event__timing border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section event__timing -->
<div class="ae_section event__timing p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all"> <!-- BEGIN: section event__timing -->
<h3 class="h3">Recurring and When</h3>
@@ -1120,13 +1200,15 @@ $effect(() => {
>
<!-- <legend class="legend">Recurring</legend> -->
<label for="recurring_pattern" class="form-group w-100">
Recurring Repeats
<label for="recurring_pattern" class="form-group w-100 col-12">
<span class="text-lg font-semibold">
Recurring Repeats
</span>
<select
class="
select w-48 px-1
form-control col-6
select w-48 p-1
preset-tonal-surface hover:preset-filled-surface-100-900
form-control col-sm-12
"
name="recurring_pattern"
id="recurring_pattern"
@@ -1143,36 +1225,53 @@ $effect(() => {
<fieldset class="flex flex-col sm:flex-row flex-wrap gap-1 items-start justify-start">
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_sunday" value="Sunday" bind:checked={($idaa_slct.event_obj.weekday_sunday)} class="checkbox form-check-input d-inline-block">
Sunday
<span class="text-sm font-semibold">
Sunday
</span>
</label>
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_monday" value="Monday" bind:checked={($idaa_slct.event_obj.weekday_monday)} class="checkbox form-check-input d-inline-block">
Monday
<span class="text-sm font-semibold">
Monday
</span>
</label>
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_tuesday" value="Tuesday" bind:checked={($idaa_slct.event_obj.weekday_tuesday)} class="checkbox form-check-input d-inline-block">
Tuesday
<span class="text-sm font-semibold">
Tuesday
</span>
</label>
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_wednesday" value="Wednesday" bind:checked={($idaa_slct.event_obj.weekday_wednesday)} class="checkbox form-check-input d-inline-block">
Wednesday
<span class="text-sm font-semibold">
Wednesday
</span>
</label>
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_thursday" value="Thursday" bind:checked={($idaa_slct.event_obj.weekday_thursday)} class="checkbox form-check-input d-inline-block">
Thursday
<span class="text-sm font-semibold">
Thursday
</span>
</label>
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_friday" value="Friday" bind:checked={($idaa_slct.event_obj.weekday_friday)} class="checkbox form-check-input d-inline-block">
Friday
<span class="text-sm font-semibold">
Friday
</span>
</label>
<label class="label w-32 form-check-label preset-tonal-surface hover:preset-filled-surface-100-900">
<input type="checkbox" name="weekday_saturday" value="Saturday" bind:checked={($idaa_slct.event_obj.weekday_saturday)} class="checkbox form-check-input d-inline-block">
Saturday
<span class="text-sm font-semibold">
Saturday
</span>
</label>
</fieldset>
<fieldset class="flex flex-row flex-wrap gap-1 items-center justify-start flex_row flex_gap_md flex_justify_around space-y-1">
<label class="form-group w-56">Timezone
<label class="form-group w-56">
<span class="text-lg font-semibold">
Timezone
</span>
{#if $ae_loc?.lu_time_zone_list && $ae_loc?.lu_time_zone_list.length > 0}
<select
name="timezone"
@@ -1197,7 +1296,9 @@ $effect(() => {
<!-- client TZ: {$ae_loc?.current_timezone} -->
</label>
<label class="form-group">
Start Time
<span class="text-lg font-semibold">
Start Time
</span>
<input name="recurring_start_time"
type="time"
value={$lq__event_obj?.recurring_start_time}
@@ -1210,7 +1311,9 @@ $effect(() => {
/>
</label>
<label class="form-group">
End Time
<span class="text-lg font-semibold">
End Time
</span>
<input
name="recurring_end_time"
type="time"
@@ -1227,7 +1330,10 @@ $effect(() => {
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
<p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p>
<label for="recurring_text" class="w-full">Additional information on when and how often
<label for="recurring_text" class="w-full">
<span class="text-lg font-semibold">
Additional information on when and how often
</span>
<!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> -->
<Tiptap_editor
default_minimal={true}
@@ -1311,7 +1417,7 @@ $effect(() => {
</div> <!-- END: section event__timing -->
<div class="ae_section event__contacts border border-gray-200 rounded p-2 space-y-2">
<div class="ae_section event__contacts p-2 space-y-2 rounded preset-filled-surface-100-900 preset-outlined-surface-200-800 hover:preset-tonal-warning hover:preset-outlined-warning-800-200 transition-all">
<h3 class="h3">Contacts</h3>