|
|
|
@ -306,6 +306,11 @@
|
|
|
|
|
<p v-if="config.showPoweredBy">
|
|
|
|
|
{{ $t("Powered by") }} <a target="_blank" rel="noopener noreferrer" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="refresh-info mb-2">
|
|
|
|
|
<div>{{ $t("last update") }}: <date-time :value="lastUpdateTime" /></div>
|
|
|
|
|
<div>{{ $t("refresh in") }}: {{ updateCountdownText }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@ -322,6 +327,7 @@
|
|
|
|
|
<script>
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
import duration from "dayjs/plugin/duration";
|
|
|
|
|
import Favico from "favico.js";
|
|
|
|
|
// import highlighting library (you can use any library you want just return html string)
|
|
|
|
|
import { highlight, languages } from "prismjs/components/prism-core";
|
|
|
|
@ -337,10 +343,12 @@ import DOMPurify from "dompurify";
|
|
|
|
|
import Confirm from "../components/Confirm.vue";
|
|
|
|
|
import PublicGroupList from "../components/PublicGroupList.vue";
|
|
|
|
|
import MaintenanceTime from "../components/MaintenanceTime.vue";
|
|
|
|
|
import DateTime from "../components/Datetime.vue";
|
|
|
|
|
import { getResBaseURL } from "../util-frontend";
|
|
|
|
|
import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_MAINTENANCE, STATUS_PAGE_PARTIAL_DOWN, UP, MAINTENANCE } from "../util.ts";
|
|
|
|
|
|
|
|
|
|
const toast = useToast();
|
|
|
|
|
dayjs.extend(duration);
|
|
|
|
|
|
|
|
|
|
const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
|
|
|
|
|
|
|
|
|
@ -359,6 +367,7 @@ export default {
|
|
|
|
|
Confirm,
|
|
|
|
|
PrismEditor,
|
|
|
|
|
MaintenanceTime,
|
|
|
|
|
DateTime,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Leave Page for vue route change
|
|
|
|
@ -400,6 +409,10 @@ export default {
|
|
|
|
|
baseURL: "",
|
|
|
|
|
clickedEditButton: false,
|
|
|
|
|
maintenanceList: [],
|
|
|
|
|
autoRefreshInterval: 5,
|
|
|
|
|
lastUpdateTime: dayjs(),
|
|
|
|
|
updateCountdown: null,
|
|
|
|
|
updateCountdownText: null,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
@ -637,11 +650,13 @@ export default {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 5mins a loop
|
|
|
|
|
// Configure auto-refresh loop
|
|
|
|
|
this.updateHeartbeatList();
|
|
|
|
|
feedInterval = setInterval(() => {
|
|
|
|
|
this.updateHeartbeatList();
|
|
|
|
|
}, (300 + 10) * 1000);
|
|
|
|
|
}, (this.autoRefreshInterval * 60 + 10) * 1000);
|
|
|
|
|
|
|
|
|
|
this.updateUpdateTimer();
|
|
|
|
|
|
|
|
|
|
// Go to edit page if ?edit present
|
|
|
|
|
// null means ?edit present, but no value
|
|
|
|
@ -700,10 +715,29 @@ export default {
|
|
|
|
|
favicon.badge(downMonitors);
|
|
|
|
|
|
|
|
|
|
this.loadedData = true;
|
|
|
|
|
this.lastUpdateTime = dayjs();
|
|
|
|
|
this.updateUpdateTimer();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Setup timer to display countdown to refresh
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
updateUpdateTimer() {
|
|
|
|
|
clearInterval(this.updateCountdown);
|
|
|
|
|
|
|
|
|
|
this.updateCountdown = setInterval(() => {
|
|
|
|
|
const countdown = dayjs.duration(this.lastUpdateTime.add(this.autoRefreshInterval, "minutes").add(10, "seconds").diff(dayjs()));
|
|
|
|
|
if (countdown.as("seconds") < 0) {
|
|
|
|
|
clearInterval(this.updateCountdown);
|
|
|
|
|
} else {
|
|
|
|
|
this.updateCountdownText = countdown.format("mm:ss");
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** Enable editing mode */
|
|
|
|
|
edit() {
|
|
|
|
|
if (this.hasToken) {
|
|
|
|
@ -1118,4 +1152,8 @@ footer {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.refresh-info {
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|