Reworked the /progress page

frontend/pages/progress.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { fetchWithCache } from '~/utils/cacheUtil';
+import { progressTypeToDictionary } from '~/utils/convertProgressTypeToDictionary';
 
 const data = ref<ProgressType | null>(null);
 const loading = ref<boolean>(true);
 const error = ref<string | null>(null);
+let dict = ref<ProgressDictionary[] | null>(null);
 
 const fetchMyData = async () => {
     try {
@@ -23,6 +25,10 @@ const fetchMyData = async () => {
         error.value = (err as Error).message;
     } finally {
         loading.value = false;
+
+      if (data.value !== null) {
+        dict.value = progressTypeToDictionary(data.value);
+      }
     }
 };
 
@@ -32,7 +38,7 @@ fetchMyData();
 
 <template>
   <div class="h-screen grid place-items-center">
-    <div v-if="data">
+    <div v-if="dict">
       <table class="table-auto border-gray-300">
         <thead>
           <tr>
@@ -41,34 +47,10 @@ fetchMyData();
           </tr>
         </thead>
 
-        <tbody >
-        <tr>
-          <td class="px-4 py-2">Percentage of Ipv4 scanned</td>
-          <td class="px-4 py-2">{{data.percentageOfIpv4Scanned}}</td>
-        </tr>
-        <tr>
-          <td class="px-4 py-2">Total filtered</td>
-          <td class="px-4 py-2">{{data.totalFiltered}}</td>
-        </tr>
-        <tr>
-          <td class="px-4 py-2">Total Discarded</td>
-          <td class="px-4 py-2">{{data.totalDiscarded}}</td>
-        </tr>
-        <tr>
-          <td class="px-4 py-2">Amount of Ipv4 left</td>
-          <td class="px-4 py-2">{{data.amountOfIpv4Left}}</td>
-        </tr>
-        <tr>
-          <td class="px-4 py-2">Discarded db size</td>
-          <td class="px-4 py-2">{{data.discardedDbSize}}</td>
-        </tr>
-        <tr>
-          <td class="px-4 py-2">Filtered db size</td>
-          <td class="px-4 py-2">{{data.filteredDbSize}}</td>
-        </tr>
-        <tr>
-          <td class="px-4 py-2">Unfiltered db size</td>
-          <td class="px-4 py-2">{{data.myDbSize}}</td>
+        <tbody>
+          <tr v-for="d in dict">
+            <td class="px-4 py-2">{{d.description}}</td>
+            <td class="px-4 py-2">{{d.value}}</td>
           </tr>
         </tbody>
       </table>

frontend/types/global.d.ts

@@ -8,6 +8,11 @@ interface ProgressType {
     myDbSize: bigint;
 }
 
+interface ProgressDictionary {
+    description: string;
+    value: string;
+}
+
 type CacheEntry<T> = {
     data: T;
     timestamp: number;

frontend/utils/convertProgressTypeToDictionary.ts

@@ -0,0 +1,11 @@
+export function progressTypeToDictionary(progress: ProgressType) {
+    return [
+    { description: "Percentage of Ipv4 scanned", value: progress.percentageOfIpv4Scanned.toString() },
+    { description: "Total filtered", value: progress.totalFiltered.toString() },
+    { description: "Total Discarded", value: progress.totalDiscarded.toString() },
+    { description: "Amount of Ipv4 left", value: progress.amountOfIpv4Left.toString() },
+    { description: "Discarded db size", value: progress.discardedDbSize.toString() },
+    { description: "Filtered db size", value: progress.filteredDbSize.toString() },
+    { description: "Unfiltered db size", value: progress.myDbSize.toString() },
+    ]
+}