Refactor FightTable and GroupTable components to use numeric group identifiers; enhance event handling in FightEdit and EventFightList; add new Pages management UI with editor tabs; improve event data handling and display logic; update event types to include hasFinished status; optimize announcement page rendering and structure.

src/pages/ankuendigungen/[...slug].astro

@@ -1,29 +1,29 @@
 ---
-import {astroI18n, createGetStaticPaths} from "astro-i18n";
-import {getCollection, CollectionEntry} from "astro:content";
+import { astroI18n, createGetStaticPaths } from "astro-i18n";
+import { getCollection, CollectionEntry } from "astro:content";
 import PageLayout from "@layouts/PageLayout.astro";
-import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons";
+import { TagSolid, CalendarMonthSolid } from "flowbite-svelte-icons";
 import TagComponent from "@components/TagComponent.astro";
 import LanguageWarning from "@components/LanguageWarning.astro";
-import {SEO} from "astro-seo";
+import { SEO } from "astro-seo";
 import localBau from "@images/2022-03-28_13.18.25.png";
-import {getImage, Image} from "astro:assets";
+import { getImage, Image } from "astro:assets";
 import "@styles/table.css";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
-    const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
+    const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);
 
-    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
+    const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
 
-    germanPosts.forEach(value => {
-        if (posts.find(post => post.data.key === value.data.key)) {
+    germanPosts.forEach((value) => {
+        if (posts.find((post) => post.data.key === value.data.key)) {
             return;
         } else {
             posts.push(value);
         }
     });
 
-    return posts.map(value => ({
+    return posts.map((value) => ({
         params: {
             slug: value.slug.split("/").slice(1).join("/"),
         },
@@ -35,12 +35,12 @@ export const getStaticPaths = createGetStaticPaths(async () => {
 });
 
 interface Props {
-    post: CollectionEntry<"announcements">,
-    german: boolean
+    post: CollectionEntry<"announcements">;
+    german: boolean;
 }
 
-const {post, german} = Astro.props;
-const {Content} = await post.render();
+const { post, german } = Astro.props;
+const { Content } = await post.render();
 
 const ogImage = await getImage({
     src: post.data.image || localBau,
@@ -52,64 +52,66 @@ const ogImage = await getImage({
 
 <PageLayout title={post.data.title} description={post.data.description}>
     <Fragment slot="head">
-        <SEO openGraph={{
-            basic: {
-                title: post.data.title,
-                description: post.data.description,
-                type: "article",
-                image: Astro.url.origin + ogImage.src,
-            },
-            article: {
-                publishedTime: post.data.created.toISOString(),
-                authors: [post.data.author ?? "SteamWar.de"],
-                tags: post.data.tags,
-            },
-        }}
+        <SEO
+            openGraph={{
+                basic: {
+                    title: post.data.title,
+                    description: post.data.description,
+                    type: "article",
+                    image: Astro.url.origin + ogImage.src,
+                },
+                article: {
+                    publishedTime: post.data.created.toISOString(),
+                    authors: [post.data.author ?? "SteamWar.de"],
+                    tags: post.data.tags,
+                },
+            }}
         />
     </Fragment>
     <article>
         <div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
-            {post.data.image && (
-                <div class="absolute top-0 left-0 w-full aspect-video flex justify-center">
-                    <Image src={post.data.image} height="1080" alt="" transition:name={post.data.title + "-image"}
-                        class="rounded-2xl linear-fade object-contain h-full"/>
-                </div>
-            )}
+            {
+                post.data.image && (
+                    <div class="absolute top-0 left-0 w-full aspect-video flex justify-center">
+                        <Image src={post.data.image} height="1080" alt="" transition:name={post.data.title + "-image"} class="rounded-2xl linear-fade object-contain h-full" />
+                    </div>
+                )
+            }
             <div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
                 <h1 class="text-4xl mb-0" transition:name={post.data.title + "-title"}>{post.data.title}</h1>
                 <div class="flex items-center mt-2 text-neutral-800 dark:text-neutral-300">
-                    <TagSolid class="w-4 h-4 mr-2"/>
+                    <TagSolid class="w-4 h-4 mr-2" />
                     <div transition:name={post.data.title + "-tags"}>
-                        {post.data.tags.map(tag => (
-                            <TagComponent tag={tag} />
-                        ))}
+                        {post.data.tags.map((tag) => <TagComponent tag={tag} />)}
                     </div>
-                    <CalendarMonthSolid class="w-4 h-4 mr-2"/>
-                    {Intl.DateTimeFormat(astroI18n.locale, {
-                        day: "numeric",
-                        month: "short",
-                        year: "numeric",
-                    }).format(post.data.created)}
-                    {post.data.author && (
-                        <Fragment>
-                            <Image src={`https://vzge.me/face/64/${post.data.author}`} alt={post.data.author} width={16} height={16} class="mx-1" />
-                            {post.data.author}
-                        </Fragment>
-                    )}
+                    <CalendarMonthSolid class="w-4 h-4 mr-2" />
+                    {
+                        Intl.DateTimeFormat(astroI18n.locale, {
+                            day: "numeric",
+                            month: "short",
+                            year: "numeric",
+                        }).format(post.data.created)
+                    }
+                    {
+                        post.data.author && (
+                            <Fragment>
+                                <Image src={`https://vzge.me/face/64/${post.data.author}`} alt={post.data.author} width={16} height={16} class="mx-1" />
+                                {post.data.author}
+                            </Fragment>
+                        )
+                    }
                 </div>
             </div>
         </div>
-        {german && (
-            <LanguageWarning/>
-        )}
-        <Content/>
+        {german && <LanguageWarning />}
+        <Content />
         <script>
             import FightTable from "@components/FightTable.svelte";
-            import {get} from "svelte/store";
+            import { get } from "svelte/store";
             import GroupTable from "@components/GroupTable.svelte";
-            import {eventRepo} from "../../components/repo/event";
-            import type {ExtendedEvent} from "@type/event";
-            import {mount} from "svelte";
+            import { eventRepo } from "../../components/repo/event";
+            import type { ExtendedEvent } from "@type/event";
+            import { mount } from "svelte";
 
             const eventMounts: Map<string, Promise<ExtendedEvent>> = new Map();
 
@@ -117,12 +119,12 @@ const ogImage = await getImage({
                 connectedCallback(): void {
                     loadEvent(this.dataset["event"]!);
                     const rows = Number.parseInt(this.dataset["rows"]!);
-                    eventMounts.get(this.dataset["event"]!)!.then(ev => {
+                    eventMounts.get(this.dataset["event"]!)!.then((ev) => {
                         mount(FightTable, {
                             target: this,
                             props: {
                                 event: ev,
-                                group: this.dataset["group"],
+                                group: this.dataset["group"] ? Number.parseInt(this.dataset["group"]!) : undefined,
                                 rows: !isNaN(rows) ? rows : 1,
                             },
                         });
@@ -134,12 +136,12 @@ const ogImage = await getImage({
                 connectedCallback(): void {
                     loadEvent(this.dataset["event"]!);
                     const rows = Number.parseInt(this.dataset["rows"]!);
-                    eventMounts.get(this.dataset["event"]!)!.then(ev => {
+                    eventMounts.get(this.dataset["event"]!)!.then((ev) => {
                         mount(GroupTable, {
                             target: this,
                             props: {
                                 event: ev,
-                                group: this.dataset["group"],
+                                group: this.dataset["group"] ? Number.parseInt(this.dataset["group"]!) : undefined,
                                 rows: !isNaN(rows) ? rows : 1,
                             },
                         });
@@ -163,11 +165,12 @@ const ogImage = await getImage({
 
 <style is:global>
     article {
-        fight-table, group-table {
+        fight-table,
+        group-table {
             display: contents;
         }
 
-        >:not(table) {
+        > :not(table) {
             all: revert;
         }
 
@@ -185,4 +188,4 @@ const ogImage = await getImage({
     .linear-fade {
         mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
     }
-</style>
+</style>