93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
"use client";
|
|
import { createEvent, deleteEvent, modifyEvent } from "@/app/api/events/actions";
|
|
import { useSchedule } from "@/app/schedule/context";
|
|
import Form from "next/form";
|
|
import { useState } from "react";
|
|
|
|
export function EventsEdit() {
|
|
const schedule = useSchedule()!;
|
|
const event = schedule.events[0];
|
|
|
|
return <details>
|
|
<summary>Admin Edit</summary>
|
|
<h3>Create Event</h3>
|
|
<Form action={createEvent}>
|
|
<label>
|
|
Id:
|
|
<input type="text" name="id" required />
|
|
</label>
|
|
<label>
|
|
Name:
|
|
<input type="text" name="name" required />
|
|
</label>
|
|
<label>
|
|
Description:
|
|
<textarea name="description" />
|
|
</label>
|
|
<label>
|
|
Start:
|
|
<input type="datetime-local" name="start" defaultValue="2025-07-20T18:00" />
|
|
</label>
|
|
<label>
|
|
End:
|
|
<input type="datetime-local" name="end" defaultValue="2025-07-20T20:00" />
|
|
</label>
|
|
<label>
|
|
Location
|
|
<select name="location">
|
|
{schedule?.locations.map(location => <option key={location.id} value={location.id}>{location.name}</option>)}
|
|
</select>
|
|
</label>
|
|
<button type="submit">Create</button>
|
|
</Form>
|
|
<h3>Edit Event</h3>
|
|
<Form action={modifyEvent}>
|
|
<label>
|
|
Event
|
|
<select name="id" onChange={(event) => {
|
|
const newEvent = schedule.events.find(e => e.id === event.target.value)!;
|
|
const form = event.target.form!;
|
|
for (const element of form.elements as any) {
|
|
if (element.name === "name") {
|
|
element.value = newEvent.name;
|
|
} else if (element.name === "description") {
|
|
element.value = newEvent.description;
|
|
} else if (element.name === "start") {
|
|
element.value = newEvent.slots[0].start.replace("Z", "");
|
|
} else if (element.name === "end") {
|
|
element.value = newEvent.slots[0].end.replace("Z", "");
|
|
} else if (element.name === "location") {
|
|
element.value = newEvent.slots[0].locations[0];
|
|
}
|
|
}
|
|
}}>
|
|
{schedule?.events.map(event => <option key={event.id} value={event.id}>{event.name}</option>)}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Name:
|
|
<input type="text" name="name" defaultValue={event.name} />
|
|
</label>
|
|
<label>
|
|
Description:
|
|
<textarea name="description" defaultValue={event.description} />
|
|
</label>
|
|
<label>
|
|
Start:
|
|
<input type="datetime-local" name="start" defaultValue={event.slots[0].start.replace("Z", "")} />
|
|
</label>
|
|
<label>
|
|
End:
|
|
<input type="datetime-local" name="end" defaultValue={event.slots[0].end.replace("Z", "")} />
|
|
</label>
|
|
<label>
|
|
Location
|
|
<select name="location">
|
|
{schedule?.locations.map(location => <option key={location.id} value={location.id}>{location.name}</option>)}
|
|
</select>
|
|
</label>
|
|
<button type="submit">Edit</button>
|
|
<button type="submit" formAction={deleteEvent}>Delete</button>
|
|
</Form>
|
|
</details>;
|
|
}
|