Add a time-based cache for the progress result from the API

frontend/pages/progress.vue

@@ -1,12 +1,38 @@
 <script setup lang="ts">
-import getProgress from "~/plugins/getProgress";
+import { fetchWithCache } from '~/utils/cacheUtil';
+
+const data = ref<ProgressType | null>(null);
+const loading = ref<boolean>(true);
+const error = ref<string | null>(null);
+
+const fetchMyData = async () => {
+    try {
+        loading.value = true;
+
+        // Use the caching utility
+        data.value = await fetchWithCache<ProgressType>(
+              'Progress',
+              async () => {
+                const response = await fetch('https://proxy.rbwr.dk/progress');
+                if (!response.ok) throw new Error('API fetch failed');
+                return (await response.json()) as ProgressType;
+            },
+            5 // Cache max age in seconds
+        );
+    } catch (err) {
+        error.value = (err as Error).message;
+    } finally {
+        loading.value = false;
+    }
+};
+
+fetchMyData();
 
-const progress = getProgress();
 </script>
 
 <template>
   <div class="h-screen grid place-items-center">
-    <div v-if="progress">
+    <div v-if="data">
       <table class="table-auto border-gray-300">
         <thead>
         <tr>
@@ -18,31 +44,31 @@ const progress = getProgress();
         <tbody >
         <tr>
           <td class="px-4 py-2">Percentage of Ipv4 scanned</td>
-          <td class="px-4 py-2">{{progress.percentageOfIpv4Scanned}}</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">{{progress.totalFiltered}}</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">{{progress.totalDiscarded}}</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">{{progress.amountOfIpv4Left}}</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">{{progress.discardedDbSize}}</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">{{progress.filteredDbSize}}</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">{{progress.myDbSize}}</td>
+          <td class="px-4 py-2">{{data.myDbSize}}</td>
         </tr>
         </tbody>
       </table>