diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index b030cd758..ffd913680 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -84,6 +84,7 @@ export default class TempChart extends Mixins(BaseMixin) {
axisLabel: {
color: 'rgba(255, 255, 255, 0.24)',
margin: 10,
+ formatter: this.timeFormat,
},
},
yAxis: [
@@ -225,8 +226,13 @@ export default class TempChart extends Mixins(BaseMixin) {
return this.$store.getters['printer/tempHistory/getSelectedLegends']
}
+ get timeFormat() {
+ return this.hours12Format ? '{hh}:{mm}' : '{HH}:{mm}'
+ }
+
mounted() {
this.initChart()
+ this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
}
beforeDestroy() {
@@ -383,5 +389,10 @@ export default class TempChart extends Mixins(BaseMixin) {
boolDisplayPwmAxisChanged() {
this.updateChartPwmAxis()
}
+
+ @Watch('hours12Format')
+ hours12FormatChanged() {
+ this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
+ }
}
diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index 75a7ce396..ff92cb463 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -25,7 +25,7 @@
- {{ event.formatTime }}
+ {{ entryFormatTime }}
import Component from 'vue-class-component'
-import Vue from 'vue'
-import { Prop } from 'vue-property-decorator'
+import { Mixins, Prop } from 'vue-property-decorator'
import { ServerStateEvent } from '@/store/server/types'
+import BaseMixin from '@/components/mixins/base'
@Component
-export default class ConsoleTableEntry extends Vue {
+export default class ConsoleTableEntry extends Mixins(BaseMixin) {
@Prop({ required: true })
declare readonly event: ServerStateEvent
@@ -48,6 +48,10 @@ export default class ConsoleTableEntry extends Vue {
return this.$store.state.gui.console.entryStyle ?? 'default'
}
+ get entryFormatTime() {
+ return this.formatTime(this.event.date.getTime(), true)
+ }
+
colorConsoleMessage(item: ServerStateEvent): string {
if (item.message.startsWith('!! ')) return 'error--text'
diff --git a/src/components/mixins/base.ts b/src/components/mixins/base.ts
index 5df2cc729..b32bdbc87 100644
--- a/src/components/mixins/base.ts
+++ b/src/components/mixins/base.ts
@@ -1,5 +1,6 @@
import Vue from 'vue'
import Component from 'vue-class-component'
+import { DateTimeFormatOptions } from 'vue-i18n'
@Component
export default class BaseMixin extends Vue {
@@ -87,4 +88,96 @@ export default class BaseMixin extends Vue {
return roots.findIndex((root: string) => root === 'gcodes') >= 0
}
+
+ get formatDateOptions(): DateTimeFormatOptions {
+ const format = this.$store.state.gui.general.dateFormat
+
+ switch (format) {
+ case '2-digits':
+ return { day: '2-digit', month: '2-digit', year: 'numeric' }
+
+ case 'short':
+ return { day: '2-digit', month: 'short', year: 'numeric' }
+
+ default:
+ return { dateStyle: 'medium' }
+ }
+ }
+
+ get formatTimeOptions(): DateTimeFormatOptions {
+ const format = this.$store.state.gui.general.timeFormat
+
+ switch (format) {
+ case '24hours':
+ return { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }
+
+ case '12hours':
+ return { hour: '2-digit', minute: '2-digit', hourCycle: 'h12' }
+
+ default:
+ return { timeStyle: 'short' }
+ }
+ }
+
+ get formatTimeWithSecondsOptions(): DateTimeFormatOptions {
+ const format = this.$store.state.gui.general.timeFormat
+
+ switch (format) {
+ case '24hours':
+ return { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h23' }
+
+ case '12hours':
+ return { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h12' }
+
+ default:
+ return { timeStyle: 'short' }
+ }
+ }
+
+ get browserLocale() {
+ return navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language
+ }
+
+ get hours12Format() {
+ const setting = this.$store.state.gui.general.timeFormat
+ if (setting === '12hours') return true
+ if (setting === null && this.browserLocale === 'en_us') return true
+
+ return false
+ }
+
+ formatDate(value: number | Date): string {
+ let tmp = null
+
+ try {
+ // @ts-ignore
+ tmp = (typeof value.getMonth === 'function' ? value : new Date(value)) as Date
+ } catch (_) {
+ return 'UNKNOWN'
+ }
+
+ return tmp.toLocaleDateString(this.browserLocale, this.formatDateOptions)
+ }
+
+ formatTime(value: number | Date, boolSeconds = false): string {
+ let tmp = null
+
+ try {
+ // @ts-ignore
+ tmp = (typeof value.getMonth === 'function' ? value : new Date(value)) as Date
+ } catch (_) {
+ return 'UNKNOWN'
+ }
+
+ if (boolSeconds) return tmp.toLocaleTimeString(this.browserLocale, this.formatTimeWithSecondsOptions)
+
+ return tmp.toLocaleTimeString(this.browserLocale, this.formatTimeOptions)
+ }
+
+ formatDateTime(value: number, boolSeconds = false): string {
+ const date = this.formatDate(value)
+ const time = this.formatTime(value, boolSeconds)
+
+ return `${date} ${time}`
+ }
}
diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 17b0846be..48416be90 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -494,7 +494,7 @@
import { Component, Mixins, Watch } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import { validGcodeExtensions } from '@/store/variables'
-import { formatDate, formatFilesize, formatPrintTime, sortFiles } from '@/plugins/helpers'
+import { formatFilesize, formatPrintTime, sortFiles } from '@/plugins/helpers'
import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
import Panel from '@/components/ui/Panel.vue'
import SettingsRow from '@/components/settings/SettingsRow.vue'
@@ -586,7 +586,6 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
mdiDragVertical = mdiDragVertical
validGcodeExtensions = validGcodeExtensions
- formatDate = formatDate
formatFilesize = formatFilesize
formatPrintTime = formatPrintTime
sortFiles = sortFiles
@@ -1269,7 +1268,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
return formatFilesize(value)
case 'date':
- return this.formatDate(value)
+ return this.formatDateTime(value)
case 'time':
return this.formatPrintTime(value)
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 1d4152d6f..f18ba9234 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -272,7 +272,9 @@
{{ $t('History.LastModified') }}
- {{ formatDate(detailsDialog.item.metadata.modified) }}
+
+ {{ formatDateTime(detailsDialog.item.metadata.modified) }}
+
@@ -289,13 +291,13 @@
{{ $t('History.StartTime') }}
- {{ formatDate(detailsDialog.item.start_time) }}
+ {{ formatDateTime(detailsDialog.item.start_time) }}
{{ $t('History.EndTime') }}
- {{ formatDate(detailsDialog.item.end_time) }}
+ {{ formatDateTime(detailsDialog.item.end_time) }}
{{ item.isDirectory ? '--' : formatFilesize(item.size) }}
- {{ formatDate(item.modified) }} |
+ {{ formatDateTime(item.modified) }} |
@@ -462,7 +462,7 @@
diff --git a/src/components/panels/Timelapse/TimelapseFilesPanel.vue b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
index 9f42fc63d..bc1f26cf9 100644
--- a/src/components/panels/Timelapse/TimelapseFilesPanel.vue
+++ b/src/components/panels/Timelapse/TimelapseFilesPanel.vue
@@ -181,7 +181,7 @@
{{ item.isDirectory ? '--' : formatFilesize(item.size) }}
- {{ formatDate(item.modified) }}
+ {{ formatDateTime(item.modified) }}
|
@@ -396,7 +396,7 @@