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 (file)
index 0000000..57198f1
--- /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 (file)
index 0000000..e87d2d3
--- /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 140531b5f4ac4887c81979f629fc23ce0ba2b01f..7bbb690570cb60a3aa9d5f50788b5a1c605eef01 100644 (file)
--- 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 bb0e5ce1822d49c2a39d875734f49a72c4c99bc8..3b74c422c80d0d7c30e65a512cfa0cc3541ba9fa 100644 (file)
--- 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>