There have been a lot of changes. For some reason the commit is not working? Trying again.
This commit is contained in:
Scott Idem
136
src/routes/events/[event_id]/(badges)/templates/+page.svelte
Normal file
136
src/routes/events/[event_id]/(badges)/templates/+page.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
import { liveQuery } from 'dexie';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
import { events_slct } from '$lib/stores/ae_events_stores';
|
||||
import { Modal } from '@skeletonlabs/skeleton';
|
||||
import Comp_badge_template_form from './ae_comp__badge_template_form.svelte';
|
||||
|
||||
interface Props {
|
||||
data: any; // PageData from SvelteKit
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
let event_id: string = data.params.event_id;
|
||||
|
||||
let show_create_template_modal: boolean = $state(false);
|
||||
let selected_template_id: string | null = $state(null);
|
||||
let show_edit_template_modal: boolean = $state(false);
|
||||
|
||||
let lq__badge_templates = $derived(
|
||||
liveQuery(async () => {
|
||||
const result = await events_func.load_ae_obj_li__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
log_lvl: 0
|
||||
});
|
||||
return result || [];
|
||||
})
|
||||
);
|
||||
|
||||
function handle_create_success() {
|
||||
show_create_template_modal = false;
|
||||
// Trigger a refresh of the list (by updating a store or re-fetching)
|
||||
// For now, relying on liveQuery to react to DB changes
|
||||
}
|
||||
|
||||
function handle_edit_success() {
|
||||
show_edit_template_modal = false;
|
||||
selected_template_id = null;
|
||||
// Trigger a refresh of the list
|
||||
}
|
||||
|
||||
function handle_cancel() {
|
||||
show_create_template_modal = false;
|
||||
show_edit_template_modal = false;
|
||||
selected_template_id = null;
|
||||
}
|
||||
|
||||
function edit_template(template_id: string) {
|
||||
selected_template_id = template_id;
|
||||
show_edit_template_modal = true;
|
||||
}
|
||||
|
||||
async function delete_template(template_id: string) {
|
||||
if (confirm('Are you sure you want to delete this badge template? This action cannot be undone.')) {
|
||||
try {
|
||||
await events_func.delete_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: template_id
|
||||
});
|
||||
// Rely on liveQuery to refresh list
|
||||
} catch (error) {
|
||||
console.error('Error deleting template:', error);
|
||||
alert('Failed to delete template.');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Badge Templates - Event {event_id}</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="p-4">
|
||||
<h1 class="h1">Badge Templates</h1>
|
||||
|
||||
<div class="my-4 flex justify-end">
|
||||
<button class="btn btn-primary" onclick={() => show_create_template_modal = true}>
|
||||
<span class="fas fa-plus mr-2"></span> Add New Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#await lq__badge_templates}
|
||||
<p>Loading badge templates...</p>
|
||||
{:then templates}
|
||||
{#if templates.length > 0}
|
||||
<div class="card p-4">
|
||||
<ul class="list-group">
|
||||
{#each templates as template (template.event_badge_template_id_random)}
|
||||
<li class="list-group-item flex justify-between items-center">
|
||||
<span>{template.name}</span>
|
||||
<div>
|
||||
<button class="btn btn-sm variant-filled-primary" onclick={() => edit_template(template.event_badge_template_id_random)}>
|
||||
<span class="fas fa-edit"></span> Edit
|
||||
</button>
|
||||
<button class="btn btn-sm variant-filled-error ml-2" onclick={() => delete_template(template.event_badge_template_id_random)}>
|
||||
<span class="fas fa-trash"></span> Delete
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{:else}
|
||||
<p>No badge templates found for this event. Click "Add New Template" to create one.</p>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<p class="text-error-500">Error loading templates: {error.message}</p>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
{#if show_create_template_modal}
|
||||
<Modal bind:show={show_create_template_modal}>
|
||||
<div class="card p-4">
|
||||
<Comp_badge_template_form
|
||||
event_id={event_id}
|
||||
on:success={handle_create_success}
|
||||
on:cancel={handle_cancel}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
{#if show_edit_template_modal}
|
||||
<Modal bind:show={show_edit_template_modal}>
|
||||
<div class="card p-4">
|
||||
<Comp_badge_template_form
|
||||
event_id={event_id}
|
||||
template_id={selected_template_id}
|
||||
on:success={handle_edit_success}
|
||||
on:cancel={handle_cancel}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
@@ -0,0 +1,204 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
event_id: string;
|
||||
template_id?: string | null; // Null for creation, string for editing
|
||||
}
|
||||
|
||||
let { event_id, template_id = null }: Props = $props();
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Form fields
|
||||
let name: string = '';
|
||||
let header_path: string = '';
|
||||
let logo_path: string = '';
|
||||
let header_row_1: string = '';
|
||||
let header_row_2: string = '';
|
||||
let secondary_header_path: string = '';
|
||||
let footer_text: string = '';
|
||||
let show_qr_front: boolean = true;
|
||||
let show_qr_back: boolean = true;
|
||||
let wireless_ssid: string = '';
|
||||
let wireless_password: string = '';
|
||||
let ticket_1_text: string = '';
|
||||
let ticket_2_text: string = '';
|
||||
let ticket_3_text: string = '';
|
||||
|
||||
let submit_status: string = 'idle'; // idle, loading, success, error
|
||||
|
||||
// Load template data if in edit mode
|
||||
$effect(async () => {
|
||||
if (template_id) {
|
||||
submit_status = 'loading';
|
||||
try {
|
||||
const template_obj = await events_func.load_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: template_id
|
||||
});
|
||||
if (template_obj) {
|
||||
name = template_obj.name || '';
|
||||
header_path = template_obj.header_path || '';
|
||||
logo_path = template_obj.logo_path || '';
|
||||
header_row_1 = template_obj.header_row_1 || '';
|
||||
header_row_2 = template_obj.header_row_2 || '';
|
||||
secondary_header_path = template_obj.secondary_header_path || '';
|
||||
footer_text = template_obj.footer_text || '';
|
||||
show_qr_front = template_obj.show_qr_front ?? true;
|
||||
show_qr_back = template_obj.show_qr_back ?? true;
|
||||
wireless_ssid = template_obj.wireless_ssid || '';
|
||||
wireless_password = template_obj.wireless_password || '';
|
||||
ticket_1_text = template_obj.ticket_1_text || '';
|
||||
ticket_2_text = template_obj.ticket_2_text || '';
|
||||
ticket_3_text = template_obj.ticket_3_text || '';
|
||||
submit_status = 'idle';
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
console.error('Template not found for editing.');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error loading template for editing:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function handle_submit() {
|
||||
submit_status = 'loading';
|
||||
const data_to_save: key_val = {
|
||||
name,
|
||||
header_path,
|
||||
logo_path,
|
||||
header_row_1,
|
||||
header_row_2,
|
||||
secondary_header_path,
|
||||
footer_text,
|
||||
show_qr_front,
|
||||
show_qr_back,
|
||||
wireless_ssid,
|
||||
wireless_password,
|
||||
ticket_1_text,
|
||||
ticket_2_text,
|
||||
ticket_3_text
|
||||
};
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (template_id) {
|
||||
result = await events_func.update_ae_obj__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: template_id,
|
||||
data_kv: data_to_save
|
||||
});
|
||||
} else {
|
||||
result = await events_func.create_ae_obj__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
data_kv: data_to_save
|
||||
});
|
||||
}
|
||||
|
||||
if (result) {
|
||||
submit_status = 'success';
|
||||
dispatch('success', result);
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
dispatch('error', 'Failed to save template');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error saving template:', error);
|
||||
dispatch('error', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handle_cancel() {
|
||||
dispatch('cancel');
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit|preventDefault={handle_submit} class="p-4 space-y-4">
|
||||
<h3 class="h3">{template_id ? 'Edit' : 'Create New'} Badge Template</h3>
|
||||
|
||||
<label class="label">
|
||||
<span>Template Name</span>
|
||||
<input type="text" bind:value={name} class="input" required />
|
||||
</label>
|
||||
|
||||
<label class="label">
|
||||
<span>Header Path (URL)</span>
|
||||
<input type="text" bind:value={header_path} class="input" />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Logo Path (URL, if no Header Path)</span>
|
||||
<input type="text" bind:value={logo_path} class="input" />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Header Row 1 Text (HTML allowed)</span>
|
||||
<textarea bind:value={header_row_1} class="textarea" rows="2"></textarea>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Header Row 2 Text (HTML allowed)</span>
|
||||
<textarea bind:value={header_row_2} class="textarea" rows="2"></textarea>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Secondary Header Path (URL, back of badge)</span>
|
||||
<input type="text" bind:value={secondary_header_path} class="input" />
|
||||
</label>
|
||||
|
||||
<label class="label">
|
||||
<span>Footer Text (HTML allowed)</span>
|
||||
<textarea bind:value={footer_text} class="textarea" rows="2"></textarea>
|
||||
</label>
|
||||
|
||||
<label class="label flex items-center gap-2">
|
||||
<input type="checkbox" bind:checked={show_qr_front} class="checkbox" />
|
||||
<span>Show QR Code on Front</span>
|
||||
</label>
|
||||
<label class="label flex items-center gap-2">
|
||||
<input type="checkbox" bind:checked={show_qr_back} class="checkbox" />
|
||||
<span>Show QR Code on Back</span>
|
||||
</label>
|
||||
|
||||
<label class="label">
|
||||
<span>Wireless SSID</span>
|
||||
<input type="text" bind:value={wireless_ssid} class="input" />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Wireless Password</span>
|
||||
<input type="text" bind:value={wireless_password} class="input" />
|
||||
</label>
|
||||
|
||||
<label class="label">
|
||||
<span>Ticket 1 Text (HTML allowed)</span>
|
||||
<textarea bind:value={ticket_1_text} class="textarea" rows="2"></textarea>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Ticket 2 Text (HTML allowed)</span>
|
||||
<textarea bind:value={ticket_2_text} class="textarea" rows="2"></textarea>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Ticket 3 Text (HTML allowed)</span>
|
||||
<textarea bind:value={ticket_3_text} class="textarea" rows="2"></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" class="btn variant-filled-tertiary" onclick={handle_cancel} disabled={submit_status === 'loading'}>Cancel</button>
|
||||
<button type="submit" class="btn variant-filled-primary" disabled={submit_status === 'loading'}>
|
||||
{#if submit_status === 'loading'}
|
||||
<span class="fas fa-spinner fa-spin mr-2"></span>
|
||||
{/if}
|
||||
{template_id ? 'Save Changes' : 'Create Template'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#if submit_status === 'success'}
|
||||
<p class="text-green-500">Template saved successfully!</p>
|
||||
{:else if submit_status === 'error'}
|
||||
<p class="text-red-500">Error saving template. Please try again.</p>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user