#89: First implementation of longer result history

web/app/src/views/Details.vue

@@ -7,6 +7,7 @@
       <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">RECENT CHECKS</h1>
       <hr class="mb-4" />
       <Service :data="serviceStatus" :maximumNumberOfResults="20" @showTooltip="showTooltip" />
+      <Pagination @page="changePage"/>
     </slot>
     <div v-if="uptime" class="mt-12">
       <h1 class="text-xl xl:text-3xl text-monospace text-gray-400">UPTIME</h1>
@@ -73,10 +74,12 @@ import Settings from '@/components/Settings.vue'
 import Service from '@/components/Service.vue';
 import {SERVER_URL} from "@/main.js";
 import {helper} from "@/mixins/helper.js";
+import Pagination from "@/components/Pagination";
 
 export default {
   name: 'Details',
   components: {
+    Pagination,
     Service,
     Settings,
   },
@@ -85,7 +88,7 @@ export default {
   methods: {
     fetchData() {
       //console.log("[Details][fetchData] Fetching data");
-      fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}`)
+      fetch(`${this.serverUrl}/api/v1/statuses/${this.$route.params.key}?page=${this.currentPage}`)
           .then(response => response.json())
           .then(data => {
             if (JSON.stringify(this.serviceStatus) !== JSON.stringify(data)) {
@@ -138,7 +141,11 @@ export default {
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
-    }
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.fetchData();
+    },
   },
   data() {
     return {
@@ -147,6 +154,7 @@ export default {
       uptime: {"7d": 0, "24h": 0, "1h": 0},
       // Since this page isn't at the root, we need to modify the server URL a bit
       serverUrl: SERVER_URL === '.' ? '..' : SERVER_URL,
+      currentPage: 1,
     }
   },
   created() {

web/app/src/views/Home.vue

@@ -1,16 +1,19 @@
 <template>
   <Services :serviceStatuses="serviceStatuses" :showStatusOnHover="true" @showTooltip="showTooltip"/>
+  <Pagination @page="changePage"/>
   <Settings @refreshData="fetchData"/>
 </template>
 
 <script>
 import Settings from '@/components/Settings.vue'
 import Services from '@/components/Services.vue';
+import Pagination from "@/components/Pagination";
 import {SERVER_URL} from "@/main.js";
 
 export default {
   name: 'Home',
   components: {
+    Pagination,
     Services,
     Settings,
   },
@@ -18,7 +21,7 @@ export default {
   methods: {
     fetchData() {
       //console.log("[Home][fetchData] Fetching data");
-      fetch(`${SERVER_URL}/api/v1/statuses`)
+      fetch(`${SERVER_URL}/api/v1/statuses?page=${this.currentPage}`)
           .then(response => response.json())
           .then(data => {
             if (JSON.stringify(this.serviceStatuses) !== JSON.stringify(data)) {
@@ -28,11 +31,16 @@ export default {
     },
     showTooltip(result, event) {
       this.$emit('showTooltip', result, event);
-    }
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.fetchData();
+    },
   },
   data() {
     return {
-      serviceStatuses: {}
+      serviceStatuses: {},
+      currentPage: 1
     }
   },
   created() {