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>