Merge pull request #501 from Saibamen/incident_use_local_timezone

[status-page] Display created and updated time in local timezone. Fixes #491
This commit is contained in:
Louis Lam 2021-09-30 18:13:55 +08:00 committed by GitHub
commit 9e95d568c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 18 deletions

View file

@ -1,7 +1,7 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
@ -14,7 +14,7 @@ export default {
data() { data() {
return { return {
userTimezone: localStorage.timezone || "auto", userTimezone: localStorage.timezone || "auto",
} };
}, },
methods: { methods: {
@ -47,11 +47,11 @@ export default {
computed: { computed: {
timezone() { timezone() {
if (this.userTimezone === "auto") { if (this.userTimezone === "auto") {
return dayjs.tz.guess() return dayjs.tz.guess();
} }
return this.userTimezone return this.userTimezone;
}, },
} }
} };

View file

@ -90,9 +90,9 @@
<!-- Incident Date --> <!-- Incident Date -->
<div class="date mt-3"> <div class="date mt-3">
Created: {{ incident.createdDate }} ({{ createdDateFromNow }})<br /> Created: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
<span v-if="incident.lastUpdatedDate"> <span v-if="incident.lastUpdatedDate">
Last Updated: {{ incident.lastUpdatedDate }} ({{ lastUpdatedDateFromNow }}) Last Updated: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
</span> </span>
</div> </div>
@ -157,7 +157,7 @@
</div> </div>
<div v-else> <div v-else>
<font-awesome-icon icon="question-circle" style="color: #efefef" /> <font-awesome-icon icon="question-circle" style="color: #efefef;" />
</div> </div>
</template> </template>
</div> </div>
@ -343,14 +343,6 @@ export default {
return this.overallStatus === STATUS_PAGE_ALL_DOWN; return this.overallStatus === STATUS_PAGE_ALL_DOWN;
}, },
createdDateFromNow() {
return dayjs.utc(this.incident.createdDate).fromNow();
},
lastUpdatedDateFromNow() {
return dayjs.utc(this.incident. lastUpdatedDate).fromNow();
}
}, },
watch: { watch: {
@ -548,7 +540,12 @@ export default {
this.$root.getSocket().emit("unpinIncident", () => { this.$root.getSocket().emit("unpinIncident", () => {
this.incident = null; this.incident = null;
}); });
} },
dateFromNow(date) {
return dayjs.utc(date).fromNow();
},
} }
}; };
</script> </script>