New Dashboard

src/components/moderator/pages/event/EventEdit.svelte

@@ -0,0 +1,128 @@
+<!--
+  -   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>