frontend: Show a list of builders

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

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c529a52df3a524255bfe27b6e3d06c4aecddf80e..54fb2e5799ecd1689b7236c9ddf3dac11b8d2793 100644 (file)
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -30,7 +30,9 @@
 
                        <div class="navbar-menu">
                                <div class="navbar-start">
-
+                                       <RouterLink to="/builders" class="navbar-item">
+                                               {{ $t("Builders") }}
+                                       </RouterLink>
                                </div>
 
                                <div class="navbar-end">

diff --git a/frontend/src/api/builders.ts b/frontend/src/api/builders.ts
new file mode 100644 (file)
index 0000000..617db27
--- /dev/null
+++ b/frontend/src/api/builders.ts
@@ -0,0 +1,10 @@
+import type { Builder } from "@/types/Builder";
+
+export async function fetchBuilders(): Promise<Builder[]> {
+       // Fetch all builders
+       const response = await fetch("/api/v1/builders");
+       if (!response.ok)
+               throw new Error("Failed to fetch builders");
+
+       return response.json();
+}

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 26f4e0beffdffb87e50c894c7ae77f14c0096acc..8d4a34b50c25db880207f677d92fb322976fc88b 100644 (file)
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -2,6 +2,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"
 
 const router = createRouter({
        history: createWebHistory(import.meta.env.BASE_URL),
@@ -18,6 +19,13 @@ const router = createRouter({
                        name: "login",
                        component: LoginView,
                },
+
+               // Builders
+               {
+                       path: "/builders",
+                       name: "builders",
+                       component: BuildersView,
+               },
        ],
 })
 

diff --git a/frontend/src/types/Builder.ts b/frontend/src/types/Builder.ts
new file mode 100644 (file)
index 0000000..4b75e41
--- /dev/null
+++ b/frontend/src/types/Builder.ts
@@ -0,0 +1,20 @@
+/*
+       Defines our User object
+*/
+export interface Builder {
+       // Name
+       name: string;
+
+       // Description
+       description: string;
+
+       // Created At
+       created_at: Date;
+
+       // Enabled?
+       enabled: boolean;
+
+       // System Vendor/Model
+       sys_vendor: string;
+       sys_name: string;
+}

diff --git a/frontend/src/views/BuildersView.vue b/frontend/src/views/BuildersView.vue
new file mode 100644 (file)
index 0000000..60e4dc9
--- /dev/null
+++ b/frontend/src/views/BuildersView.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+       import { ref, onMounted } from "vue";
+       import type { Builder } from "@/types/Builder";
+       import { fetchBuilders } from "@/api/builders";
+
+       // Import UI components
+       import Section from "../components/Section.vue"
+
+       // Builders
+       const builders = ref<Builder[]>([]);
+
+       // Fetch all builders as soon as we are mounted
+       onMounted(async () => {
+               try {
+                       builders.value = await fetchBuilders();
+               } catch (err) {
+                       console.error(err);
+               }
+       });
+</script>
+
+<template>
+       <Section :title="$t('Builders')">
+               <Container>
+                       <div v-for="builder in builders" class="box" :key="builder.name">
+                               <h5 class="title is-5">
+                                       {{ builder.name }}
+                               </h5>
+
+                               <h6 class="subtitle is-6">
+                                       <span v-if="builder.sys_vendor && builder.sys_name">
+                                               {{ builder.sys_vendor }} &bull; {{ builder.sys_name }}
+                                       </span>
+                               </h6>
+                       </div>
+               </Container>
+       </Section>
+</template>