From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 20 Jun 2025 12:48:06 +0000 (+0000)
Subject: frontend: Show a list of builders
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=51a5a38243001eabed7c0a6949b1c94ead626c0f;p=pbs.git

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 c529a52d..54fb2e57 100644
--- 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
index 00000000..617db273
--- /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 26f4e0be..8d4a34b5 100644
--- 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
index 00000000..4b75e417
--- /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
index 00000000..60e4dc9f
--- /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>