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

Merge be83595a19 into 46d8744fa4

Browse source
This commit is contained in:
Mohammad Jibin 2024-10-27 05:22:34 +00:00 committed by GitHub
commit c084d52dfc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 101 additions and 9 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);
}
},
},

17
src/components/PingChart.vue
View file

@ -40,6 +40,10 @@ export default {
type: Number,
required: true,
},
use12HourTimeFormat: {
type: Boolean,
default: false
}
},
data() {
return {
@ -64,6 +68,13 @@ export default {
},
computed: {
chartOptions() {
const hourTimeFormat = this.use12HourTimeFormat ? "hh" : "HH";
const minuteTimeFormat = `${hourTimeFormat}:mm${
this.use12HourTimeFormat ? " A" : ""
}`;
const tooltipFormat = `YYYY-MM-DD ${hourTimeFormat}:mm:ss${
this.use12HourTimeFormat ? " A" : ""
}`;
return {
responsive: true,
maintainAspectRatio: false,
@ -101,10 +112,10 @@ export default {
time: {
minUnit: "minute",
round: "second",
tooltipFormat: "YYYY-MM-DD HH:mm:ss",
tooltipFormat,
displayFormats: {
minute: "HH:mm",
hour: "MM-DD HH:mm",
minute: minuteTimeFormat,
hour: `MM-DD ${minuteTimeFormat}`,
}
},
ticks: {

37
src/components/settings/General.vue
View file

@ -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">
@ -259,6 +295,7 @@ export default {
*/
saveGeneral() {
localStorage.timezone = this.$root.userTimezone;
this.$root.use12HourTimeFormat = this.settings.use12HourTimeFormat;
this.saveSettings();
},
/**

3
src/lang/en.json
View file

@ -918,6 +918,9 @@
"successEnabled": "Enabled Successfully.",
"tagNotFound": "Tag not found.",
"foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
"Time Format": "Time Format",
"12-hour": "12 Hour",
"24-hour": "24 Hour",
"Remote Browsers": "Remote Browsers",
"Remote Browser": "Remote Browser",
"Add a Remote Browser": "Add a Remote Browser",

10
src/mixins/datetime.js
View file

@ -35,10 +35,16 @@ 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} use12HourTimeFormat Whether to use 12-hour format
* @returns {string} Formatted string
*/
datetime(value) {
return this.datetimeFormat(value, "YYYY-MM-DD HH:mm:ss");
datetime(value, use12HourTimeFormat = false) {
const hourTimeFormat = use12HourTimeFormat ? "hh" : "HH";
const timeFormat =
`YYYY-MM-DD ${hourTimeFormat}:mm:ss${
use12HourTimeFormat ? " A" : ""
}`;
return this.datetimeFormat(value, timeFormat);
},
/**

17
src/pages/DashboardHome.vue
View file

@ -59,7 +59,7 @@
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
<td class="name-column"><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>
@ -113,6 +113,7 @@ export default {
},
importantHeartBeatListLength: 0,
displayedRecords: [],
use12HourTimeFormat: false
};
},
watch: {
@ -127,6 +128,10 @@ export default {
},
},
created() {
this.loadSettings();
},
mounted() {
this.getImportantHeartbeatListLength();
@ -203,6 +208,16 @@ export default {
}
},
/**
* Retrieves important settings values.
* @returns {void}
*/
loadSettings() {
this.$root.getSocket().emit("getSettings", res => {
this.use12HourTimeFormat = res.data.use12HourTimeFormat;
});
}
},
};
</script>

16
src/pages/Details.vue
View file

@ -184,7 +184,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" />
</div>
</div>
</div>
@ -228,7 +228,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>
@ -328,6 +328,7 @@ export default {
currentExample: "javascript-fetch",
code: "",
},
use12HourTimeFormat: false,
};
},
computed: {
@ -420,6 +421,10 @@ export default {
},
},
created() {
this.loadSettings();
},
mounted() {
this.getImportantHeartbeatListLength();
@ -656,7 +661,14 @@ export default {
.replace("https://example.com/api/push/key?status=up&msg=OK&ping=", this.pushURL);
this.pushMonitor.code = code;
});
},
loadSettings() {
this.$root.getSocket().emit("getSettings", res => {
this.use12HourTimeFormat = res.data.use12HourTimeFormat || false;
});
}
},
};
</script>

4
src/pages/Settings.vue
View file

@ -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";
}