mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-23 14:54:05 +00:00
feat: add support for 12-hour time format
This commit is contained in:
Substancia
parent
e897a96c17
commit
dbaf84fe39
4 changed files with 66 additions and 8 deletions
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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] }}
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue