From 9575af7a2b69253dfac93e91fe342055b3451884 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 18 Jun 2020 14:07:04 -0700
Subject: [PATCH] Locale support for 12 hr / 24 format (#525)

---
 assets/components/LogEventSource.spec.js |  8 +++---
 assets/components/LogViewer.vue          | 12 +++------
 assets/components/RelativeTime.vue       | 34 ++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 assets/components/RelativeTime.vue

diff --git a/assets/components/LogEventSource.spec.js b/assets/components/LogEventSource.spec.js
index 7e0981f8..b0f4f2b9 100644
--- a/assets/components/LogEventSource.spec.js
+++ b/assets/components/LogEventSource.spec.js
@@ -144,7 +144,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date">today at 10:55 AM</span> <span class="text">"This is a message."</span></li>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">"This is a message."</span></li>
         </ul>
       `);
     });
@@ -159,7 +159,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date">today at 10:55 AM</span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text"><span style="color:#000">black<span style="color:#AAA">white</span></span></span></li>
         </ul>
       `);
     });
@@ -174,7 +174,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date">today at 10:55 AM</span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">&lt;test&gt;foo bar&lt;/test&gt;</span></li>
         </ul>
       `);
     });
@@ -192,7 +192,7 @@ describe("<LogEventSource />", () => {
       await wrapper.vm.$nextTick();
       expect(wrapper.find("ul.events")).toMatchInlineSnapshot(`
         <ul class="events medium">
-          <li class=""><span class="date">today at 10:55 AM</span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
+          <li class=""><span class="date"><time datetime="2019-06-12T10:55:42.459Z">today at 10:55 AM</time></span> <span class="text">This is a <mark>test</mark> &lt;hi&gt;&lt;/hi&gt;</span></li>
         </ul>
       `);
     });
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
index 3d5d3f32..471168cb 100644
--- a/assets/components/LogViewer.vue
+++ b/assets/components/LogViewer.vue
@@ -1,17 +1,16 @@
 <template>
   <ul class="events" :class="settings.size">
     <li v-for="item in filtered" :key="item.key" :class="{ event: !!item.event }">
-      <span class="date" v-if="settings.showTimestamp">{{ item.date | relativeTime }}</span>
+      <span class="date" v-if="settings.showTimestamp"><relative-time :date="item.date"></relative-time></span>
       <span class="text" v-html="colorize(item.message)"></span>
     </li>
   </ul>
 </template>
-
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
-import { formatRelative } from "date-fns";
 import AnsiConvertor from "ansi-to-html";
 import DOMPurify from "dompurify";
+import RelativeTime from "./RelativeTime";
 
 const ansiConvertor = new AnsiConvertor({ escapeXML: true });
 
@@ -24,7 +23,7 @@ if (window.trustedTypes && trustedTypes.createPolicy) {
 export default {
   props: ["messages"],
   name: "LogViewer",
-  components: {},
+  components: { RelativeTime },
   data() {
     return {
       showSearch: false,
@@ -60,11 +59,6 @@ export default {
       return messages;
     },
   },
-  filters: {
-    relativeTime(date) {
-      return formatRelative(date, new Date());
-    },
-  },
 };
 </script>
 <style scoped lang="scss">
diff --git a/assets/components/RelativeTime.vue b/assets/components/RelativeTime.vue
new file mode 100644
index 00000000..173318ee
--- /dev/null
+++ b/assets/components/RelativeTime.vue
@@ -0,0 +1,34 @@
+<template>
+  <time :datetime="date.toISOString()">{{ date | relativeTime }}</time>
+</template>
+
+<script>
+import { formatRelative } from "date-fns";
+import { enGB, enUS } from "date-fns/locale";
+
+const use24Hr =
+  new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+  })
+    .formatToParts(new Date(2020, 0, 1, 13))
+    .find((part) => part.type === "hour").value.length === 2;
+
+const locale = use24Hr ? enGB : enUS;
+
+export default {
+  props: {
+    date: {
+      required: true,
+      type: Date,
+    },
+  },
+  name: "RelativeTime",
+  components: {},
+
+  filters: {
+    relativeTime(date) {
+      return formatRelative(date, new Date(), { locale });
+    },
+  },
+};
+</script>