Update
This commit is contained in:
@@ -31,8 +31,8 @@
|
||||
Tooltip
|
||||
} from "flowbite-svelte";
|
||||
import {
|
||||
ArrowsRepeatSolid, CalendarWeekOutline,
|
||||
PlusSolid, ProfileCardOutline, TrashBinOutline, UsersGroupOutline,
|
||||
ArrowsRepeatOutline, CalendarWeekOutline,
|
||||
PlusOutline, ProfileCardOutline, TrashBinOutline, UsersGroupOutline,
|
||||
} from "flowbite-svelte-icons";
|
||||
import FightCard from "./FightCard.svelte";
|
||||
import CreateFightModal from "./modals/CreateFightModal.svelte";
|
||||
@@ -44,19 +44,23 @@
|
||||
|
||||
dayjs.extend(duration);
|
||||
|
||||
export let data: ExtendedEvent;
|
||||
interface Props {
|
||||
data: ExtendedEvent;
|
||||
}
|
||||
|
||||
let createOpen = false;
|
||||
let fights = data.fights;
|
||||
let selectedFights: Set<EventFight> = new Set();
|
||||
let { data = $bindable() }: Props = $props();
|
||||
|
||||
$: groupsMap = new Set(fights.map(fight => fight.group));
|
||||
$: groupedFights = Array.from(groupsMap).map(group => {
|
||||
let createOpen = $state(false);
|
||||
let fights = $state(data.fights);
|
||||
let selectedFights: Set<EventFight> = $state(new Set());
|
||||
|
||||
let groupsMap = $derived(new Set(fights.map(fight => fight.group)));
|
||||
let groupedFights = $derived(Array.from(groupsMap).map(group => {
|
||||
return {
|
||||
group: group,
|
||||
fights: fights.filter(fight => fight.group === group)
|
||||
};
|
||||
});
|
||||
}));
|
||||
|
||||
function cycleSelect() {
|
||||
if (selectedFights.size === fights.length) {
|
||||
@@ -81,7 +85,7 @@
|
||||
selectedFights = selectedFights;
|
||||
}
|
||||
|
||||
let deleteOpen = false;
|
||||
let deleteOpen = $state(false);
|
||||
|
||||
async function deleteFights() {
|
||||
for (const fight of selectedFights) {
|
||||
@@ -92,14 +96,14 @@
|
||||
deleteOpen = false;
|
||||
}
|
||||
|
||||
let spectatePortOpen = false;
|
||||
$: selectPlayers = $players.map(player => {
|
||||
let spectatePortOpen = $state(false);
|
||||
let selectPlayers = $derived($players.map(player => {
|
||||
return {
|
||||
name: player.name,
|
||||
value: player.uuid
|
||||
};
|
||||
}).sort((a, b) => a.name.localeCompare(b.name));
|
||||
let spectatePort = "";
|
||||
}).sort((a, b) => a.name.localeCompare(b.name)));
|
||||
let spectatePort = $state("");
|
||||
|
||||
async function updateSpectatePort() {
|
||||
for (const fight of selectedFights) {
|
||||
@@ -120,11 +124,11 @@
|
||||
spectatePortOpen = false;
|
||||
}
|
||||
|
||||
let groupChangeOpen = false;
|
||||
let group = "";
|
||||
let groupSearch = "";
|
||||
let groupChangeOpen = $state(false);
|
||||
let group = $state("");
|
||||
let groupSearch = $state("");
|
||||
|
||||
$: selectableGroups = [{
|
||||
let selectableGroups = $derived([{
|
||||
name: "Keine",
|
||||
value: ""
|
||||
}, {
|
||||
@@ -135,7 +139,7 @@
|
||||
name: group,
|
||||
value: group
|
||||
};
|
||||
}).sort((a, b) => a.name.localeCompare(b.name))];
|
||||
}).sort((a, b) => a.name.localeCompare(b.name))]);
|
||||
|
||||
async function updateGroup() {
|
||||
for (const fight of selectedFights) {
|
||||
@@ -157,11 +161,11 @@
|
||||
groupChangeOpen = false;
|
||||
}
|
||||
|
||||
$: minTime = dayjs(Math.min(...fights.map(fight => fight.start))).utc(true);
|
||||
let changeTimeOpen = false;
|
||||
let changedTime = fights.length != 0 ? dayjs(Math.min(...fights.map(fight => fight.start)))?.utc(true)?.toISOString()?.slice(0, -1) : undefined;
|
||||
let minTime = $derived(dayjs(Math.min(...fights.map(fight => fight.start))).utc(true));
|
||||
let changeTimeOpen = $state(false);
|
||||
let changedTime = $state(fights.length != 0 ? dayjs(Math.min(...fights.map(fight => fight.start)))?.utc(true)?.toISOString()?.slice(0, -1) : undefined);
|
||||
|
||||
$: deltaTime = dayjs.duration(dayjs(changedTime).utc(true).diff(minTime));
|
||||
let deltaTime = $derived(dayjs.duration(dayjs(changedTime).utc(true).diff(minTime)));
|
||||
|
||||
async function updateStartTime() {
|
||||
for (const fight of selectedFights) {
|
||||
@@ -243,10 +247,12 @@
|
||||
|
||||
<Modal bind:open={deleteOpen} title="Delete {selectedFights.size} Fights" autoclose size="sm">
|
||||
<p>Are you sure you want to delete {selectedFights.size} fights?</p>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button color="red" class="ml-auto" on:click={deleteFights}>Delete</Button>
|
||||
<Button on:click={() => deleteOpen = false} color="alternative">Cancel</Button>
|
||||
</svelte:fragment>
|
||||
{#snippet footer()}
|
||||
|
||||
<Button color="red" class="ml-auto" on:click={deleteFights}>Delete</Button>
|
||||
<Button on:click={() => deleteOpen = false} color="alternative">Cancel</Button>
|
||||
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<Modal bind:open={spectatePortOpen} title="Change Kampfleiter" size="sm">
|
||||
@@ -254,10 +260,12 @@
|
||||
<Label for="fight-kampf">Kampfleiter</Label>
|
||||
<TypeAheadSearch items={selectPlayers} bind:selected={spectatePort}></TypeAheadSearch>
|
||||
</div>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button class="ml-auto" on:click={updateSpectatePort}>Change</Button>
|
||||
<Button on:click={() => spectatePortOpen = false} color="alternative">Cancel</Button>
|
||||
</svelte:fragment>
|
||||
{#snippet footer()}
|
||||
|
||||
<Button class="ml-auto" on:click={updateSpectatePort}>Change</Button>
|
||||
<Button on:click={() => spectatePortOpen = false} color="alternative">Cancel</Button>
|
||||
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<Modal bind:open={groupChangeOpen} title="Change Group" size="sm">
|
||||
@@ -266,32 +274,38 @@
|
||||
<TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
|
||||
all></TypeAheadSearch>
|
||||
</div>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button class="ml-auto" on:click={updateGroup}>Change</Button>
|
||||
<Button on:click={() => groupChangeOpen = false} color="alternative">Cancel</Button>
|
||||
</svelte:fragment>
|
||||
{#snippet footer()}
|
||||
|
||||
<Button class="ml-auto" on:click={updateGroup}>Change</Button>
|
||||
<Button on:click={() => groupChangeOpen = false} color="alternative">Cancel</Button>
|
||||
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<Modal bind:open={changeTimeOpen} title="Change Start Time" size="sm">
|
||||
<div class="m-2">
|
||||
<Label for="fight-start">New Start Time:</Label>
|
||||
<Input id="fight-start" bind:value={changedTime} let:props>
|
||||
<Input id="fight-start" bind:value={changedTime} >
|
||||
{#snippet children({ props })}
|
||||
<input type="datetime-local" {...props} bind:value={changedTime}/>
|
||||
{/snippet}
|
||||
</Input>
|
||||
</div>
|
||||
<p>{deltaTime.asMilliseconds() < 0 ? '' : '+'}{("0" + deltaTime.hours()).slice(-2)}
|
||||
:{("0" + deltaTime.minutes()).slice(-2)}</p>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button class="ml-auto" on:click={updateStartTime}>Update</Button>
|
||||
<Button on:click={() => changeTimeOpen = false} color="alternative">Cancel</Button>
|
||||
</svelte:fragment>
|
||||
{#snippet footer()}
|
||||
|
||||
<Button class="ml-auto" on:click={updateStartTime}>Update</Button>
|
||||
<Button on:click={() => changeTimeOpen = false} color="alternative">Cancel</Button>
|
||||
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<SpeedDial>
|
||||
<SpeedDialButton name="Add" on:click={() => createOpen = true}>
|
||||
<PlusSolid/>
|
||||
<PlusOutline/>
|
||||
</SpeedDialButton>
|
||||
<SpeedDialButton name="Generate" href="#/event/{data.event.id}/generate">
|
||||
<ArrowsRepeatSolid/>
|
||||
<ArrowsRepeatOutline/>
|
||||
</SpeedDialButton>
|
||||
</SpeedDial>
|
||||
|
||||
Reference in New Issue
Block a user