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

feat: Add form-based UIs and view toggles for event settings

Browse Source 
This commit introduces form-based UI components for 'mod_badges_json' and 'mod_abstracts_json', and expands the form for 'mod_pres_mgmt_json'. It also adds view toggles to switch between form and raw JSON editing for each of these sections, providing greater flexibility for the user.
This commit is contained in:
Scott Idem
2025-11-18 20:10:01 -05:00
parent c06f50c21e
commit 9691ceca43
4 changed files with 427 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/routes/events/[event_id]/settings/+page.svelte
View File

@@ -9,9 +9,15 @@
import Ae_comp_event_settings_form from './ae_comp__event_settings_form.svelte';
import Ae_comp_event_settings_pres_mgmt_form from './ae_comp__event_settings_pres_mgmt_form.svelte';
import Ae_comp_event_settings_basic_form from './ae_comp__event_settings_basic_form.svelte';
import Ae_comp_event_settings_badges_form from './ae_comp__event_settings_badges_form.svelte';
import Ae_comp_event_settings_abstracts_form from './ae_comp__event_settings_abstracts_form.svelte';
let event_id = $page.params.event_id;
let event_obj = $state(null);
let cfg_json_view = $state('form');
let pres_mgmt_json_view = $state('form');
let badges_json_view = $state('form');
let abstracts_json_view = $state('form');
onMount(() => {
const observable = liveQuery(() => db_events.event.get(event_id));
@@ -65,64 +71,140 @@
<details class="details">
<summary class="summary">General Config (cfg_json)</summary>
<div class="p-4">
<Ae_comp_event_settings_form
bind:cfg_json={event_obj.cfg_json}
on:save={(e) => handle_save('cfg_json', e.detail)}
/>
<div class="flex justify-end">
<button class="btn btn-sm" on:click={() => (cfg_json_view = 'form')}>Form</button>
<button class="btn btn-sm" on:click={() => (cfg_json_view = 'json')}>JSON</button>
</div>
{#if cfg_json_view === 'form'}
<Ae_comp_event_settings_form
bind:cfg_json={event_obj.cfg_json}
on:save={(e) => handle_save('cfg_json', e.detail)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.cfg_json, null, 4)}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
on:change={(e) => {
event_obj.cfg_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() => handle_save('cfg_json', event_obj.cfg_json)}>Save</button
>
{/if}
</div>
</details>
<details class="details">
<summary class="summary">Presentation Management (mod_pres_mgmt_json)</summary>
<div class="p-4">
<Ae_comp_event_settings_pres_mgmt_form
bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json}
on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)}
/>
<div class="flex justify-end">
<button class="btn btn-sm" on:click={() => (pres_mgmt_json_view = 'form')}
>Form</button
>
<button class="btn btn-sm" on:click={() => (pres_mgmt_json_view = 'json')}
>JSON</button
>
</div>
{#if pres_mgmt_json_view === 'form'}
<Ae_comp_event_settings_pres_mgmt_form
bind:mod_pres_mgmt_json={event_obj.mod_pres_mgmt_json}
on:save={(e) => handle_save('mod_pres_mgmt_json', e.detail)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.mod_pres_mgmt_json, null, 4)}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
on:change={(e) => {
event_obj.mod_pres_mgmt_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() =>
handle_save('mod_pres_mgmt_json', event_obj.mod_pres_mgmt_json)}
>Save</button
>
{/if}
</div>
</details>
<details class="details">
<summary class="summary">Badges (mod_badges_json)</summary>
<div class="p-4">
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
on:change={(e) => {
event_obj.mod_badges_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() => handle_save('mod_badges_json', event_obj.mod_badges_json)}
>Save</button
>
<div class="flex justify-end">
<button class="btn btn-sm" on:click={() => (badges_json_view = 'form')}>Form</button>
<button class="btn btn-sm" on:click={() => (badges_json_view = 'json')}>JSON</button>
</div>
{#if badges_json_view === 'form'}
<Ae_comp_event_settings_badges_form
bind:mod_badges_json={event_obj.mod_badges_json}
on:save={(e) => handle_save('mod_badges_json', e.detail)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
on:change={(e) => {
event_obj.mod_badges_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() => handle_save('mod_badges_json', event_obj.mod_badges_json)}
>Save</button
>
{/if}
</div>
</details>
<details class="details">
<summary class="summary">Abstracts (mod_abstracts_json)</summary>
<div class="p-4">
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
on:change={(e) => {
event_obj.mod_abstracts_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() => handle_save('mod_abstracts_json', event_obj.mod_abstracts_json)}
>Save</button
>
<div class="flex justify-end">
<button class="btn btn-sm" on:click={() => (abstracts_json_view = 'form')}
>Form</button
>
<button class="btn btn-sm" on:click={() => (abstracts_json_view = 'json')}
>JSON</button
>
</div>
{#if abstracts_json_view === 'form'}
<Ae_comp_event_settings_abstracts_form
bind:mod_abstracts_json={event_obj.mod_abstracts_json}
on:save={(e) => handle_save('mod_abstracts_json', e.detail)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
readonly={false}
content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
on:change={(e) => {
event_obj.mod_abstracts_json = e.detail;
}}
/>
<button
class="btn preset-tonal-primary"
on:click={() => handle_save('mod_abstracts_json', event_obj.mod_abstracts_json)}
>Save</button
>
{/if}
</div>
</details>

99
src/routes/events/[event_id]/settings/ae_comp__event_settings_abstracts_form.svelte Normal file
View File

@@ -0,0 +1,99 @@
<script lang="ts">
import type { key_val } from '$lib/stores/ae_stores';
import { createEventDispatcher } from 'svelte';
interface Props {
mod_abstracts_json: key_val;
}
let { mod_abstracts_json = $bindable() }: Props = $props();
const dispatch = createEventDispatcher();
function save() {
dispatch('save', mod_abstracts_json);
}
</script>
<div class="space-y-4">
<div class="space-y-2">
<div>
<label class="label">
<span>Name Character Limit</span>
<input
type="number"
class="input"
bind:value={mod_abstracts_json.name_char_limit}
/>
</label>
</div>
<div>
<label class="label">
<span>Text Character Limit</span>
<input
type="number"
class="input"
bind:value={mod_abstracts_json.text_char_limit}
/>
</label>
</div>
<div>
<label class="label">
<span>Deadline for New Abstracts</span>
<input
type="datetime-local"
class="input"
bind:value={mod_abstracts_json.deadline_new}
/>
</label>
</div>
<div>
<label class="label">
<span>Deadline for Updates</span>
<input
type="datetime-local"
class="input"
bind:value={mod_abstracts_json.deadline_updates}
/>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_abstracts_json.confirm_email_w_link}
/>
<span>Confirm Email with Link</span>
</label>
</div>
<div>
<label class="label">
<span>Confirmation From Email</span>
<input
type="email"
class="input"
bind:value={mod_abstracts_json.confirm_from_email}
/>
</label>
</div>
<div>
<label class="label">
<span>Confirmation From Name</span>
<input type="text" class="input" bind:value={mod_abstracts_json.confirm_from_name} />
</label>
</div>
<div>
<label class="label">
<span>Confirmation To Email Override</span>
<input
type="email"
class="input"
bind:value={mod_abstracts_json.confirm_to_email_override}
/>
</label>
</div>
</div>
<button class="btn preset-tonal-primary" on:click={save}>Save</button>
</div>

90
src/routes/events/[event_id]/settings/ae_comp__event_settings_badges_form.svelte Normal file
View File

@@ -0,0 +1,90 @@
<script lang="ts">
import type { key_val } from '$lib/stores/ae_stores';
import { createEventDispatcher } from 'svelte';
interface Props {
mod_badges_json: key_val;
}
let { mod_badges_json = $bindable() }: Props = $props();
const dispatch = createEventDispatcher();
function save() {
dispatch('save', mod_badges_json);
}
</script>
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_badges_json.badge_id_only_search}
/>
<span>Badge ID Only Search</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_badges_json.enable_mass_print}
/>
<span>Enable Mass Print</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_badges_json.enable_add_badge_btn}
/>
<span>Enable Add Badge Button</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_badges_json.enable_upload_badge_li_btn}
/>
<span>Enable Upload Badge List Button</span>
</label>
</div>
<div>
<label class="label">
<input type="checkbox" class="checkbox" bind:checked={mod_badges_json.enable_search_qr} />
<span>Enable Search by QR</span>
</label>
</div>
</div>
<div class="space-y-2">
<div>
<label class="label">
<span>QR Type</span>
<input type="text" class="input" bind:value={mod_badges_json.qr_type} />
</label>
</div>
<div>
<label class="label">
<span>Trusted Passcode</span>
<input type="text" class="input" bind:value={mod_badges_json.trusted_passcode} />
</label>
</div>
<div>
<label class="label">
<span>Administrator Passcode</span>
<input type="text" class="input" bind:value={mod_badges_json.administrator_passcode} />
</label>
</div>
</div>
<button class="btn preset-tonal-primary" on:click={save}>Save</button>
</div>

130
src/routes/events/[event_id]/settings/ae_comp__event_settings_pres_mgmt_form.svelte
View File

@@ -16,21 +16,123 @@
</script>
<div class="space-y-4">
<div>
<label class="label">
<input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.lock_config} />
<span>Lock Config</span>
</label>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="label">
<input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.lock_config} />
<span>Lock Config</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.hide__location_code}
/>
<span>Hide Location Code</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.hide__presentation_code}
/>
<span>Hide Presentation Code</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.hide__presenter_code}
/>
<span>Hide Presenter Code</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.hide__session_code}
/>
<span>Hide Session Code</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.limit__navigation}
/>
<span>Limit Navigation</span>
</label>
</div>
<div>
<label class="label">
<input type="checkbox" class="checkbox" bind:checked={mod_pres_mgmt_json.limit__options} />
<span>Limit Options</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.require__presenter_agree}
/>
<span>Require Presenter Agreement</span>
</label>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.require__session_agree}
/>
<span>Require Session Agreement</span>
</label>
</div>
</div>
<div>
<label class="label">
<input
type="checkbox"
class="checkbox"
bind:checked={mod_pres_mgmt_json.hide__location_code}
/>
<span>Hide Location Code</span>
</label>
<div class="space-y-2">
<div>
<label class="label">
<span>Label for Person External ID</span>
<input
type="text"
class="input"
bind:value={mod_pres_mgmt_json.label__person_external_id}
/>
</label>
</div>
<div>
<label class="label">
<span>Label for Session POC Type</span>
<input
type="text"
class="input"
bind:value={mod_pres_mgmt_json.label__session_poc_type}
/>
</label>
</div>
<div>
<label class="label">
<span>Label for Session POC Name</span>
<input
type="text"
class="input"
bind:value={mod_pres_mgmt_json.label__session_poc_name}
/>
</label>
</div>
</div>
<button class="btn preset-tonal-primary" on:click={save}>Save</button>
</div>