frontend: Show the geo location of the mirrors

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

diff --git a/frontend/src/utils/i18n.ts b/frontend/src/utils/i18n.ts
new file mode 100644 (file)
index 0000000..f814eb4
--- /dev/null
+++ b/frontend/src/utils/i18n.ts
@@ -0,0 +1,7 @@
+// Load the names of regions in the current browser locale
+const regions = new Intl.DisplayNames(undefined, { type: "region" })
+
+// Returns the country name by its code in the browser's locale
+export function getCountryName(cc: string) {
+       return regions.of(cc)
+}

diff --git a/frontend/src/views/MirrorsView.vue b/frontend/src/views/MirrorsView.vue
index 3b74c422c80d0d7c30e65a512cfa0cc3541ba9fa..1323ccfb0099e99ea9fe48ec858c32768293c31a 100644 (file)
--- a/frontend/src/views/MirrorsView.vue
+++ b/frontend/src/views/MirrorsView.vue
@@ -2,6 +2,7 @@
        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"
@@ -27,6 +28,11 @@
                <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>