From 2ded18692d10c00c784c311d7ccfda74e5701f16 Mon Sep 17 00:00:00 2001
From: Florian Briand <florian.briand@digital-engine.info>
Date: Tue, 24 Sep 2024 17:55:34 +0200
Subject: [PATCH] feat: add a debug page calling database debug functions from
 the backend

---
 frontend/app.vue               |  1 +
 frontend/components/NavBar.vue |  1 +
 frontend/pages/debug.vue       | 67 ++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 frontend/pages/debug.vue

diff --git a/frontend/app.vue b/frontend/app.vue
index 14f2730..ad031fa 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NuxtLoadingIndicator />
     <NuxtRouteAnnouncer />
     <NavBar />
     <NuxtPage />
diff --git a/frontend/components/NavBar.vue b/frontend/components/NavBar.vue
index 5ab79cd..6f3ecfa 100644
--- a/frontend/components/NavBar.vue
+++ b/frontend/components/NavBar.vue
@@ -6,6 +6,7 @@
         <nav class="navbar-center">
             <NuxtLink to="/" class="btn btn-ghost">Accueil</NuxtLink>
             <NuxtLink to="/CPS" class="btn btn-ghost">Carte CPS</NuxtLink>
+            <NuxtLink to="/debug" class="btn btn-ghost">Debug</NuxtLink>
         </nav>
         <div class="navbar-end">
             <template v-if="!current_user">
diff --git a/frontend/pages/debug.vue b/frontend/pages/debug.vue
new file mode 100644
index 0000000..7b1823e
--- /dev/null
+++ b/frontend/pages/debug.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <h1 class="text-3xl mb-8">Debug</h1>
+        <div class="stats shadow mb-8">
+            <div class="stat">
+                <div class="stat-title">DB Ping Status</div>
+                <div class="stat-value">{{ data?.db_ping_status || "?" }}</div>
+            </div>
+            <div class="stat">
+                <div class="stat-title">Entries Count</div>
+                <div class="stat-value">{{ data?.entries.length || "?" }}</div>
+                <div class="stat-actions">
+                    <button class="btn btn-sm" @click="addRandomEntry">Add entry</button>
+                </div>
+            </div>
+            <div class="stat">
+                <div class="stat-title">Network status</div>
+                <div class="stat-value">{{ status }}</div>
+                <div class="stat-description">{{ error }}</div>
+            </div>
+        </div>
+        <div>
+            <h2 class="text-2xl mb-4">Entries</h2>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Id</th>
+                        <th>Title</th>
+                        <th>Text</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="entry in data?.entries" :key="entry.id">
+                        <td>{{ entry.id }}</td>
+                        <td>{{ entry.title }}</td>
+                        <td>{{ entry.text }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    type Entry = {
+        id: number;
+        title: string;
+        text: string;
+    };
+    type DebugResponse = {
+        db_ping_status: string;
+        entries: Entry[];
+    };
+
+    
+    // TODO : handle a default backend URL by building a custom `$fetch` and `useFetch` functions with a `baseURL` option : https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch
+    
+    const { data, refresh, error, status } = await useFetch<DebugResponse>('http://127.0.0.1:8080/debug');
+
+    async function addRandomEntry() {
+        await $fetch('http://127.0.0.1:8080/debug/add_random', {
+            method: 'POST',
+        });
+        refresh();
+    }
+
+</script>