refactor: replaces dayjs with native Intl.* API (#955)

Signed-off-by: Pedro Lamas <[email protected]>
fluidd-core · Nov 21, 2022 · 7f23626 · 7f23626
1 parent 1b451b8
commit 7f23626
Show file tree

Hide file tree

Showing 26 changed files with 269 additions and 207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,6 @@
     "@jaames/iro": "^5.5.2",
     "axios": "^0.27.2",
     "consola": "^2.15.3",
-    "dayjs": "^1.11.6",
     "deepmerge": "^4.2.2",
     "echarts": "^5.4.0",
     "echarts-gl": "^2.0.9",

diff --git a/src/components/layout/AppAnnouncementDismissMenu.vue b/src/components/layout/AppAnnouncementDismissMenu.vue
@@ -60,17 +60,19 @@ import StateMixin from '@/mixins/state'
 export default class AppAnnouncementDismissMenu extends Mixins(StateMixin) {
   get presets () {
     return [
-      { hours: 1 },
-      { days: 1 },
-      { days: 7 }
-    ].map(v => {
-      const duration = this.$dayjs.duration(v)
-
-      return ({
-        label: duration.humanize(),
-        delay: duration.asSeconds()
-      })
-    })
+      {
+        label: this.$filters.formatRelativeTime(1, 'hour', { numeric: 'always' }),
+        delay: 3600
+      },
+      {
+        label: this.$filters.formatRelativeTime(1, 'day', { numeric: 'always' }),
+        delay: 3600 * 24
+      },
+      {
+        label: this.$filters.formatRelativeTime(7, 'day', { numeric: 'always' }),
+        delay: 3600 * 24 * 7
+      }
+    ]
   }
 }
 </script>
diff --git a/src/components/layout/AppNotificationMenu.vue b/src/components/layout/AppNotificationMenu.vue
@@ -82,7 +82,7 @@
                 v-html="n.description"
               />
               <v-list-item-subtitle class="notification-timestamp">
-                {{ $filters.formatDateTime(n.timestamp) }}
+                {{ $filters.formatRelativeTimeToNow(n.timestamp * 1000) }}
               </v-list-item-subtitle>
               <v-list-item-subtitle v-if="n.to">
                 <app-btn

diff --git a/src/components/settings/GeneralSettings.vue b/src/components/settings/GeneralSettings.vue
@@ -42,31 +42,25 @@
 
       <v-divider />
 
-      <app-setting :title="$t('app.setting.label.date_time_format')">
+      <app-setting :title="$t('app.setting.label.date_format')">
         <v-select
-          v-model="dateformat"
+          v-model="dateFormat"
           filled
           dense
           hide-details="auto"
-          :items="[
-            { text: $filters.formatDateTime(current_time, 'MMM. DD, YYYY'), value: 'MMM. DD,' },
-            { text: $filters.formatDateTime(current_time, 'DD MMM. YYYY'), value: 'DD MMM.' }
-          ]"
-          item-value="value"
-          item-text="text"
+          :items="availableDateFormats"
         />
-        &nbsp;
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting :title="$t('app.setting.label.time_format')">
         <v-select
-          v-model="timeformat"
+          v-model="timeFormat"
           filled
           dense
           hide-details="auto"
-          :items="[
-            { text: $filters.formatDateTime(current_time, 'h:mm a'), value: 'hh:mm a' },
-            { text: $filters.formatDateTime(current_time, 'HH:mm'), value: 'HH:mm' }
-          ]"
-          item-value="value"
-          item-text="text"
+          :items="availableTimeFormats"
         />
       </app-setting>
 
@@ -95,8 +89,6 @@
           single-line
           hide-details="auto"
           :items="[{ text: $tc('app.setting.label.none'), value: null }, ...powerDevicesList]"
-          item-value="value"
-          item-text="text"
         />
       </app-setting>
 
@@ -161,6 +153,7 @@
 import { Component, Mixins, Ref } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import { VInput } from '@/types'
+import { DateFormats, TimeFormats } from '@/globals'
 
 @Component({
   components: {}
@@ -201,30 +194,50 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     this.$store.dispatch('config/onLocaleChange', value)
   }
 
-  get dateformat () {
-    return this.$store.state.config.uiSettings.general.dateformat
+  get dateFormat () {
+    return this.$store.state.config.uiSettings.general.dateFormat
   }
 
-  set dateformat (value: boolean) {
+  set dateFormat (value: boolean) {
     this.$store.dispatch('config/saveByPath', {
-      path: 'uiSettings.general.dateformat',
+      path: 'uiSettings.general.dateFormat',
       value,
       server: true
     })
   }
 
-  get timeformat () {
-    return this.$store.state.config.uiSettings.general.timeformat
+  get availableDateFormats () {
+    const date = new Date()
+
+    return Object.entries(DateFormats)
+      .map(([key, entry]) => ({
+        value: key,
+        text: `${date.toLocaleDateString(entry.locale ?? this.$i18n.locale, entry.options)}${entry.suffix ?? ''}`
+      }))
+  }
+
+  get timeFormat () {
+    return this.$store.state.config.uiSettings.general.timeFormat
   }
 
-  set timeformat (value: boolean) {
+  set timeFormat (value: boolean) {
     this.$store.dispatch('config/saveByPath', {
-      path: 'uiSettings.general.timeformat',
+      path: 'uiSettings.general.timeFormat',
       value,
       server: true
     })
   }
 
+  get availableTimeFormats () {
+    const date = new Date()
+
+    return Object.entries(TimeFormats)
+      .map(([key, entry]) => ({
+        value: key,
+        text: `${date.toLocaleTimeString(entry.locale ?? this.$i18n.locale, entry.options)}${entry.suffix ?? ''}`
+      }))
+  }
+
   get confirmOnEstop () {
     return this.$store.state.config.uiSettings.general.confirmOnEstop
   }

diff --git a/src/components/settings/VersionInformationDialog.vue b/src/components/settings/VersionInformationDialog.vue
@@ -44,7 +44,7 @@
               </template>
 
               <div class="secondary--text mb-4">
-                {{ $t('app.version.label.commits_on') }} {{ $dayjs(key).format('ll') }}
+                {{ $t('app.version.label.commits_on') }} {{ $filters.formatDate(key) }}
               </div>
 
               <ol class="commit-history">
@@ -65,7 +65,7 @@
                         >
                           <strong>{{ commit.author }}</strong>
                         </a>
-                        {{ $t('app.version.label.committed') }} {{ $dayjs(commit.date).fromNow() }}
+                        {{ $t('app.version.label.committed') }} {{ $filters.formatRelativeTimeToNow(commit.date * 1000) }}
                       </div>
                     </div>
                     <div>

diff --git a/src/components/widgets/console/ConsoleItem.vue b/src/components/widgets/console/ConsoleItem.vue
@@ -44,7 +44,7 @@ export default class ConsoleItem extends Vue {
 
   get itemTime () {
     return (this.value.time)
-      ? this.$dayjs(this.value.time * 1000).format('HH:mm:ss')
+      ? this.$filters.formatTimeWithSeconds(this.value.time * 1000)
       : ''
   }
 

diff --git a/src/components/widgets/diagnostics/DiagnosticsCard.vue b/src/components/widgets/diagnostics/DiagnosticsCard.vue
@@ -36,6 +36,7 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import CollapsableCard from '@/components/common/CollapsableCard.vue'
 import { DiagnosticsCardConfig } from '@/store/diagnostics/types'
 import AppChart from '@/components/ui/AppChart.vue'
+import { EChartsOption } from 'echarts'
 
 @Component({
   components: { AppChart, CollapsableCard }
@@ -100,8 +101,7 @@ export default class DiagnosticsCard extends Vue {
       grid,
       color,
       legend: {
-        show: false,
-        selected: true // changed
+        show: false
       },
       tooltip: {
         ...tooltip,
@@ -201,7 +201,7 @@ export default class DiagnosticsCard extends Vue {
         zoomOnMouseWheel: 'shift'
       }],
       series
-    }
+    } as EChartsOption
 
     return options
   }
@@ -250,8 +250,7 @@ export default class DiagnosticsCard extends Vue {
   }
 
   xAxisPointerFormatter (params: any) {
-    const d = this.$dayjs(params.value)
-    return d.format('H:mm:ss')
+    return this.$filters.formatTimeWithSeconds(params.value)
   }
 }
 </script>
diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -254,7 +254,7 @@
             item-value="print_start_time"
           >
             <span v-if="item.print_start_time !== undefined && item.print_start_time !== null">
-              {{ $filters.formatDateTime(item.print_start_time, $store.state.config.uiSettings.general.dateformat + ' YYYY - ' + $store.state.config.uiSettings.general.timeformat) }}
+              {{ $filters.formatDateTime(item.print_start_time * 1000) }}
             </span>
           </file-row-item>
 
@@ -263,7 +263,7 @@
             item-value="modified"
           >
             <span v-if="item.modified !== undefined && item.modified !== null">
-              {{ $filters.formatDateTime(item.modified, $store.state.config.uiSettings.general.dateformat + ' YYYY - ' + $store.state.config.uiSettings.general.timeformat) }}
+              {{ $filters.formatDateTime(item.modified * 1000) }}
             </span>
           </file-row-item>
 

diff --git a/src/components/widgets/history/JobHistory.vue b/src/components/widgets/history/JobHistory.vue
@@ -109,7 +109,7 @@
         #[`item.start_time`]="{ item }"
       >
         <span class="text-no-wrap">
-          {{ $filters.formatDateTime(item.start_time, $store.state.config.uiSettings.general.dateformat + ' YYYY - ' + $store.state.config.uiSettings.general.timeformat) }}
+          {{ $filters.formatDateTime(item.start_time * 1000) }}
         </span>
       </template>
 
@@ -120,7 +120,7 @@
           v-if="item.status !== 'in_progress'"
           class="text-no-wrap"
         >
-          {{ $filters.formatDateTime(item.end_time, $store.state.config.uiSettings.general.dateformat + ' YYYY - ' + $store.state.config.uiSettings.general.timeformat) }}
+          {{ $filters.formatDateTime(item.end_time * 1000) }}
         </span>
         <span v-else>--</span>
       </template>

diff --git a/src/components/widgets/status/ReprintTab.vue b/src/components/widgets/status/ReprintTab.vue
@@ -64,19 +64,6 @@
             <span v-else>--</span>
           </td>
 
-          <!-- <td>
-            <span class="text-no-wrap" v-if="item.total_duration > 0">
-              {{ $filters.formatCounterTime(item.total_duration) }}
-            </span>
-            <span v-else>--</span>
-          </td> -->
-
-          <!-- <td>
-            <span class="text-no-wrap">
-              {{ $filters.formatDateTime(item.start_time, 'lll') }}
-            </span>
-          </td> -->
-
           <td
             v-if="!printerPrinting"
             class="actions"

diff --git a/src/components/widgets/status/StatusTab.vue b/src/components/widgets/status/StatusTab.vue
@@ -119,7 +119,7 @@
               </status-label>
 
               <status-label :label="$t('app.general.label.finish_time')">
-                <span v-if="estimates.eta > 0 && printerPrinting">{{ $filters.formatAbsoluteDateTime(estimates.eta, $store.state.config.uiSettings.general.timeformat, $store.state.config.uiSettings.general.dateformat + ' - ' + $store.state.config.uiSettings.general.timeformat) }}</span>
+                <span v-if="estimates.eta > 0 && printerPrinting">{{ $filters.formatAbsoluteDateTime(estimates.eta) }}</span>
               </status-label>
             </v-col>
           </v-row>

diff --git a/src/components/widgets/thermals/ThermalChart.vue b/src/components/widgets/thermals/ThermalChart.vue
@@ -17,7 +17,7 @@
 
 <script lang='ts'>
 import { Vue, Component, Watch, Prop, Ref } from 'vue-property-decorator'
-import type { ECharts } from 'echarts'
+import type { ECharts, EChartsOption } from 'echarts'
 import getKlipperType from '@/util/get-klipper-type'
 
 @Component({})
@@ -286,7 +286,7 @@ export default class ThermalChart extends Vue {
         zoomOnMouseWheel: 'shift'
       }],
       series: this.series
-    }
+    } as EChartsOption
 
     return options
   }
@@ -385,8 +385,7 @@ export default class ThermalChart extends Vue {
   }
 
   xAxisPointerFormatter (params: any) {
-    const d = this.$dayjs(params.value)
-    return d.format('H:mm:ss')
+    return this.$filters.formatTimeWithSeconds(params.value)
   }
 
   yAxisPointerFormatter (params: any) {

diff --git a/src/globals.ts b/src/globals.ts
@@ -382,3 +382,37 @@ export const Waits = Object.freeze({
   onQueryProbe: 'onQueryProbe',
   onVersionRefresh: 'onVersionRefresh'
 })
+
+type DateTimeFormat = {
+  locale?: string,
+  options: Intl.DateTimeFormatOptions,
+  suffix?: string
+}
+
+export const DateFormats = Object.freeze({
+  iso: {
+    locale: 'sv-SE',
+    options: { day: '2-digit', month: '2-digit', year: 'numeric' },
+    suffix: ' (ISO 8601)'
+  },
+  digits2: {
+    options: { day: '2-digit', month: '2-digit', year: 'numeric' }
+  },
+  short: {
+    options: { day: '2-digit', month: 'short', year: 'numeric' }
+  }
+} as Record<string, DateTimeFormat>)
+
+export const TimeFormats = Object.freeze({
+  iso: {
+    locale: 'sv-SE',
+    options: { hour: '2-digit', minute: '2-digit', hour12: false },
+    suffix: ' (ISO 8601)'
+  },
+  hours12: {
+    options: { hour: '2-digit', minute: '2-digit', hour12: true }
+  },
+  hours24: {
+    options: { hour: '2-digit', minute: '2-digit', hour12: false }
+  }
+} as Record<string, DateTimeFormat>)