Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-10-01 01:25:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: add support for 12-hour time format

Browse Source
This commit is contained in:
Substancia 2023-10-02 19:27:49 +05:30
parent e897a96c17
commit dbaf84fe39
4 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Datetime.vue
View File

@ -15,6 +15,10 @@ export default {
type: Boolean,
default: false,
},
use12HourTimeFormat: {
type: Boolean,
default: false
},
},
computed: {
@ -22,7 +26,7 @@ export default {
if (this.dateOnly) {
return this.$root.date(this.value);
} else {
return this.$root.datetime(this.value);
return this.$root.datetime(this.value, this.use12HourTimeFormat);
}
},
},

45
src/components/PingChart.vue
View File

@ -1,6 +1,10 @@
<template>
<div>
<div class="period-options">
<span class="time-format-12-hour">
<input id="checkbox12HourTimeFormat" class="time-format-12-hour-check-input form-check-input" type="checkbox" @change="set12HourTimeFormat" />
<label for="checkbox12HourTimeFormat" class="time-format-12-hour-check-label">{{ $t("12-hour format") }}</label>
</span>
<button type="button" class="btn btn-light dropdown-toggle btn-period-toggle" data-bs-toggle="dropdown" aria-expanded="false">
{{ chartPeriodOptions[chartPeriodHrs] }}&nbsp;
</button>
@ -36,7 +40,12 @@ export default {
type: Number,
required: true,
},
use12HourTimeFormat: {
type: Boolean,
default: false
}
},
emits: [ "switch-use-12-hour-time-format" ],
data() {
return {
@ -60,6 +69,11 @@ export default {
},
computed: {
chartOptions() {
const minuteTimeFormat = `${
this.use12HourTimeFormat ? "hh" : "HH"
}:mm${
this.use12HourTimeFormat ? " A" : ""
}`;
return {
responsive: true,
maintainAspectRatio: false,
@ -99,8 +113,8 @@ export default {
round: "second",
tooltipFormat: "YYYY-MM-DD HH:mm:ss",
displayFormats: {
minute: "HH:mm",
hour: "MM-DD HH:mm",
minute: minuteTimeFormat,
hour: `MM-DD ${minuteTimeFormat}`,
}
},
ticks: {
@ -177,7 +191,7 @@ export default {
)
)
.map((beat) => {
const x = this.$root.datetime(beat.time);
const x = this.$root.datetime(beat.time, this.use12HourTimeFormat);
pingData.push({
x,
y: beat.ping,
@ -265,6 +279,12 @@ export default {
if (period != null) {
this.chartPeriodHrs = Math.min(period, 6);
}
},
methods: {
set12HourTimeFormat() {
console.log(this.use12HourTimeFormat, "->", !this.use12HourTimeFormat);
this.$emit("switch-use-12-hour-time-format");
}
}
};
</script>
@ -280,10 +300,29 @@ export default {
.period-options {
padding: 0.1em 1em;
margin-bottom: -1.2em;
display: flex;
flex-direction: row;
align-items: center;
float: right;
position: relative;
z-index: 10;
.time-format-12-hour {
.time-format-12-hour-check-input {
margin-top: 0;
vertical-align: middle;
background-color: #070a10;
border-color: #1d2634;
}
.time-format-12-hour-check-label {
padding: 2px 5px;
background: transparent;
border: 0;
opacity: 0.7;
font-size: 0.9em;
}
}
.dropdown-menu {
padding: 0;
min-width: 50px;

12
src/mixins/datetime.js
View File

@ -35,10 +35,18 @@ export default {
/**
* Return a given value in the format YYYY-MM-DD HH:mm:ss
* @param {any} value Value to format as date time
* @param {boolean} use12HourFormat Whether to use 12-hour format
* @returns {string} Formatted string
*/
datetime(value) {
return this.datetimeFormat(value, "YYYY-MM-DD HH:mm:ss");
datetime(value, use12HourFormat = false) {
const timeFormat =
`YYYY-MM-DD ${
use12HourFormat ? "hh" : "HH"
}:mm:ss${
use12HourFormat ? " A" : ""
}`;
console.log(timeFormat);
return this.datetimeFormat(value, timeFormat);
},
/**

11
src/pages/Details.vue
View File

@ -176,7 +176,7 @@
<div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
<div class="row">
<div class="col">
<PingChart :monitor-id="monitor.id" />
<PingChart :monitor-id="monitor.id" :use12HourTimeFormat="use12HourTimeFormat" @switch-use-12-hour-time-format="set12HourTimeFormat" />
</div>
</div>
</div>
@ -219,7 +219,7 @@
<tbody>
<tr v-for="(beat, index) in displayedRecords" :key="index" style="padding: 10px;">
<td><Status :status="beat.status" /></td>
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
<td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" :use12HourTimeFormat="use12HourTimeFormat" /></td>
<td class="border-0">{{ beat.msg }}</td>
</tr>
@ -317,6 +317,7 @@ export default {
currentExample: "javascript-fetch",
code: "",
},
use12HourTimeFormat: false,
};
},
computed: {
@ -642,7 +643,13 @@ export default {
.replace("https://example.com/api/push/key?status=up&msg=OK&ping=", this.pushURL);
this.pushMonitor.code = code;
});
},
set12HourTimeFormat() {
console.log(this.use12HourTimeFormat, "->", !this.use12HourTimeFormat);
this.use12HourTimeFormat = !this.use12HourTimeFormat;
}
},
};
</script>