270 lines
11 KiB
Text
270 lines
11 KiB
Text
---
|
|
import yaml from "js-yaml";
|
|
import configYaml from "../../data/storeConfig.yaml?raw";
|
|
|
|
const config = yaml.load(configYaml) as any;
|
|
const { editor_title, form } = config.ui.tables.events;
|
|
---
|
|
|
|
<!-- Event Editor Dialog -->
|
|
<dialog id="eventEditor" class="modal">
|
|
<div class="modal-box w-11/12 max-w-4xl">
|
|
<h3 class="font-bold text-lg mb-6">{editor_title}</h3>
|
|
<form class="space-y-6" id="eventForm" novalidate>
|
|
<!-- Basic Info Section -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="form-control">
|
|
<label class="label" for="editorEventId">
|
|
<span class="label-text">{form.event_id.label}</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="editorEventId"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.event_id.placeholder}
|
|
pattern="[A-Za-z0-9_-]+"
|
|
minlength="3"
|
|
maxlength="50"
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="eventIdError">This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label" for="editorEventCode">
|
|
<span class="label-text">{form.event_code.label}</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="editorEventCode"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.event_code.placeholder}
|
|
pattern="[A-Za-z0-9_-]+"
|
|
minlength="3"
|
|
maxlength="20"
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="eventCodeError">This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label" for="editorEventName">
|
|
<span class="label-text">{form.event_name.label}</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="editorEventName"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.event_name.placeholder}
|
|
minlength="3"
|
|
maxlength="100"
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="eventNameError">This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Date/Time Section -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<h4 class="font-medium text-sm opacity-70">
|
|
Start Date/Time
|
|
</h4>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="form-control">
|
|
<label class="label" for="editorStartDate">
|
|
<span class="label-text"
|
|
>{form.start_date.date_label}</span
|
|
>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="editorStartDate"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.start_date.date_placeholder}
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="startDateError"
|
|
>This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label" for="editorStartTime">
|
|
<span class="label-text"
|
|
>{form.start_date.time_label}</span
|
|
>
|
|
</label>
|
|
<input
|
|
type="time"
|
|
id="editorStartTime"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.start_date.time_placeholder}
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="startTimeError"
|
|
>This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h4 class="font-medium text-sm opacity-70">
|
|
End Date/Time
|
|
</h4>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="form-control">
|
|
<label class="label" for="editorEndDate">
|
|
<span class="label-text"
|
|
>{form.end_date.date_label}</span
|
|
>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="editorEndDate"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.end_date.date_placeholder}
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="endDateError"
|
|
>This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label" for="editorEndTime">
|
|
<span class="label-text"
|
|
>{form.end_date.time_label}</span
|
|
>
|
|
</label>
|
|
<input
|
|
type="time"
|
|
id="editorEndTime"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.end_date.time_placeholder}
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="endTimeError"
|
|
>This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Info Section -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="form-control">
|
|
<label class="label" for="editorPointsToReward">
|
|
<span class="label-text"
|
|
>{form.points_to_reward.label}</span
|
|
>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="editorPointsToReward"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.points_to_reward.placeholder}
|
|
min="0"
|
|
max="1000"
|
|
required
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="pointsError">This field is required</span
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label" for="editorLocation">
|
|
<span class="label-text">{form.location.label}</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="editorLocation"
|
|
class="input input-bordered w-full"
|
|
placeholder={form.location.placeholder}
|
|
maxlength="200"
|
|
/>
|
|
<label class="label">
|
|
<span
|
|
class="label-text-alt text-error hidden"
|
|
id="locationError"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Files Section -->
|
|
<div class="form-control">
|
|
<label class="label" for="editorFiles">
|
|
<span class="label-text">{form.files.label}</span>
|
|
</label>
|
|
<input
|
|
type="file"
|
|
id="editorFiles"
|
|
class="file-input file-input-bordered w-full"
|
|
multiple
|
|
accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"
|
|
/>
|
|
<div id="currentFiles" class="mt-4 space-y-2"></div>
|
|
<label class="label">
|
|
<span class="label-text-alt opacity-70"
|
|
>{form.files.help_text}</span
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="modal-action flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost order-1 sm:order-none"
|
|
onclick="eventEditor.close()"
|
|
>
|
|
{form.buttons.cancel}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
id="saveEventButton"
|
|
class="btn btn-primary flex-1 sm:flex-none"
|
|
>
|
|
{form.buttons.save}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|