From a72dd2124dd25aeaffb0f190e0e8a0d1259a709a Mon Sep 17 00:00:00 2001
From: Chaoscaot <chaos@chaoscaot.de>
Date: Thu, 14 Dec 2023 22:14:41 +0100
Subject: [PATCH] Adjustments

---
 src/components/PostComponent.astro            |  2 +-
 src/components/dashboard/SchematicList.svelte | 63 +++++++++++++++++--
 .../dashboard/SchematicListTile.svelte        | 33 +++++-----
 src/pages/announcements/[...slug].astro       |  2 +-
 4 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/src/components/PostComponent.astro b/src/components/PostComponent.astro
index 3e5fdca..46f1dd0 100644
--- a/src/components/PostComponent.astro
+++ b/src/components/PostComponent.astro
@@ -28,7 +28,7 @@ const { post } = Astro.props as Props;
                 year: "numeric"
             }).format(post.data.created)}</P>
             <P>{post.data.description}</P>
-            <div>
+            <div class="mt-1">
                 {post.data.tags.map((tag) => (
                         <TagComponent tag={tag} />
                 ))}
diff --git a/src/components/dashboard/SchematicList.svelte b/src/components/dashboard/SchematicList.svelte
index 0441153..a7fb60a 100644
--- a/src/components/dashboard/SchematicList.svelte
+++ b/src/components/dashboard/SchematicList.svelte
@@ -19,9 +19,15 @@
 
 <script lang="ts">
     import {t} from "astro-i18n";
-    import {ChevronDoubleRightOutline, FolderOutline, HomeOutline, InfoCircleOutline} from "flowbite-svelte-icons";
+    import {
+        ChevronDoubleRightOutline,
+        ChevronLeftOutline, ChevronRightOutline,
+        FolderOutline,
+        HomeOutline,
+        InfoCircleOutline
+    } from "flowbite-svelte-icons";
     import SchematicListTile from "./SchematicListTile.svelte";
-    import {Breadcrumb, BreadcrumbItem, Tooltip} from "flowbite-svelte";
+    import {Breadcrumb, BreadcrumbItem, Pagination, Tooltip} from "flowbite-svelte";
     import {createEventDispatcher} from "svelte";
     import type {SchematicList} from "../types/schem.ts";
     import SchematicInfo from "./SchematicInfo.svelte";
@@ -44,6 +50,26 @@
             return () => infoModalId = id
         }
     }
+
+    let page = 0;
+    $: maxPage = Math.ceil(schematics.schematics.length / 10);
+    $: pagedSchematics = schematics.schematics.slice(page * 10, (page + 1) * 10);
+
+    $: pages = new Array(maxPage).fill(0)
+        .map((_, i) => i + 1)
+        .slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
+        .map(i => ({
+            name: i.toString(),
+            active: i === page + 1,
+            i: i - 1
+        }));
+
+    const previous = () => {
+        page = Math.max(page - 1, 0);
+    };
+    const next = () => {
+        page = Math.min(page + 1, maxPage - 1);
+    };
 </script>
 
 <div class="flex justify-between">
@@ -59,7 +85,10 @@
                 <svelte:fragment slot="icon">
                     <ChevronDoubleRightOutline class="w-4 h-4 mx-2 dark:text-white" />
                 </svelte:fragment>
-                <span on:click={() => dispatch("to", {id: bread.id})} class="hover:underline hover:cursor-pointer text-2xl">{bread.name}</span>
+                <span on:click={() => {
+                    page = 0;
+                    dispatch("to", {id: bread.id});
+                }} class="hover:underline hover:cursor-pointer text-2xl">{bread.name}</span>
             </BreadcrumbItem>
         {/each}
     </Breadcrumb>
@@ -93,8 +122,10 @@
     {#if schematics.breadcrumbs.length !== 0}
         <tr on:click|preventDefault={() => {
                             if (schematics.breadcrumbs.length === 1) {
+                                page = 0;
                                 dispatch("reset")
                             } else {
+                                page = 0;
                                 dispatch("to", {id: schematics.breadcrumbs[schematics.breadcrumbs.length - 2].id})
                             }
                         }}>
@@ -109,12 +140,36 @@
             <th></th>
         </tr>
     {/if}
-    {#each schematics.schematics as schem}
+    {#each pagedSchematics as schem}
         <SchematicListTile schem={schem} players={schematics.players} on:click={schemListClick(schem.type == null, schem.id)} />
     {/each}
     </tbody>
 </table>
 
+<div class="w-full flex justify-center mt-4">
+    <ul class="inline-flex">
+        <li>
+            <button on:click={previous} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
+                <span class="sr-only">Previous</span>
+                <ChevronLeftOutline class="w-3 h-3" />
+            </button>
+        </li>
+        {#each pages as p}
+            <li>
+                <button on:click={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-gray={!p.active}>
+                    <span>{p.name}</span>
+                </button>
+            </li>
+        {/each}
+        <li>
+            <button on:click={next} class="btn btn-gray h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
+                <span class="sr-only">Next</span>
+                <ChevronRightOutline class="w-3 h-3" />
+            </button>
+        </li>
+    </ul>
+</div>
+
 <UploadModal bind:open={uploadOpen} on:refresh />
 
 {#if infoModalId !== null}
diff --git a/src/components/dashboard/SchematicListTile.svelte b/src/components/dashboard/SchematicListTile.svelte
index 8c7c7e0..732f332 100644
--- a/src/components/dashboard/SchematicListTile.svelte
+++ b/src/components/dashboard/SchematicListTile.svelte
@@ -52,20 +52,25 @@
         month: "2-digit",
         year: "numeric"
     }).format(dayjs(schem.lastUpdate).utc(false).toDate())}</th>
-    <th>
-        {#if schem.replaceColor}
-            <CheckSolid class="text-green-500" />
-        {:else}
-            <XCircleOutline class="text-red-500" />
-        {/if}
-    </th>
-    <th>
-        {#if schem.allowReplay}
-            <CheckSolid class="text-green-500" />
-        {:else}
-            <XCircleOutline class="text-red-500" />
-        {/if}
-    </th>
+    {#if schem.type != null}
+        <th>
+            {#if schem.replaceColor}
+                <CheckSolid class="text-green-500" />
+            {:else}
+                <XCircleOutline class="text-red-500" />
+            {/if}
+        </th>
+        <th>
+            {#if schem.allowReplay}
+                <CheckSolid class="text-green-500" />
+            {:else}
+                <XCircleOutline class="text-red-500" />
+            {/if}
+        </th>
+    {:else}
+        <th></th>
+        <th></th>
+    {/if}
 </tr>
 
 <style lang="scss">
diff --git a/src/pages/announcements/[...slug].astro b/src/pages/announcements/[...slug].astro
index a22eb8e..8219ef2 100644
--- a/src/pages/announcements/[...slug].astro
+++ b/src/pages/announcements/[...slug].astro
@@ -42,7 +42,7 @@ const { Content } = await post.render();
 <PageLayout title={post.data.title}>
     <article>
         <h1 class="text-4xl mb-0">{post.data.title}</h1>
-        <h5 class="flex items-center mt-0 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
+        <h5 class="flex items-center mt-2 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
                 <TagComponent tag={tag} />
         ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
             day: 'numeric',