Fixes and Changes

src/components/dashboard/SchematicList.svelte

@@ -20,9 +20,7 @@
 <script lang="ts">
     import {t} from "astro-i18n";
     import {
-        ChevronDoubleLeftOutline,
         ChevronDoubleRightOutline,
-        ChevronLeftOutline, ChevronRightOutline,
         FolderOutline,
         HomeOutline,
         InfoCircleOutline
@@ -35,6 +33,7 @@
     import UploadModal from "./UploadModal.svelte";
     import type {Player} from "@type/data.ts";
     import SWButton from "../styled/SWButton.svelte";
+    import SWPaginator from "@components/styled/SWPaginator.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -53,24 +52,9 @@
     }
 
     let page = 0;
-    $: maxPage = Math.ceil(schematics.schematics.length / 10);
-    $: pagedSchematics = schematics.schematics.slice(page * 10, (page + 1) * 10);
+    $: maxPage = Math.ceil(schematics.schematics.length / 15);
+    $: pagedSchematics = schematics.schematics.slice(page * 15, (page + 1) * 15);
 
-    $: 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">
@@ -147,41 +131,7 @@
     </tbody>
 </table>
 
-<div class="w-full flex justify-center mt-4">
-    <ul class="inline-flex">
-        <li>
-            <button on:click={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
-                <span class="sr-only">Next</span>
-                <ChevronDoubleLeftOutline class="w-3 h-3" />
-            </button>
-        </li>
-        <li>
-            <button on:click={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-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-neutral={!p.active}>
-                    <span>{p.name}</span>
-                </button>
-            </li>
-        {/each}
-        <li>
-            <button on:click={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
-                <span class="sr-only">Next</span>
-                <ChevronRightOutline class="w-3 h-3" />
-            </button>
-        </li>
-        <li>
-            <button on:click={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
-                <span class="sr-only">Next</span>
-                <ChevronDoubleRightOutline class="w-3 h-3" />
-            </button>
-        </li>
-    </ul>
-</div>
+<SWPaginator bind:page maxPage={maxPage} />
 
 <UploadModal bind:open={uploadOpen} on:refresh />
 

src/components/styled/SWPaginator.svelte

@@ -0,0 +1,89 @@
+<!--
+  -   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 {
+        ChevronDoubleLeftOutline,
+        ChevronDoubleRightOutline,
+        ChevronLeftOutline,
+        ChevronRightOutline,
+    } from "flowbite-svelte-icons";
+
+    export let page: number = 0;
+    export let maxPage: number;
+
+    $: 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
+        }));
+
+    export let firstUrl: string = "#";
+    export let lastUrl: string = "#";
+    export let previousUrl: string = "#";
+    export let nextUrl: string = "#";
+    export let pagesUrl: (i: number) => string = () => "#";
+
+    const previous = () => {
+        page = Math.max(page - 1, 0);
+    };
+
+    const next = () => {
+        page = Math.min(page + 1, maxPage - 1);
+    };
+</script>
+
+<div class="w-full flex justify-center mt-4">
+    <ul class="inline-flex flex-wrap">
+        <li>
+            <a href={firstUrl} on:click|preventDefault={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
+                <span class="sr-only">Next</span>
+                <ChevronDoubleLeftOutline class="w-3 h-3" />
+            </a>
+        </li>
+        <li>
+            <a href={previousUrl} on:click|preventDefault={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
+                <span class="sr-only">Previous</span>
+                <ChevronLeftOutline class="w-3 h-3" />
+            </a>
+        </li>
+        {#each pages as p}
+            <li>
+                <a href={pagesUrl(p.i)} on:click|preventDefault={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
+                    <span>{p.name}</span>
+                </a>
+            </li>
+        {/each}
+        <li>
+            <a href={nextUrl} on:click|preventDefault={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
+                <span class="sr-only">Next</span>
+                <ChevronRightOutline class="w-3 h-3" />
+            </a>
+        </li>
+        <li>
+            <a href={lastUrl} on:click|preventDefault={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
+                <span class="sr-only">Next</span>
+                <ChevronDoubleRightOutline class="w-3 h-3" />
+            </a>
+        </li>
+    </ul>
+</div>