mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-11-27 08:44:04 +00:00
move time format change to settings
This commit is contained in:
Substancia
parent
06a9e47f62
commit
7a4918d493
5 changed files with 59 additions and 33 deletions
|
|
@ -1,10 +1,6 @@
|
|||
<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>
|
||||
|
|
@ -45,7 +41,6 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
emits: [ "switch-use-12-hour-time-format" ],
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
|
@ -279,12 +274,6 @@ 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>
|
||||
|
|
@ -307,23 +296,6 @@ export default {
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -37,6 +37,42 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Time Format -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label">
|
||||
{{ $t("Time Format") }}
|
||||
</label>
|
||||
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="timeFormatIndex12Hour"
|
||||
v-model="settings.use12HourTimeFormat"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="timeFormatIndex"
|
||||
:value="true"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="timeFormatIndex12Hour">
|
||||
{{ $t("12-hour") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="timeFormatIndex24Hour"
|
||||
v-model="settings.use12HourTimeFormat"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="timeFormatIndex"
|
||||
:value="false"
|
||||
required
|
||||
/>
|
||||
<label class="form-check-label" for="timeFormatIndex24Hour">
|
||||
{{ $t("24-hour") }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Engine -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label">
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
|
||||
<td><router-link :to="`/dashboard/${beat.monitorID}`">{{ $root.monitorList[beat.monitorID]?.name }}</router-link></td>
|
||||
<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>
|
||||
|
||||
|
|
@ -98,6 +98,7 @@ export default {
|
|||
},
|
||||
importantHeartBeatListLength: 0,
|
||||
displayedRecords: [],
|
||||
use12HourTimeFormat: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -113,6 +114,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.loadSettings();
|
||||
this.getImportantHeartbeatListLength();
|
||||
|
||||
this.$root.emitter.on("newImportantHeartbeat", this.onNewImportantHeartbeat);
|
||||
|
|
@ -188,6 +190,16 @@ export default {
|
|||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves important settings values.
|
||||
* @returns {void}
|
||||
*/
|
||||
loadSettings() {
|
||||
this.$root.getSocket().emit("getSettings", res => {
|
||||
this.use12HourTimeFormat = res.data.use12HourTimeFormat;
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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" :use12HourTimeFormat="use12HourTimeFormat" @switch-use-12-hour-time-format="set12HourTimeFormat" />
|
||||
<PingChart :monitor-id="monitor.id" :use12HourTimeFormat="use12HourTimeFormat" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -414,6 +414,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.loadSettings();
|
||||
this.getImportantHeartbeatListLength();
|
||||
|
||||
this.$root.emitter.on("newImportantHeartbeat", this.onNewImportantHeartbeat);
|
||||
|
|
@ -645,9 +646,10 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
set12HourTimeFormat() {
|
||||
console.log(this.use12HourTimeFormat, "->", !this.use12HourTimeFormat);
|
||||
this.use12HourTimeFormat = !this.use12HourTimeFormat;
|
||||
loadSettings() {
|
||||
this.$root.getSocket().emit("getSettings", res => {
|
||||
this.use12HourTimeFormat = res.data.use12HourTimeFormat || false;
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -163,6 +163,10 @@ export default {
|
|||
this.settings.searchEngineIndex = false;
|
||||
}
|
||||
|
||||
if (this.settings.use12HourTimeFormat === undefined) {
|
||||
this.settings.use12HourTimeFormat = false;
|
||||
}
|
||||
|
||||
if (this.settings.entryPage === undefined) {
|
||||
this.settings.entryPage = "dashboard";
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue