116 lines
4.4 KiB
Svelte
116 lines
4.4 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 {EditOutline, InboxSolid, TrashBinOutline} from "flowbite-svelte-icons";
|
|
import {Button, Checkbox, Modal, Toolbar, ToolbarButton} from "flowbite-svelte";
|
|
import type {EventFight, ExtendedEvent} from "../../../types/event.js";
|
|
import FightEditModal from "./modals/FightEditModal.svelte";
|
|
import {createEventDispatcher, onMount} from "svelte";
|
|
import {fightRepo} from "../../../repo/repo";
|
|
import {isWide} from "../../../stores/stores";
|
|
|
|
export let fight: EventFight;
|
|
export let data: ExtendedEvent;
|
|
export let i: number;
|
|
export let selected: boolean = false;
|
|
export let hideEdit: boolean = false;
|
|
|
|
let deleteOpen = false;
|
|
let editOpen = false;
|
|
|
|
let dispatcher = createEventDispatcher();
|
|
|
|
function dispatchSelect() {
|
|
setTimeout(() => {
|
|
if (!deleteOpen && !editOpen) {
|
|
dispatcher('select');
|
|
}
|
|
}, 1);
|
|
}
|
|
|
|
async function deleteFight() {
|
|
await $fightRepo.deleteFight(fight.id);
|
|
dispatcher('update');
|
|
}
|
|
</script>
|
|
|
|
<div class="flex h-16 {i % 2 === 0 ? 'bg-gray-800' : ''} mx-4 mt-6 rounded border {selected ? 'border-orange-700' : 'border-gray-700'} p-2 hover:bg-gray-700 transition justify-between shadow-lg cursor-pointer"
|
|
on:click={dispatchSelect} on:keypress={dispatchSelect} role="checkbox" aria-checked={selected} tabindex="0"
|
|
>
|
|
<div class="flex">
|
|
<div class="flex flex-col">
|
|
<div>
|
|
<span>{$isWide ? fight.blueTeam.name : fight.blueTeam.kuerzel}</span>
|
|
vs.
|
|
<span>{$isWide ? fight.redTeam.name : fight.redTeam.kuerzel}</span>
|
|
</div>
|
|
{#if (fight.ergebnis === 3)}
|
|
<span class="ml-2">Unentschieden</span>
|
|
{:else if (fight.ergebnis !== 0)}
|
|
<span class="ml-2">{fight.ergebnis === 1 ? 'Sieger: ' + ($isWide ? fight.blueTeam.name : fight.blueTeam.kuerzel) : 'Sieger: ' + ($isWide ? fight.redTeam.name : fight.redTeam.kuerzel)}</span>
|
|
{:else}
|
|
<span class="ml-2">{$isWide ? 'Noch nicht gespielt' : 'kommend'}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="mr-2 flex flex-col">
|
|
<span>
|
|
{new Intl.DateTimeFormat(Intl.Locale.name, {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
}).format(fight.start)}
|
|
</span>
|
|
<span>
|
|
{new Intl.DateTimeFormat(Intl.Locale.name, {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: '2-digit'
|
|
}).format(fight.start)}
|
|
</span>
|
|
</div>
|
|
{#if !hideEdit}
|
|
<Toolbar embedded>
|
|
<ToolbarButton on:click={() => editOpen = true}>
|
|
<EditOutline/>
|
|
</ToolbarButton>
|
|
<ToolbarButton color="red" on:click={() => deleteOpen = true}>
|
|
<TrashBinOutline />
|
|
</ToolbarButton>
|
|
</Toolbar>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<Modal title="Delete {fight.blueTeam.name} vs. {fight.redTeam.name}" bind:open={deleteOpen} autoclose outsideclose size="xs">
|
|
<div class="text-center">
|
|
<p class="mb-5">
|
|
Are you sure you want to delete this fight?
|
|
</p>
|
|
<Button color="red" on:click={deleteFight}>Delete Fight</Button>
|
|
<Button color="alternative">Cancel</Button>
|
|
</div>
|
|
</Modal>
|
|
|
|
{#if (editOpen)}
|
|
<FightEditModal {fight} bind:data bind:open={editOpen} on:update/>
|
|
{/if}
|