feat: Reminders panel on the History page

src/components/charts/HistoryAllPrintStatusChart.vue

@@ -60,7 +60,7 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
     }
 
     get selectedJobs() {
-        return this.$store.state.gui.view.history.selectedJobs ?? []
+        return this.$store.getters['server/history/getSelectedJobs']
     }
 
     get allPrintStatusArray() {

src/components/charts/HistoryAllPrintStatusTable.vue

@@ -20,7 +20,7 @@ import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/ty
 })
 export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin) {
     get selectedJobs() {
-        return this.$store.state.gui.view.history.selectedJobs ?? []
+        return this.$store.getters['server/history/getSelectedJobs']
     }
 
     get allPrintStatusArray() {

src/components/dialogs/HistoryDeleteJobDialog.vue

@@ -0,0 +1,49 @@
+<template>
+    <v-dialog :value="show" max-width="400" @keydown.esc="close">
+        <panel :title="$t('History.Delete')" card-class="history-delete-dialog" :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <p class="mb-0">
+                    {{ $t('History.DeleteSingleJobQuestion') }}
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn color="" text @click="close">{{ $t('History.Cancel') }}</v-btn>
+                <v-btn color="error" text @click="deleteJob">{{ $t('History.Delete') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { mdiCloseThick } from '@mdi/js'
+
+@Component
+export default class HistoryDeleteJobDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: Object, required: true }) job!: ServerHistoryStateJob
+
+    deleteJob() {
+        this.$socket.emit(
+            'server.history.delete_job',
+            { uid: this.job.job_id },
+            { action: 'server/history/getDeletedJobs' }
+        )
+
+        this.close()
+    }
+
+    close() {
+        this.$emit('close')
+    }
+}
+</script>

src/components/dialogs/HistoryDeleteSelectedJobsDialog.vue

@@ -0,0 +1,58 @@
+<template>
+    <v-dialog :value="show" max-width="400" @keydown.esc="close">
+        <panel :title="$t('History.Delete')" card-class="history-delete-selected-dialog" :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <p class="mb-0">
+                    {{ text }}
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn color="" text @click="close">{{ $t('History.Cancel') }}</v-btn>
+                <v-btn color="error" text @click="deleteSelectedJobs">{{ $t('History.Delete') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { mdiCloseThick } from '@mdi/js'
+
+@Component
+export default class HistoryDeleteJobDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: Array, required: true }) selectedJobs!: ServerHistoryStateJob[]
+
+    get text() {
+        if (this.selectedJobs.length === 1) return this.$t('History.DeleteSingleJobQuestion')
+
+        return this.$t('History.DeleteSelectedQuestion', { count: this.selectedJobs.length })
+    }
+
+    deleteSelectedJobs() {
+        this.selectedJobs.forEach((item: ServerHistoryStateJob) => {
+            this.$socket.emit(
+                'server.history.delete_job',
+                { uid: item.job_id },
+                { action: 'server/history/getDeletedJobs' }
+            )
+        })
+
+        this.$emit('clear-selected-jobs')
+        this.close()
+    }
+
+    close() {
+        this.$emit('close')
+    }
+}
+</script>

src/components/dialogs/HistoryDetailsDialog.vue

@@ -0,0 +1,170 @@
+<template>
+    <v-dialog :value="show" :max-width="600" persistent @keydown.esc="close">
+        <panel
+            :title="$t('History.JobDetails')"
+            :icon="mdiUpdate"
+            card-class="history-detail-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="px-0">
+                <overlay-scrollbars style="height: 350px" class="px-6">
+                    <history-details-dialog-entry v-for="field in fields" :key="field.key" :job="job" :field="field" />
+                </overlay-scrollbars>
+            </v-card-text>
+        </panel>
+    </v-dialog>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { mdiCloseThick, mdiUpdate } from '@mdi/js'
+import { formatFilesize, formatPrintTime } from '@/plugins/helpers'
+import { TranslateResult } from 'vue-i18n'
+
+export interface HistoryDetailsField {
+    key: string
+    label: string | TranslateResult
+    metadata?: boolean
+    unit?: string
+    format?: (value: any) => string | TranslateResult
+}
+
+@Component
+export default class HistoryDetailsDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiUpdate = mdiUpdate
+
+    @Prop({ type: Boolean, required: true }) show!: boolean
+    @Prop({ type: Object, required: true }) job!: ServerHistoryStateJob
+
+    get fields(): HistoryDetailsField[] {
+        return [
+            {
+                key: 'filename',
+                label: this.$t('History.Filename'),
+            },
+            {
+                key: 'size',
+                label: this.$t('History.Filesize'),
+                metadata: true,
+                format: (value: number) => formatFilesize(value),
+            },
+            {
+                key: 'modified',
+                label: this.$t('History.LastModified'),
+                metadata: true,
+                format: (value: number) => this.formatDateTime(value * 1000),
+            },
+            {
+                key: 'status',
+                label: this.$t('History.Status'),
+                format: (value: string) =>
+                    this.$te(`History.StatusValues.${value}`, 'en') ? this.$t(`History.StatusValues.${value}`) : value,
+            },
+            {
+                key: 'end_time',
+                label: this.$t('History.EndTime'),
+                format: (value: number) => this.formatDateTime(value * 1000),
+            },
+            {
+                key: 'estimated_time',
+                label: this.$t('History.EstimatedTime'),
+                metadata: true,
+                format: (value: number) => formatPrintTime(value),
+            },
+            {
+                key: 'print_duration',
+                label: this.$t('History.PrintDuration'),
+                metadata: true,
+                format: (value: number) => formatPrintTime(value),
+            },
+            {
+                key: 'total_duration',
+                label: this.$t('History.TotalDuration'),
+                metadata: true,
+                format: (value: number) => formatPrintTime(value),
+            },
+            {
+                key: 'filament_weight_total',
+                label: this.$t('History.EstimatedFilamentWeight'),
+                metadata: true,
+                unit: 'g',
+                format: (value: number) => value?.toFixed(2),
+            },
+            {
+                key: 'filament_total',
+                label: this.$t('History.EstimatedFilament'),
+                metadata: true,
+                unit: 'mm',
+                format: (value: number) => value?.toFixed(0),
+            },
+            {
+                key: 'filament_used',
+                label: this.$t('History.FilamentUsed'),
+                metadata: true,
+                unit: 'mm',
+                format: (value: number) => value?.toFixed(0),
+            },
+            {
+                key: 'first_layer_extr_temp',
+                label: this.$t('History.FirstLayerExtTemp'),
+                metadata: true,
+                unit: '°C',
+            },
+            {
+                key: 'first_layer_bed_temp',
+                label: this.$t('History.FirstLayerBedTemp'),
+                metadata: true,
+                unit: '°C',
+            },
+            {
+                key: 'first_layer_height',
+                label: this.$t('History.FirstLayerHeight'),
+                metadata: true,
+                unit: 'mm',
+            },
+            {
+                key: 'layer_height',
+                label: this.$t('History.LayerHeight'),
+                metadata: true,
+                unit: 'mm',
+            },
+            {
+                key: 'object_height',
+                label: this.$t('History.ObjectHeight'),
+                metadata: true,
+                unit: 'mm',
+            },
+            {
+                key: 'slicer',
+                label: this.$t('History.Slicer'),
+                metadata: true,
+            },
+            {
+                key: 'slicer_version',
+                label: this.$t('History.SlicerVersion'),
+                metadata: true,
+            },
+        ]
+    }
+
+    close() {
+        this.$emit('close')
+    }
+}
+</script>
+<style scoped>
+::v-deep .history-details-dialog-entry + .history-details-dialog-entry {
+    margin-top: 1em;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.theme--light ::v-deep .history-details-dialog-entry {
+    border-top-color: rgba(0, 0, 0, 0.12);
+}
+</style>

src/components/dialogs/HistoryDetailsDialogEntry.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-row v-if="show" class="history-details-dialog-entry">
+        <v-col>{{ field.label }}</v-col>
+        <v-col class="text-right">{{ output }}</v-col>
+    </v-row>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { HistoryDetailsField } from '@/components/dialogs/HistoryDetailsDialog.vue'
+
+@Component
+export default class HistoryDetailsDialogEntry extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) job!: ServerHistoryStateJob
+    @Prop({ type: Object, required: true }) field!: HistoryDetailsField
+
+    get show() {
+        return this.value ?? false
+    }
+
+    get value() {
+        const boolMetadata = this.field.metadata ?? false
+        if (!boolMetadata) return this.job[this.field.key]
+
+        const metadata = this.job.metadata ?? null
+        if (metadata === null) return null
+
+        return metadata[this.field.key]
+    }
+
+    get output() {
+        let output = this.value
+        if (this.field.format) output = this.field.format(this.value)
+
+        if (this.field.unit) return `${output} ${this.field.unit}`
+
+        return output
+    }
+}
+</script>