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 a209e32efc9d6a617691877cd0b6823ecbbf13f1..53ccde72b7382c9a35d00bb3979644e5ef62161e 100644 (file)
--- 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 (file)
index 0000000..82b92f0
--- /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 8d4a34b50c25db880207f677d92fb322976fc88b..3bd70c009bc6ca9c5736aad7f89b0723b686648c 100644 (file)
--- 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 (file)
index 0000000..140531b
--- /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 (file)
index 0000000..9c140d6
--- /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>