128 lines
5.4 KiB
Svelte
128 lines
5.4 KiB
Svelte
<!--
|
|
- This file is a part of the SteamWar software.
|
|
-
|
|
- Copyright (C) 2025 SteamWar.de-Serverteam
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as published by
|
|
- the Free Software Foundation, either version 3 of the License, or
|
|
- (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import {Input} from "@components/ui/input";
|
|
import {Label} from "@components/ui/label";
|
|
import {Popover, PopoverContent, PopoverTrigger} from "@components/ui/popover";
|
|
import type {SWEvent} from "@type/event.ts"
|
|
import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
|
|
import {fromAbsolute} from "@internationalized/date";
|
|
import {Button} from "@components/ui/button";
|
|
import {ChevronsUpDown} from "lucide-svelte";
|
|
import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from "@components/ui/command";
|
|
import {schemTypes} from "@stores/stores.ts";
|
|
import Check from "lucide-svelte/icons/check";
|
|
import {cn} from "@components/utils.ts";
|
|
import {Switch} from "@components/ui/switch";
|
|
import {eventRepo} from "@repo/event.ts";
|
|
|
|
const { event }: { event: SWEvent } = $props();
|
|
|
|
let rootEvent: SWEvent = $state(event)
|
|
|
|
let eventName = $state(rootEvent.name);
|
|
let eventDeadline = $state(fromAbsolute(rootEvent.deadline, "Europe/Berlin"));
|
|
let eventStart = $state(fromAbsolute(rootEvent.start, "Europe/Berlin"));
|
|
let eventEnd = $state(fromAbsolute(rootEvent.end, "Europe/Berlin"));
|
|
let eventTeamSize = $state(rootEvent.maxTeamMembers);
|
|
let eventSchematicType = $state(rootEvent.schemType);
|
|
let eventPublicsOnly = $state(rootEvent.publicSchemsOnly);
|
|
|
|
let dirty = $derived(eventName !== rootEvent.name ||
|
|
eventDeadline.toDate().getTime() !== rootEvent.deadline ||
|
|
eventStart.toDate().getTime() !== rootEvent.start ||
|
|
eventEnd.toDate().getTime() !== rootEvent.end ||
|
|
eventTeamSize !== rootEvent.maxTeamMembers ||
|
|
eventSchematicType !== rootEvent.schemType ||
|
|
eventPublicsOnly !== rootEvent.publicSchemsOnly);
|
|
|
|
async function updateEvent() {
|
|
rootEvent = await $eventRepo.updateEvent(event.id.toString(), {
|
|
name: eventName,
|
|
deadline: eventDeadline.toDate().getTime(),
|
|
start: eventStart.toDate().getTime(),
|
|
end: eventEnd.toDate().getTime(),
|
|
maxTeamMembers: eventTeamSize,
|
|
schemType: eventSchematicType,
|
|
publicSchemsOnly: eventPublicsOnly,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label for="event-name">Name</Label>
|
|
<Input id="event-name" bind:value={eventName} />
|
|
<Label>Deadline</Label>
|
|
<DateTimePicker bind:value={eventDeadline} />
|
|
<Label>Start</Label>
|
|
<DateTimePicker bind:value={eventStart} />
|
|
<Label>End</Label>
|
|
<DateTimePicker bind:value={eventEnd} />
|
|
<Label for="event-size">Teamsize</Label>
|
|
<Input id="event-size" bind:value={eventTeamSize} type="number" />
|
|
<Label>Schematic Type</Label>
|
|
<Popover>
|
|
<PopoverTrigger>
|
|
{#snippet child({ props })}
|
|
<Button
|
|
variant="outline"
|
|
class="justify-between"
|
|
{...props}
|
|
role="combobox"
|
|
>
|
|
{$schemTypes.find(value => value.db === eventSchematicType)?.name || eventSchematicType || "Select a schematic type..."}
|
|
<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
{/snippet}
|
|
</PopoverTrigger>
|
|
<PopoverContent class="p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search schematic types..." />
|
|
<CommandList>
|
|
<CommandEmpty>No schematic type found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{#each $schemTypes as type}
|
|
<CommandItem
|
|
value={type.db}
|
|
onSelect={() => {
|
|
eventSchematicType = type.db;
|
|
}}
|
|
>
|
|
<Check
|
|
class={cn(
|
|
"mr-2 size-4",
|
|
eventSchematicType !== type.db && "text-transparent"
|
|
)}
|
|
/>
|
|
{type.name}
|
|
</CommandItem>
|
|
{/each}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<Label for="event-publics">Publics Schematics Only</Label>
|
|
<Switch id="event-publics" bind:checked={eventPublicsOnly} />
|
|
<div class="flex flex-row justify-end border-t pt-2 gap-4">
|
|
<Button variant="destructive">Delete</Button>
|
|
<Button disabled={!dirty} onclick={updateEvent}>Update</Button>
|
|
</div>
|
|
</div> |