Added frontend and working fetching.

frontend/nuxt.config.ts

@@ -1,8 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  devtools: { enabled: true },
-  css: ['~/assets/css/main.css'],
+  ssr: true,
+  devtools: { enabled: false },
+  css: ['@/assets/css/main.css'],
 
   postcss: {
     plugins: {

frontend/pages/progress.vue

@@ -5,44 +5,44 @@ const progress = getProgress();
 </script>
 
 <template>
-  <div class="m-auto">
+  <div class="h-screen grid place-items-center">
     <div v-if="progress">
-      <table class="table-auto text-left">
+      <table class="table-auto border-gray-300">
         <thead>
         <tr>
-          <th>Metric</th>
-          <th>Value</th>
+          <th class="px-4 py-2">Metric</th>
+          <th class="px-4 py-2">Value</th>
         </tr>
         </thead>
 
-        <tbody>
+        <tbody >
         <tr>
-          <td>Percentage of Ipv4 scanned</td>
-          <td>{{progress.percentageOfIpv4Scanned}}</td>
+          <td class="px-4 py-2">Percentage of Ipv4 scanned</td>
+          <td class="px-4 py-2">{{progress.percentageOfIpv4Scanned}}</td>
         </tr>
         <tr>
-          <td>Total filtered</td>
-          <td>{{progress.totalFiltered}}</td>
+          <td class="px-4 py-2">Total filtered</td>
+          <td class="px-4 py-2">{{progress.totalFiltered}}</td>
         </tr>
         <tr>
-          <td>Total Discarded</td>
-          <td>{{progress.totalDiscarded}}</td>
+          <td class="px-4 py-2">Total Discarded</td>
+          <td class="px-4 py-2">{{progress.totalDiscarded}}</td>
         </tr>
         <tr>
-          <td>Amount of Ipv4 left</td>
-          <td>{{progress.amountOfIpv4Left}}</td>
+          <td class="px-4 py-2">Amount of Ipv4 left</td>
+          <td class="px-4 py-2">{{progress.amountOfIpv4Left}}</td>
         </tr>
         <tr>
-          <td>Discarded db size</td>
-          <td>{{progress.discardedDbSize}}</td>
+          <td class="px-4 py-2">Discarded db size</td>
+          <td class="px-4 py-2">{{progress.discardedDbSize}}</td>
         </tr>
         <tr>
-          <td>Filtered db size</td>
-          <td>{{progress.filteredDbSize}}</td>
+          <td class="px-4 py-2">Filtered db size</td>
+          <td class="px-4 py-2">{{progress.filteredDbSize}}</td>
         </tr>
         <tr>
-          <td>Unfiltered db size</td>
-          <td>{{progress.myDbSize}}</td>
+          <td class="px-4 py-2">Unfiltered db size</td>
+          <td class="px-4 py-2">{{progress.myDbSize}}</td>
         </tr>
         </tbody>
       </table>

frontend/plugins/getProgress.ts

@@ -2,7 +2,10 @@ export default function getProgress(){
 
     const progress = ref(null as Progress | null);
 
-    fetch('http://localhost:5224/progress')
+    fetch('https://proxy.rbwr.dk/progress', {
+        method: 'GET',
+        headers: {'Content-Type': 'application/json'}
+    })
         .then(response => response.json())
         .then((data: Progress) => {
             if (data && data.percentageOfIpv4Scanned) {