ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-23 23:04:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add pagination

Browse source
This commit is contained in:
Adam Stachowicz 2021-07-18 03:04:40 +02:00
parent 78f5d2cd8b
commit a173700cd4
3 changed files with 52 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -31,6 +31,7 @@
"socket.io-client": "^4.1.2",
"sqlite3": "^5.0.0",
"tcp-ping": "^0.1.1",
"v-pagination-3": "^0.1.6",
"vue": "^3.0.5",
"vue-confirm-dialog": "^1.0.2",
"vue-router": "^4.0.10",

34
src/pages/DashboardHome.vue
View file

@ -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 = {
@ -127,8 +147,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>

23
src/pages/Details.vue
View file

@ -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() {