Merge branch 'master' into Spiritreader_master

# Conflicts:
#	src/pages/EditMonitor.vue

src/pages/Dashboard.vue

@@ -13,7 +13,7 @@
                         No Monitors, please <router-link to="/add">add one</router-link>.
                     </div>
 
-                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="item in sortedMonitorList" @click="$root.cancelActiveList">
+                    <router-link :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" v-for="(item, index) in sortedMonitorList" @click="$root.cancelActiveList" :key="index">
 
                         <div class="row">
                         	<div class="col-6 col-md-8 small-padding">

src/pages/DashboardHome.vue

@@ -47,7 +47,7 @@
                 </tr>
                 </thead>
                 <tbody>
-                <tr v-for="beat in importantHeartBeatList">
+                <tr v-for="(beat, index) in displayedRecords" :key="index">
                     <td>{{ beat.name }}</td>
                     <td><Status :status="beat.status" /></td>
                     <td><Datetime :value="beat.time" /></td>
@@ -59,6 +59,13 @@
                 </tr>
                 </tbody>
             </table>
+
+            <div class="d-flex justify-content-center kuma_pagination">
+                <pagination
+                    v-model="page"
+                    :records=importantHeartBeatList.length
+                    :per-page="perPage" />
+            </div>
         </div>
     </div>
 
@@ -68,8 +75,21 @@
 <script>
 import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
+import Pagination from "v-pagination-3";
+
 export default {
-    components: {Datetime, Status},
+    components: {
+        Datetime,
+        Status,
+        Pagination,
+    },
+    data() {
+        return {
+            page: 1,
+            perPage: 25,
+            heartBeatList: [],
+        }
+    },
     computed: {
         stats() {
             let result = {
@@ -129,8 +149,16 @@ export default {
                 }
             });
 
+            this.heartBeatList = result;
+
             return result;
-        }
+        },
+
+        displayedRecords() {
+            const startIndex = this.perPage * (this.page - 1);
+            const endIndex = startIndex + this.perPage;
+            return this.heartBeatList.slice(startIndex, endIndex);
+        },
     }
 }
 </script>

src/pages/Details.vue

@@ -12,7 +12,7 @@
 
     <div class="functions">
         <button class="btn btn-light" @click="pauseDialog" v-if="monitor.active">Pause</button>
-        <button class="btn btn-primary" @click="resumeMonitor"  v-if="! monitor.active">Resume</button>
+        <button class="btn btn-primary" @click="resumeMonitor" v-if="! monitor.active">Resume</button>
         <router-link :to=" '/edit/' + monitor.id " class="btn btn-secondary">Edit</router-link>
         <button class="btn btn-danger" @click="deleteDialog">Delete</button>
     </div>
@@ -64,7 +64,7 @@
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="beat in importantHeartBeatList">
+                <tr v-for="(beat, index) in displayedRecords" :key="index">
                     <td><Status :status="beat.status" /></td>
                     <td><Datetime :value="beat.time" /></td>
                     <td>{{ beat.msg }}</td>
@@ -75,6 +75,13 @@
                 </tr>
             </tbody>
         </table>
+
+        <div class="d-flex justify-content-center kuma_pagination">
+            <pagination
+                v-model="page"
+                :records=importantHeartBeatList.length
+                :per-page="perPage" />
+        </div>
     </div>
 
     <Confirm ref="confirmPause" @yes="pauseMonitor">
@@ -95,6 +102,7 @@ import Status from "../components/Status.vue";
 import Datetime from "../components/Datetime.vue";
 import CountUp from "../components/CountUp.vue";
 import Uptime from "../components/Uptime.vue";
+import Pagination from "v-pagination-3";
 
 export default {
     components: {
@@ -104,13 +112,16 @@ export default {
         HeartbeatBar,
         Confirm,
         Status,
+        Pagination,
     },
     mounted() {
 
     },
     data() {
         return {
-
+            page: 1,
+            perPage: 25,
+            heartBeatList: [],
         }
     },
     computed: {
@@ -154,6 +165,7 @@ export default {
 
         importantHeartBeatList() {
             if (this.$root.importantHeartbeatList[this.monitor.id]) {
+                this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
                 return this.$root.importantHeartbeatList[this.monitor.id]
             } else {
                 return [];
@@ -166,8 +178,13 @@ export default {
             } else {
                 return { }
             }
-        }
+        },
 
+        displayedRecords() {
+            const startIndex = this.perPage * (this.page - 1);
+            const endIndex = startIndex + this.perPage;
+            return this.heartBeatList.slice(startIndex, endIndex);
+        },
     },
     methods: {
         testNotification() {

src/pages/EditMonitor.vue

@@ -124,7 +124,7 @@ export default {
                     name: "",
                     url: "https://",
                     interval: 60,
-                    maxretries: 0,                    
+                    maxretries: 0,
                     notificationIDList: {},
                 }
             } else if (this.isEdit) {

src/pages/Settings.vue

@@ -11,7 +11,7 @@
                         <label for="timezone" class="form-label">Timezone</label>
                         <select class="form-select" id="timezone" v-model="$root.userTimezone">
                             <option value="auto">Auto: {{ guessTimezone }}</option>
-                            <option v-for="timezone in timezoneList" :value="timezone.value">{{ timezone.name }}</option>
+                            <option v-for="(timezone, index) in timezoneList" :value="timezone.value" :key="index">{{ timezone.name }}</option>
                         </select>
                     </div>
 
@@ -59,7 +59,7 @@
                 <p v-else>Please assign the notification to monitor(s) to get it works.</p>
 
                 <ul class="list-group mb-3" style="border-radius: 1rem;">
-                    <li  class="list-group-item"  v-for="notification in $root.notificationList">
+                    <li class="list-group-item" v-for="(notification, index) in $root.notificationList" :key="index">
                         {{ notification.name }}<br />
                         <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
                     </li>
@@ -77,8 +77,8 @@
 
 <script>
 import dayjs from "dayjs";
-import utc  from 'dayjs/plugin/utc'
-import timezone  from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 import NotificationDialog from "../components/NotificationDialog.vue";
 dayjs.extend(utc)
 dayjs.extend(timezone)