From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 4 Jul 2025 13:53:37 +0000 (+0000)
Subject: frontend: Create a store and listing component for mirrors
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c1dfb847316b868770beec8bfb90cf64afff01b1;p=pbs.git

frontend: Create a store and listing component for mirrors

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/api/mirrors.ts b/frontend/src/api/mirrors.ts
index a082f335..b0c5301b 100644
--- a/frontend/src/api/mirrors.ts
+++ b/frontend/src/api/mirrors.ts
@@ -1,5 +1,45 @@
 import api from "@/api"
-import type { Mirror } from "@/types/Mirror";
+
+export interface Mirror {
+	// Hostanme
+	hostname: string;
+
+	// Path
+	path: string;
+
+	// Owner
+	owner: string;
+
+	// Contact
+	contact: string;
+
+	// Notes
+	notes: string;
+
+	// Country Code
+	country_code: string;
+
+	// ASN
+	asn: number;
+
+	// AS Name
+	as_name: string | null;
+
+	// Supports IPv6?
+	supports_ipv6: boolean;
+
+	// Supports IPv4?
+	supports_ipv4: boolean;
+
+	// Last Check Was Successful?
+	last_check_success: boolean;
+
+	// Last Check At
+	last_check_at: Date;
+
+	// Last Sync At
+	last_sync_at: Date;
+}
 
 // Fetch all mirrors
 export async function fetchMirrors(): Promise<Mirror[]> {
diff --git a/frontend/src/components/MirrorList.vue b/frontend/src/components/MirrorList.vue
new file mode 100644
index 00000000..a907bd2f
--- /dev/null
+++ b/frontend/src/components/MirrorList.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+	import { onMounted } from 'vue'
+	import { useMirrorStore } from '@/stores/mirrors'
+	import { getCountryName } from "@/utils/i18n"
+
+	// Components
+	import Box from "@/components/Box.vue"
+	import Loader from "@/components/Loader.vue"
+	import Notification from "@/components/Notification.vue"
+	import Tags from "@/components/Tags.vue"
+	import Tag from "@/components/Tag.vue"
+
+	// Load the store
+	const mirrorStore = useMirrorStore()
+
+	// Load all mirrors
+	onMounted(() => {
+		mirrorStore.loadMirrors()
+	})
+</script>
+
+<template>
+	<Loader v-if="mirrorStore.loading" />
+
+	<Notification v-else-if="mirrorStore.error" is-danger>
+		{{ mirrorStore.error }}
+	</Notification>
+
+	<Box v-else v-for="mirror in mirrorStore.mirrors" :key="mirror.hostname"
+			:title="mirror.hostname" :subtitle="mirror.owner">
+		<div class="level">
+			<!-- Show the country -->
+			<div class="level-item">
+				{{ getCountryName(mirror.country_code) }}
+			</div>
+
+			<!-- Show tags of which protocols are supported -->
+			<div class="level-item">
+				<Tags>
+					<Tag v-if="mirror.supports_ipv6" :title="$t('Supports IPv6')" is-success>
+						{{ $t('IPv6') }}
+					</Tag>
+
+					<Tag v-if="mirror.supports_ipv4" :title="$t('Supports IPv4')" is-success>
+						{{ $t('IPv4') }}
+					</Tag>
+				</Tags>
+			</div>
+		</div>
+	</Box>
+</template>
diff --git a/frontend/src/stores/mirrors.ts b/frontend/src/stores/mirrors.ts
new file mode 100644
index 00000000..f76ef9b6
--- /dev/null
+++ b/frontend/src/stores/mirrors.ts
@@ -0,0 +1,27 @@
+import { defineStore } from "pinia"
+
+// Fetch the mirror API
+import type { Mirror } from "@/api/mirrors"
+import { fetchMirrors } from "@/api/mirrors"
+
+export const useMirrorStore = defineStore("mirrors", {
+	state: () => ({
+		mirrors: [] as Mirror[],
+		loading: false,
+		error: null as string | null,
+	}),
+
+	actions: {
+		async loadMirrors() {
+			this.loading = true
+			this.error = null
+			try {
+				this.mirrors = await fetchMirrors()
+			} catch (err) {
+				this.error = "Failed to load mirrors"
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+})
diff --git a/frontend/src/types/Mirror.ts b/frontend/src/types/Mirror.ts
deleted file mode 100644
index 7bbb6905..00000000
--- a/frontend/src/types/Mirror.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-	Defines a Mirror
-*/
-export interface Mirror {
-	// Hostanme
-	hostname: string;
-
-	// Path
-	path: string;
-
-	// Owner
-	owner: string;
-
-	// Contact
-	contact: string;
-
-	// Notes
-	notes: string;
-
-	// Country Code
-	country_code: string;
-
-	// ASN
-	asn: number;
-
-	// AS Name
-	as_name: string | null;
-
-	// Supports IPv6?
-	supports_ipv6: boolean;
-
-	// Supports IPv4?
-	supports_ipv4: boolean;
-
-	// Last Check Was Successful?
-	last_check_success: boolean;
-
-	// Last Check At
-	last_check_at: Date;
-
-	// Last Sync At
-	last_sync_at: Date;
-}
diff --git a/frontend/src/views/MirrorsView.vue b/frontend/src/views/MirrorsView.vue
index 1323ccfb..bae033a3 100644
--- a/frontend/src/views/MirrorsView.vue
+++ b/frontend/src/views/MirrorsView.vue
@@ -1,51 +1,11 @@
 <script setup lang="ts">
-	import { ref, onMounted } from "vue"
-	import type { Mirror } from "@/types/Mirror"
-	import { fetchMirrors } from "@/api/mirrors"
-	import { getCountryName } from "@/utils/i18n"
-
-	// Import UI components
-	import Box from "@/components/Box.vue"
+	// Components
+	import MirrorList from "@/components/MirrorList.vue"
 	import Section from "@/components/Section.vue"
-	import Tags from "@/components/Tags.vue"
-	import Tag from "@/components/Tag.vue"
-
-	// Mirrors
-	const mirrors = ref<Mirror[]>([]);
-
-	// Fetch all builders as soon as we are mounted
-	onMounted(async () => {
-		try {
-			mirrors.value = await fetchMirrors();
-		} catch (err) {
-			console.error(err);
-		}
-	});
 </script>
 
 <template>
 	<Section :title="$t('Mirrors')">
-		<Box v-for="mirror in mirrors" :key="mirror.hostname"
-				:title="mirror.hostname" :subtitle="mirror.owner">
-			<div class="level">
-				<!-- Show the country -->
-				<div class="level-item">
-					{{ getCountryName(mirror.country_code) }}
-				</div>
-
-				<!-- Show tags of which protocols are supported -->
-				<div class="level-item">
-					<Tags>
-						<Tag v-if="mirror.supports_ipv6" :title="$t('Supports IPv6')" is-success>
-							{{ $t('IPv6') }}
-						</Tag>
-
-						<Tag v-if="mirror.supports_ipv4" :title="$t('Supports IPv4')" is-success>
-							{{ $t('IPv4') }}
-						</Tag>
-					</Tags>
-				</div>
-			</div>
-		</Box>
+		<MirrorList />
 	</Section>
 </template>