P4Pillon/Krys4lide
4
2
Fork 0
Code Issues 27 Pull Requests 3 Actions Packages Projects 1 Releases Activity

feat: add a debug page calling database debug functions from the backend

Browse Source
This commit is contained in:
Florian Briand 2024-09-24 17:55:34 +02:00
parent 8700354ad2
commit 2ded18692d
Signed by: florian_briand
GPG Key ID: CC981B9E6B98E70B
3 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app.vue
View File

@ -1,5 +1,6 @@
<template>
<div>
<NuxtLoadingIndicator />
<NuxtRouteAnnouncer />
<NavBar />
<NuxtPage />

1
frontend/components/NavBar.vue
View File

@ -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">

67
frontend/pages/debug.vue Normal file
View File

@ -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>