Files
Website/src/components/admin/pages/home/CreateEventModal.svelte
2023-12-25 21:54:40 +01:00

90 lines
3.1 KiB
Svelte

<!--
- This file is a part of the SteamWar software.
-
- Copyright (C) 2023 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 {Button, Input, Label, Modal} from "flowbite-svelte";
import {createEventDispatcher} from "svelte";
import ErrorModal from "../../components/ErrorModal.svelte";
import {eventRepo} from "@repo/repo.ts";
import dayjs from "dayjs";
export let open = false;
const dispatch = createEventDispatcher();
let errorOpen = false;
let error: any = undefined;
let eventName = "";
let start = "";
$: startDate = dayjs(start)
let end = "";
$: endDate = dayjs(end)
$: canSubmit = eventName.length > 0 && startDate.isValid() && endDate.isValid() && startDate.isBefore(endDate)
async function createEvent() {
try {
await $eventRepo.createEvent({
name: eventName,
start: startDate,
end: endDate
})
dispatch("create");
open = false;
} catch (e: any) {
error = e;
errorOpen = true;
open = false;
}
}
function clear() {
eventName = "";
start = "";
end = "";
}
</script>
<Modal bind:open title="Create Event" outsideclose size="sm" on:hide={clear}>
<div class="flex flex-col place-items-center text-center">
<div class="w-2/3 m-2">
<Label for="event-create-name">Event Name</Label>
<Input id="event-create-name" bind:value={eventName} placeholder="Name..."></Input>
</div>
<div class="w-2/3 m-2">
<Label for="event-create-start">End</Label>
<Input id="event-create-start" bind:value={start} let:props>
<input type="datetime-local" {...props} bind:value={start}/>
</Input>
</div>
<div class="w-2/3 m-2">
<Label for="event-create-start">End</Label>
<Input id="event-create-start" bind:value={end} let:props>
<input type="datetime-local" {...props} bind:value={end}/>
</Input>
</div>
</div>
<svelte:fragment slot="footer">
<Button color="alternative" on:click={() => open = false} class="mr-auto">Cancel</Button>
<Button on:click={createEvent} disabled={!canSubmit}>Create</Button>
</svelte:fragment>
</Modal>
<ErrorModal bind:open={errorOpen} bind:error={error}/>