OSIT-AE-App-Svelte/src/routes/events/[event_id]/settings/+page.svelte

<script lang="ts">
	import { page } from '$app/stores';
	import { liveQuery } from 'dexie';
	import { db_events } from '$lib/ae_events/db_events';
	import { onMount } from 'svelte';
	import { events_func } from '$lib/ae_events_functions';
	import { ae_api } from '$lib/stores/ae_stores';
	import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
	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';

	let event_id = $page.params.event_id;
	let event_obj = $state(null);

	onMount(() => {
		const observable = liveQuery(() => db_events.event.get(event_id));
		const subscription = observable.subscribe((value) => {
			event_obj = value;
		});

		return () => {
			subscription.unsubscribe();
		};
	});

	async function handle_save(field_name: string, json_data: string | object) {
		try {
			const data_to_save =
				typeof json_data === 'string' ? JSON.parse(json_data) : json_data;
			const data_kv = { [field_name]: data_to_save };

			await events_func.update_ae_obj__event({
				api_cfg: $ae_api,
				event_id: event_id,
				data_kv: data_kv
			});

			alert('Settings saved successfully!');
		} catch (error) {
			console.error('Error saving settings:', error);
			alert('Failed to save settings. Please check if the JSON is valid.');
		}
	}
</script>

<h1 class="h1">Event Settings</h1>

{#if event_obj}
	<div class="space-y-4">
		<div>
			<h2 class="h2">General Config (cfg_json)</h2>
			<Ae_comp_event_settings_form
				bind:cfg_json={event_obj.cfg_json}
				on:save={(e) => handle_save('cfg_json', e.detail)}
			/>
		</div>

		<div>
			<h2 class="h2">Presentation Management (mod_pres_mgmt_json)</h2>
			<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>

		<div>
			<h2 class="h2">Badges (mod_badges_json)</h2>
			<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>

		<div>
			<h2 class="h2">Abstracts (mod_abstracts_json)</h2>
			<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>

		<div>
			<h2 class="h2">Exhibits (mod_exhibits_json)</h2>
			<E_app_codemirror_v5
				editable={true}
				readonly={false}
				content={JSON.stringify(event_obj.mod_exhibits_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_exhibits_json = e.detail;
				}}
			/>
			<button
				class="btn preset-tonal-primary"
				on:click={() => handle_save('mod_exhibits_json', event_obj.mod_exhibits_json)}
				>Save</button
			>
		</div>

		<div>
			<h2 class="h2">Meetings (mod_meetings_json)</h2>
			<E_app_codemirror_v5
				editable={true}
				readonly={false}
				content={JSON.stringify(event_obj.mod_meetings_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_meetings_json = e.detail;
				}}
			/>
			<button
				class="btn preset-tonal-primary"
				on:click={() => handle_save('mod_meetings_json', event_obj.mod_meetings_json)}
				>Save</button
			>
		</div>
	</div>
{:else}
	<p>Loading event data...</p>
{/if}