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

Component breakdown

Browse source
This commit is contained in:
mohit-nagaraj 2024-10-12 08:42:45 +05:30
parent d7f9a9b471
commit 5ce3f0615f
No known key found for this signature in database
2 changed files with 58 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/NextPingTimer.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<span class="word">&nbsp;({{ $t("nextCheckIn") }}: {{ formattedTime }})</span>
</template>
<script>
export default {
props: {
/** Time remaining in seconds */
timeRemaining: {
type: Number,
required: true,
},
},
computed: {
/**
* Formatted time remaining
* @returns {string} Formatted time
*/
formattedTime() {
const days = Math.floor(this.timeRemaining / 86400);
const hours = Math.floor((this.timeRemaining % 86400) / 3600);
const minutes = Math.floor((this.timeRemaining % 3600) / 60);
const seconds = this.timeRemaining % 60;
let formattedTime = "";
if (seconds >= 0) {
formattedTime = seconds > 1 ? `${seconds}secs` : `${seconds}sec`;
}
if (minutes > 0) {
formattedTime = minutes > 1 ? `${minutes}mins` : `${minutes}min`;
}
if (hours > 0) {
formattedTime = hours > 1 ? `${hours}hrs` : `${hours}hr`;
}
if (days > 0) {
formattedTime = days > 1 ? `${days}days` : `${days}day`;
}
return formattedTime.trim();
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.word {
color: $secondary-text;
font-size: 12px;
}
</style>

29
src/pages/Details.vue
View file

@ -1,4 +1,3 @@
<!-- eslint-disable linebreak-style -->
<template>
<transition name="slide-fade" appear>
<div v-if="monitor">
@ -77,7 +76,10 @@
<div class="row">
<div class="col-md-8">
<HeartbeatBar :monitor-id="monitor.id" />
<div><span v-if="monitor.active" class="mr-2">Next in {{ formattedTime }}&nbsp;</span><span class="word">({{ $t("checkEverySecond", [ monitor.interval ]) }})</span></div>
<div>
<span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
<span class="word"><NextPingTimer :timeRemaining="timeRemaining" /></span>
</div>
</div>
<div class="col-md-4 text-center">
<span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px;" data-testid="monitor-status">{{ status.text }}</span>
@ -276,6 +278,7 @@ import { useToast } from "vue-toastification";
const toast = useToast();
import Confirm from "../components/Confirm.vue";
import HeartbeatBar from "../components/HeartbeatBar.vue";
import NextPingTimer from "../components/NextPingTimer.vue";
import Status from "../components/Status.vue";
import Datetime from "../components/Datetime.vue";
import CountUp from "../components/CountUp.vue";
@ -302,6 +305,7 @@ export default {
CountUp,
Datetime,
HeartbeatBar,
NextPingTimer,
Confirm,
Status,
Pagination,
@ -405,27 +409,6 @@ export default {
screenshotURL() {
return getResBaseURL() + this.monitor.screenshot + "?time=" + this.cacheTime;
},
formattedTime() {
const days = Math.floor(this.timeRemaining / 86400);
const hours = Math.floor((this.timeRemaining % 86400) / 3600);
const minutes = Math.floor((this.timeRemaining % 3600) / 60);
const seconds = this.timeRemaining % 60;
let formattedTime = "";
if (days > 0) {
formattedTime += `${days}:`;
}
if (hours > 0 || days > 0) {
formattedTime += `${hours}:`;
}
if (minutes > 0 || hours > 0 || days > 0) {
formattedTime += `${minutes}:`;
}
formattedTime += `${seconds}`;
return formattedTime.trim();
},
},
watch: {