Skip to content

Commit

Permalink
feat: add option to change date & time format in settings (#1069)
Browse files Browse the repository at this point in the history
  • Loading branch information
@meteyou
meteyou authored Oct 9, 2022
1 parent d1cfe72 commit 685665b
Show file tree
Hide file tree
Showing 19 changed files with 263 additions and 73 deletions.
11 changes: 11 additions & 0 deletions src/components/charts/TempChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -383,5 +389,10 @@ export default class TempChart extends Mixins(BaseMixin) {
boolDisplayPwmAxisChanged() {
this.updateChartPwmAxis()
}
@Watch('hours12Format')
hours12FormatChanged() {
this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
}
}
</script>
12 changes: 8 additions & 4 deletions src/components/console/ConsoleTableEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<template>
<v-row :class="'ma-0 ' + entryStyle">
<v-col class="col-auto pr-0 text--disabled console-time">{{ event.formatTime }}</v-col>
<v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
<v-col
:class="colorConsoleMessage(event) + ' ' + 'console-message'"
@click.capture="commandClick"
Expand All @@ -35,19 +35,23 @@

<script lang="ts">
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
get entryStyle() {
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'
Expand Down
93 changes: 93 additions & 0 deletions src/components/mixins/base.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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}`
}
}
5 changes: 2 additions & 3 deletions src/components/panels/GcodefilesPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -586,7 +586,6 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
mdiDragVertical = mdiDragVertical
validGcodeExtensions = validGcodeExtensions
formatDate = formatDate
formatFilesize = formatFilesize
formatPrintTime = formatPrintTime
sortFiles = sortFiles
Expand Down Expand Up @@ -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)
Expand Down
18 changes: 7 additions & 11 deletions src/components/panels/HistoryListPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,9 @@
<v-divider class="my-3"></v-divider>
<v-row>
<v-col>{{ $t('History.LastModified') }}</v-col>
<v-col class="text-right">{{ formatDate(detailsDialog.item.metadata.modified) }}</v-col>
<v-col class="text-right">
{{ formatDateTime(detailsDialog.item.metadata.modified) }}
</v-col>
</v-row>
</template>
<v-divider class="my-3"></v-divider>
Expand All @@ -289,13 +291,13 @@
<v-divider class="my-3"></v-divider>
<v-row>
<v-col>{{ $t('History.StartTime') }}</v-col>
<v-col class="text-right">{{ formatDate(detailsDialog.item.start_time) }}</v-col>
<v-col class="text-right">{{ formatDateTime(detailsDialog.item.start_time) }}</v-col>
</v-row>
<template v-if="'end_time' in detailsDialog.item && detailsDialog.item.end_time > 0">
<v-divider class="my-3"></v-divider>
<v-row>
<v-col>{{ $t('History.EndTime') }}</v-col>
<v-col class="text-right">{{ formatDate(detailsDialog.item.end_time) }}</v-col>
<v-col class="text-right">{{ formatDateTime(detailsDialog.item.end_time) }}</v-col>
</v-row>
</template>
<template
Expand Down Expand Up @@ -761,12 +763,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
}
formatDate(date: number) {
const tmp2 = new Date(date * 1000)
return tmp2.toLocaleString().replace(',', '')
}
formatPrintTime(totalSeconds: number) {
if (totalSeconds) {
let output = ''
Expand Down Expand Up @@ -1013,7 +1009,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
if (!format) {
switch (col.outputType) {
case 'date':
return this.formatDate(value)
return this.formatDateTime(value * 1000)
case 'time':
return value?.toFixed() ?? ''
Expand All @@ -1038,7 +1034,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
return formatFilesize(value)
case 'date':
return this.formatDate(value)
return this.formatDateTime(value * 1000)
case 'time':
return this.formatPrintTime(value)
Expand Down
5 changes: 2 additions & 3 deletions src/components/panels/Machine/ConfigFilesPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
<td class="text-no-wrap text-right">
{{ item.isDirectory ? '--' : formatFilesize(item.size) }}
</td>
<td class="text-right">{{ formatDate(item.modified) }}</td>
<td class="text-right">{{ formatDateTime(item.modified) }}</td>
</tr>
</template>
</v-data-table>
Expand Down Expand Up @@ -462,7 +462,7 @@
<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import { formatDate, formatFilesize, sortFiles } from '@/plugins/helpers'
import { formatFilesize, sortFiles } from '@/plugins/helpers'
import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
import axios from 'axios'
import Panel from '@/components/ui/Panel.vue'
Expand Down Expand Up @@ -553,7 +553,6 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin) {
sortFiles = sortFiles
formatFilesize = formatFilesize
formatDate = formatDate
declare $refs: {
fileUpload: HTMLInputElement
Expand Down
33 changes: 10 additions & 23 deletions src/components/panels/Status/PrintstatusPrinting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,24 +81,24 @@
<strong>{{ $t('Panels.StatusPanel.Estimate') }}</strong>
<br />
<span class="text-no-wrap">
{{ estimated_time_avg ? formatTime(estimated_time_avg) : '--' }}
{{ estimated_time_avg ? formatDuration(estimated_time_avg) : '--' }}
</span>
</div>
</template>
<div class="text-right">
{{ $t('Panels.StatusPanel.File') }}:
{{ estimated_time_file ? formatTime(estimated_time_file) : '--' }}
{{ estimated_time_file ? formatDuration(estimated_time_file) : '--' }}
<br />
{{ $t('Panels.StatusPanel.Filament') }}:
{{ estimated_time_filament ? formatTime(estimated_time_filament) : '--' }}
{{ estimated_time_filament ? formatDuration(estimated_time_filament) : '--' }}
</div>
</v-tooltip>
</v-col>
<v-col class="col-3 pa-0">
<strong>{{ $t('Panels.StatusPanel.Slicer') }}</strong>
<br />
<span class="text-no-wrap">
{{ estimated_time_slicer ? formatTime(estimated_time_slicer) : '--' }}
{{ estimated_time_slicer ? formatDuration(estimated_time_slicer) : '--' }}
</span>
</v-col>
<v-col class="col-3 pa-0">
Expand All @@ -108,23 +108,23 @@
<strong>{{ $t('Panels.StatusPanel.Total') }}</strong>
<br />
<span class="text-no-wrap">
{{ print_time_total ? formatTime(print_time_total) : '--' }}
{{ print_time_total ? formatDuration(print_time_total) : '--' }}
</span>
</div>
</template>
<div class="text-right">
{{ $t('Panels.StatusPanel.Print') }}:
{{ print_time ? formatTime(print_time) : '--' }}
{{ print_time ? formatDuration(print_time) : '--' }}
<br />
{{ $t('Panels.StatusPanel.Difference') }}:
{{ print_time && print_time_total ? formatTime(print_time_total - print_time) : '--' }}
{{ print_time && print_time_total ? formatDuration(print_time_total - print_time) : '--' }}
</div>
</v-tooltip>
</v-col>
<v-col class="col-3 pa-0">
<strong>{{ $t('Panels.StatusPanel.ETA') }}</strong>
<br />
<span class="text-no-wrap">{{ outputEta }}</span>
<span class="text-no-wrap">{{ eta }}</span>
</v-col>
</v-row>
</v-container>
Expand Down Expand Up @@ -213,11 +213,7 @@ export default class StatusPanelPrintstatusPrinting extends Mixins(BaseMixin) {
}
get eta() {
return this.$store.getters['printer/getEstimatedTimeETA']
}
get outputEta() {
return this.eta ? this.formatDateTime(this.eta) : '--'
return this.$store.getters['printer/getEstimatedTimeETAFormat']
}
get filament_diameter() {
Expand All @@ -242,22 +238,13 @@ export default class StatusPanelPrintstatusPrinting extends Mixins(BaseMixin) {
: this.filament_used.toFixed(2) + ' mm'
}
formatTime(seconds: number) {
formatDuration(seconds: number) {
let h = Math.floor(seconds / 3600)
seconds %= 3600
let m = ('0' + Math.floor(seconds / 60)).slice(-2)
let s = ('0' + (seconds % 60).toFixed(0)).slice(-2)
return h + ':' + m + ':' + s
}
formatDateTime(msec: number) {
const date = new Date(msec)
const h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
const m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
const diff = msec - new Date().getTime()
return h + ':' + m + (diff > 60 * 60 * 24 * 1000 ? '+' + Math.round(diff / (60 * 60 * 24 * 1000)) : '')
}
}
</script>
Loading

0 comments on commit 685665b

Please sign in to comment.