From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 3 Jul 2025 08:48:14 +0000 (+0000)
Subject: frontend: Add a simple page that lists all available mirrors
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3db24af7f0d6125772d43d398d1467c37e21d8aa;p=pbs.git

frontend: Add a simple page that lists all available mirrors

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

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a209e32e..53ccde72 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -25,6 +25,10 @@
 					<RouterLink to="/builders" class="navbar-item">
 						{{ $t("Builders") }}
 					</RouterLink>
+
+					<RouterLink to="/mirrors" class="navbar-item">
+						{{ $t("Mirrors") }}
+					</RouterLink>
 				</div>
 
 				<div class="navbar-end">
diff --git a/frontend/src/api/mirrors.ts b/frontend/src/api/mirrors.ts
new file mode 100644
index 00000000..82b92f08
--- /dev/null
+++ b/frontend/src/api/mirrors.ts
@@ -0,0 +1,10 @@
+import type { Mirror } from "@/types/Mirror";
+
+export async function fetchMirrors(): Promise<Mirror[]> {
+	// Fetch all mirrors
+	const response = await fetch("/api/v1/mirrors");
+	if (!response.ok)
+		throw new Error("Failed to fetch mirrors");
+
+	return response.json();
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 8d4a34b5..3bd70c00 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import LoginView from "../views/LoginView.vue"
 import BuildersView from "../views/BuildersView.vue"
+import MirrorsView from "../views/MirrorsView.vue"
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,6 +27,13 @@ const router = createRouter({
 			name: "builders",
 			component: BuildersView,
 		},
+
+		// Mirrors
+		{
+			path: "/mirrors",
+			name: "mirrors",
+			component: MirrorsView,
+		},
 	],
 })
 
diff --git a/frontend/src/types/Mirror.ts b/frontend/src/types/Mirror.ts
new file mode 100644
index 00000000..140531b5
--- /dev/null
+++ b/frontend/src/types/Mirror.ts
@@ -0,0 +1,34 @@
+/*
+	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;
+
+	// 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
new file mode 100644
index 00000000..9c140d65
--- /dev/null
+++ b/frontend/src/views/MirrorsView.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+	import { ref, onMounted } from "vue";
+	import type { Mirror } from "@/types/Mirror";
+	import { fetchMirrors } from "@/api/mirrors";
+
+	// Import UI components
+	import Section from "../components/Section.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')">
+		<Container>
+			<div v-for="mirror in mirrors" class="box" :key="mirror.hostname">
+				<h5 class="title is-5">
+					{{ mirror.hostname }}
+				</h5>
+
+				<h6 class="subtitle is-6">
+					<span v-if="mirror.owner">
+						{{ mirror.owner }}
+					</span>
+				</h6>
+			</div>
+		</Container>
+	</Section>
+</template>