From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 4 Jul 2025 12:00:28 +0000 (+0000)
Subject: frontend: Show supported protocols for mirrors
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2fb2068a99396beba86645ea6d50fa66841f81ea;p=pbs.git

frontend: Show supported protocols for mirrors

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

diff --git a/frontend/src/components/Tag.vue b/frontend/src/components/Tag.vue
new file mode 100644
index 00000000..57198f15
--- /dev/null
+++ b/frontend/src/components/Tag.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+	const { title, isSuccess } = defineProps(["title", "isSuccess"])
+</script>
+
+<template>
+	<span class="tag" :class="{ 'is-success' : isSuccess }" :title="title">
+		<slot />
+	</span>
+</template>
diff --git a/frontend/src/components/Tags.vue b/frontend/src/components/Tags.vue
new file mode 100644
index 00000000..e87d2d3e
--- /dev/null
+++ b/frontend/src/components/Tags.vue
@@ -0,0 +1,5 @@
+<template>
+	<div class="tags">
+		<slot />
+	</div>
+</template>
diff --git a/frontend/src/types/Mirror.ts b/frontend/src/types/Mirror.ts
index 140531b5..7bbb6905 100644
--- a/frontend/src/types/Mirror.ts
+++ b/frontend/src/types/Mirror.ts
@@ -23,6 +23,15 @@ export interface Mirror {
 	// 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;
 
diff --git a/frontend/src/views/MirrorsView.vue b/frontend/src/views/MirrorsView.vue
index bb0e5ce1..3b74c422 100644
--- a/frontend/src/views/MirrorsView.vue
+++ b/frontend/src/views/MirrorsView.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-	import { ref, onMounted } from "vue";
-	import type { Mirror } from "@/types/Mirror";
-	import { fetchMirrors } from "@/api/mirrors";
+	import { ref, onMounted } from "vue"
+	import type { Mirror } from "@/types/Mirror"
+	import { fetchMirrors } from "@/api/mirrors"
 
 	// Import UI components
 	import Box from "@/components/Box.vue"
 	import Section from "@/components/Section.vue"
+	import Tags from "@/components/Tags.vue"
+	import Tag from "@/components/Tag.vue"
 
 	// Mirrors
 	const mirrors = ref<Mirror[]>([]);
@@ -24,7 +26,20 @@
 	<Section :title="$t('Mirrors')">
 		<Box v-for="mirror in mirrors" :key="mirror.hostname"
 				:title="mirror.hostname" :subtitle="mirror.owner">
-			Some content
+			<div class="level">
+				<!-- 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>
 	</Section>
 </template>