Merge pull request #501 from Saibamen/incident_use_local_timezone

[status-page] Display created and updated time in local timezone. Fixes #491

src/mixins/datetime.js

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

src/pages/StatusPage.vue

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