Adds 24 hour option

assets/components/RelativeTime.vue

@@ -1,8 +1,9 @@
 <template>
-  <time :datetime="date.toISOString()">{{ date | relativeTime }}</time>
+  <time :datetime="date.toISOString()">{{ date | relativeTime(locale) }}</time>
 </template>
 
 <script>
+import { mapActions, mapState } from "vuex";
 import { formatRelative } from "date-fns";
 import { enGB, enUS } from "date-fns/locale";
 
@@ -13,7 +14,8 @@ const use24Hr =
     .formatToParts(new Date(2020, 0, 1, 13))
     .find((part) => part.type === "hour").value.length === 2;
 
-const locale = use24Hr ? enGB : enUS;
+const auto = use24Hr ? enGB : enUS;
+const styles = { auto, 12: enUS, 24: enGB };
 
 export default {
   props: {
@@ -25,8 +27,14 @@ export default {
   name: "RelativeTime",
   components: {},
 
+  computed: {
+    ...mapState(["settings"]),
+    locale() {
+      return styles[this.settings.hourStyle];
+    },
+  },
   filters: {
-    relativeTime(date) {
+    relativeTime(date, locale) {
       return formatRelative(date, new Date(), { locale });
     },
   },

assets/main.js

@@ -3,6 +3,8 @@ import VueRouter from "vue-router";
 import Meta from "vue-meta";
 import Dropdown from "buefy/dist/esm/dropdown";
 import Switch from "buefy/dist/esm/switch";
+import Radio from "buefy/dist/esm/radio";
+import Field from "buefy/dist/esm/field";
 import store from "./store";
 import config from "./store/config";
 import App from "./App.vue";
@@ -12,6 +14,8 @@ Vue.use(VueRouter);
 Vue.use(Meta);
 Vue.use(Dropdown);
 Vue.use(Switch);
+Vue.use(Radio);
+Vue.use(Field);
 
 const routes = [
   {

assets/pages/Settings.vue

@@ -28,27 +28,35 @@
       </div>
 
       <div class="item">
-        <b-switch v-model="smallerScrollbars">
-          Use smaller scrollbars
-        </b-switch>
+        <b-switch v-model="smallerScrollbars"> Use smaller scrollbars </b-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="showTimestamp">
-          Show timestamps
-        </b-switch>
+        <b-switch v-model="showTimestamp"> Show timestamps </b-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="showAllContainers">
-          Show stopped containers
-        </b-switch>
+        <b-switch v-model="showAllContainers"> Show stopped containers </b-switch>
       </div>
 
       <div class="item">
-        <b-switch v-model="lightTheme">
-          Use light theme
-        </b-switch>
+        <b-switch v-model="lightTheme"> Use light theme </b-switch>
+      </div>
+
+      <div class="item">
+        <b-field>
+          <b-radio-button v-model="hourStyle" native-value="auto">
+            <span>Auto</span>
+          </b-radio-button>
+
+          <b-radio-button v-model="hourStyle" native-value="12">
+            <span>12 hour</span>
+          </b-radio-button>
+
+          <b-radio-button v-model="hourStyle" native-value="24">
+            <span>24 hour</span>
+          </b-radio-button>
+        </b-field>
       </div>
 
       <div class="item">
@@ -76,9 +84,7 @@
               </b-dropdown-item>
             </b-dropdown>
           </div>
-          <div class="column">
-            Font size to use for logs
-          </div>
+          <div class="column">Font size to use for logs</div>
         </div>
       </div>
     </section>
@@ -126,7 +132,7 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
-    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme"].reduce(
+    ...["search", "size", "smallerScrollbars", "showTimestamp", "showAllContainers", "lightTheme", "hourStyle"].reduce(
       (map, name) => {
         map[name] = {
           get() {

assets/store/settings.js

@@ -6,5 +6,6 @@ export const DEFAULT_SETTINGS = {
   smallerScrollbars: false,
   showTimestamp: true,
   showAllContainers: false,
-  lightTheme: false
+  lightTheme: false,
+  hourStyle: "auto",
 };

assets/styles.scss

@@ -30,6 +30,7 @@ $link-active: $grey-dark;
 @import "~buefy/src/scss/utils/_all";
 @import "~buefy/src/scss/components/_dropdown";
 @import "~buefy/src/scss/components/_switch";
+@import "~buefy/src/scss/components/_radio";
 
 html {
   --scheme-main: #{$black};