From e897a96c171b4a6eed7a20e3f2f97bd85f24a718 Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Mon, 2 Oct 2023 19:26:47 +0530
Subject: [PATCH 1/8] [empty commit] pull request for Substancia
From dbaf84fe39a5d8b28ca781d71fba043fd20f431e Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Mon, 2 Oct 2023 19:27:49 +0530
Subject: [PATCH 2/8] feat: add support for 12-hour time format
---
src/components/Datetime.vue | 6 ++++-
src/components/PingChart.vue | 45 +++++++++++++++++++++++++++++++++---
src/mixins/datetime.js | 12 ++++++++--
src/pages/Details.vue | 11 +++++++--
4 files changed, 66 insertions(+), 8 deletions(-)
diff --git a/src/components/Datetime.vue b/src/components/Datetime.vue
index 0d4e182cd..7e64b85fe 100644
--- a/src/components/Datetime.vue
+++ b/src/components/Datetime.vue
@@ -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);
}
},
},
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 9502eb84c..41a7d5c54 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -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;
diff --git a/src/mixins/datetime.js b/src/mixins/datetime.js
index 1946d1902..380cfc94d 100644
--- a/src/mixins/datetime.js
+++ b/src/mixins/datetime.js
@@ -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);
},
/**
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 3b9357a9b..ae5479202 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -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>
From e1d47c56a596d3b2e278791e2c60ce20f8506f03 Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Mon, 2 Oct 2023 19:34:58 +0530
Subject: [PATCH 3/8] fix lint
---
src/components/PingChart.vue | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 41a7d5c54..1cf0586f1 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -314,6 +314,7 @@ export default {
background-color: #070a10;
border-color: #1d2634;
}
+
.time-format-12-hour-check-label {
padding: 2px 5px;
background: transparent;
From 7a4918d49376a9cf4adc9a280d278a47b2ece58d Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Tue, 3 Oct 2023 02:22:16 +0530
Subject: [PATCH 4/8] move time format change to settings
---
src/components/PingChart.vue | 28 ----------------------
src/components/settings/General.vue | 36 +++++++++++++++++++++++++++++
src/pages/DashboardHome.vue | 14 ++++++++++-
src/pages/Details.vue | 10 ++++----
src/pages/Settings.vue | 4 ++++
5 files changed, 59 insertions(+), 33 deletions(-)
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 1cf0586f1..89990b295 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -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;
diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
index cec237588..bfc651e27 100644
--- a/src/components/settings/General.vue
+++ b/src/components/settings/General.vue
@@ -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">
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 3baf35a62..5f6d2fb1a 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -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>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index ae5479202..8b6352634 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -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;
+ });
}
},
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index ce867b144..2a38ea036 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -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";
}
From 5e9d5627127a2db02fa66b6b31ceedf2d7250486 Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Tue, 3 Oct 2023 02:40:22 +0530
Subject: [PATCH 5/8] cleanup
---
src/components/PingChart.vue | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 89990b295..9950756f3 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -289,9 +289,6 @@ 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;
From 0fbf2f375faa11b3b57b4e0adf980e14b5b105d0 Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Tue, 3 Oct 2023 03:50:04 +0530
Subject: [PATCH 6/8] fix PR comments
---
src/components/PingChart.vue | 5 ++---
src/lang/en.json | 5 ++++-
src/mixins/datetime.js | 12 +++++-------
3 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 9950756f3..6400e3f5a 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -64,9 +64,8 @@ export default {
},
computed: {
chartOptions() {
- const minuteTimeFormat = `${
- this.use12HourTimeFormat ? "hh" : "HH"
- }:mm${
+ const hourTimeFormat = this.use12HourTimeFormat ? "hh" : "HH";
+ const minuteTimeFormat = `${hourTimeFormat}:mm${
this.use12HourTimeFormat ? " A" : ""
}`;
return {
diff --git a/src/lang/en.json b/src/lang/en.json
index c75dd7c86..ed624f450 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -838,5 +838,8 @@
"successDisabled": "Disabled Successfully.",
"successEnabled": "Enabled Successfully.",
"tagNotFound": "Tag not found.",
- "foundChromiumVersion": "Found Chromium/Chrome. Version: {0}"
+ "foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
+ "Time Format": "Time Format",
+ "12-hour": "12 Hour",
+ "24-hour": "24 Hour"
}
diff --git a/src/mixins/datetime.js b/src/mixins/datetime.js
index 380cfc94d..42287e1ea 100644
--- a/src/mixins/datetime.js
+++ b/src/mixins/datetime.js
@@ -35,17 +35,15 @@ 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
+ * @param {boolean} use12HourTimeFormat Whether to use 12-hour format
* @returns {string} Formatted string
*/
- datetime(value, use12HourFormat = false) {
+ datetime(value, use12HourTimeFormat = false) {
+ const hourTimeFormat = use12HourTimeFormat ? "hh" : "HH";
const timeFormat =
- `YYYY-MM-DD ${
- use12HourFormat ? "hh" : "HH"
- }:mm:ss${
- use12HourFormat ? " A" : ""
+ `YYYY-MM-DD ${hourTimeFormat}:mm:ss${
+ use12HourTimeFormat ? " A" : ""
}`;
- console.log(timeFormat);
return this.datetimeFormat(value, timeFormat);
},
From 449f68e20b194861c1c0f15a6657735fd167d620 Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Sun, 8 Oct 2023 13:35:32 +0530
Subject: [PATCH 7/8] fix PR tasks
---
src/components/PingChart.vue | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 6400e3f5a..0f8ee3809 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -68,6 +68,9 @@ export default {
const minuteTimeFormat = `${hourTimeFormat}:mm${
this.use12HourTimeFormat ? " A" : ""
}`;
+ const tooltipFormat = `YYYY-MM-DD ${hourTimeFormat}:mm:ss${
+ this.use12HourTimeFormat ? " A" : ""
+ }`;
return {
responsive: true,
maintainAspectRatio: false,
@@ -105,7 +108,7 @@ export default {
time: {
minUnit: "minute",
round: "second",
- tooltipFormat: "YYYY-MM-DD HH:mm:ss",
+ tooltipFormat,
displayFormats: {
minute: minuteTimeFormat,
hour: `MM-DD ${minuteTimeFormat}`,
@@ -185,7 +188,7 @@ export default {
)
)
.map((beat) => {
- const x = this.$root.datetime(beat.time, this.use12HourTimeFormat);
+ const x = this.$root.datetime(beat.time);
pingData.push({
x,
y: beat.ping,
From 15d7f5d34832b3f64e3fd58442ac63760bd8e4e9 Mon Sep 17 00:00:00 2001
From: Substancia <sentientasins@gmail.com>
Date: Mon, 9 Oct 2023 15:01:00 +0530
Subject: [PATCH 8/8] load once and cache
---
src/components/settings/General.vue | 1 +
src/pages/DashboardHome.vue | 5 ++++-
src/pages/Details.vue | 5 ++++-
3 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/components/settings/General.vue b/src/components/settings/General.vue
index bfc651e27..919044880 100644
--- a/src/components/settings/General.vue
+++ b/src/components/settings/General.vue
@@ -335,6 +335,7 @@ export default {
*/
saveGeneral() {
localStorage.timezone = this.$root.userTimezone;
+ this.$root.use12HourTimeFormat = this.settings.use12HourTimeFormat;
this.saveSettings();
},
/**
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 5f6d2fb1a..6e0bfbe86 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -113,8 +113,11 @@ export default {
},
},
- mounted() {
+ created() {
this.loadSettings();
+ },
+
+ mounted() {
this.getImportantHeartbeatListLength();
this.$root.emitter.on("newImportantHeartbeat", this.onNewImportantHeartbeat);
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 8b6352634..b49f352dc 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -413,8 +413,11 @@ export default {
},
},
- mounted() {
+ created() {
this.loadSettings();
+ },
+
+ mounted() {
this.getImportantHeartbeatListLength();
this.$root.emitter.on("newImportantHeartbeat", this.onNewImportantHeartbeat);