Begin Display, Add View Transitions

src/components/Login.svelte

@@ -21,6 +21,7 @@
     import {l} from "@utils/util.ts";
     import {t} from "astro-i18n";
     import {get} from "svelte/store";
+    import {navigate} from "astro:transitions/client";
 
     let username: string = "";
     let pw: string = "";
@@ -45,7 +46,7 @@
             }
 
             tokenStore.set(auth);
-            window.location.href = l("/dashboard");
+            navigate(l("/dashboard"));
         } catch (e: any) {
             pw = "";
             error = t("login.error");

src/components/Navbar.svelte

@@ -105,7 +105,7 @@
                 </div>
             </div>
             -->
-            <a class="btn my-1" href={l("/login")}>
+            <a class="btn my-1" href={l("/login")} data-astro-reload>
                 <span class="btn__text">{t("navbar.links.account")}</span>
             </a>
         </div>

src/components/admin/App.svelte

@@ -46,6 +46,10 @@
             asyncComponent: () => import("./pages/Edit.svelte"),
             conditions: detail => get(tokenStore) != ""
         }),
+        "/display/:event": wrap({
+            asyncComponent: () => import("./pages/Display.svelte"),
+            conditions: detail => get(tokenStore) != ""
+        }),
         "*": wrap({asyncComponent: () => import("./pages/NotFound.svelte")})
     };
 

src/components/admin/pages/Display.svelte

@@ -0,0 +1,43 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 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 {eventRepo} from "@repo/event.ts";
+    import EventDisplay from "@components/admin/pages/display/EventDisplay.svelte";
+
+    export let params: { event: number };
+
+    let eventFuture = getEvent();
+
+    function getEvent() {
+        return $eventRepo.getEvent(params.event)
+    }
+
+    function refreshEvent() {
+        eventFuture = getEvent();
+    }
+</script>
+
+{#await eventFuture}
+    <p>Loading...</p>
+{:then event}
+    <EventDisplay {event} />
+{:catch error}
+    <p>{error.message}</p>
+{/await}

src/components/admin/pages/Edit.svelte

@@ -139,6 +139,10 @@
                     <ul>
                         {#if (selectedPath)}
                             {@const value = pagesMap.get(selectedPath) || []}
+                            {#if value.length === 0}
+                                <li class="p-4">No pages found</li>
+                                <li class="p-4">Select a path on the top</li>
+                            {/if}
                             {#each value as page}
                                 {@const nameRegexExec = nameRegex.exec(page.path)}
                                 {@const match = nameRegexExec ? nameRegexExec[0] : ""}

src/components/admin/pages/display/EventDisplay.svelte

@@ -0,0 +1,103 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 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 type {ExtendedEvent} from "@type/event.ts";
+    import {onMount} from "svelte";
+
+    export let event: ExtendedEvent;
+    export let group: string | null = null;
+
+    const scrollTime = 10000;
+
+    $: groupFights = event.fights.filter(fight => group === null || fight.group === group);
+
+    let clock = new Date();
+    let scrollContainer: HTMLDivElement;
+    let scroll = 0;
+
+    onMount(() => {
+        const interval = setInterval(() => {
+            clock = new Date();
+        }, 1000);
+        const scrollinterval = setInterval(() => {
+            if (scroll >= scrollTime / 10) {
+                if (scrollContainer.scrollHeight - scrollContainer.scrollTop === scrollContainer.clientHeight) {
+                    scrollContainer.scrollTo({
+                        top: 0,
+                        behavior: "smooth"
+                    })
+                } else {
+                    scrollContainer.scrollBy({
+                        top: scrollContainer.clientHeight,
+                        behavior: "smooth"
+                    })
+                }
+                scroll = 0;
+            } else {
+                scroll += 1;
+            }
+        }, 10);
+        return () => {
+            clearInterval(interval);
+            clearInterval(scrollinterval);
+        };
+    })
+</script>
+
+<div class="bg-black text-white h-screen w-screen p-4 flex flex-col">
+    <div class="w-full border rounded-xl flex flex-col">
+        <div class="flex justify-between p-2">
+            <h1 class="self-center">{event.event.name}</h1>
+            <h1 class="self-start">{new Intl.DateTimeFormat("de-DE", {hour: "2-digit", minute: "2-digit"}).format(clock)}</h1>
+        </div>
+        <div role="progressbar" class="w-full h-2 rounded-b-full overflow-hidden border-t">
+            <div class="h-full bg-white" style="width: {scroll / (scrollTime / 1000)}%;"></div>
+        </div>
+    </div>
+    <div class="flex mt-4 flex-col gap-96 overflow-y-scroll overflow-x-hidden" bind:this={scrollContainer}>
+        {#each groupFights as fight (fight.id)}
+            <div class="flex justify-between border rounded-xl p-2 mb-96">
+                <h1>{fight.blueTeam.name} vs {fight.redTeam.name}</h1>
+                {#if fight.ergebnis !== 0}
+                    {#if fight.ergebnis === 1}
+                        <h1>{fight.blueTeam.name} gewinnt</h1>
+                    {:else if fight.ergebnis === 2}
+                        <h1>{fight.redTeam.name} gewinnt</h1>
+                    {:else}
+                        <h1>Unentschieden</h1>
+                    {/if}
+                {:else}
+                    <h1>{new Intl.DateTimeFormat("de-DE", {day: "2-digit", month: "2-digit", "year": "2-digit", hour: "2-digit", minute: "2-digit"}).format(fight.start)}</h1>
+                {/if}
+            </div>
+        {/each}
+    </div>
+    <div class="flex-grow"></div>
+    <div class="w-full mt-4 flex justify-between border rounded-xl p-2 self-end">
+        <h1 class="self-center">{event.event.name}</h1>
+        <h1 class="self-start">{new Intl.DateTimeFormat("de-DE", {hour: "2-digit", minute: "2-digit"}).format(clock)}</h1>
+    </div>
+</div>
+
+<style lang="scss">
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+</style>

src/components/dashboard/Statistics.svelte

@@ -37,7 +37,7 @@
     <p>{t("dashboard.stats.playtime", {playtime: new Intl.NumberFormat(astroI18n.locale, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2
-        }).format(data.playtime)})}</p>
+        }).format(data.playtime)})}h</p>
     <p>{t("dashboard.stats.fights", {fights: data.fights})}</p>
     {#if user.perms.includes("CHECK")}
         <p>{t("dashboard.stats.checked", {checked: data.acceptedSchematics})}</p>