From 4851c3b7ae3f872aeba80e1c026e37d70dc2b669 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 1 May 2023 21:17:54 +0200
Subject: [PATCH 01/46] refactor: move HistoryListPanelDetailsDialog to a own
 component

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/HistoryListPanelDetailsDialog.vue | 256 ++++++++++++++++++
 src/components/panels/HistoryListPanel.vue    | 207 +-------------
 src/store/server/history/getters.ts           |   4 +-
 src/store/server/history/types.ts             |  28 +-
 4 files changed, 295 insertions(+), 200 deletions(-)
 create mode 100644 src/components/dialogs/HistoryListPanelDetailsDialog.vue

diff --git a/src/components/dialogs/HistoryListPanelDetailsDialog.vue b/src/components/dialogs/HistoryListPanelDetailsDialog.vue
new file mode 100644
index 000000000..3ae016ebd
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelDetailsDialog.vue
@@ -0,0 +1,256 @@
+<template>
+    <v-dialog v-model="show" :max-width="600" persistent @keydown.esc="closeDialog">
+        <panel
+            :title="$t('History.JobDetails').toString()"
+            :icon="mdiUpdate"
+            card-class="history-detail-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="px-0">
+                <overlay-scrollbars style="height: 350px" class="px-6">
+                    <v-row>
+                        <v-col>{{ $t('History.Filename') }}</v-col>
+                        <v-col class="text-right">{{ job.filename }}</v-col>
+                    </v-row>
+                    <template v-if="'metadata' in job && 'size' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.Filesize') }}</v-col>
+                            <v-col class="text-right">{{ formatFilesize(job.metadata.size) }}</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'modified' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.LastModified') }}</v-col>
+                            <v-col class="text-right">
+                                {{ formatDateTime(job.metadata.modified * 1000) }}
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <v-divider class="my-3"></v-divider>
+                    <v-row>
+                        <v-col>{{ $t('History.Status') }}</v-col>
+                        <v-col class="text-right">
+                            {{
+                                $te(`History.StatusValues.${job.status}`, 'en')
+                                    ? $t(`History.StatusValues.${job.status}`)
+                                    : job.status
+                            }}
+                        </v-col>
+                    </v-row>
+                    <v-divider class="my-3"></v-divider>
+                    <v-row>
+                        <v-col>{{ $t('History.StartTime') }}</v-col>
+                        <v-col class="text-right">{{ formatDateTime(job.start_time * 1000) }}</v-col>
+                    </v-row>
+                    <template v-if="'end_time' in job && job.end_time > 0">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.EndTime') }}</v-col>
+                            <v-col class="text-right">
+                                {{ formatDateTime(job.end_time * 1000) }}
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'estimated_time' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.EstimatedTime') }}</v-col>
+                            <v-col class="text-right">
+                                {{ formatPrintTime(job.metadata.estimated_time) }}
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="job.print_duration > 0">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.PrintDuration') }}</v-col>
+                            <v-col class="text-right">
+                                {{ formatPrintTime(job.print_duration) }}
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="job.total_duration > 0">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.TotalDuration') }}</v-col>
+                            <v-col class="text-right">
+                                {{ formatPrintTime(job.total_duration) }}
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'filament_total' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.EstimatedFilamentWeight') }}</v-col>
+                            <v-col class="text-right">
+                                {{ Math.round(job.metadata.filament_weight_total * 100) / 100 }} g
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'filament_total' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.EstimatedFilament') }}</v-col>
+                            <v-col class="text-right">{{ Math.round(job.metadata.filament_total) }} mm</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="job.filament_used > 0">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.FilamentUsed') }}</v-col>
+                            <v-col class="text-right">{{ Math.round(job.filament_used) }} mm</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'first_layer_extr_temp' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.FirstLayerExtTemp') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.first_layer_extr_temp }} °C</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'first_layer_bed_temp' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.FirstLayerBedTemp') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.first_layer_bed_temp }} °C</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'first_layer_height' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.FirstLayerHeight') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.first_layer_height }} mm</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'layer_height' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.LayerHeight') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.layer_height }} mm</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'object_height' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.ObjectHeight') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.object_height }} mm</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'slicer' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.Slicer') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.slicer }}</v-col>
+                        </v-row>
+                    </template>
+                    <template v-if="'metadata' in job && 'slicer_version' in job.metadata">
+                        <v-divider class="my-3"></v-divider>
+                        <v-row>
+                            <v-col>{{ $t('History.SlicerVersion') }}</v-col>
+                            <v-col class="text-right">{{ job.metadata.slicer_version }}</v-col>
+                        </v-row>
+                    </template>
+                </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 SettingsRow from '@/components/settings/SettingsRow.vue'
+import Panel from '@/components/ui/Panel.vue'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { mdiCloseThick, mdiUpdate } from '@mdi/js'
+import { formatFilesize, formatPrintTime } from '@/plugins/helpers'
+
+@Component({
+    components: {
+        Panel,
+        SettingsRow,
+    },
+})
+export default class HistoryListPanelDetailsDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiUpdate = mdiUpdate
+
+    formatFilesize = formatFilesize
+    formatPrintTime = formatPrintTime
+
+    @Prop({ required: true, default: false })
+    declare readonly show: boolean
+
+    @Prop({ required: true })
+    declare job: ServerHistoryStateJob
+
+    get entries() {
+        let entries: { name: string; value: string | null; exists: boolean }[] = [
+            {
+                name: this.$t('History.Filename').toString(),
+                value: this.job.filename,
+                exists: true,
+            },
+            {
+                name: this.$t('History.Filesize').toString(),
+                value: formatFilesize(this.job.metadata.filesize ?? 0),
+                exists: (this.job.metadata?.filesize ?? 0) > 0,
+            },
+            {
+                name: this.$t('History.LastModified').toString(),
+                value: this.formatDateTime((this.job.metadata.modified ?? 0) * 1000),
+                exists: (this.job.metadata?.modified ?? 0) > 0,
+            },
+            {
+                name: this.$t('History.Status').toString(),
+                value: this.$te(`History.StatusValues.${this.job.status}`, 'en')
+                    ? this.$t(`History.StatusValues.${this.job.status}`).toString()
+                    : this.job.status,
+                exists: true,
+            },
+            {
+                name: this.$t('History.StartTime').toString(),
+                value: this.formatDateTime(this.job.start_time * 1000),
+                exists: true,
+            },
+            {
+                name: this.$t('History.EndTime').toString(),
+                value: this.formatDateTime(this.job.end_time * 1000),
+                exists: this.job.end_time > 0,
+            },
+            {
+                name: this.$t('History.EstimatedTime').toString(),
+                value: this.formatPrintTime(this.job.metadata.estimated_time ?? 0),
+                exists: 'estimated_time' in this.job.metadata,
+            },
+            {
+                name: this.$t('History.PrintDuration').toString(),
+                value: this.formatPrintTime(this.job.print_duration ?? 0),
+                exists: this.job.print_duration > 0,
+            },
+            {
+                name: this.$t('History.TotalDuration').toString(),
+                value: this.formatPrintTime(this.job.total_duration ?? 0),
+                exists: this.job.total_duration > 0,
+            },
+            {
+                name: this.$t('History.EstimatedFilamentWeight').toString(),
+                value: `${Math.round((this.job.metadata.filament_weight_total ?? 0) * 100) / 100} g`,
+                exists: 'filament_weight_total' in this.job.metadata,
+            },
+        ]
+
+        return entries.filter((entry) => entry.exists)
+    }
+
+    closeDialog() {
+        this.$emit('closeDialog')
+    }
+}
+</script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index ab51972d4..d2fdee2a8 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -240,196 +240,10 @@
                 </v-list-item>
             </v-list>
         </v-menu>
-        <v-dialog
-            v-model="detailsDialog.boolShow"
-            :max-width="600"
-            persistent
-            @keydown.esc="detailsDialog.boolShow = false">
-            <panel
-                :title="$t('History.JobDetails').toString()"
-                :icon="mdiUpdate"
-                card-class="history-detail-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="detailsDialog.boolShow = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="px-0">
-                    <overlay-scrollbars style="height: 350px" class="px-6">
-                        <v-row>
-                            <v-col>{{ $t('History.Filename') }}</v-col>
-                            <v-col class="text-right">{{ detailsDialog.item.filename }}</v-col>
-                        </v-row>
-                        <template v-if="'metadata' in detailsDialog.item && 'size' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.Filesize') }}</v-col>
-                                <v-col class="text-right">{{ formatFilesize(detailsDialog.item.metadata.size) }}</v-col>
-                            </v-row>
-                        </template>
-                        <template v-if="'metadata' in detailsDialog.item && 'modified' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.LastModified') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ formatDateTime(detailsDialog.item.metadata.modified * 1000) }}
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.Status') }}</v-col>
-                            <v-col class="text-right">
-                                {{
-                                    $te(`History.StatusValues.${detailsDialog.item.status}`, 'en')
-                                        ? $t(`History.StatusValues.${detailsDialog.item.status}`)
-                                        : detailsDialog.item.status
-                                }}
-                            </v-col>
-                        </v-row>
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.StartTime') }}</v-col>
-                            <v-col class="text-right">{{ formatDateTime(detailsDialog.item.start_time * 1000) }}</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">
-                                    {{ formatDateTime(detailsDialog.item.end_time * 1000) }}
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="'metadata' in detailsDialog.item && 'estimated_time' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.EstimatedTime') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ formatPrintTime(detailsDialog.item.metadata.estimated_time) }}
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template v-if="detailsDialog.item.print_duration > 0">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.PrintDuration') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ formatPrintTime(detailsDialog.item.print_duration) }}
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template v-if="detailsDialog.item.total_duration > 0">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.TotalDuration') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ formatPrintTime(detailsDialog.item.total_duration) }}
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="'metadata' in detailsDialog.item && 'filament_total' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.EstimatedFilamentWeight') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ Math.round(detailsDialog.item.metadata.filament_weight_total * 100) / 100 }} g
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="'metadata' in detailsDialog.item && 'filament_total' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.EstimatedFilament') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ Math.round(detailsDialog.item.metadata.filament_total) }} mm
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template v-if="detailsDialog.item.filament_used > 0">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.FilamentUsed') }}</v-col>
-                                <v-col class="text-right">{{ Math.round(detailsDialog.item.filament_used) }} mm</v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="
-                                'metadata' in detailsDialog.item &&
-                                'first_layer_extr_temp' in detailsDialog.item.metadata
-                            ">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.FirstLayerExtTemp') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ detailsDialog.item.metadata.first_layer_extr_temp }} °C
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="
-                                'metadata' in detailsDialog.item &&
-                                'first_layer_bed_temp' in detailsDialog.item.metadata
-                            ">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.FirstLayerBedTemp') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ detailsDialog.item.metadata.first_layer_bed_temp }} °C
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="
-                                'metadata' in detailsDialog.item && 'first_layer_height' in detailsDialog.item.metadata
-                            ">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.FirstLayerHeight') }}</v-col>
-                                <v-col class="text-right">
-                                    {{ detailsDialog.item.metadata.first_layer_height }} mm
-                                </v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="'metadata' in detailsDialog.item && 'layer_height' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.LayerHeight') }}</v-col>
-                                <v-col class="text-right">{{ detailsDialog.item.metadata.layer_height }} mm</v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="'metadata' in detailsDialog.item && 'object_height' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.ObjectHeight') }}</v-col>
-                                <v-col class="text-right">{{ detailsDialog.item.metadata.object_height }} mm</v-col>
-                            </v-row>
-                        </template>
-                        <template v-if="'metadata' in detailsDialog.item && 'slicer' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.Slicer') }}</v-col>
-                                <v-col class="text-right">{{ detailsDialog.item.metadata.slicer }}</v-col>
-                            </v-row>
-                        </template>
-                        <template
-                            v-if="'metadata' in detailsDialog.item && 'slicer_version' in detailsDialog.item.metadata">
-                            <v-divider class="my-3"></v-divider>
-                            <v-row>
-                                <v-col>{{ $t('History.SlicerVersion') }}</v-col>
-                                <v-col class="text-right">{{ detailsDialog.item.metadata.slicer_version }}</v-col>
-                            </v-row>
-                        </template>
-                    </overlay-scrollbars>
-                </v-card-text>
-            </panel>
-        </v-dialog>
+        <history-list-panel-details-dialog
+            :show="detailsDialog.show"
+            :job="detailsDialog.item"
+            @close-dialog="contextMenu.shown = false" />
         <v-dialog v-model="deleteSelectedDialog" max-width="400">
             <panel
                 :title="$t('History.Delete').toString()"
@@ -500,13 +314,13 @@ import {
     mdiFileDocumentMultipleOutline,
     mdiMagnify,
     mdiCloseThick,
-    mdiUpdate,
     mdiNotebookEdit,
     mdiNotebookPlus,
     mdiNotebook,
 } from '@mdi/js'
+import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 @Component({
-    components: { Panel },
+    components: { HistoryListPanelDetailsDialog, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
@@ -518,7 +332,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiTextBoxSearch = mdiTextBoxSearch
     mdiFile = mdiFile
     mdiMagnify = mdiMagnify
-    mdiUpdate = mdiUpdate
     mdiCloseThick = mdiCloseThick
     mdiNotebookPlus = mdiNotebookPlus
     mdiNotebookEdit = mdiNotebookEdit
@@ -535,12 +348,12 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         touchTimer: undefined,
         x: 0,
         y: 0,
-        item: {},
+        item: {} as ServerHistoryStateJob,
     }
 
     private detailsDialog = {
-        item: {},
-        boolShow: false,
+        item: {} as ServerHistoryStateJob,
+        show: false,
     }
 
     private noteDialog: {
@@ -796,7 +609,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
 
     clickRow(item: ServerHistoryStateJob) {
         this.detailsDialog.item = item
-        this.detailsDialog.boolShow = true
+        this.detailsDialog.show = true
     }
 
     showContextMenu(e: any, item: ServerHistoryStateJob) {
diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts
index 89f38fa70..f905ebe6e 100644
--- a/src/store/server/history/getters.ts
+++ b/src/store/server/history/getters.ts
@@ -301,7 +301,7 @@ export const getters: GetterTree<ServerHistoryState, any> = {
 
             // find jobs via metadata
             const jobs = state.jobs.filter((job) => {
-                return job.metadata?.size === filesize && Math.round(job.metadata?.modified * 1000) === modified
+                return job.metadata?.size === filesize && Math.round((job.metadata?.modified ?? 0) * 1000) === modified
             })
             if (jobs.length) return jobs
             if (job_id) return jobs.filter((job) => job.job_id === job_id)
@@ -312,7 +312,7 @@ export const getters: GetterTree<ServerHistoryState, any> = {
     getPrintStatusByFilename: (state) => (filename: string, modified: number) => {
         if (state.jobs.length) {
             const job = state.jobs.find((job) => {
-                return job.filename === filename && Math.round(job.metadata?.modified * 1000) === modified
+                return job.filename === filename && Math.round((job.metadata?.modified ?? 0) * 1000) === modified
             })
 
             return job?.status ?? ''
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index ada84d13b..25e6bd000 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -1,3 +1,5 @@
+import { FileStateFileThumbnail } from '@/store/files/types'
+
 export interface ServerHistoryState {
     jobs: ServerHistoryStateJob[]
     job_totals: {
@@ -17,7 +19,31 @@ export interface ServerHistoryStateJob {
     filament_used: number
     filename: string
     // eslint-disable-next-line
-    metadata: any
+    metadata: {
+        print_start_time?: number
+        job_id?: number
+        size?: number
+        slicer?: string
+        slicer_version?: string
+        layer_count?: number
+        layer_height?: number
+        first_layer_height?: number
+        object_height?: number
+        filament_total?: number
+        filament_weight_total?: number
+        estimated_time?: number
+        thumbnails?: FileStateFileThumbnail[]
+        first_layer_bed_temp?: number
+        first_layer_extr_temp?: number
+        gcode_start_byte?: number
+        gcode_end_byte?: number
+        filename?: string
+        filesize?: number
+        modified?: number
+        uuid?: string
+        nozzle_diameter?: number
+        [key: string]: any
+    }
     note?: string
     print_duration: number
     status: string

From 6cf542bcebb91c3dca9ff2ee32f1fcf1756bb0dd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 5 May 2023 23:45:36 +0200
Subject: [PATCH 02/46] refactor: finish history details dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/HistoryListPanelDetailsDialog.vue | 173 +++---------------
 src/components/panels/HistoryListPanel.vue    |   2 +-
 2 files changed, 24 insertions(+), 151 deletions(-)

diff --git a/src/components/dialogs/HistoryListPanelDetailsDialog.vue b/src/components/dialogs/HistoryListPanelDetailsDialog.vue
index 3ae016ebd..67b9eb3c0 100644
--- a/src/components/dialogs/HistoryListPanelDetailsDialog.vue
+++ b/src/components/dialogs/HistoryListPanelDetailsDialog.vue
@@ -10,150 +10,13 @@
                     <v-icon>{{ mdiCloseThick }}</v-icon>
                 </v-btn>
             </template>
-            <v-card-text class="px-0">
+            <v-card-text class="pa-0">
                 <overlay-scrollbars style="height: 350px" class="px-6">
-                    <v-row>
-                        <v-col>{{ $t('History.Filename') }}</v-col>
-                        <v-col class="text-right">{{ job.filename }}</v-col>
-                    </v-row>
-                    <template v-if="'metadata' in job && 'size' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.Filesize') }}</v-col>
-                            <v-col class="text-right">{{ formatFilesize(job.metadata.size) }}</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'modified' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.LastModified') }}</v-col>
-                            <v-col class="text-right">
-                                {{ formatDateTime(job.metadata.modified * 1000) }}
-                            </v-col>
-                        </v-row>
-                    </template>
-                    <v-divider class="my-3"></v-divider>
-                    <v-row>
-                        <v-col>{{ $t('History.Status') }}</v-col>
-                        <v-col class="text-right">
-                            {{
-                                $te(`History.StatusValues.${job.status}`, 'en')
-                                    ? $t(`History.StatusValues.${job.status}`)
-                                    : job.status
-                            }}
-                        </v-col>
-                    </v-row>
-                    <v-divider class="my-3"></v-divider>
-                    <v-row>
-                        <v-col>{{ $t('History.StartTime') }}</v-col>
-                        <v-col class="text-right">{{ formatDateTime(job.start_time * 1000) }}</v-col>
-                    </v-row>
-                    <template v-if="'end_time' in job && job.end_time > 0">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.EndTime') }}</v-col>
-                            <v-col class="text-right">
-                                {{ formatDateTime(job.end_time * 1000) }}
-                            </v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'estimated_time' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.EstimatedTime') }}</v-col>
-                            <v-col class="text-right">
-                                {{ formatPrintTime(job.metadata.estimated_time) }}
-                            </v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="job.print_duration > 0">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.PrintDuration') }}</v-col>
-                            <v-col class="text-right">
-                                {{ formatPrintTime(job.print_duration) }}
-                            </v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="job.total_duration > 0">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.TotalDuration') }}</v-col>
-                            <v-col class="text-right">
-                                {{ formatPrintTime(job.total_duration) }}
-                            </v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'filament_total' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.EstimatedFilamentWeight') }}</v-col>
-                            <v-col class="text-right">
-                                {{ Math.round(job.metadata.filament_weight_total * 100) / 100 }} g
-                            </v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'filament_total' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.EstimatedFilament') }}</v-col>
-                            <v-col class="text-right">{{ Math.round(job.metadata.filament_total) }} mm</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="job.filament_used > 0">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.FilamentUsed') }}</v-col>
-                            <v-col class="text-right">{{ Math.round(job.filament_used) }} mm</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'first_layer_extr_temp' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.FirstLayerExtTemp') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.first_layer_extr_temp }} °C</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'first_layer_bed_temp' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.FirstLayerBedTemp') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.first_layer_bed_temp }} °C</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'first_layer_height' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.FirstLayerHeight') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.first_layer_height }} mm</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'layer_height' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.LayerHeight') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.layer_height }} mm</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'object_height' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.ObjectHeight') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.object_height }} mm</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'slicer' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.Slicer') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.slicer }}</v-col>
-                        </v-row>
-                    </template>
-                    <template v-if="'metadata' in job && 'slicer_version' in job.metadata">
-                        <v-divider class="my-3"></v-divider>
-                        <v-row>
-                            <v-col>{{ $t('History.SlicerVersion') }}</v-col>
-                            <v-col class="text-right">{{ job.metadata.slicer_version }}</v-col>
+                    <template v-for="(entry, index) in entries">
+                        <v-divider v-if="index > 0" :key="'history_detail_entry_divider_' + index" class="my-3" />
+                        <v-row :key="'history_detail_entry_' + index">
+                            <v-col>{{ entry.name }}</v-col>
+                            <v-col class="text-right">{{ entry.value }}</v-col>
                         </v-row>
                     </template>
                 </overlay-scrollbars>
@@ -199,12 +62,12 @@ export default class HistoryListPanelDetailsDialog extends Mixins(BaseMixin) {
             },
             {
                 name: this.$t('History.Filesize').toString(),
-                value: formatFilesize(this.job.metadata.filesize ?? 0),
+                value: formatFilesize(this.job.metadata?.filesize ?? 0),
                 exists: (this.job.metadata?.filesize ?? 0) > 0,
             },
             {
                 name: this.$t('History.LastModified').toString(),
-                value: this.formatDateTime((this.job.metadata.modified ?? 0) * 1000),
+                value: this.formatDateTime((this.job.metadata?.modified ?? 0) * 1000),
                 exists: (this.job.metadata?.modified ?? 0) > 0,
             },
             {
@@ -226,8 +89,8 @@ export default class HistoryListPanelDetailsDialog extends Mixins(BaseMixin) {
             },
             {
                 name: this.$t('History.EstimatedTime').toString(),
-                value: this.formatPrintTime(this.job.metadata.estimated_time ?? 0),
-                exists: 'estimated_time' in this.job.metadata,
+                value: this.formatPrintTime(this.job.metadata?.estimated_time ?? 0),
+                exists: this.job.metadata && 'estimated_time' in this.job.metadata,
             },
             {
                 name: this.$t('History.PrintDuration').toString(),
@@ -241,8 +104,8 @@ export default class HistoryListPanelDetailsDialog extends Mixins(BaseMixin) {
             },
             {
                 name: this.$t('History.EstimatedFilamentWeight').toString(),
-                value: `${Math.round((this.job.metadata.filament_weight_total ?? 0) * 100) / 100} g`,
-                exists: 'filament_weight_total' in this.job.metadata,
+                value: `${Math.round((this.job.metadata?.filament_weight_total ?? 0) * 100) / 100} g`,
+                exists: this.job.metadata && 'filament_weight_total' in this.job.metadata,
             },
         ]
 
@@ -250,7 +113,17 @@ export default class HistoryListPanelDetailsDialog extends Mixins(BaseMixin) {
     }
 
     closeDialog() {
-        this.$emit('closeDialog')
+        this.$emit('close-dialog')
     }
 }
 </script>
+
+<style scoped>
+::v-deep .os-content .row:first-child {
+    margin-top: 1em !important;
+}
+
+::v-deep .os-content .row:last-child {
+    margin-bottom: 1em !important;
+}
+</style>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index d2fdee2a8..448346231 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -243,7 +243,7 @@
         <history-list-panel-details-dialog
             :show="detailsDialog.show"
             :job="detailsDialog.item"
-            @close-dialog="contextMenu.shown = false" />
+            @close-dialog="detailsDialog.show = false" />
         <v-dialog v-model="deleteSelectedDialog" max-width="400">
             <panel
                 :title="$t('History.Delete').toString()"

From 3fe7e4c1a282aefa6148f8621c0efea99035d027 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 6 May 2023 20:04:31 +0200
Subject: [PATCH 03/46] refactor: HistoryListPanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 26 +++++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 448346231..b1530f1af 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -74,7 +74,10 @@
                                     </v-list-item>
                                     <v-divider></v-divider>
                                 </template>
-                                <v-list-item v-for="header of configHeaders" :key="header.key" class="minHeight36">
+                                <v-list-item
+                                    v-for="(header, index) of configHeaders"
+                                    :key="'history-list-panel-header-option-' + index"
+                                    class="minHeight36">
                                     <v-checkbox
                                         v-model="header.visible"
                                         class="mt-0"
@@ -194,13 +197,10 @@
                                 </span>
                             </v-tooltip>
                         </td>
-                        <td
-                            v-for="col in tableFields"
-                            :key="col.value"
-                            :class="col.outputType !== 'date' ? 'text-no-wrap' : ''">
+                        <td v-for="col in tableFields" :key="col.value" class="text-no-wrap">
                             {{ outputValue(col, item) }}
                         </td>
-                        <td v-if="headers.find((header) => header.value === 'slicer').visible" class=" ">
+                        <td v-if="headers.find((header) => header.value === 'slicer')?.visible" class=" ">
                             {{ 'slicer' in item.metadata && item.metadata.slicer ? item.metadata.slicer : '--' }}
                             <small v-if="'slicer_version' in item.metadata && item.metadata.slicer_version">
                                 <br />
@@ -266,7 +266,11 @@
         </v-dialog>
         <v-dialog v-model="noteDialog.boolShow" :max-width="600" persistent @keydown.esc="noteDialog.boolShow = false">
             <panel
-                :title="noteDialog.type === 'create' ? $t('History.CreateNote') : $t('History.EditNote')"
+                :title="
+                    noteDialog.type === 'create'
+                        ? $t('History.CreateNote').toString()
+                        : $t('History.EditNote').toString()
+                "
                 :icon="noteDialog.type === 'create' ? mdiNotebookPlus : mdiNotebookEdit"
                 card-class="history-note-dialog"
                 :margin-bottom="false">
@@ -661,7 +665,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     getSmallThumbnail(item: ServerHistoryStateJob) {
-        if ('metadata' in item && 'thumbnails' in item.metadata && item.metadata.thumbnails.length) {
+        if (item.metadata?.thumbnails?.length) {
             const thumbnail = item.metadata.thumbnails.find(
                 (thumb: any) =>
                     thumb.width >= thumbnailSmallMin &&
@@ -686,8 +690,8 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     getBigThumbnail(item: ServerHistoryStateJob) {
-        if ('metadata' in item && 'thumbnails' in item.metadata && item.metadata.thumbnails.length) {
-            const thumbnail = item.metadata.thumbnails.find((thumb: any) => thumb.width >= thumbnailBigMin)
+        if (item.metadata?.thumbnails?.length) {
+            const thumbnail = item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
 
             let relative_url = ''
             if (item.filename.lastIndexOf('/') !== -1) {
@@ -705,7 +709,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
 
     getThumbnailWidth(item: ServerHistoryStateJob) {
         if (this.getBigThumbnail(item)) {
-            const thumbnail = item.metadata.thumbnails.find((thumb: any) => thumb.width >= thumbnailBigMin)
+            const thumbnail = item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
 
             if (thumbnail) return thumbnail.width
         }

From beb346ae74cc3ff4a76f1125c4a1724b6e21e937 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 6 May 2023 22:56:13 +0200
Subject: [PATCH 04/46] refactor: move style at the end of the file

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index b1530f1af..c9e0da5a4 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -1,13 +1,3 @@
-<style>
-.history-jobs-table th {
-    white-space: nowrap;
-}
-
-.history-jobs-table th.text-start {
-    padding-right: 0 !important;
-}
-</style>
-
 <template>
     <div>
         <panel
@@ -899,3 +889,13 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style>
+.history-jobs-table th {
+    white-space: nowrap;
+}
+
+.history-jobs-table th.text-start {
+    padding-right: 0 !important;
+}
+</style>

From c08541d1feae3f17084bf5482c74eb0d556e16f6 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 8 May 2023 20:18:35 +0200
Subject: [PATCH 05/46] refactor: WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryList/HistoryListEntryJob.vue       | 164 +++++++++++++
 src/components/panels/HistoryListPanel.vue    | 231 ++++--------------
 2 files changed, 210 insertions(+), 185 deletions(-)
 create mode 100644 src/components/panels/HistoryList/HistoryListEntryJob.vue

diff --git a/src/components/panels/HistoryList/HistoryListEntryJob.vue b/src/components/panels/HistoryList/HistoryListEntryJob.vue
new file mode 100644
index 000000000..d392dde1e
--- /dev/null
+++ b/src/components/panels/HistoryList/HistoryListEntryJob.vue
@@ -0,0 +1,164 @@
+<template>
+    <tr
+        :key="item.job_id"
+        v-longpress:600="(e) => showContextMenu(e, item)"
+        :class="'file-list-cursor user-select-none ' + (item.exists ? '' : 'text--disabled')"
+        @contextmenu="showContextMenu($event, item)"
+        @click="clickRow(item)">
+        <td class="pr-0">
+            <v-simple-checkbox v-ripple :value="isSelected" class="pa-0 mr-0" @click.stop="select(!isSelected)" />
+        </td>
+        <td class="px-0 text-center" style="width: 32px">
+            <template v-if="!item.exists">
+                <v-icon class="text--disabled">{{ mdiFile }}-cancel</v-icon>
+            </template>
+            <template v-else-if="smallThumbnail && bigThumbnail">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <vue-load-image>
+                            <img slot="image" :src="smallThumbnail" width="32" height="32" v-bind="attrs" v-on="on" />
+                            <v-progress-circular slot="preloader" indeterminate color="primary" />
+                            <v-icon slot="error">{{ mdiFile }}</v-icon>
+                        </vue-load-image>
+                    </template>
+                    <span><img :src="bigThumbnail" width="250" /></span>
+                </v-tooltip>
+            </template>
+            <template v-else-if="smallThumbnail">
+                <vue-load-image>
+                    <img slot="image" :src="smallThumbnail" width="32" height="32" />
+                    <v-progress-circular slot="preloader" indeterminate color="primary" />
+                    <v-icon slot="error">{{ mdiFile }}</v-icon>
+                </vue-load-image>
+            </template>
+            <template v-else>
+                <v-icon>{{ mdiFile }}</v-icon>
+            </template>
+        </td>
+        <td class=" ">{{ item.filename }}</td>
+        <td class="text-right text-no-wrap">
+            <template v-if="'note' in item && item.note">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-icon small class="mr-2" v-bind="attrs" v-on="on">
+                            {{ mdiNotebook }}
+                        </v-icon>
+                    </template>
+                    <span v-html="item.note.replaceAll('\n', '<br />')" />
+                </v-tooltip>
+            </template>
+            <v-tooltip top>
+                <template #activator="{ on, attrs }">
+                    <span v-bind="attrs" v-on="on">
+                        <v-icon small :color="statusColor" :disabled="!item.exists">
+                            {{ statusIcon }}
+                        </v-icon>
+                    </span>
+                </template>
+                <span>{{ statusName }}</span>
+            </v-tooltip>
+        </td>
+        <td v-for="col in tableFields" :key="col.value" class="text-no-wrap">
+            {{ outputValue(col, item) }}
+        </td>
+        <td v-if="headers.find((header) => header.value === 'slicer')?.visible" class=" ">
+            {{ 'slicer' in item.metadata && item.metadata.slicer ? item.metadata.slicer : '--' }}
+            <small v-if="'slicer_version' in item.metadata && item.metadata.slicer_version">
+                <br />
+                {{ item.metadata.slicer_version }}
+            </small>
+        </td>
+    </tr>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
+import Panel from '@/components/ui/Panel.vue'
+import BaseMixin from '@/components/mixins/base'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
+import { mdiFile, mdiNotebook } from '@mdi/js'
+
+@Component({
+    components: { HistoryListPanelDetailsDialog, Panel },
+})
+export default class HistoryListPanel extends Mixins(BaseMixin) {
+    mdiFile = mdiFile
+    mdiNotebook = mdiNotebook
+
+    @Prop({ type: Object, required: true }) readonly item!: ServerHistoryStateJob
+    @Prop({ type: Array, required: true }) readonly headers!: ServerHistoryStateJob
+    @Prop({ type: Array, required: true }) readonly tableFields!: Array
+
+    mounted() {
+        window.console.log(this.item)
+    }
+
+    get smallThumbnail() {
+        if (this.item.metadata?.thumbnails?.length) {
+            const thumbnail = this.item.metadata?.thumbnails?.find(
+                (thumb: any) =>
+                    thumb.width >= thumbnailSmallMin &&
+                    thumb.width <= thumbnailSmallMax &&
+                    thumb.height >= thumbnailSmallMin &&
+                    thumb.height <= thumbnailSmallMax
+            )
+
+            let relative_url = ''
+            if (this.item.filename.lastIndexOf('/') !== -1) {
+                relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/'))
+            }
+
+            if (thumbnail && 'relative_path' in thumbnail) {
+                return `${this.apiUrl}/server/files/gcodes/${encodeURI(
+                    relative_url + thumbnail.relative_path
+                )}?timestamp=${this.item.metadata.modified}`
+            }
+        }
+
+        return false
+    }
+
+    get bigThumbnail() {
+        if (this.item.metadata?.thumbnails?.length) {
+            const thumbnail = this.item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
+
+            let relative_url = ''
+            if (this.item.filename.lastIndexOf('/') !== -1) {
+                relative_url = this.item.filename.substr(0, this.item.filename.lastIndexOf('/') + 1)
+            }
+
+            if (thumbnail && 'relative_path' in thumbnail)
+                return `${this.apiUrl}/server/files/gcodes/${encodeURI(
+                    relative_url + thumbnail.relative_path
+                )}?timestamp=${this.item.metadata.modified}`
+        }
+
+        return false
+    }
+
+    get thumbnailWidth() {
+        if (this.bigThumbnail) {
+            const thumbnail = this.item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
+
+            if (thumbnail) return thumbnail.width
+        }
+
+        return 400
+    }
+
+    get statusIcon() {
+        return this.$store.getters['server/history/getPrintStatusIcon'](this.item.status)
+    }
+
+    get statusColor() {
+        return this.$store.getters['server/history/getPrintStatusIconColor'](this.item.status)
+    }
+
+    get statusName() {
+        return this.$t(`History.StatusValues.${this.item.status}`, 'en')
+            ? this.$t(`History.StatusValues.${this.item.status}`)
+            : this.item.status.replace(/_/g, ' ')
+    }
+}
+</script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index c9e0da5a4..540041c5b 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -106,98 +106,7 @@
                 </template>
 
                 <template #item="{ index, item, isSelected, select }">
-                    <tr
-                        :key="`${index} ${item.filename}`"
-                        v-longpress:600="(e) => showContextMenu(e, item)"
-                        :class="'file-list-cursor user-select-none ' + (item.exists ? '' : 'text--disabled')"
-                        @contextmenu="showContextMenu($event, item)"
-                        @click="clickRow(item)">
-                        <td class="pr-0">
-                            <v-simple-checkbox
-                                v-ripple
-                                :value="isSelected"
-                                class="pa-0 mr-0"
-                                @click.stop="select(!isSelected)"></v-simple-checkbox>
-                        </td>
-                        <td class="px-0 text-center" style="width: 32px">
-                            <template v-if="!item.exists">
-                                <v-icon class="text--disabled">{{ mdiFile }}-cancel</v-icon>
-                            </template>
-                            <template v-else-if="getSmallThumbnail(item) && getBigThumbnail(item)">
-                                <v-tooltip top>
-                                    <template #activator="{ on, attrs }">
-                                        <vue-load-image>
-                                            <img
-                                                slot="image"
-                                                :src="getSmallThumbnail(item)"
-                                                width="32"
-                                                height="32"
-                                                v-bind="attrs"
-                                                v-on="on" />
-                                            <v-progress-circular
-                                                slot="preloader"
-                                                indeterminate
-                                                color="primary"></v-progress-circular>
-                                            <v-icon slot="error">{{ mdiFile }}</v-icon>
-                                        </vue-load-image>
-                                    </template>
-                                    <span><img :src="getBigThumbnail(item)" width="250" /></span>
-                                </v-tooltip>
-                            </template>
-                            <template v-else-if="getSmallThumbnail(item)">
-                                <vue-load-image>
-                                    <img slot="image" :src="getSmallThumbnail(item)" width="32" height="32" />
-                                    <v-progress-circular
-                                        slot="preloader"
-                                        indeterminate
-                                        color="primary"></v-progress-circular>
-                                    <v-icon slot="error">{{ mdiFile }}</v-icon>
-                                </vue-load-image>
-                            </template>
-                            <template v-else>
-                                <v-icon>{{ mdiFile }}</v-icon>
-                            </template>
-                        </td>
-                        <td class=" ">{{ item.filename }}</td>
-                        <td class="text-right text-no-wrap">
-                            <template v-if="'note' in item && item.note">
-                                <v-tooltip top>
-                                    <template #activator="{ on, attrs }">
-                                        <v-icon small class="mr-2" v-bind="attrs" v-on="on">
-                                            {{ mdiNotebook }}
-                                        </v-icon>
-                                    </template>
-                                    <span v-html="item.note.replaceAll('\n', '<br />')"></span>
-                                </v-tooltip>
-                            </template>
-                            <v-tooltip top>
-                                <template #activator="{ on, attrs }">
-                                    <span v-bind="attrs" v-on="on">
-                                        <v-icon small :color="getStatusColor(item.status)" :disabled="!item.exists">
-                                            {{ getStatusIcon(item.status) }}
-                                        </v-icon>
-                                    </span>
-                                </template>
-                                <span>
-                                    {{
-                                        $te(`History.StatusValues.${item.status}`, 'en')
-                                            ? $t(`History.StatusValues.${item.status}`)
-                                            : item.status.replace(/_/g, ' ')
-                                    }}
-                                </span>
-                            </v-tooltip>
-                        </td>
-                        <td v-for="col in tableFields" :key="col.value" class="text-no-wrap">
-                            {{ outputValue(col, item) }}
-                        </td>
-                        <td v-if="headers.find((header) => header.value === 'slicer')?.visible" class=" ">
-                            {{ 'slicer' in item.metadata && item.metadata.slicer ? item.metadata.slicer : '--' }}
-                            <small v-if="'slicer_version' in item.metadata && item.metadata.slicer_version">
-                                <br />
-                                {{ item.metadata.slicer_version }}
-                            </small>
-                        </td>
-                    </tr>
+                    <history-list-entry-job :item="item" :table-fields="tableFields" />
                 </template>
             </v-data-table>
         </panel>
@@ -272,11 +181,7 @@
                 <v-card-text class="pb-0">
                     <v-row>
                         <v-col>
-                            <v-textarea
-                                v-model="noteDialog.note"
-                                outlined
-                                hide-details
-                                :label="$t('History.Note')"></v-textarea>
+                            <v-textarea v-model="noteDialog.note" outlined hide-details :label="$t('History.Note')" />
                         </v-col>
                     </v-row>
                 </v-card-text>
@@ -296,7 +201,6 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { caseInsensitiveSort, formatFilesize } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
-import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
 import {
     mdiDatabaseExportOutline,
     mdiDelete,
@@ -304,17 +208,27 @@ import {
     mdiCog,
     mdiPrinter,
     mdiTextBoxSearch,
-    mdiFile,
     mdiFileDocumentMultipleOutline,
     mdiMagnify,
     mdiCloseThick,
     mdiNotebookEdit,
     mdiNotebookPlus,
-    mdiNotebook,
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
+import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
+
+export interface HistoryListPanelRow {
+    text: string
+    value: string
+    align: string
+    configable: boolean
+    visible: boolean
+    filterable?: boolean
+    outputType?: string
+}
+
 @Component({
-    components: { HistoryListPanelDetailsDialog, Panel },
+    components: { HistoryListEntryJob, HistoryListPanelDetailsDialog, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
@@ -324,12 +238,10 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiPrinter = mdiPrinter
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiTextBoxSearch = mdiTextBoxSearch
-    mdiFile = mdiFile
     mdiMagnify = mdiMagnify
     mdiCloseThick = mdiCloseThick
     mdiNotebookPlus = mdiNotebookPlus
     mdiNotebookEdit = mdiNotebookEdit
-    mdiNotebook = mdiNotebook
 
     formatFilesize = formatFilesize
 
@@ -377,7 +289,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     get headers() {
-        const headers = [
+        const headers: HistoryListPanelRow[] = [
             {
                 text: '',
                 value: '',
@@ -387,7 +299,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 filterable: false,
             },
             {
-                text: this.$t('History.Filename'),
+                text: this.$t('History.Filename').toString() as string,
                 value: 'filename',
                 align: 'left',
                 configable: false,
@@ -402,7 +314,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 filterable: false,
             },
             {
-                text: this.$t('History.Filesize'),
+                text: this.$t('History.Filesize').toString() as string,
                 value: 'size',
                 align: 'left',
                 configable: true,
@@ -410,7 +322,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'filesize',
             },
             {
-                text: this.$t('History.LastModified'),
+                text: this.$t('History.LastModified').toString() as string,
                 value: 'modified',
                 align: 'left',
                 configable: true,
@@ -418,7 +330,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'date',
             },
             {
-                text: this.$t('History.StartTime'),
+                text: this.$t('History.StartTime').toString() as string,
                 value: 'start_time',
                 align: 'left',
                 configable: true,
@@ -426,7 +338,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'date',
             },
             {
-                text: this.$t('History.EndTime'),
+                text: this.$t('History.EndTime').toString() as string,
                 value: 'end_time',
                 align: 'left',
                 configable: true,
@@ -434,7 +346,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'date',
             },
             {
-                text: this.$t('History.EstimatedTime'),
+                text: this.$t('History.EstimatedTime').toString() as string,
                 value: 'estimated_time',
                 align: 'left',
                 configable: true,
@@ -442,7 +354,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'time',
             },
             {
-                text: this.$t('History.PrintTime'),
+                text: this.$t('History.PrintTime').toString() as string,
                 value: 'print_duration',
                 align: 'left',
                 configable: true,
@@ -450,7 +362,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'time',
             },
             {
-                text: this.$t('History.TotalTime'),
+                text: this.$t('History.TotalTime').toString() as string,
                 value: 'total_duration',
                 align: 'left',
                 configable: true,
@@ -458,7 +370,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'time',
             },
             {
-                text: this.$t('History.FilamentCalc'),
+                text: this.$t('History.FilamentCalc').toString() as string,
                 value: 'filament_total',
                 align: 'left',
                 configable: true,
@@ -466,7 +378,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'length',
             },
             {
-                text: this.$t('History.FilamentUsed'),
+                text: this.$t('History.FilamentUsed').toString() as string,
                 value: 'filament_used',
                 align: 'left',
                 configable: true,
@@ -474,7 +386,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'length',
             },
             {
-                text: this.$t('History.FirstLayerExtTemp'),
+                text: this.$t('History.FirstLayerExtTemp').toString() as string,
                 value: 'first_layer_extr_temp',
                 align: 'left',
                 configable: true,
@@ -482,7 +394,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'temp',
             },
             {
-                text: this.$t('History.FirstLayerBedTemp'),
+                text: this.$t('History.FirstLayerBedTemp').toString() as string,
                 value: 'first_layer_bed_temp',
                 align: 'left',
                 configable: true,
@@ -490,7 +402,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'temp',
             },
             {
-                text: this.$t('History.FirstLayerHeight'),
+                text: this.$t('History.FirstLayerHeight').toString() as string,
                 value: 'first_layer_height',
                 align: 'left',
                 configable: true,
@@ -498,7 +410,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'length',
             },
             {
-                text: this.$t('History.LayerHeight'),
+                text: this.$t('History.LayerHeight').toString() as string,
                 value: 'layer_height',
                 align: 'left',
                 configable: true,
@@ -506,7 +418,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'length',
             },
             {
-                text: this.$t('History.ObjectHeight'),
+                text: this.$t('History.ObjectHeight').toString() as string,
                 value: 'object_height',
                 align: 'left',
                 configable: true,
@@ -514,7 +426,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 outputType: 'length',
             },
             {
-                text: this.$t('History.Slicer'),
+                text: this.$t('History.Slicer').toString() as string,
                 value: 'slicer',
                 align: 'left',
                 configable: true,
@@ -535,7 +447,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
 
     get tableFields() {
         return this.filteredHeaders.filter(
-            (col: any) => !['filename', 'status', 'slicer'].includes(col.value) && col.value !== ''
+            (col: any) => !['filename', 'status'].includes(col.value) && col.value !== ''
         )
     }
 
@@ -654,59 +566,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return value != null && search != null && value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1
     }
 
-    getSmallThumbnail(item: ServerHistoryStateJob) {
-        if (item.metadata?.thumbnails?.length) {
-            const thumbnail = item.metadata.thumbnails.find(
-                (thumb: any) =>
-                    thumb.width >= thumbnailSmallMin &&
-                    thumb.width <= thumbnailSmallMax &&
-                    thumb.height >= thumbnailSmallMin &&
-                    thumb.height <= thumbnailSmallMax
-            )
-
-            let relative_url = ''
-            if (item.filename.lastIndexOf('/') !== -1) {
-                relative_url = item.filename.substr(0, item.filename.lastIndexOf('/') + 1)
-            }
-
-            if (thumbnail && 'relative_path' in thumbnail) {
-                return `${this.apiUrl}/server/files/gcodes/${encodeURI(
-                    relative_url + thumbnail.relative_path
-                )}?timestamp=${item.metadata.modified}`
-            }
-        }
-
-        return false
-    }
-
-    getBigThumbnail(item: ServerHistoryStateJob) {
-        if (item.metadata?.thumbnails?.length) {
-            const thumbnail = item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
-
-            let relative_url = ''
-            if (item.filename.lastIndexOf('/') !== -1) {
-                relative_url = item.filename.substr(0, item.filename.lastIndexOf('/') + 1)
-            }
-
-            if (thumbnail && 'relative_path' in thumbnail)
-                return `${this.apiUrl}/server/files/gcodes/${encodeURI(
-                    relative_url + thumbnail.relative_path
-                )}?timestamp=${item.metadata.modified}`
-        }
-
-        return false
-    }
-
-    getThumbnailWidth(item: ServerHistoryStateJob) {
-        if (this.getBigThumbnail(item)) {
-            const thumbnail = item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
-
-            if (thumbnail) return thumbnail.width
-        }
-
-        return 400
-    }
-
     changeColumnVisible(name: string) {
         if (this.headers.filter((header) => header.value === name).length) {
             let value = this.headers.filter((header) => header.value === name)[0].visible
@@ -806,15 +665,13 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         link.remove()
     }
 
-    getStatusIcon(status: string) {
-        return this.$store.getters['server/history/getPrintStatusIcon'](status)
-    }
-
-    getStatusColor(status: string) {
-        return this.$store.getters['server/history/getPrintStatusIconColor'](status)
-    }
-
-    outputValue(col: any, item: any, format: boolean = true, escapeChar: string | null = null) {
+    outputValue(
+        col: HistoryListPanelRow,
+        item: ServerHistoryStateJob,
+        format: boolean = true,
+        escapeChar: string | null = null
+    ) {
+        //@ts-ignore
         let value = col.value in item ? item[col.value] : null
         if (value === null) value = col.value in item.metadata ? item.metadata[col.value] : null
 
@@ -840,7 +697,9 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                             return value
                     }
             }
-        } else if (value > 0) {
+        }
+
+        if (value > 0) {
             switch (col.outputType) {
                 case 'filesize':
                     return formatFilesize(value)
@@ -862,7 +721,9 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 default:
                     return value
             }
-        } else return '--'
+        }
+
+        return '--'
     }
 
     createNote(item: ServerHistoryStateJob) {

From c394713aa1ebfd55275bdd82c9518c2065a7acd6 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 18 May 2023 21:00:52 +0200
Subject: [PATCH 06/46] style: order imports after update branch

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/gui/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index a826fcd61..8cacbf9d7 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -14,9 +14,8 @@ import { navigation } from '@/store/gui/navigation'
 import { notifications } from '@/store/gui/notifications'
 import { presets } from '@/store/gui/presets'
 import { remoteprinters } from '@/store/gui/remoteprinters'
-import { webcams } from '@/store/gui/webcams'
-import { notifications } from '@/store/gui/notifications'
 import { reminders } from '@/store/gui/reminders'
+import { webcams } from '@/store/gui/webcams'
 
 export const getDefaultState = (): GuiState => {
     return {

From fca24a8fcbe53427ce43ead3c7ef3e5643aa33aa Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 19 May 2023 00:20:03 +0200
Subject: [PATCH 07/46] refactor: split and cleanup HistoryListPanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/HistoryListPanelDetailsDialog.vue |   7 +-
 .../dialogs/HistoryListPanelNoteDialog.vue    |  88 +++++
 .../HistoryList/HistoryListEntryJob.vue       | 312 +++++++++++++-----
 src/components/panels/HistoryListPanel.vue    | 252 +++-----------
 4 files changed, 366 insertions(+), 293 deletions(-)
 create mode 100644 src/components/dialogs/HistoryListPanelNoteDialog.vue

diff --git a/src/components/dialogs/HistoryListPanelDetailsDialog.vue b/src/components/dialogs/HistoryListPanelDetailsDialog.vue
index 67b9eb3c0..16f7f33f8 100644
--- a/src/components/dialogs/HistoryListPanelDetailsDialog.vue
+++ b/src/components/dialogs/HistoryListPanelDetailsDialog.vue
@@ -47,11 +47,8 @@ export default class HistoryListPanelDetailsDialog extends Mixins(BaseMixin) {
     formatFilesize = formatFilesize
     formatPrintTime = formatPrintTime
 
-    @Prop({ required: true, default: false })
-    declare readonly show: boolean
-
-    @Prop({ required: true })
-    declare job: ServerHistoryStateJob
+    @Prop({ type: Boolean, required: true }) readonly show!: boolean
+    @Prop({ type: Object, required: true }) readonly job!: ServerHistoryStateJob
 
     get entries() {
         let entries: { name: string; value: string | null; exists: boolean }[] = [
diff --git a/src/components/dialogs/HistoryListPanelNoteDialog.vue b/src/components/dialogs/HistoryListPanelNoteDialog.vue
new file mode 100644
index 000000000..63c2c163d
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelNoteDialog.vue
@@ -0,0 +1,88 @@
+<template>
+    <v-dialog v-model="show" :max-width="600" persistent @keydown.esc="closeDialog">
+        <panel :title="panelTitle" :icon="panelIcon" card-class="history-note-dialog" :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="pb-0">
+                <v-row>
+                    <v-col>
+                        <v-textarea v-model="note" outlined hide-details :label="$t('History.Note')" />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="" text @click="closeDialog">{{ $t('History.Cancel') }}</v-btn>
+                <v-btn color="primary" text @click="saveNote">{{ $t('History.Save') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import Panel from '@/components/ui/Panel.vue'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+import { mdiCloseThick, mdiNotebookEdit, mdiNotebookPlus } from '@mdi/js'
+
+@Component({
+    components: {
+        Panel,
+        SettingsRow,
+    },
+})
+export default class HistoryListPanelNoteDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+
+    private note: string = ''
+
+    @Prop({ type: Boolean, required: true }) readonly show!: boolean
+    @Prop({ type: String, required: true }) readonly type!: 'create' | 'edit'
+    @Prop({ type: Object, required: true }) readonly job!: ServerHistoryStateJob
+
+    get panelTitle() {
+        if (this.type === 'create') return this.$t('History.CreateNote').toString()
+
+        return this.$t('History.EditNote').toString()
+    }
+
+    get panelIcon() {
+        if (this.type === 'create') return mdiNotebookPlus
+
+        return mdiNotebookEdit
+    }
+
+    saveNote() {
+        this.$store.dispatch('server/history/saveHistoryNote', {
+            job_id: this.job?.job_id,
+            note: this.note,
+        })
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+
+    @Watch('show', { immediate: true })
+    onShowChanged() {
+        if (this.show) this.note = this.job.note ?? ''
+    }
+}
+</script>
+
+<style scoped>
+::v-deep .os-content .row:first-child {
+    margin-top: 1em !important;
+}
+
+::v-deep .os-content .row:last-child {
+    margin-bottom: 1em !important;
+}
+</style>
diff --git a/src/components/panels/HistoryList/HistoryListEntryJob.vue b/src/components/panels/HistoryList/HistoryListEntryJob.vue
index d392dde1e..2af687651 100644
--- a/src/components/panels/HistoryList/HistoryListEntryJob.vue
+++ b/src/components/panels/HistoryList/HistoryListEntryJob.vue
@@ -1,41 +1,56 @@
 <template>
     <tr
         :key="item.job_id"
-        v-longpress:600="(e) => showContextMenu(e, item)"
-        :class="'file-list-cursor user-select-none ' + (item.exists ? '' : 'text--disabled')"
-        @contextmenu="showContextMenu($event, item)"
-        @click="clickRow(item)">
+        v-longpress:600="(e) => showContextMenu(e)"
+        :class="cssClasses"
+        @contextmenu="showContextMenu($event)"
+        @click="detailsDialogBool = true">
         <td class="pr-0">
             <v-simple-checkbox v-ripple :value="isSelected" class="pa-0 mr-0" @click.stop="select(!isSelected)" />
         </td>
         <td class="px-0 text-center" style="width: 32px">
             <template v-if="!item.exists">
-                <v-icon class="text--disabled">{{ mdiFile }}-cancel</v-icon>
+                <v-icon class="text--disabled">{{ mdiFileCancel }}</v-icon>
             </template>
             <template v-else-if="smallThumbnail && bigThumbnail">
                 <v-tooltip top>
                     <template #activator="{ on, attrs }">
                         <vue-load-image>
-                            <img slot="image" :src="smallThumbnail" width="32" height="32" v-bind="attrs" v-on="on" />
-                            <v-progress-circular slot="preloader" indeterminate color="primary" />
-                            <v-icon slot="error">{{ mdiFile }}</v-icon>
+                            <img
+                                slot="image"
+                                :alt="item.filename"
+                                :src="smallThumbnail"
+                                width="32"
+                                height="32"
+                                v-bind="attrs"
+                                v-on="on" />
+                            <div slot="preloader">
+                                <v-progress-circular indeterminate color="primary" />
+                            </div>
+                            <div slot="error">
+                                <v-icon>{{ mdiFile }}</v-icon>
+                            </div>
                         </vue-load-image>
                     </template>
-                    <span><img :src="bigThumbnail" width="250" /></span>
+                    <span><img :alt="item.filename" :src="bigThumbnail" width="250" /></span>
                 </v-tooltip>
             </template>
             <template v-else-if="smallThumbnail">
                 <vue-load-image>
-                    <img slot="image" :src="smallThumbnail" width="32" height="32" />
-                    <v-progress-circular slot="preloader" indeterminate color="primary" />
-                    <v-icon slot="error">{{ mdiFile }}</v-icon>
+                    <img slot="image" :alt="item.filename" :src="smallThumbnail" width="32" height="32" />
+                    <div slot="preloader">
+                        <v-progress-circular indeterminate color="primary" />
+                    </div>
+                    <div slot="error">
+                        <v-icon>{{ mdiFile }}</v-icon>
+                    </div>
                 </vue-load-image>
             </template>
             <template v-else>
                 <v-icon>{{ mdiFile }}</v-icon>
             </template>
         </td>
-        <td class=" ">{{ item.filename }}</td>
+        <td>{{ item.filename }}</td>
         <td class="text-right text-no-wrap">
             <template v-if="'note' in item && item.note">
                 <v-tooltip top>
@@ -58,16 +73,46 @@
                 <span>{{ statusName }}</span>
             </v-tooltip>
         </td>
-        <td v-for="col in tableFields" :key="col.value" class="text-no-wrap">
-            {{ outputValue(col, item) }}
-        </td>
-        <td v-if="headers.find((header) => header.value === 'slicer')?.visible" class=" ">
-            {{ 'slicer' in item.metadata && item.metadata.slicer ? item.metadata.slicer : '--' }}
-            <small v-if="'slicer_version' in item.metadata && item.metadata.slicer_version">
-                <br />
-                {{ item.metadata.slicer_version }}
-            </small>
-        </td>
+        <td v-for="col in tableFields" :key="col.value" class="text-no-wrap" v-html="outputValue(col, item)" />
+        <!-- Context menu -->
+        <v-menu v-model="contextMenuBool" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
+            <v-list>
+                <v-list-item @click="detailsDialogBool = true">
+                    <v-icon class="mr-1">{{ mdiTextBoxSearch }}</v-icon>
+                    {{ $t('History.Details') }}
+                </v-list-item>
+                <v-list-item v-if="item.note" @click="editNote">
+                    <v-icon class="mr-1">{{ mdiNotebookEdit }}</v-icon>
+                    {{ $t('History.EditNote') }}
+                </v-list-item>
+                <v-list-item v-else @click="createNote">
+                    <v-icon class="mr-1">{{ mdiNotebookPlus }}</v-icon>
+                    {{ $t('History.AddNote') }}
+                </v-list-item>
+                <v-list-item
+                    v-if="item.exists"
+                    :disabled="printerIsPrinting || !klipperReadyForGui"
+                    @click="startPrint">
+                    <v-icon class="mr-1">{{ mdiPrinter }}</v-icon>
+                    {{ $t('History.Reprint') }}
+                </v-list-item>
+                <v-list-item class="red--text" @click="deleteJob">
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
+                    {{ $t('History.Delete') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
+        <!-- details dialog -->
+        <history-list-panel-details-dialog
+            :show="detailsDialogBool"
+            :job="item"
+            @close-dialog="detailsDialogBool = false" />
+        <!-- create/edit note dialog -->
+        <history-list-panel-note-dialog
+            :show="noteDialogBool"
+            :type="noteDialogType"
+            :job="item"
+            @close-dialog="noteDialogBool = false" />
     </tr>
 </template>
 <script lang="ts">
@@ -77,74 +122,86 @@ import Panel from '@/components/ui/Panel.vue'
 import BaseMixin from '@/components/mixins/base'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
-import { mdiFile, mdiNotebook } from '@mdi/js'
+import {
+    mdiCloseThick,
+    mdiDelete,
+    mdiFile,
+    mdiFileCancel,
+    mdiNotebook,
+    mdiNotebookEdit,
+    mdiNotebookPlus,
+    mdiPrinter,
+    mdiTextBoxSearch,
+} from '@mdi/js'
+import { formatFilesize } from '@/plugins/helpers'
+import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
+import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
 
 @Component({
-    components: { HistoryListPanelDetailsDialog, Panel },
+    components: { HistoryListPanelNoteDialog, HistoryListPanelDetailsDialog, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiDelete = mdiDelete
     mdiFile = mdiFile
+    mdiFileCancel = mdiFileCancel
     mdiNotebook = mdiNotebook
+    mdiNotebookEdit = mdiNotebookEdit
+    mdiNotebookPlus = mdiNotebookPlus
+    mdiPrinter = mdiPrinter
+    mdiTextBoxSearch = mdiTextBoxSearch
 
-    @Prop({ type: Object, required: true }) readonly item!: ServerHistoryStateJob
-    @Prop({ type: Array, required: true }) readonly headers!: ServerHistoryStateJob
-    @Prop({ type: Array, required: true }) readonly tableFields!: Array
+    private detailsDialogBool = false
 
-    mounted() {
-        window.console.log(this.item)
-    }
+    private contextMenuBool = false
+    private contextMenuX = 0
+    private contextMenuY = 0
+
+    private noteDialogBool = false
+    private noteDialogType: 'create' | 'edit' = 'create'
+
+    @Prop({ type: Object, required: true }) readonly item!: ServerHistoryStateJob
+    @Prop({ type: Array, required: true }) readonly tableFields!: HistoryListPanelRow[]
+    @Prop({ type: Boolean, required: true }) readonly isSelected!: boolean
 
     get smallThumbnail() {
-        if (this.item.metadata?.thumbnails?.length) {
-            const thumbnail = this.item.metadata?.thumbnails?.find(
-                (thumb: any) =>
-                    thumb.width >= thumbnailSmallMin &&
-                    thumb.width <= thumbnailSmallMax &&
-                    thumb.height >= thumbnailSmallMin &&
-                    thumb.height <= thumbnailSmallMax
-            )
-
-            let relative_url = ''
-            if (this.item.filename.lastIndexOf('/') !== -1) {
-                relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/'))
-            }
-
-            if (thumbnail && 'relative_path' in thumbnail) {
-                return `${this.apiUrl}/server/files/gcodes/${encodeURI(
-                    relative_url + thumbnail.relative_path
-                )}?timestamp=${this.item.metadata.modified}`
-            }
-        }
+        if ((this.item.metadata?.thumbnails?.length ?? 0) < 1) return false
 
-        return false
-    }
+        const thumbnail = this.item.metadata?.thumbnails?.find(
+            (thumb: any) =>
+                thumb.width >= thumbnailSmallMin &&
+                thumb.width <= thumbnailSmallMax &&
+                thumb.height >= thumbnailSmallMin &&
+                thumb.height <= thumbnailSmallMax
+        )
 
-    get bigThumbnail() {
-        if (this.item.metadata?.thumbnails?.length) {
-            const thumbnail = this.item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
-
-            let relative_url = ''
-            if (this.item.filename.lastIndexOf('/') !== -1) {
-                relative_url = this.item.filename.substr(0, this.item.filename.lastIndexOf('/') + 1)
-            }
-
-            if (thumbnail && 'relative_path' in thumbnail)
-                return `${this.apiUrl}/server/files/gcodes/${encodeURI(
-                    relative_url + thumbnail.relative_path
-                )}?timestamp=${this.item.metadata.modified}`
+        let relative_url = ''
+        if (this.item.filename.lastIndexOf('/') !== -1) {
+            relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/'))
         }
 
-        return false
+        if ((thumbnail?.relative_path ?? null) === null) return false
+
+        return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail?.relative_path)}?timestamp=${
+            this.item.metadata.modified
+        }`
     }
 
-    get thumbnailWidth() {
-        if (this.bigThumbnail) {
-            const thumbnail = this.item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
+    get bigThumbnail() {
+        if ((this.item.metadata?.thumbnails?.length ?? 0) < 1) return false
+
+        const thumbnail = this.item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
 
-            if (thumbnail) return thumbnail.width
+        let relative_url = ''
+        if (this.item.filename.lastIndexOf('/') !== -1) {
+            relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/') + 1)
         }
 
-        return 400
+        if ((thumbnail?.relative_path ?? null) === null) return false
+
+        return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail?.relative_path)}?timestamp=${
+            this.item.metadata.modified
+        }`
     }
 
     get statusIcon() {
@@ -156,9 +213,114 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     get statusName() {
-        return this.$t(`History.StatusValues.${this.item.status}`, 'en')
-            ? this.$t(`History.StatusValues.${this.item.status}`)
-            : this.item.status.replace(/_/g, ' ')
+        // check if translation exists
+        if (!this.$t(`History.StatusValues.${this.item.status}`, 'en')) return this.item.status.replace(/_/g, ' ')
+
+        return this.$t(`History.StatusValues.${this.item.status}`)
+    }
+
+    get cssClasses() {
+        let output = ['file-list-cursor', 'user-select-none']
+
+        if (!this.item.exists) output.push('text--disabled')
+
+        return output
+    }
+
+    select(newVal: boolean) {
+        this.$emit('select', newVal)
+    }
+
+    showContextMenu(e: any) {
+        e?.preventDefault()
+        if (this.contextMenuBool) return
+
+        this.contextMenuBool = true
+        this.contextMenuX = e?.clientX || e?.pageX || window.screenX / 2
+        this.contextMenuY = e?.clientY || e?.pageY || window.screenY / 2
+
+        this.$nextTick(() => {
+            this.contextMenuBool = true
+        })
+    }
+
+    startPrint() {
+        if (!this.item.exists) return
+
+        this.$socket.emit('printer.print.start', { filename: this.item.filename }, { action: 'switchToDashboard' })
+    }
+
+    createNote() {
+        this.noteDialogType = 'create'
+        this.noteDialogBool = true
+    }
+
+    editNote() {
+        this.noteDialogType = 'edit'
+        this.noteDialogBool = true
+    }
+
+    deleteJob() {
+        this.$socket.emit(
+            'server.history.delete_job',
+            { uid: this.item.job_id },
+            { action: 'server/history/getDeletedJobs' }
+        )
+    }
+
+    outputValue(col: HistoryListPanelRow, item: ServerHistoryStateJob) {
+        //@ts-ignore
+        let value = col.value in item ? item[col.value] : null
+        if (value === null) value = col.value in item.metadata ? item.metadata[col.value] : null
+        if (value === null) return '--'
+
+        if (col.value === 'slicer') value += '<br />' + item.metadata.slicer_version
+
+        switch (col.outputType) {
+            case 'filesize':
+                return formatFilesize(value)
+
+            case 'date':
+                return this.formatDateTime(value * 1000)
+
+            case 'time':
+                return this.formatPrintTime(value)
+
+            case 'temp':
+                return value?.toFixed() + ' °C'
+
+            case 'length':
+                if (value > 1000) return (value / 1000).toFixed(2) + ' m'
+
+                return value?.toFixed(2) + ' mm'
+
+            default:
+                return value
+        }
+    }
+
+    formatPrintTime(totalSeconds: number) {
+        if (!totalSeconds) return '--'
+
+        let output = ''
+
+        const days = Math.floor(totalSeconds / (3600 * 24))
+        if (days) {
+            totalSeconds %= 3600 * 24
+            output += days + 'd'
+        }
+
+        const hours = Math.floor(totalSeconds / 3600)
+        totalSeconds %= 3600
+        if (hours) output += ' ' + hours + 'h'
+
+        const minutes = Math.floor(totalSeconds / 60)
+        if (minutes) output += ' ' + minutes + 'm'
+
+        const seconds = totalSeconds % 60
+        if (seconds) output += ' ' + seconds.toFixed(0) + 's'
+
+        return output
     }
 }
 </script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 540041c5b..fdcef9d86 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -15,7 +15,7 @@
                             outlined
                             clearable
                             hide-details
-                            dense></v-text-field>
+                            dense />
                     </v-col>
                     <v-col class="offset-4 col-4 d-flex align-center justify-end">
                         <template v-if="selectedJobs.length">
@@ -60,7 +60,7 @@
                                             hide-details
                                             :input-value="status.showInTable"
                                             :label="`${status.displayName} (${status.value})`"
-                                            @change="changeStatusVisible(status)"></v-checkbox>
+                                            @change="changeStatusVisible(status)" />
                                     </v-list-item>
                                     <v-divider></v-divider>
                                 </template>
@@ -73,20 +73,19 @@
                                         class="mt-0"
                                         hide-details
                                         :label="header.text"
-                                        @change="changeColumnVisible(header.value)"></v-checkbox>
+                                        @change="changeColumnVisible(header.value)" />
                                 </v-list-item>
                             </v-list>
                         </v-menu>
                     </v-col>
                 </v-row>
             </v-card-text>
-            <v-divider class="mb-3"></v-divider>
+            <v-divider class="mb-3" />
             <v-data-table
                 v-model="selectedJobs"
                 :items="jobs"
                 class="history-jobs-table"
                 :headers="filteredHeaders"
-                :options="options"
                 :custom-sort="sortFiles"
                 :sort-by.sync="sortBy"
                 :sort-desc.sync="sortDesc"
@@ -101,48 +100,20 @@
                 :custom-filter="advancedSearch"
                 mobile-breakpoint="0"
                 show-select>
-                <template slot="no-data">
+                <template #no-data>
                     <div class="text-center">{{ $t('History.Empty') }}</div>
                 </template>
 
                 <template #item="{ index, item, isSelected, select }">
-                    <history-list-entry-job :item="item" :table-fields="tableFields" />
+                    <history-list-entry-job
+                        :key="`${index}_${item.job_id}`"
+                        :is-selected="isSelected"
+                        :item="item"
+                        :table-fields="tableFields"
+                        @select="select" />
                 </template>
             </v-data-table>
         </panel>
-        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
-            <v-list>
-                <v-list-item @click="clickRow(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiTextBoxSearch }}</v-icon>
-                    {{ $t('History.Details') }}
-                </v-list-item>
-                <v-list-item
-                    v-if="'note' in contextMenu.item && contextMenu.item.note"
-                    @click="editNote(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiNotebookEdit }}</v-icon>
-                    {{ $t('History.EditNote') }}
-                </v-list-item>
-                <v-list-item v-else @click="createNote(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiNotebookPlus }}</v-icon>
-                    {{ $t('History.AddNote') }}
-                </v-list-item>
-                <v-list-item
-                    v-if="contextMenu.item.exists"
-                    :disabled="printerIsPrinting || !klipperReadyForGui"
-                    @click="startPrint(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiPrinter }}</v-icon>
-                    {{ $t('History.Reprint') }}
-                </v-list-item>
-                <v-list-item class="red--text" @click="deleteJob(contextMenu.item)">
-                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
-                    {{ $t('History.Delete') }}
-                </v-list-item>
-            </v-list>
-        </v-menu>
-        <history-list-panel-details-dialog
-            :show="detailsDialog.show"
-            :job="detailsDialog.item"
-            @close-dialog="detailsDialog.show = false" />
         <v-dialog v-model="deleteSelectedDialog" max-width="400">
             <panel
                 :title="$t('History.Delete').toString()"
@@ -157,41 +128,12 @@
                     <p class="mb-0">{{ $t('History.DeleteSelectedQuestion', { count: selectedJobs.length }) }}</p>
                 </v-card-text>
                 <v-card-actions>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <v-btn color="" text @click="deleteSelectedDialog = false">{{ $t('History.Cancel') }}</v-btn>
                     <v-btn color="error" text @click="deleteSelectedJobs">{{ $t('History.Delete') }}</v-btn>
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <v-dialog v-model="noteDialog.boolShow" :max-width="600" persistent @keydown.esc="noteDialog.boolShow = false">
-            <panel
-                :title="
-                    noteDialog.type === 'create'
-                        ? $t('History.CreateNote').toString()
-                        : $t('History.EditNote').toString()
-                "
-                :icon="noteDialog.type === 'create' ? mdiNotebookPlus : mdiNotebookEdit"
-                card-class="history-note-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="noteDialog.boolShow = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="pb-0">
-                    <v-row>
-                        <v-col>
-                            <v-textarea v-model="noteDialog.note" outlined hide-details :label="$t('History.Note')" />
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="" text @click="noteDialog.boolShow = false">{{ $t('History.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="saveNote">{{ $t('History.Save') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
     </div>
 </template>
 
@@ -206,13 +148,9 @@ import {
     mdiDelete,
     mdiRefresh,
     mdiCog,
-    mdiPrinter,
-    mdiTextBoxSearch,
     mdiFileDocumentMultipleOutline,
     mdiMagnify,
     mdiCloseThick,
-    mdiNotebookEdit,
-    mdiNotebookPlus,
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
@@ -235,44 +173,15 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDelete = mdiDelete
     mdiRefresh = mdiRefresh
     mdiCog = mdiCog
-    mdiPrinter = mdiPrinter
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
-    mdiTextBoxSearch = mdiTextBoxSearch
     mdiMagnify = mdiMagnify
     mdiCloseThick = mdiCloseThick
-    mdiNotebookPlus = mdiNotebookPlus
-    mdiNotebookEdit = mdiNotebookEdit
 
     formatFilesize = formatFilesize
 
     private search = ''
     private sortBy = 'start_time'
     private sortDesc = true
-    private options = {}
-    private contextMenu = {
-        shown: false,
-        touchTimer: undefined,
-        x: 0,
-        y: 0,
-        item: {} as ServerHistoryStateJob,
-    }
-
-    private detailsDialog = {
-        item: {} as ServerHistoryStateJob,
-        show: false,
-    }
-
-    private noteDialog: {
-        item: ServerHistoryStateJob | null
-        note: string
-        boolShow: boolean
-        type: 'create' | 'edit'
-    } = {
-        item: null,
-        note: '',
-        boolShow: false,
-        type: 'create',
-    }
 
     private deleteSelectedDialog = false
 
@@ -513,24 +422,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return '--'
     }
 
-    clickRow(item: ServerHistoryStateJob) {
-        this.detailsDialog.item = item
-        this.detailsDialog.show = true
-    }
-
-    showContextMenu(e: any, item: ServerHistoryStateJob) {
-        if (!this.contextMenu.shown) {
-            e?.preventDefault()
-            this.contextMenu.shown = true
-            this.contextMenu.x = e?.clientX || e?.pageX || window.screenX / 2
-            this.contextMenu.y = e?.clientY || e?.pageY || window.screenY / 2
-            this.contextMenu.item = item
-            this.$nextTick(() => {
-                this.contextMenu.shown = true
-            })
-        }
-    }
-
     sortFiles(items: any[], sortBy: string[], sortDesc: boolean[]) {
         const sortByClean = sortBy.length ? sortBy[0] : 'filename'
         const sortDescClean = sortDesc[0]
@@ -575,21 +466,12 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     changeStatusVisible(status: any) {
-        if (status.showInTable) this.$store.dispatch('gui/hideStatusInHistoryList', status.name)
-        else this.$store.dispatch('gui/showStatusInHistoryList', status.name)
-    }
-
-    startPrint(item: ServerHistoryStateJob) {
-        if (item.exists)
-            this.$socket.emit('printer.print.start', { filename: item.filename }, { action: 'switchToDashboard' })
-    }
+        if (status.showInTable) {
+            this.$store.dispatch('gui/hideStatusInHistoryList', status.name)
+            return
+        }
 
-    deleteJob(item: ServerHistoryStateJob) {
-        this.$socket.emit(
-            'server.history.delete_job',
-            { uid: item.job_id },
-            { action: 'server/history/getDeletedJobs' }
-        )
+        this.$store.dispatch('gui/showStatusInHistoryList', status.name)
     }
 
     deleteSelectedJobs() {
@@ -641,7 +523,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 row.push(job.status)
 
                 this.tableFields.forEach((col) => {
-                    row.push(this.outputValue(col, job, false, csvSeperator))
+                    row.push(this.outputValue(col, job, csvSeperator))
                 })
 
                 if (this.headers.find((header) => header.value === 'slicer')?.visible) {
@@ -665,98 +547,42 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         link.remove()
     }
 
-    outputValue(
-        col: HistoryListPanelRow,
-        item: ServerHistoryStateJob,
-        format: boolean = true,
-        escapeChar: string | null = null
-    ) {
+    outputValue(col: HistoryListPanelRow, job: ServerHistoryStateJob, csvSeperator: string | null = null) {
         //@ts-ignore
-        let value = col.value in item ? item[col.value] : null
-        if (value === null) value = col.value in item.metadata ? item.metadata[col.value] : null
-
-        if (!format) {
-            switch (col.outputType) {
-                case 'date':
-                    return this.formatDateTime(value * 1000)
-
-                case 'time':
-                    return value?.toFixed() ?? ''
-
-                default:
-                    switch (typeof value) {
-                        case 'number':
-                            return value?.toLocaleString(undefined, { useGrouping: false }) ?? 0
-
-                        case 'string':
-                            if (escapeChar !== null && value.includes(escapeChar)) value = '"' + value + '"'
-
-                            return value
-
-                        default:
-                            return value
-                    }
-            }
-        }
-
-        if (value > 0) {
-            switch (col.outputType) {
-                case 'filesize':
-                    return formatFilesize(value)
+        let value = col.value in job ? job[col.value] : null
+        if (value === null) value = col.value in job.metadata ? job.metadata[col.value] : null
 
-                case 'date':
-                    return this.formatDateTime(value * 1000)
+        switch (col.outputType) {
+            case 'date':
+                return this.formatDateTime(value * 1000)
 
-                case 'time':
-                    return this.formatPrintTime(value)
+            case 'time':
+                return value?.toFixed() ?? ''
 
-                case 'temp':
-                    return value?.toFixed() + ' °C'
+            default:
+                switch (typeof value) {
+                    case 'number':
+                        return value?.toLocaleString(undefined, { useGrouping: false }) ?? 0
 
-                case 'length':
-                    if (value > 1000) return (value / 1000).toFixed(2) + ' m'
+                    case 'string':
+                        if (csvSeperator !== null && value.includes(csvSeperator)) value = '"' + value + '"'
 
-                    return value?.toFixed(2) + ' mm'
+                        return value
 
-                default:
-                    return value
-            }
+                    default:
+                        return value
+                }
         }
-
-        return '--'
-    }
-
-    createNote(item: ServerHistoryStateJob) {
-        this.noteDialog.item = item
-        this.noteDialog.note = ''
-        this.noteDialog.type = 'create'
-        this.noteDialog.boolShow = true
-    }
-
-    editNote(item: ServerHistoryStateJob) {
-        this.noteDialog.item = item
-        this.noteDialog.note = item.note ?? ''
-        this.noteDialog.type = 'edit'
-        this.noteDialog.boolShow = true
-    }
-
-    saveNote() {
-        this.$store.dispatch('server/history/saveHistoryNote', {
-            job_id: this.noteDialog.item?.job_id,
-            note: this.noteDialog.note,
-        })
-
-        this.noteDialog.boolShow = false
     }
 }
 </script>
 
-<style>
-.history-jobs-table th {
+<style scoped>
+.history-jobs-table ::v-deep th {
     white-space: nowrap;
 }
 
-.history-jobs-table th.text-start {
+.history-jobs-table ::v-deep th.text-start {
     padding-right: 0 !important;
 }
 </style>

From f46c603a9f64b2441594c9e5ae0edd119f197846 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 21 May 2023 19:54:32 +0200
Subject: [PATCH 08/46] refactor: add TranslateResult type to Panel &
 SettingsRow title

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/settings/SettingsRow.vue | 5 +++--
 src/components/ui/Panel.vue             | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/SettingsRow.vue b/src/components/settings/SettingsRow.vue
index 179b21e7b..7be3cd5a1 100644
--- a/src/components/settings/SettingsRow.vue
+++ b/src/components/settings/SettingsRow.vue
@@ -23,6 +23,7 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class SettingsRow extends Mixins(BaseMixin) {
@@ -33,10 +34,10 @@ export default class SettingsRow extends Mixins(BaseMixin) {
     declare readonly icon: string
 
     @Prop({ required: true })
-    declare readonly title: string
+    declare readonly title: string | TranslateResult
 
     @Prop({ required: false })
-    declare readonly subTitle: string
+    declare readonly subTitle: string | TranslateResult
 
     @Prop({ required: false, default: false })
     declare readonly dynamicSlotWidth: boolean
diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index 3385d0b97..328dbd3ba 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -74,6 +74,7 @@ import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { panelToolbarHeight } from '@/store/variables'
 import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class Panel extends Mixins(BaseMixin) {
@@ -82,7 +83,7 @@ export default class Panel extends Mixins(BaseMixin) {
     panelToolbarHeight = panelToolbarHeight
 
     @Prop({ default: null }) declare readonly icon: string | null
-    @Prop({ required: true, default: '' }) declare readonly title: string
+    @Prop({ required: true, default: '' }) declare readonly title: string | TranslateResult
     @Prop({ default: false }) declare readonly collapsible: boolean
     @Prop({ required: true }) declare readonly cardClass: string
     @Prop({ default: '' }) declare readonly toolbarColor: string

From 8c2013cdcb0f1d9771e32bd434079dbb38cebcc9 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 21 May 2023 23:48:38 +0200
Subject: [PATCH 09/46] feat: add Maintenance store

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/gui/maintenance/actions.ts   | 64 ++++++++++++++++++++++++++
 src/store/gui/maintenance/getters.ts   | 29 ++++++++++++
 src/store/gui/maintenance/index.ts     | 23 +++++++++
 src/store/gui/maintenance/mutations.ts | 32 +++++++++++++
 src/store/gui/maintenance/types.ts     | 19 ++++++++
 5 files changed, 167 insertions(+)
 create mode 100644 src/store/gui/maintenance/actions.ts
 create mode 100644 src/store/gui/maintenance/getters.ts
 create mode 100644 src/store/gui/maintenance/index.ts
 create mode 100644 src/store/gui/maintenance/mutations.ts
 create mode 100644 src/store/gui/maintenance/types.ts

diff --git a/src/store/gui/maintenance/actions.ts b/src/store/gui/maintenance/actions.ts
new file mode 100644
index 000000000..ac2cfa106
--- /dev/null
+++ b/src/store/gui/maintenance/actions.ts
@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import { ActionTree } from 'vuex'
+import { GuiMaintenanceState } from '@/store/gui/maintenance/types'
+import { RootState } from '@/store/types'
+import { v4 as uuidv4 } from 'uuid'
+
+export const actions: ActionTree<GuiMaintenanceState, RootState> = {
+    reset({ commit }) {
+        commit('reset')
+    },
+
+    init() {
+        Vue.$socket.emit(
+            'server.database.get_item',
+            { namespace: 'maintenance' },
+            { action: 'gui/maintenance/initStore' }
+        )
+    },
+
+    async initStore({ commit, dispatch }, payload) {
+        await commit('reset')
+        await commit('initStore', payload)
+        await dispatch('socket/removeInitModule', 'gui/maintenance/init', { root: true })
+    },
+
+    /*upload(_, payload) {
+        Vue.$socket.emit('server.database.post_item', { namespace: 'reminders', key: payload.id, value: payload.value })
+    },
+
+    store({ commit, dispatch, state }, payload) {
+        const id = uuidv4()
+
+        commit('store', { id, values: payload.values })
+        dispatch('upload', {
+            id,
+            value: state.reminders[id],
+        })
+    },
+
+    update({ commit, dispatch, state }, payload) {
+        commit('update', payload)
+        dispatch('upload', {
+            id: payload.id,
+            value: state.reminders[payload.id],
+        })
+    },
+
+    delete({ commit }, payload) {
+        commit('delete', payload)
+        Vue.$socket.emit('server.database.delete_item', { namespace: 'reminders', key: payload })
+    },
+
+    repeat({ dispatch, getters, state, rootState }, payload) {
+        if (!(payload.id in state.reminders)) return
+        const reminder = getters['getReminder'](payload.id)
+        const new_start_time = rootState.server?.history?.job_totals.total_print_time || 0
+        const snooze_epoch_time = Date.now()
+        dispatch('update', {
+            id: reminder.id,
+            snooze_print_hours_timestamps: [...reminder.snooze_print_hours_timestamps, new_start_time],
+            snooze_epoch_timestamps: [...reminder.snooze_epoch_timestamps, snooze_epoch_time],
+        })
+    },*/
+}
diff --git a/src/store/gui/maintenance/getters.ts b/src/store/gui/maintenance/getters.ts
new file mode 100644
index 000000000..bf45083af
--- /dev/null
+++ b/src/store/gui/maintenance/getters.ts
@@ -0,0 +1,29 @@
+import { GetterTree } from 'vuex'
+import { GuiMaintenanceState, GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+
+// eslint-disable-next-line
+export const getters: GetterTree<GuiMaintenanceState, any> = {
+    /*getReminders: (state) => {
+        const reminders: GuiRemindersStateReminder[] = []
+
+        Object.keys(state.reminders).forEach((id: string) => {
+            reminders.push({ ...state.reminders[id], id })
+        })
+
+        return reminders
+    },
+
+    getReminder: (state, getters) => (id: string) => {
+        const reminders = getters['getReminders'] ?? []
+
+        return reminders.find((reminder: GuiRemindersStateReminder) => reminder.id === id)
+    },
+
+    getOverdueReminders: (state, getters, rootState) => {
+        const currentTotalPrintTime = rootState.server.history.job_totals.total_print_time
+        const reminders: GuiRemindersStateReminder[] = getters['getReminders'] ?? []
+        return reminders.filter(
+            (reminder) => reminder.time_delta - (currentTotalPrintTime - reminder.start_total_print_time) < 0
+        )
+    },*/
+}
diff --git a/src/store/gui/maintenance/index.ts b/src/store/gui/maintenance/index.ts
new file mode 100644
index 000000000..dfc35d272
--- /dev/null
+++ b/src/store/gui/maintenance/index.ts
@@ -0,0 +1,23 @@
+import { Module } from 'vuex'
+import { GuiMaintenanceState } from '@/store/gui/maintenance/types'
+import { actions } from '@/store/gui/maintenance/actions'
+import { mutations } from '@/store/gui/maintenance/mutations'
+import { getters } from '@/store/gui/maintenance/getters'
+
+export const getDefaultState = (): GuiMaintenanceState => {
+    return {
+        entries: {},
+    }
+}
+
+// initial state
+const state = getDefaultState()
+
+// eslint-disable-next-line
+export const reminders: Module<GuiMaintenanceState, any> = {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations,
+}
diff --git a/src/store/gui/maintenance/mutations.ts b/src/store/gui/maintenance/mutations.ts
new file mode 100644
index 000000000..ccfad5d2d
--- /dev/null
+++ b/src/store/gui/maintenance/mutations.ts
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { MutationTree } from 'vuex'
+import { GuiMaintenanceState } from '@/store/gui/maintenance/types'
+import { getDefaultState } from './index'
+
+export const mutations: MutationTree<GuiMaintenanceState> = {
+    reset(state) {
+        Object.assign(state, getDefaultState())
+    },
+
+    initStore(state, payload) {
+        Vue.set(state, 'entries', payload.value)
+    },
+
+    /*store(state, payload) {
+        Vue.set(state.reminders, payload.id, payload.values)
+    },
+
+    update(state, payload) {
+        if (payload.id in state.reminders) {
+            const reminder = { ...state.reminders[payload.id] }
+            Object.assign(reminder, payload)
+            Vue.set(state.reminders, payload.id, reminder)
+        }
+    },
+
+    delete(state, payload) {
+        if (payload in state.reminders) {
+            Vue.delete(state.reminders, payload)
+        }
+    },*/
+}
diff --git a/src/store/gui/maintenance/types.ts b/src/store/gui/maintenance/types.ts
new file mode 100644
index 000000000..cf57a7050
--- /dev/null
+++ b/src/store/gui/maintenance/types.ts
@@ -0,0 +1,19 @@
+export interface GuiMaintenanceState {
+    entries: {
+        [key: string]: GuiMaintenanceStateEntry
+    }
+}
+
+export interface GuiMaintenanceStateEntry {
+    id: string
+    name: string
+    note: string
+    reminder: boolean
+    reminderRepeat: boolean
+    reminderFilament: boolean
+    reminderFilamentValue: number | null
+    reminderPrinttime: boolean
+    reminderPrinttimeValue: number | null
+    reminderDate: boolean
+    reminderDateValue: number | null
+}

From a03c5d809f1b342fd98bf6c9e75789967bd84808 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 21 May 2023 23:48:52 +0200
Subject: [PATCH 10/46] feat: add Maintenance add dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/HistoryListPanelAddMaintenace.vue | 206 ++++++++++++++++++
 src/components/panels/HistoryListPanel.vue    |  20 +-
 .../panels/HistoryStatisticsPanel.vue         |  16 +-
 src/locales/en.json                           |  14 ++
 4 files changed, 236 insertions(+), 20 deletions(-)
 create mode 100644 src/components/dialogs/HistoryListPanelAddMaintenace.vue

diff --git a/src/components/dialogs/HistoryListPanelAddMaintenace.vue b/src/components/dialogs/HistoryListPanelAddMaintenace.vue
new file mode 100644
index 000000000..28f24c989
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelAddMaintenace.vue
@@ -0,0 +1,206 @@
+<template>
+    <div>
+        <v-btn class="px-2 minwidth-0 ml-3" @click="openDialog">
+            <v-icon>{{ mdiNotebookPlus }}</v-icon>
+        </v-btn>
+        <v-dialog v-model="show" :max-width="600" persistent @keydown.esc="closeDialog">
+            <panel
+                :title="$t('History.AddMaintenance')"
+                :icon="mdiNotebookPlus"
+                card-class="history-note-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="closeDialog">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text class="pb-0">
+                    <v-row>
+                        <v-col>
+                            <v-text-field
+                                v-model="name"
+                                :rules="nameInputRules"
+                                :label="$t('History.Name')"
+                                hide-details="auto"
+                                outlined
+                                dense />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col>
+                            <v-textarea v-model="note" outlined hide-details="auto" :label="$t('History.Note')" />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col>
+                            <settings-row :title="$t('History.AddReminder')">
+                                <v-switch v-model="reminder" hide-details class="mt-0" />
+                            </settings-row>
+                        </v-col>
+                    </v-row>
+                    <template v-if="reminder">
+                        <v-row>
+                            <v-col>
+                                <settings-row :title="$t('History.Repeat')">
+                                    <v-switch v-model="reminderRepeat" hide-details class="mt-0" />
+                                </settings-row>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col>
+                                <settings-row
+                                    :title="$t('History.FilamentBasedReminder')"
+                                    :sub-title="$t('History.FilamentBasedReminderDescription')">
+                                    <v-checkbox v-model="reminderFilament" hide-details class="mt-0" />
+                                    <v-text-field
+                                        v-model="reminderFilamentValue"
+                                        hide-details="auto"
+                                        type="number"
+                                        class="mt-0"
+                                        outlined
+                                        dense
+                                        :suffix="$t('History.Meter')" />
+                                </settings-row>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col>
+                                <settings-row
+                                    :title="$t('History.PrinttimeBasedReminder')"
+                                    :sub-title="$t('History.PrinttimeBasedReminderDescription')">
+                                    <v-checkbox v-model="reminderPrinttime" hide-details class="mt-0" />
+                                    <v-text-field
+                                        v-model="reminderPrinttimeValue"
+                                        hide-details="auto"
+                                        type="number"
+                                        class="mt-0"
+                                        outlined
+                                        dense
+                                        :suffix="$t('History.Hours')" />
+                                </settings-row>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col>
+                                <settings-row
+                                    :title="$t('History.DateBasedReminder')"
+                                    :sub-title="$t('History.DateBasedReminderDescription')">
+                                    <v-checkbox v-model="reminderDate" hide-details class="mt-0" />
+                                    <v-text-field
+                                        v-model="reminderDateValue"
+                                        hide-details="auto"
+                                        type="number"
+                                        class="mt-0"
+                                        outlined
+                                        dense
+                                        :suffix="$t('History.Days')" />
+                                </settings-row>
+                            </v-col>
+                        </v-row>
+                    </template>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn color="" text @click="closeDialog">{{ $t('History.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="save">{{ $t('History.Save') }}</v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiNotebookPlus } from '@mdi/js'
+
+@Component({
+    components: {
+        Panel,
+        SettingsRow,
+    },
+})
+export default class HistoryListPanelAddMaintenace extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiNotebookPlus = mdiNotebookPlus
+
+    private show: boolean = false
+
+    private name: string = ''
+    private note: string = ''
+    private reminder: boolean = false
+    private reminderRepeat: boolean = false
+
+    private reminderFilament: boolean = false
+    private reminderFilamentValue: number = 0
+
+    private reminderPrinttime: boolean = false
+    private reminderPrinttimeValue: number = 0
+
+    private reminderDate: boolean = false
+    private reminderDateValue: number = 0
+
+    private nameInputRules = [(value: string) => !!value || this.$t('History.InvalidNameEmpty')]
+
+    get totalFilamentUsed() {
+        return this.$store.state.server.history.job_totals?.total_filament_used ?? 0
+    }
+
+    get totalPrinttime() {
+        return this.$store.state.server.history.job_totals?.total_print_time ?? 0
+    }
+
+    openDialog() {
+        this.show = true
+    }
+
+    closeDialog() {
+        this.show = false
+    }
+
+    save() {
+        let reminderFilamentTrigger: number | null = null
+        if (this.reminderFilament) {
+            reminderFilamentTrigger = this.totalFilamentUsed + this.reminderFilamentValue * 100
+        }
+
+        let reminderPrinttimeTrigger: number | null = null
+        if (this.reminderPrinttime) {
+            reminderPrinttimeTrigger = this.totalPrinttime + this.reminderPrinttimeValue * 60 * 60
+        }
+
+        const date = new Date()
+        let reminderDateTrigger: number | null = null
+        if (this.reminderDate) {
+            reminderDateTrigger = date.getTime() + this.reminderDateValue * 24 * 60 * 60 * 1000
+        }
+
+        this.$store.dispatch('gui/maintenance/store', {
+            entry: {
+                name: this.name,
+                note: this.note,
+                start_time: date.getTime(),
+                end_time: null,
+
+                reminder: this.reminder,
+                reminderRepeat: this.reminderRepeat,
+
+                reminderFilament: this.reminderFilament,
+                reminderFilamentStart: this.totalFilamentUsed,
+                reminderFilamentTrigger: reminderFilamentTrigger,
+                reminderFilamentEnd: null,
+
+                reminderPrinttime: this.reminderPrinttime,
+                reminderPrinttimeStart: this.totalPrinttime,
+                reminderPrinttimeTrigger: reminderPrinttimeTrigger,
+                reminderPrinttimeEnd: null,
+
+                reminderDate: this.reminderDate,
+                reminderDateTrigger: reminderDateTrigger,
+            },
+        })
+    }
+}
+</script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index fdcef9d86..de3da35b7 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -27,6 +27,7 @@
                                 <v-icon>{{ mdiDelete }}</v-icon>
                             </v-btn>
                         </template>
+                        <history-list-panel-add-maintenace />
                         <v-btn
                             :title="$t('History.TitleExportHistory')"
                             class="px-2 minwidth-0 ml-3"
@@ -62,7 +63,7 @@
                                             :label="`${status.displayName} (${status.value})`"
                                             @change="changeStatusVisible(status)" />
                                     </v-list-item>
-                                    <v-divider></v-divider>
+                                    <v-divider />
                                 </template>
                                 <v-list-item
                                     v-for="(header, index) of configHeaders"
@@ -144,16 +145,18 @@ import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { caseInsensitiveSort, formatFilesize } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import {
+    mdiCloseThick,
+    mdiCog,
     mdiDatabaseExportOutline,
     mdiDelete,
-    mdiRefresh,
-    mdiCog,
     mdiFileDocumentMultipleOutline,
     mdiMagnify,
-    mdiCloseThick,
+    mdiNotebookPlus,
+    mdiRefresh,
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
+import HistoryListPanelAddMaintenace from '@/components/dialogs/HistoryListPanelAddMaintenace.vue'
 
 export interface HistoryListPanelRow {
     text: string
@@ -166,16 +169,17 @@ export interface HistoryListPanelRow {
 }
 
 @Component({
-    components: { HistoryListEntryJob, HistoryListPanelDetailsDialog, Panel },
+    components: { HistoryListPanelAddMaintenace, HistoryListEntryJob, HistoryListPanelDetailsDialog, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiCog = mdiCog
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
     mdiDelete = mdiDelete
-    mdiRefresh = mdiRefresh
-    mdiCog = mdiCog
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiMagnify = mdiMagnify
-    mdiCloseThick = mdiCloseThick
+    mdiNotebookPlus = mdiNotebookPlus
+    mdiRefresh = mdiRefresh
 
     formatFilesize = formatFilesize
 
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index 8e9261c6a..993f05c3c 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -114,9 +114,7 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     }
 
     get totalPrintTime() {
-        return 'total_print_time' in this.$store.state.server.history.job_totals
-            ? this.$store.state.server.history.job_totals.total_print_time
-            : 0
+        return this.$store.state.server.history.job_totals?.total_print_time ?? 0
     }
 
     get selectedPrintTime() {
@@ -130,9 +128,7 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     }
 
     get longestPrintTime() {
-        return 'longest_print' in this.$store.state.server.history.job_totals
-            ? this.$store.state.server.history.job_totals.longest_print
-            : 0
+        return this.$store.state.server.history.job_totals?.longest_print ?? 0
     }
 
     get selectedLongestPrintTime() {
@@ -160,9 +156,7 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     }
 
     get totalFilamentUsed() {
-        return 'total_filament_used' in this.$store.state.server.history.job_totals
-            ? this.$store.state.server.history.job_totals.total_filament_used
-            : 0
+        return this.$store.state.server.history.job_totals?.total_filament_used ?? 0
     }
 
     get selectedFilamentUsed() {
@@ -176,9 +170,7 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     }
 
     get totalJobsCount() {
-        return 'total_jobs' in this.$store.state.server.history.job_totals
-            ? this.$store.state.server.history.job_totals.total_jobs
-            : 0
+        return this.$store.state.server.history.job_totals?.total_jobs ?? 0
     }
 
     get toggleChart() {
diff --git a/src/locales/en.json b/src/locales/en.json
index 529d50952..fbbf5243a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -308,21 +308,28 @@
         "Wireframe": "Wireframe"
     },
     "History": {
+        "AddMaintenance": "Add Maintenance",
         "AddNote": "Add note",
+        "AddReminder": "Add Reminder",
         "AllJobs": "All",
         "AvgPrinttime": "Print Time - Ø",
         "Cancel": "Cancel",
         "CreateNote": "Create Note",
         "Chart": "Chart",
+        "DateBasedReminder": "Date",
+        "DateBasedReminderDescription": "This reminder is based on the date.",
         "Delete": "Delete",
         "DeleteSelectedQuestion": "Do you really want to delete {count} selected jobs?",
         "Details": "Details",
+        "Days": "days",
         "EditNote": "Edit Note",
         "Empty": "empty",
         "EndTime": "End Time",
         "EstimatedFilament": "Estimated Filament",
         "EstimatedFilamentWeight": "Estimated Filament Weight",
         "EstimatedTime": "Estimated Time",
+        "FilamentBasedReminder": "Filament",
+        "FilamentBasedReminderDescription": "This reminder is based on the filament usage.",
         "FilamentCalc": "Filament Calc",
         "FilamentUsage": "Filament usage",
         "FilamentUsed": "Filament Used",
@@ -331,19 +338,26 @@
         "FirstLayerBedTemp": "First Layer Bed Temp.",
         "FirstLayerExtTemp": "First Layer Ext. Temp.",
         "FirstLayerHeight": "First Layer Height",
+        "Hours": "hours",
         "HistoryFilamentUsage": "Filament",
         "HistoryPrinttimeAVG": "Prints",
+        "InvalidNameEmpty": "Invalid name. Name must not be empty!",
         "JobDetails": "Job Details",
         "Jobs": "Jobs",
         "LastModified": "Last Modified",
         "LayerHeight": "Layer Height",
         "LongestPrinttime": "Longest Print Time",
+        "Meter": "meter",
+        "Name": "Name",
         "Note": "Note",
         "ObjectHeight": "Object Height",
         "PrintDuration": "Print Time",
         "PrintHistory": "Print History",
         "PrintTime": "Print Time",
         "PrinttimeAvg": "Print Time - Ø",
+        "PrinttimeBasedReminder": "Print Time",
+        "PrinttimeBasedReminderDescription": "This reminder is based on the print time.",
+        "Repeat": "Repeat",
         "Reprint": "Reprint",
         "Save": "save",
         "Search": "search",

From 1721995ec477ea3691687f1fa6f0e9fd03352281 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 22 May 2023 22:30:45 +0200
Subject: [PATCH 11/46] feat: add Maintenance store

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/gui/index.ts                 |  4 ++--
 src/store/gui/maintenance/actions.ts   | 16 ++++++++++------
 src/store/gui/maintenance/getters.ts   | 12 ++++++------
 src/store/gui/maintenance/index.ts     |  2 +-
 src/store/gui/maintenance/mutations.ts | 14 +++++++-------
 src/store/gui/maintenance/types.ts     | 18 ++++++++++++++----
 src/store/gui/notifications/getters.ts |  4 ++--
 src/store/server/actions.ts            |  6 +++---
 8 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 8cacbf9d7..60a7794bd 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -14,7 +14,7 @@ import { navigation } from '@/store/gui/navigation'
 import { notifications } from '@/store/gui/notifications'
 import { presets } from '@/store/gui/presets'
 import { remoteprinters } from '@/store/gui/remoteprinters'
-import { reminders } from '@/store/gui/reminders'
+import { maintenance } from '@/store/gui/maintenance'
 import { webcams } from '@/store/gui/webcams'
 
 export const getDefaultState = (): GuiState => {
@@ -271,12 +271,12 @@ export const gui: Module<GuiState, any> = {
         console,
         gcodehistory,
         macros,
+        maintenance,
         miscellaneous,
         navigation,
         notifications,
         presets,
         remoteprinters,
         webcams,
-        reminders,
     },
 }
diff --git a/src/store/gui/maintenance/actions.ts b/src/store/gui/maintenance/actions.ts
index ac2cfa106..b03e2c088 100644
--- a/src/store/gui/maintenance/actions.ts
+++ b/src/store/gui/maintenance/actions.ts
@@ -23,17 +23,21 @@ export const actions: ActionTree<GuiMaintenanceState, RootState> = {
         await dispatch('socket/removeInitModule', 'gui/maintenance/init', { root: true })
     },
 
-    /*upload(_, payload) {
-        Vue.$socket.emit('server.database.post_item', { namespace: 'reminders', key: payload.id, value: payload.value })
+    upload(_, payload) {
+        Vue.$socket.emit('server.database.post_item', {
+            namespace: 'maintenance',
+            key: payload.id,
+            value: payload.value,
+        })
     },
 
     store({ commit, dispatch, state }, payload) {
         const id = uuidv4()
 
-        commit('store', { id, values: payload.values })
+        commit('store', { id, values: payload.entry })
         dispatch('upload', {
             id,
-            value: state.reminders[id],
+            value: state.entries[id],
         })
     },
 
@@ -41,11 +45,11 @@ export const actions: ActionTree<GuiMaintenanceState, RootState> = {
         commit('update', payload)
         dispatch('upload', {
             id: payload.id,
-            value: state.reminders[payload.id],
+            value: state.entries[payload.id],
         })
     },
 
-    delete({ commit }, payload) {
+    /*delete({ commit }, payload) {
         commit('delete', payload)
         Vue.$socket.emit('server.database.delete_item', { namespace: 'reminders', key: payload })
     },
diff --git a/src/store/gui/maintenance/getters.ts b/src/store/gui/maintenance/getters.ts
index bf45083af..03f966239 100644
--- a/src/store/gui/maintenance/getters.ts
+++ b/src/store/gui/maintenance/getters.ts
@@ -3,17 +3,17 @@ import { GuiMaintenanceState, GuiMaintenanceStateEntry } from '@/store/gui/maint
 
 // eslint-disable-next-line
 export const getters: GetterTree<GuiMaintenanceState, any> = {
-    /*getReminders: (state) => {
-        const reminders: GuiRemindersStateReminder[] = []
+    getEntries: (state) => {
+        const entries: GuiMaintenanceStateEntry[] = []
 
-        Object.keys(state.reminders).forEach((id: string) => {
-            reminders.push({ ...state.reminders[id], id })
+        Object.keys(state.entries).forEach((id: string) => {
+            entries.push({ ...state.entries[id], id })
         })
 
-        return reminders
+        return entries
     },
 
-    getReminder: (state, getters) => (id: string) => {
+    /*getReminder: (state, getters) => (id: string) => {
         const reminders = getters['getReminders'] ?? []
 
         return reminders.find((reminder: GuiRemindersStateReminder) => reminder.id === id)
diff --git a/src/store/gui/maintenance/index.ts b/src/store/gui/maintenance/index.ts
index dfc35d272..fdfcc39b3 100644
--- a/src/store/gui/maintenance/index.ts
+++ b/src/store/gui/maintenance/index.ts
@@ -14,7 +14,7 @@ export const getDefaultState = (): GuiMaintenanceState => {
 const state = getDefaultState()
 
 // eslint-disable-next-line
-export const reminders: Module<GuiMaintenanceState, any> = {
+export const maintenance: Module<GuiMaintenanceState, any> = {
     namespaced: true,
     state,
     getters,
diff --git a/src/store/gui/maintenance/mutations.ts b/src/store/gui/maintenance/mutations.ts
index ccfad5d2d..9d88fa90d 100644
--- a/src/store/gui/maintenance/mutations.ts
+++ b/src/store/gui/maintenance/mutations.ts
@@ -12,19 +12,19 @@ export const mutations: MutationTree<GuiMaintenanceState> = {
         Vue.set(state, 'entries', payload.value)
     },
 
-    /*store(state, payload) {
-        Vue.set(state.reminders, payload.id, payload.values)
+    store(state, payload) {
+        Vue.set(state.entries, payload.id, payload.values)
     },
 
     update(state, payload) {
-        if (payload.id in state.reminders) {
-            const reminder = { ...state.reminders[payload.id] }
-            Object.assign(reminder, payload)
-            Vue.set(state.reminders, payload.id, reminder)
+        if (payload.id in state.entries) {
+            const entry = { ...state.entries[payload.id] }
+            Object.assign(entry, payload)
+            Vue.set(state.entries, payload.id, entry)
         }
     },
 
-    delete(state, payload) {
+    /*delete(state, payload) {
         if (payload in state.reminders) {
             Vue.delete(state.reminders, payload)
         }
diff --git a/src/store/gui/maintenance/types.ts b/src/store/gui/maintenance/types.ts
index cf57a7050..ca77aae3f 100644
--- a/src/store/gui/maintenance/types.ts
+++ b/src/store/gui/maintenance/types.ts
@@ -5,15 +5,25 @@ export interface GuiMaintenanceState {
 }
 
 export interface GuiMaintenanceStateEntry {
-    id: string
+    id?: string
     name: string
     note: string
+    start_time: number
+    end_time: number | null
+
     reminder: boolean
     reminderRepeat: boolean
+
     reminderFilament: boolean
-    reminderFilamentValue: number | null
+    reminderFilamentStart: number
+    reminderFilamentTrigger: number | null
+    reminderFilamentEnd: number | null
+
     reminderPrinttime: boolean
-    reminderPrinttimeValue: number | null
+    reminderPrinttimeStart: number | null
+    reminderPrinttimeTrigger: number | null
+    reminderPrinttimeEnd: number | null
+
     reminderDate: boolean
-    reminderDateValue: number | null
+    reminderDateTrigger: number | null
 }
diff --git a/src/store/gui/notifications/getters.ts b/src/store/gui/notifications/getters.ts
index da2a165ca..a62de622a 100644
--- a/src/store/gui/notifications/getters.ts
+++ b/src/store/gui/notifications/getters.ts
@@ -276,7 +276,7 @@ export const getters: GetterTree<GuiNotificationState, any> = {
 
     getNotificationsOverdueReminders: (state, getters, rootState, rootGetters) => {
         const notifications: GuiNotificationStateEntry[] = []
-        let reminders: GuiRemindersStateReminder[] = rootGetters['gui/reminders/getOverdueReminders']
+        /*let reminders: GuiRemindersStateReminder[] = rootGetters['gui/reminders/getOverdueReminders']
 
         const date = rootState.server.system_boot_at ?? new Date()
 
@@ -304,7 +304,7 @@ export const getters: GetterTree<GuiNotificationState, any> = {
                     dismissed: false,
                 })
             })
-        }
+        }*/
 
         return notifications
     },
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index 208790fba..b7abf509f 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -63,9 +63,9 @@ export const actions: ActionTree<ServerState, RootState> = {
             dispatch('socket/addInitModule', 'gui/webcam/init', { root: true })
             dispatch('gui/webcams/init', null, { root: true })
         }
-        if (payload.namespaces?.includes('reminders')) {
-            dispatch('socket/addInitModule', 'gui/reminders/init', { root: true })
-            dispatch('gui/reminders/init', null, { root: true })
+        if (payload.namespaces?.includes('maintenance')) {
+            dispatch('socket/addInitModule', 'gui/maintenance/init', { root: true })
+            dispatch('gui/maintenance/init', null, { root: true })
         }
 
         commit('saveDbNamespaces', payload.namespaces)

From 28633fa378fbb55d151e9a8f530e1a46e0bf54c1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 22 May 2023 22:31:05 +0200
Subject: [PATCH 12/46] feat: add Maintenance entry in history list panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 ...vue => HistoryListPanelAddMaintenance.vue} |  2 +-
 .../HistoryListEntryMaintenance.vue           | 70 +++++++++++++++++++
 src/components/panels/HistoryListPanel.vue    | 51 ++++++++++++--
 3 files changed, 118 insertions(+), 5 deletions(-)
 rename src/components/dialogs/{HistoryListPanelAddMaintenace.vue => HistoryListPanelAddMaintenance.vue} (99%)
 create mode 100644 src/components/panels/HistoryList/HistoryListEntryMaintenance.vue

diff --git a/src/components/dialogs/HistoryListPanelAddMaintenace.vue b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
similarity index 99%
rename from src/components/dialogs/HistoryListPanelAddMaintenace.vue
rename to src/components/dialogs/HistoryListPanelAddMaintenance.vue
index 28f24c989..3ceb15d5f 100644
--- a/src/components/dialogs/HistoryListPanelAddMaintenace.vue
+++ b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
@@ -122,7 +122,7 @@ import { mdiCloseThick, mdiNotebookPlus } from '@mdi/js'
         SettingsRow,
     },
 })
-export default class HistoryListPanelAddMaintenace extends Mixins(BaseMixin) {
+export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
     mdiNotebookPlus = mdiNotebookPlus
 
diff --git a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
new file mode 100644
index 000000000..ab05782be
--- /dev/null
+++ b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
@@ -0,0 +1,70 @@
+<template>
+    <tr
+        :key="item.id"
+        v-longpress:600="(e) => showContextMenu(e)"
+        :class="cssClasses"
+        @contextmenu="showContextMenu($event)"
+        @click="detailsDialogBool = true">
+        <td class="pr-0">
+            <v-simple-checkbox v-ripple :value="isSelected" class="pa-0 mr-0" @click.stop="select(!isSelected)" />
+        </td>
+        <td class="px-0 text-center" style="width: 32px">
+            <v-icon>{{ mdiFile }}</v-icon>
+        </td>
+        <td>{{ item.name }}</td>
+        <td class="text-right text-no-wrap">bla</td>
+        <td :colspan="tableFields.length" />
+    </tr>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
+import Panel from '@/components/ui/Panel.vue'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick, mdiDelete, mdiFile, mdiFileCancel } from '@mdi/js'
+import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
+import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+
+@Component({
+    components: { HistoryListPanelNoteDialog, HistoryListPanelDetailsDialog, Panel },
+})
+export default class HistoryListPanel extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiDelete = mdiDelete
+    mdiFile = mdiFile
+
+    private detailsDialogBool = false
+
+    private contextMenuBool = false
+    private contextMenuX = 0
+    private contextMenuY = 0
+
+    @Prop({ type: Object, required: true }) readonly item!: GuiMaintenanceStateEntry
+    @Prop({ type: Array, required: true }) readonly tableFields!: HistoryListPanelRow[]
+    @Prop({ type: Boolean, required: true }) readonly isSelected!: boolean
+
+    get cssClasses() {
+        let output = ['file-list-cursor', 'user-select-none']
+
+        return output
+    }
+
+    select(newVal: boolean) {
+        this.$emit('select', newVal)
+    }
+
+    showContextMenu(e: any) {
+        e?.preventDefault()
+        if (this.contextMenuBool) return
+
+        this.contextMenuBool = true
+        this.contextMenuX = e?.clientX || e?.pageX || window.screenX / 2
+        this.contextMenuY = e?.clientY || e?.pageY || window.screenY / 2
+
+        this.$nextTick(() => {
+            this.contextMenuBool = true
+        })
+    }
+}
+</script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index de3da35b7..e95610336 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -27,7 +27,7 @@
                                 <v-icon>{{ mdiDelete }}</v-icon>
                             </v-btn>
                         </template>
-                        <history-list-panel-add-maintenace />
+                        <history-list-panel-add-maintenance />
                         <v-btn
                             :title="$t('History.TitleExportHistory')"
                             class="px-2 minwidth-0 ml-3"
@@ -84,7 +84,7 @@
             <v-divider class="mb-3" />
             <v-data-table
                 v-model="selectedJobs"
-                :items="jobs"
+                :items="entries"
                 class="history-jobs-table"
                 :headers="filteredHeaders"
                 :custom-sort="sortFiles"
@@ -107,11 +107,19 @@
 
                 <template #item="{ index, item, isSelected, select }">
                     <history-list-entry-job
+                        v-if="item.type === 'job'"
                         :key="`${index}_${item.job_id}`"
                         :is-selected="isSelected"
                         :item="item"
                         :table-fields="tableFields"
                         @select="select" />
+                    <history-list-entry-maintenance
+                        v-else-if="item.type === 'maintenance'"
+                        :key="`${index}_${item.id}`"
+                        :is-selected="isSelected"
+                        :item="item"
+                        :table-fields="tableFields"
+                        @select="select" />
                 </template>
             </v-data-table>
         </panel>
@@ -156,7 +164,9 @@ import {
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
-import HistoryListPanelAddMaintenace from '@/components/dialogs/HistoryListPanelAddMaintenace.vue'
+import HistoryListPanelAddMaintenance from '@/components/dialogs/HistoryListPanelAddMaintenace.vue'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+import HistoryListEntryMaintenance from '@/components/panels/HistoryList/HistoryListEntryMaintenance.vue'
 
 export interface HistoryListPanelRow {
     text: string
@@ -169,7 +179,13 @@ export interface HistoryListPanelRow {
 }
 
 @Component({
-    components: { HistoryListPanelAddMaintenace, HistoryListEntryJob, HistoryListPanelDetailsDialog, Panel },
+    components: {
+        HistoryListEntryMaintenance,
+        HistoryListPanelAddMaintenance,
+        HistoryListEntryJob,
+        HistoryListPanelDetailsDialog,
+        Panel,
+    },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
@@ -189,10 +205,37 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
 
     private deleteSelectedDialog = false
 
+    mounted() {
+        window.console.log(this.maintenanceEntries)
+    }
+
     get jobs() {
         return this.$store.getters['server/history/getFilterdJobList'] ?? []
     }
 
+    get maintenanceEntries() {
+        const entries = this.$store.getters['gui/maintenance/getEntries'] ?? []
+
+        window.console.log('mEntries', entries)
+
+        return entries
+    }
+
+    get entries() {
+        let entries = [...this.jobs].map((job) => {
+            return { ...job, type: 'job' }
+        })
+
+        entries = [
+            ...entries,
+            ...this.maintenanceEntries.map((entry: GuiMaintenanceStateEntry) => {
+                return { ...entry, type: 'maintenance' }
+            }),
+        ]
+
+        return entries
+    }
+
     get selectedJobs() {
         return this.$store.state.gui.view.history.selectedJobs ?? []
     }

From 66e409a7673724d92598e7c1d749042e7585bfb1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 22 May 2023 22:31:20 +0200
Subject: [PATCH 13/46] refactor: remove unused icon

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/HistoryList/HistoryListEntryMaintenance.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
index ab05782be..1ec645e82 100644
--- a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
+++ b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
@@ -21,7 +21,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import Panel from '@/components/ui/Panel.vue'
 import BaseMixin from '@/components/mixins/base'
-import { mdiCloseThick, mdiDelete, mdiFile, mdiFileCancel } from '@mdi/js'
+import { mdiCloseThick, mdiDelete, mdiFile } from '@mdi/js'
 import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
 import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
 import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'

From 1c5d738601b2f492e3373183d1dfe6eaf398ead9 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 1 Oct 2023 18:18:46 +0200
Subject: [PATCH 14/46] refactor: fix merging issue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index f4d3c87ab..a9f4a0334 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -166,7 +166,7 @@ import {
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
-import HistoryListPanelAddMaintenance from '@/components/dialogs/HistoryListPanelAddMaintenace.vue'
+import HistoryListPanelAddMaintenance from '@/components/dialogs/HistoryListPanelAddMaintenance.vue'
 import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
 import HistoryListEntryMaintenance from '@/components/panels/HistoryList/HistoryListEntryMaintenance.vue'
 
@@ -201,15 +201,11 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
 
     formatFilesize = formatFilesize
 
-    private search = ''
-    private sortBy = 'start_time'
-    private sortDesc = true
+    search = ''
+    sortBy = 'start_time'
+    sortDesc = true
 
-    private deleteSelectedDialog = false
-
-    mounted() {
-        window.console.log(this.maintenanceEntries)
-    }
+    deleteSelectedDialog = false
 
     get jobs() {
         return this.$store.getters['server/history/getFilterdJobList'] ?? []

From 7131f39c2e59d7cff0a9ff69f36f3a0c500f3f0f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 19:31:45 +0100
Subject: [PATCH 15/46] locale(de): update german locale (#1772)

Co-authored-by: rackrick <45207681+rackrick@users.noreply.github.com>
---
 src/locales/de.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index 885e42c3d..f7e4b544d 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -299,19 +299,15 @@
         "InvalidNameAscii": "Name ist ungültig. Nur ASCII Zeichen sind erlaubt.",
         "InvalidNameEmpty": "Feld darf nicht leer sein!",
         "InvalidNameReserved": "Das Profil 'default' ist reserviert, bitte wähle einen anderen Profilnamen.",
-        "Later": "später",
         "Mesh": "Mesh",
         "Name": "Name",
         "NoBedMeshHasBeenLoadedYet": "Es wurde noch kein Bed Mesh geladen.",
         "NoProfile": "Kein Profil verfügbar",
-        "Ok": "Ok",
         "Probed": "Abgetastet",
         "Profiles": "Profile",
         "Remove": "löschen",
-        "RemoveSaveDescription": "Das Löschen des Höhenprofils wurde registriert. Mit einem Klick auf SAVE_CONFIG wird es aus der printer.cfg gelöscht und Klipper neu gestartet.",
         "Rename": "umbenennen",
         "RenameBedMeshProfile": "Bed Mesh umbenennen",
-        "SAVE_CONFIG": "SAVE_CONFIG",
         "ScaleGradient": "Farbverlauf skalieren",
         "ScaleZMax": "Skaliere z-max.",
         "TitleCalibrate": "Neues Bed Mesh kalibrieren",
@@ -1088,6 +1084,11 @@
             "RetractDistanceDescription": "Die Länge an Filament die der Extruder zurückzieht.",
             "RetractSpeed": "Rückzuggeschwindigkeit",
             "RetractSpeedDescription": "Geschwindigkeit mit der der Extruder das Filament zurückzieht.",
+            "RulesBetweenMinMax": "Der Wert muss zwischen {min} und {max} sein!",
+            "RulesMin": "Der Wert muss mindestens {min} sein!",
+            "RulesPositive": "Der Wert muss positiv sein!",
+            "RulesRequired": "Der Wert ist erforderlich!",
+            "RulesZeroAndPositive": "Der Wert muss 0 oder größer sein!",
             "SaveFrames": "Bilder speichern",
             "SaveFramesDescription": "Speichern der Bilder in einer Zip-Datei für externes Rendern",
             "StreamDelayCompensation": "Stream-Verzögerungs-Kompensation",

From 087d55af7ffc6853314846efebc29c80ceb71548 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 19:31:57 +0100
Subject: [PATCH 16/46] fix: fix ETA calculation from jobqueue during print
 preheat (#1773)

---
 src/components/panels/Status/JobqueueEntrySum.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/Status/JobqueueEntrySum.vue b/src/components/panels/Status/JobqueueEntrySum.vue
index d994db3a0..28fcd8526 100644
--- a/src/components/panels/Status/JobqueueEntrySum.vue
+++ b/src/components/panels/Status/JobqueueEntrySum.vue
@@ -103,10 +103,18 @@ export default class StatusPanelJobqueueEntrySum extends Mixins(BaseMixin) {
     }
 
     get currentPrintEta() {
-        const eta = this.$store.getters['printer/getEstimatedTimeETA']
-        if (eta === 0) return Date.now()
+        let eta = this.$store.getters['printer/getEstimatedTimeETA']
+        if (eta) return eta
+
+        // if no eta and printer is printing, use the estimated time from the current file + now.
+        // this is a fallback for the case when the printer is in the preheating time, and the
+        // estimated time is not yet available
+        if (this.printerIsPrinting && this.$store.state.printer.print_stats?.print_duration === 0) {
+            return Date.now() + (this.$store.state.printer.current_file?.estimated_time ?? 0) * 1000
+        }
 
-        return eta
+        // fallback current time
+        return Date.now()
     }
 
     get eta() {

From 88e98271297fda8e903af1742de9cee4b3a897cd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 14 Feb 2024 22:12:20 +0100
Subject: [PATCH 17/46] locale(en): fix typo in DescriptionPreviouslyThrottled
 (#1776)

---
 src/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 58639460a..d72f18c2a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -46,7 +46,7 @@
             "DescriptionFrequencyCapped": "rPi ARM max frequency is currently limited to 1.2 GHz.",
             "DescriptionPreviouslyFrequencyCapped": "rPi ARM max frequency was at least once limited to 1.2 GHz since last power-on.",
             "DescriptionPreviouslyTemperatureLimited": "rPi uC (3A+/3B+ only) temperature was at least once above the soft limit (default 60C) since last power-on.",
-            "DescriptionPreviouslyThrottled": "rPI ARM core(s) where throttled down at least once since last power-on.",
+            "DescriptionPreviouslyThrottled": "rPI ARM core(s) were throttled down at least once since last power-on.",
             "DescriptionPreviouslyUnderVolted": "rPI supply voltage dropped below 4.65V at least once since the last power-on.",
             "DescriptionTemperatureLimitActive": "rPi uC (3A+/3B+ only) temperature is currently above the soft limit (default 60C).",
             "DescriptionUnderVoltageDetected": "rPI supply voltage currently below 4.65V",

From b9b793dfae6ca9228605af6778c7f5c226644bd0 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 15 Feb 2024 19:26:25 +0100
Subject: [PATCH 18/46] feat: add devices dialog in editor (#1765)

---
 src/components/TheEditor.vue                  |  13 +-
 src/components/dialogs/DevicesDialog.vue      | 111 ++++++++++++++++++
 src/components/dialogs/DevicesDialogCan.vue   |  84 +++++++++++++
 .../dialogs/DevicesDialogCanDevice.vue        |  32 +++++
 .../dialogs/DevicesDialogSerial.vue           |  72 ++++++++++++
 .../dialogs/DevicesDialogSerialDevice.vue     |  45 +++++++
 src/components/dialogs/DevicesDialogUsb.vue   |  74 ++++++++++++
 .../dialogs/DevicesDialogUsbDevice.vue        |  55 +++++++++
 src/components/dialogs/DevicesDialogVideo.vue | 103 ++++++++++++++++
 .../DevicesDialogVideoDeviceLibcamera.vue     |  61 ++++++++++
 .../dialogs/DevicesDialogVideoDeviceV4l2.vue  |  84 +++++++++++++
 src/components/inputs/TextfieldWithCopy.vue   |  52 ++++++++
 src/locales/en.json                           |  18 +++
 src/plugins/helpers.ts                        |  34 ++++++
 src/store/variables.ts                        |   2 +-
 15 files changed, 837 insertions(+), 3 deletions(-)
 create mode 100644 src/components/dialogs/DevicesDialog.vue
 create mode 100644 src/components/dialogs/DevicesDialogCan.vue
 create mode 100644 src/components/dialogs/DevicesDialogCanDevice.vue
 create mode 100644 src/components/dialogs/DevicesDialogSerial.vue
 create mode 100644 src/components/dialogs/DevicesDialogSerialDevice.vue
 create mode 100644 src/components/dialogs/DevicesDialogUsb.vue
 create mode 100644 src/components/dialogs/DevicesDialogUsbDevice.vue
 create mode 100644 src/components/dialogs/DevicesDialogVideo.vue
 create mode 100644 src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
 create mode 100644 src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
 create mode 100644 src/components/inputs/TextfieldWithCopy.vue

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 4d0974c67..df97f93ce 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -13,6 +13,10 @@
                 :icon="isWriteable ? mdiFileDocumentEditOutline : mdiFileDocumentOutline"
                 :title="title">
                 <template #buttons>
+                    <v-btn text tile class="d-none d-md-flex" @click="dialogDevices = true">
+                        <v-icon small class="mr-1">{{ mdiUsb }}</v-icon>
+                        {{ $t('Editor.DeviceDialog') }}
+                    </v-btn>
                     <v-btn
                         v-if="restartServiceName === 'klipper'"
                         text
@@ -116,6 +120,7 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <devices-dialog :show-dialog="dialogDevices" @close="dialogDevices = false" />
     </div>
 </template>
 
@@ -135,14 +140,17 @@ import {
     mdiHelp,
     mdiHelpCircle,
     mdiRestart,
+    mdiUsb,
 } from '@mdi/js'
 import type Codemirror from '@/components/inputs/Codemirror.vue'
+import DevicesDialog from '@/components/dialogs/DevicesDialog.vue'
 
 @Component({
-    components: { Panel, CodemirrorAsync },
+    components: { DevicesDialog, Panel, CodemirrorAsync },
 })
 export default class TheEditor extends Mixins(BaseMixin) {
-    private dialogConfirmChange = false
+    dialogConfirmChange = false
+    dialogDevices = false
 
     formatFilesize = formatFilesize
 
@@ -157,6 +165,7 @@ export default class TheEditor extends Mixins(BaseMixin) {
     mdiHelpCircle = mdiHelpCircle
     mdiFileDocumentEditOutline = mdiFileDocumentEditOutline
     mdiFileDocumentOutline = mdiFileDocumentOutline
+    mdiUsb = mdiUsb
 
     private scrollbarOptions = { scrollbars: { autoHide: 'never' } }
 
diff --git a/src/components/dialogs/DevicesDialog.vue b/src/components/dialogs/DevicesDialog.vue
new file mode 100644
index 000000000..10555aaeb
--- /dev/null
+++ b/src/components/dialogs/DevicesDialog.vue
@@ -0,0 +1,111 @@
+<template>
+    <v-dialog :value="showDialog" width="500" persistent :fullscreen="isMobile">
+        <panel
+            id="devices-dialog"
+            :title="$t('DevicesDialog.Headline')"
+            :icon="mdiUsb"
+            card-class="devices-dialog"
+            :margin-bottom="false"
+            style="overflow: hidden"
+            :height="isMobile ? 0 : 548">
+            <template #buttons>
+                <v-menu :left="true" :offset-y="true" :close-on-content-click="false" attach="#devices-dialog">
+                    <template #activator="{ on, attrs }">
+                        <v-btn icon tile v-bind="attrs" v-on="on">
+                            <v-icon small>{{ mdiCog }}</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item class="minHeight36">
+                            <v-checkbox
+                                v-model="hideSystemEntries"
+                                class="mt-0"
+                                hide-details
+                                :label="$t('DevicesDialog.HideSystemEntries')" />
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-tabs v-model="tab" fixed-tabs>
+                <v-tab v-for="tab in tabs" :key="tab.tab">{{ tab.title }}</v-tab>
+            </v-tabs>
+            <overlay-scrollbars style="max-height: 400px; overflow-x: hidden">
+                <v-tabs-items v-model="tab">
+                    <v-tab-item v-for="canInterface in canInterfaces" :key="canInterface">
+                        <devices-dialog-can :hide-system-entries="hideSystemEntries" :name="canInterface" />
+                    </v-tab-item>
+                    <v-tab-item key="serial">
+                        <devices-dialog-serial :hide-system-entries="hideSystemEntries" />
+                    </v-tab-item>
+                    <v-tab-item key="usb">
+                        <devices-dialog-usb :hide-system-entries="hideSystemEntries" />
+                    </v-tab-item>
+                    <v-tab-item key="video">
+                        <devices-dialog-video :hide-system-entries="hideSystemEntries" />
+                    </v-tab-item>
+                </v-tabs-items>
+            </overlay-scrollbars>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+
+import { mdiCog, mdiCloseThick, mdiUsb } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class DevicesDialog extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+    mdiUsb = mdiUsb
+    mdiCloseThick = mdiCloseThick
+
+    tab = 'serial'
+    hideSystemEntries = true
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    get tabs() {
+        const output: { tab: string; title: string }[] = [
+            {
+                tab: 'serial',
+                title: 'Serial',
+            },
+            {
+                tab: 'usb',
+                title: 'USB',
+            },
+            {
+                tab: 'video',
+                title: 'Video',
+            },
+        ]
+
+        this.canInterfaces.forEach((name) => {
+            output.push({
+                tab: name,
+                title: name.toUpperCase(),
+            })
+        })
+
+        return output.sort((a, b) => a.title.localeCompare(b.title))
+    }
+
+    get canInterfaces() {
+        return Object.keys(this.$store.state.server.system_info?.canbus ?? {})
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogCan.vue b/src/components/dialogs/DevicesDialogCan.vue
new file mode 100644
index 000000000..39a6dc1c4
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogCan.vue
@@ -0,0 +1,84 @@
+<template>
+    <overlay-scrollbars style="max-height: 400px; overflow-x: hidden">
+        <v-card-text>
+            <v-row>
+                <v-col class="text-center">
+                    <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+                </v-col>
+            </v-row>
+            <v-row v-if="devices.length" class="mt-0">
+                <v-col>
+                    <devices-dialog-can-device v-for="device in devices" :key="device.uuid" :device="device" />
+                </v-col>
+            </v-row>
+            <v-row v-else-if="loaded" class="mt-0">
+                <v-col class="col-8 mx-auto">
+                    <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+                </v-col>
+            </v-row>
+            <v-row v-else class="mt-0">
+                <v-col class="col-8 mx-auto">
+                    <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+                </v-col>
+            </v-row>
+            <v-row v-if="devices.length === 0">
+                <v-col>
+                    <v-alert dense outlined type="info" :icon="mdiInformationVariantCircle">
+                        {{ $t('DevicesDialog.CanBusInfo') }}
+                        <v-row class="my-0">
+                            <v-col class="text-center">
+                                <v-btn
+                                    href="https://docs.mainsail.xyz/overview/features/query-devices#can-devices"
+                                    color="info"
+                                    outlined
+                                    text
+                                    small>
+                                    open guide
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+                    </v-alert>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </overlay-scrollbars>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import DevicesDialogCanDevice from '@/components/dialogs/DevicesDialogCanDevice.vue'
+import { mdiInformationVariantCircle } from '@mdi/js'
+
+export interface CanDevice {
+    application: string
+    uuid: string
+}
+
+@Component({
+    components: { DevicesDialogCanDevice },
+})
+export default class DevicesDialogCan extends Mixins(BaseMixin) {
+    mdiInformationVariantCircle = mdiInformationVariantCircle
+
+    devices: CanDevice[] = []
+    loading = false
+    loaded = false
+
+    @Prop({ type: String, required: true }) name!: string
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    async refresh() {
+        this.loading = true
+
+        this.devices = await fetch(`${this.apiUrl}/machine/peripherals/canbus?interface=${this.name}`)
+            .then((res) => res.json())
+            .then((res) => res.result.can_uuids ?? [])
+
+        this.loading = false
+        this.loaded = true
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogCanDevice.vue b/src/components/dialogs/DevicesDialogCanDevice.vue
new file mode 100644
index 000000000..163362ce3
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogCanDevice.vue
@@ -0,0 +1,32 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-card-text>
+            <v-row>
+                <v-col>
+                    <div class="text-overline mb-2 d-flex flex-row">
+                        <span>{{ device.application }}</span>
+                    </div>
+                </v-col>
+            </v-row>
+            <v-row class="mt-0">
+                <v-col>
+                    <textfield-with-copy label="UUID" :value="device.uuid" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { CanDevice } from '@/components/dialogs/DevicesDialogCan.vue'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
+
+@Component({
+    components: { TextfieldWithCopy },
+})
+export default class DevicesDialogCanDevice extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: CanDevice
+}
+</script>
diff --git a/src/components/dialogs/DevicesDialogSerial.vue b/src/components/dialogs/DevicesDialogSerial.vue
new file mode 100644
index 000000000..0a0104c86
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogSerial.vue
@@ -0,0 +1,72 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="text-center">
+                <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="filteredDevices.length" class="mt-0">
+            <v-col>
+                <v-expansion-panels accordion>
+                    <devices-dialog-serial-device
+                        v-for="device in filteredDevices"
+                        :key="device.path_by_hardware ?? device.device_path"
+                        :device="device" />
+                </v-expansion-panels>
+            </v-col>
+        </v-row>
+        <v-row v-else-if="loaded" class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+            </v-col>
+        </v-row>
+        <v-row v-else class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface SerialDevice {
+    device_type: 'hardware_uart' | 'usb'
+    device_path: string
+    device_name: string
+    driver_name: string
+    path_by_hardware?: string
+    path_by_id?: string
+    usb_location?: string
+}
+
+@Component
+export default class DevicesDialogSerial extends Mixins(BaseMixin) {
+    devices: SerialDevice[] = []
+    loading = false
+    loaded = false
+
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredDevices() {
+        if (!this.hideSystemEntries) return this.devices
+
+        return this.devices.filter((device) => device.device_type !== 'hardware_uart')
+    }
+
+    async refresh() {
+        this.loading = true
+
+        this.devices = await fetch(this.apiUrl + '/machine/peripherals/serial')
+            .then((res) => res.json())
+            .then((res) => res.result?.serial_devices ?? [])
+
+        this.loading = false
+        this.loaded = true
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogSerialDevice.vue b/src/components/dialogs/DevicesDialogSerialDevice.vue
new file mode 100644
index 000000000..b3293ee33
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogSerialDevice.vue
@@ -0,0 +1,45 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">
+                    <span>{{ device.device_type.toUpperCase().replaceAll('_', ' ') }}</span>
+                    <v-spacer />
+                    <span>{{ device.driver_name }}</span>
+                </div>
+                <v-list-item-title class="text-h5 mb-0">{{ device.device_name }}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text>
+            <v-row>
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.DevicePath')" :value="device.device_path" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_id ?? false">
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.PathById')" :value="device.path_by_id" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_hardware ?? false">
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.PathByHardware')" :value="device.path_by_hardware" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { SerialDevice } from '@/components/dialogs/DevicesDialogSerial.vue'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
+
+@Component({
+    components: { TextfieldWithCopy },
+})
+export default class DevicesDialogSerialDevice extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: SerialDevice
+}
+</script>
diff --git a/src/components/dialogs/DevicesDialogUsb.vue b/src/components/dialogs/DevicesDialogUsb.vue
new file mode 100644
index 000000000..229b0e9ff
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogUsb.vue
@@ -0,0 +1,74 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="text-center">
+                <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="filteredDevices.length" class="mt-0">
+            <v-col>
+                <devices-dialog-usb-device
+                    v-for="device in filteredDevices"
+                    :key="device.usb_location"
+                    :device="device" />
+            </v-col>
+        </v-row>
+        <v-row v-else-if="loaded" class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+            </v-col>
+        </v-row>
+        <v-row v-else class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface UsbDevice {
+    bus_num: number
+    device_num: number
+    usb_location: string
+    vendor_id: string
+    product_id: string
+    manufacturer?: string
+    product?: string
+    class?: string
+    subclass?: string
+    protocol?: string
+    description?: string
+}
+
+@Component
+export default class DevicesDialogUsb extends Mixins(BaseMixin) {
+    devices: UsbDevice[] = []
+    loading = false
+    loaded = false
+
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredDevices() {
+        if (!this.hideSystemEntries) return this.devices
+
+        return this.devices.filter((device) => device.class !== 'Hub')
+    }
+
+    async refresh() {
+        this.loading = true
+
+        this.devices = await fetch(this.apiUrl + '/machine/peripherals/usb')
+            .then((res) => res.json())
+            .then((res) => res.result?.usb_devices ?? [])
+
+        this.loading = false
+        this.loaded = true
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogUsbDevice.vue b/src/components/dialogs/DevicesDialogUsbDevice.vue
new file mode 100644
index 000000000..58458994c
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogUsbDevice.vue
@@ -0,0 +1,55 @@
+<template>
+    <v-card outlined class="mt-3">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">
+                    <span>{{ device.manufacturer ?? 'Unknown' }}</span>
+                    <v-spacer />
+                    <span>{{ device.vendor_id }}:{{ device.product_id }}</span>
+                </div>
+                <v-list-item-title class="text-h5 mb-1">{{ device.product ?? 'Unknown' }}</v-list-item-title>
+                <v-list-item-subtitle v-if="device.description">{{ device.description }}</v-list-item-subtitle>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text class="pt-0">
+            <v-row v-for="item in details" :key="item.key" class="mt-0">
+                <v-col class="py-2" cols="3">{{ item.key }}</v-col>
+                <v-col class="py-2">{{ item.value }}</v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { UsbDevice } from '@/components/dialogs/DevicesDialogUsb.vue'
+
+@Component
+export default class DevicesDialogUsbDevice extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: UsbDevice
+
+    get details() {
+        const types = ['protocol', 'class', 'serial', 'usb_location']
+        const output: { key: string; value: string }[] = []
+
+        Object.keys(this.device).forEach((key) => {
+            // @ts-ignore
+            let value = this.device[key] ?? null
+
+            if (!types.includes(key) || value === null) return
+
+            if (key === 'class' && this.device['subclass']) {
+                value += `, ${this.device['subclass']}`
+            }
+
+            output.push({
+                key,
+                value,
+            })
+        })
+
+        return output
+    }
+}
+</script>
diff --git a/src/components/dialogs/DevicesDialogVideo.vue b/src/components/dialogs/DevicesDialogVideo.vue
new file mode 100644
index 000000000..f6ef97c9e
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogVideo.vue
@@ -0,0 +1,103 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="text-center">
+                <v-btn :loading="loading" color="primary" @click="refresh">{{ $t('DevicesDialog.Refresh') }}</v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="libcameraDevices.length || filteredV4l2Devices.length" class="mt-0">
+            <v-col>
+                <devices-dialog-video-device-libcamera
+                    v-for="(device, index) in filteredLibcameraDevices"
+                    :key="`libcamera_${device.libcamera_id}_${index}`"
+                    :device="device" />
+                <devices-dialog-video-device-v4l2
+                    v-for="(device, index) in filteredV4l2Devices"
+                    :key="`v4l2_${device.hardware_bus}_${index}`"
+                    :device="device" />
+            </v-col>
+        </v-row>
+        <v-row v-else-if="loaded" class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.NoDeviceFound') }}</p>
+            </v-col>
+        </v-row>
+        <v-row v-else class="mt-0">
+            <v-col class="col-8 mx-auto">
+                <p class="text-center text--disabled mb-0">{{ $t('DevicesDialog.ClickRefresh') }}</p>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+export interface V4l2Device {
+    device_name: string
+    device_path: string
+    camera_name: string
+    driver_name: string
+    alt_name: string | null
+    hardware_bus: string
+    capabilities: string
+    version: string
+    path_by_hardware: string | null
+    path_by_id: string | null
+    usb_location: string | null
+    modes: { description: string; format: string; flags: string[]; resolutions: string[] }[]
+}
+
+export interface LibcameraDevice {
+    libcamera_id: string
+    model: string
+    modes: { format: string; resolutions: string[] }[]
+}
+
+@Component
+export default class DevicesDialogVideo extends Mixins(BaseMixin) {
+    v4l2Devices: V4l2Device[] = []
+    libcameraDevices: LibcameraDevice[] = []
+    loading = false
+    loaded = false
+
+    @Prop({ type: Boolean, default: false }) hideSystemEntries!: boolean
+
+    get filteredLibcameraDevices() {
+        if (this.hideSystemEntries) {
+            return this.libcameraDevices.filter((device) => !device.libcamera_id.includes('usb@'))
+        }
+
+        return this.libcameraDevices
+    }
+
+    get filteredV4l2Devices() {
+        return this.v4l2Devices.filter((device) => {
+            if (this.hideSystemEntries) {
+                if (this.libcameraDevices.length === 0 && device.hardware_bus.endsWith('csi')) return true
+
+                return !device.hardware_bus.startsWith('platform:')
+            }
+
+            return true
+        })
+    }
+
+    async refresh() {
+        this.loading = true
+
+        const result = await fetch(this.apiUrl + '/machine/peripherals/video')
+            .then((res) => res.json())
+            .then((res) => res.result ?? {})
+
+        this.v4l2Devices = result.v4l2_devices ?? []
+        this.libcameraDevices = result.libcamera_devices ?? []
+
+        this.loading = false
+        this.loaded = true
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
new file mode 100644
index 000000000..22091d0dc
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogVideoDeviceLibcamera.vue
@@ -0,0 +1,61 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">Libcamera</div>
+                <v-list-item-title class="text-h5 mb-0">{{ device.model }}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text>
+            <v-row class="mb-1">
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.LibcameraId')" :value="device.libcamera_id" />
+                </v-col>
+            </v-row>
+            <template v-if="identicalResolutions">
+                <v-row class="mt-0">
+                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
+                    <v-col class="py-2">{{ formats }}</v-col>
+                </v-row>
+                <v-row class="mt-0">
+                    <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
+                    <v-col class="py-2">{{ resolutions }}</v-col>
+                </v-row>
+            </template>
+            <template v-else>
+                <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
+                    <v-col class="py-2" cols="4">{{ mode.format }}</v-col>
+                    <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
+                </v-row>
+            </template>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { LibcameraDevice } from '@/components/dialogs/DevicesDialogVideo.vue'
+import { sortResolutions } from '@/plugins/helpers'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
+
+@Component({
+    components: { TextfieldWithCopy },
+})
+export default class DevicesDialogVideoDeviceLibcamera extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: LibcameraDevice
+
+    get identicalResolutions() {
+        const resolutions = this.device.modes.map((mode) => mode.resolutions.sort(sortResolutions).join(','))
+        return resolutions.every((resolution) => resolution === resolutions[0])
+    }
+
+    get resolutions() {
+        return this.device.modes[0].resolutions.join(', ')
+    }
+
+    get formats() {
+        return this.device.modes.map((mode) => mode.format).join(', ')
+    }
+}
+</script>
diff --git a/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
new file mode 100644
index 000000000..7909db8fa
--- /dev/null
+++ b/src/components/dialogs/DevicesDialogVideoDeviceV4l2.vue
@@ -0,0 +1,84 @@
+<template>
+    <v-card outlined class="mt-3 w-100">
+        <v-list-item three-line>
+            <v-list-item-content>
+                <div class="text-overline mb-2 d-flex flex-row">V4L2</div>
+                <v-list-item-title class="text-h5 mb-0">{{ device.camera_name }}</v-list-item-title>
+                <v-list-item-subtitle v-if="show_alt_name">{{ device.alt_name }}</v-list-item-subtitle>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-text>
+            <v-row>
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.DevicePath')" :value="device.device_path" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_id">
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.PathById')" :value="device.path_by_id" />
+                </v-col>
+            </v-row>
+            <v-row v-if="device.path_by_hardware">
+                <v-col>
+                    <textfield-with-copy :label="$t('DevicesDialog.PathByHardware')" :value="device.path_by_hardware" />
+                </v-col>
+            </v-row>
+            <template v-if="device.modes.length">
+                <template v-if="identicalResolutions">
+                    <v-row class="mt-0">
+                        <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Formats') }}</v-col>
+                        <v-col class="py-2">{{ formats }}</v-col>
+                    </v-row>
+                    <v-row class="mt-0">
+                        <v-col class="py-2" cols="4">{{ $t('DevicesDialog.Resolutions') }}</v-col>
+                        <v-col class="py-2">{{ resolutions }}</v-col>
+                    </v-row>
+                </template>
+                <template v-else>
+                    <v-row v-for="mode in device.modes" :key="mode.format" class="mt-0">
+                        <v-col class="py-2" cols="4">
+                            {{ mode.description }}
+                            <br />
+                            <small>{{ mode.format }}</small>
+                        </v-col>
+                        <v-col class="py-2">{{ mode.resolutions.join(', ') }}</v-col>
+                    </v-row>
+                </template>
+            </template>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { V4l2Device } from '@/components/dialogs/DevicesDialogVideo.vue'
+import { sortResolutions } from '@/plugins/helpers'
+import TextfieldWithCopy from '@/components/inputs/TextfieldWithCopy.vue'
+
+@Component({
+    components: { TextfieldWithCopy },
+})
+export default class DevicesDialogVideoDeviceV4l2 extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) device!: V4l2Device
+
+    get identicalResolutions() {
+        const resolutions = this.device.modes.map((mode) => mode.resolutions.sort(sortResolutions).join(','))
+        return resolutions.every((resolution) => resolution === resolutions[0])
+    }
+
+    get resolutions() {
+        return this.device.modes[0]?.resolutions?.join(', ') ?? ''
+    }
+
+    get formats() {
+        return this.device.modes.map((mode) => `${mode.description} (${mode.format})`).join(', ')
+    }
+
+    get show_alt_name() {
+        if (this.device.alt_name === null) return false
+
+        return this.device.alt_name !== this.device.camera_name
+    }
+}
+</script>
diff --git a/src/components/inputs/TextfieldWithCopy.vue b/src/components/inputs/TextfieldWithCopy.vue
new file mode 100644
index 000000000..81b3fe969
--- /dev/null
+++ b/src/components/inputs/TextfieldWithCopy.vue
@@ -0,0 +1,52 @@
+<template>
+    <v-text-field :class="cssClassName" readonly dense outlined hide-details :label="label" :value="value">
+        <template #append>
+            <v-icon @click="copy">{{ mdiContentCopy }}</v-icon>
+            <v-tooltip
+                v-model="isShowTooltip"
+                open-on-click
+                :open-on-hover="false"
+                :attach="'.' + cssClassName"
+                :position-x="50"
+                :position-y="0">
+                <span>{{ $t('App.TextfieldWithCopy.Copied') }}</span>
+            </v-tooltip>
+        </template>
+    </v-text-field>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiContentCopy } from '@mdi/js'
+import { copyToClipboard } from '@/plugins/helpers'
+import { v4 as uuidv4 } from 'uuid'
+
+@Component
+export default class TextfieldWithCopy extends Mixins(BaseMixin) {
+    mdiContentCopy = mdiContentCopy
+
+    @Prop({ type: String, required: true }) label!: string
+    @Prop({ type: String, required: true }) value!: string
+
+    isShowTooltip = false
+    cssClassName = ''
+
+    mounted() {
+        this.cssClassName = `textfield-with-copy-${uuidv4()}`
+    }
+
+    copy() {
+        copyToClipboard(this.value)
+
+        this.isShowTooltip = true
+        setTimeout(() => (this.isShowTooltip = false), 2000)
+    }
+}
+</script>
+<style scoped>
+::v-deep .v-tooltip__content {
+    top: 4px !important;
+    left: auto !important;
+    right: 46px;
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index d72f18c2a..504b53644 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -36,6 +36,9 @@
             "NoEmptyAllowedError": "Input must not be empty!"
         },
         "Printers": "Printers",
+        "TextfieldWithCopy": {
+            "Copied": "Copied"
+        },
         "TheServiceWorker": {
             "DescriptionNeedUpdate": "The local cache is outdated and needs to be updated. Please click on the button below to update the cache.",
             "TitleNeedUpdate": "PWA needs update",
@@ -146,6 +149,20 @@
         "SendCode": "Send code...",
         "SetupConsole": "Setup Console"
     },
+    "DevicesDialog": {
+        "CanBusInfo": "Only unassigned nodes can be detected. It’s recommended to have only one unassigned device connected to the can bus to avoid communication issues. For more details, please click on the link:",
+        "ClickRefresh": "Click on the refresh button to search for devices.",
+        "DevicePath": "Device path",
+        "Formats": "Formats",
+        "Headline": "Devices",
+        "HideSystemEntries": "Hide system entries",
+        "LibcameraId": "Libcamera ID",
+        "NoDeviceFound": "No device found. Please check the connection and click on the refresh button.",
+        "PathByHardware": "Path by hardware",
+        "PathById": "Path by ID",
+        "Refresh": "refresh",
+        "Resolutions": "Resolutions"
+    },
     "Dialogs": {
         "StartPrint": {
             "Cancel": "Cancel",
@@ -158,6 +175,7 @@
     },
     "Editor": {
         "ConfigReference": "Config Reference",
+        "DeviceDialog": "Devices",
         "DontSave": "Don't save",
         "Downloading": "Downloading",
         "FailedSave": "{filename} could not be uploaded!",
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index 0641ec209..8cbd54a94 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -248,3 +248,37 @@ export function windowBeforeUnloadFunction(e: BeforeUnloadEvent) {
     e.preventDefault()
     e.returnValue = ''
 }
+
+export function copyToClipboard(text: string) {
+    if (navigator.clipboard) {
+        navigator.clipboard.writeText(text)
+        return
+    }
+
+    const textArea = document.createElement('textarea')
+    let element = document.getElementById('devices-dialog')
+    if (!element) element = document.body
+
+    textArea.value = text
+    textArea.style.position = 'absolute'
+    textArea.style.top = '0'
+    textArea.style.left = '0'
+    textArea.style.zIndex = '100000'
+    textArea.style.opacity = '0'
+    element.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    try {
+        document.execCommand('copy')
+    } catch (err) {
+        console.error('Unable to copy to clipboard', err)
+    }
+    textArea.remove()
+}
+
+export function sortResolutions(a: string, b: string) {
+    const aSplit = parseInt(a.split('x')[0])
+    const bSplit = parseInt(b.split('x')[0])
+
+    return aSplit - bSplit
+}
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 8afa67f6f..f3676d781 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -4,7 +4,7 @@ export const defaultPrimaryColor = '#2196f3'
 export const defaultBigThumbnailBackground = '#1e1e1e'
 
 export const minKlipperVersion = 'v0.11.0-257'
-export const minMoonrakerVersion = 'v0.8.0-137'
+export const minMoonrakerVersion = 'v0.8.0-306'
 export const minBrowserVersions = [{ name: 'safari', version: '16.5.2' }]
 
 export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']

From 3b78c3bf2bba979959e80c664f64376eb53d96f8 Mon Sep 17 00:00:00 2001
From: "Michal Dziekonski (mdz)" <michal.dziekonski+github@gmail.com>
Date: Thu, 15 Feb 2024 20:20:14 +0100
Subject: [PATCH 19/46] fix: file upload rate displays `NaN` instead of an
 actual value (#1777)

---
 src/components/TheTopbar.vue                  | 28 ++++--------------
 src/components/gcodeviewer/Viewer.vue         | 29 ++++---------------
 .../panels/Machine/ConfigFilesPanel.vue       |  8 -----
 src/store/files/actions.ts                    | 27 ++++-------------
 4 files changed, 15 insertions(+), 77 deletions(-)

diff --git a/src/components/TheTopbar.vue b/src/components/TheTopbar.vue
index ee9225313..c74ab0980 100644
--- a/src/components/TheTopbar.vue
+++ b/src/components/TheTopbar.vue
@@ -110,7 +110,7 @@ import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { validGcodeExtensions } from '@/store/variables'
 import Component from 'vue-class-component'
-import axios from 'axios'
+import axios, { AxiosProgressEvent } from 'axios'
 import { formatFilesize } from '@/plugins/helpers'
 import TheTopCornerMenu from '@/components/TheTopCornerMenu.vue'
 import TheSettingsMenu from '@/components/TheSettingsMenu.vue'
@@ -128,10 +128,6 @@ type uploadSnackbar = {
     speed: number
     total: number
     cancelTokenSource: any
-    lastProgress: {
-        time: number
-        loaded: number
-    }
 }
 
 @Component({
@@ -162,10 +158,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         speed: 0,
         total: 0,
         cancelTokenSource: null,
-        lastProgress: {
-            time: 0,
-            loaded: 0,
-        },
     }
 
     formatFilesize = formatFilesize
@@ -317,8 +309,6 @@ export default class TheTopbar extends Mixins(BaseMixin) {
         this.uploadSnackbar.status = true
         this.uploadSnackbar.percent = 0
         this.uploadSnackbar.speed = 0
-        this.uploadSnackbar.lastProgress.loaded = 0
-        this.uploadSnackbar.lastProgress.time = 0
 
         formData.append('file', file, filename)
         formData.append('print', 'true')
@@ -329,18 +319,10 @@ export default class TheTopbar extends Mixins(BaseMixin) {
                 .post(this.apiUrl + '/server/files/upload', formData, {
                     cancelToken: this.uploadSnackbar.cancelTokenSource.token,
                     headers: { 'Content-Type': 'multipart/form-data' },
-                    onUploadProgress: (progressEvent: ProgressEvent) => {
-                        this.uploadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total
-                        if (this.uploadSnackbar.lastProgress.time) {
-                            const time = progressEvent.timeStamp - this.uploadSnackbar.lastProgress.time
-                            const data = progressEvent.loaded - this.uploadSnackbar.lastProgress.loaded
-
-                            if (time) this.uploadSnackbar.speed = data / (time / 1000)
-                        }
-
-                        this.uploadSnackbar.lastProgress.time = progressEvent.timeStamp
-                        this.uploadSnackbar.lastProgress.loaded = progressEvent.loaded
-                        this.uploadSnackbar.total = progressEvent.total
+                    onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+                        this.uploadSnackbar.percent = (progressEvent.progress ?? 0) * 100
+                        this.uploadSnackbar.speed = progressEvent.rate ?? 0
+                        this.uploadSnackbar.total = progressEvent.total ?? 0
                     },
                 })
                 .then((result) => {
diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue
index 778415ec5..6e195f752 100644
--- a/src/components/gcodeviewer/Viewer.vue
+++ b/src/components/gcodeviewer/Viewer.vue
@@ -277,7 +277,7 @@
 import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import GCodeViewer from '@sindarius/gcodeviewer'
-import axios from 'axios'
+import axios, { AxiosProgressEvent } from 'axios'
 import { formatFilesize } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import CodeStream from '@/components/gcodeviewer/CodeStream.vue'
@@ -304,10 +304,6 @@ interface downloadSnackbar {
     speed: number
     total: number
     cancelTokenSource: any
-    lastProgress: {
-        time: number
-        loaded: number
-    }
 }
 
 let viewer: any = null
@@ -357,10 +353,6 @@ export default class Viewer extends Mixins(BaseMixin) {
         speed: 0,
         total: 0,
         cancelTokenSource: {},
-        lastProgress: {
-            time: 0,
-            loaded: 0,
-        },
     }
 
     private excludeObject = {
@@ -634,7 +626,6 @@ export default class Viewer extends Mixins(BaseMixin) {
     async loadFile(filename: string) {
         this.downloadSnackbar.status = true
         this.downloadSnackbar.speed = 0
-        this.downloadSnackbar.lastProgress.time = 0
         this.downloadSnackbar.filename = filename.startsWith('gcodes/') ? filename.slice(7) : filename
         const CancelToken = axios.CancelToken
         this.downloadSnackbar.cancelTokenSource = CancelToken.source()
@@ -642,20 +633,10 @@ export default class Viewer extends Mixins(BaseMixin) {
             .get(this.apiUrl + '/server/files/' + encodeURI(filename), {
                 cancelToken: this.downloadSnackbar.cancelTokenSource.token,
                 responseType: 'blob',
-                onDownloadProgress: (progressEvent) => {
-                    this.downloadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total
-                    if (this.downloadSnackbar.lastProgress.time) {
-                        const time = progressEvent.timeStamp - this.downloadSnackbar.lastProgress.time
-                        const data = progressEvent.loaded - this.downloadSnackbar.lastProgress.loaded
-
-                        if (time > 1000 || this.downloadSnackbar.speed === 0) {
-                            this.downloadSnackbar.speed = data / (time / 1000)
-                            this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp
-                            this.downloadSnackbar.lastProgress.loaded = progressEvent.loaded
-                        }
-                    } else this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp
-
-                    this.downloadSnackbar.total = progressEvent.total
+                onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
+                    this.downloadSnackbar.percent = (progressEvent.progress ?? 0) * 100
+                    this.downloadSnackbar.speed = progressEvent.rate ?? 0
+                    this.downloadSnackbar.total = progressEvent.total ?? 0
                 },
             })
             .then((res) => res.data.text())
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index b289778ad..293738e96 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -601,10 +601,6 @@ interface uploadSnackbar {
     number: number
     max: number
     cancelTokenSource: any
-    lastProgress: {
-        time: number
-        loaded: number
-    }
 }
 
 interface draggingFile {
@@ -719,10 +715,6 @@ export default class ConfigFilesPanel extends Mixins(BaseMixin, ThemeMixin) {
         number: 0,
         max: 0,
         cancelTokenSource: {},
-        lastProgress: {
-            time: 0,
-            loaded: 0,
-        },
     }
     private draggingFile: draggingFile = {
         item: {
diff --git a/src/store/files/actions.ts b/src/store/files/actions.ts
index ca0af88cf..032e98e22 100644
--- a/src/store/files/actions.ts
+++ b/src/store/files/actions.ts
@@ -10,7 +10,7 @@ import {
 import { RootState } from '@/store/types'
 import i18n from '@/plugins/i18n'
 import { hiddenDirectories, validGcodeExtensions } from '@/store/variables'
-import axios from 'axios'
+import axios, { AxiosProgressEvent } from 'axios'
 import { BatchMessage } from '@/plugins/webSocketClient'
 
 export const actions: ActionTree<FileState, RootState> = {
@@ -316,34 +316,17 @@ export const actions: ActionTree<FileState, RootState> = {
         await commit('uploadSetFilename', payload.file.name)
         await commit('uploadSetShow', true)
 
-        let lastTime = 0
-        let lastLoaded = 0
-
         return new Promise((resolve) => {
             axios
                 .post(apiUrl + '/server/files/upload', formData, {
                     cancelToken: cancelTokenSource.token,
                     headers: { 'Content-Type': 'multipart/form-data' },
-                    onUploadProgress: (progressEvent: any) => {
-                        const percent = (progressEvent.loaded * 100) / progressEvent.total
+                    onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+                        const percent = (progressEvent.progress ?? 0) * 100
                         commit('uploadSetPercent', percent)
 
-                        if (lastTime === 0) {
-                            lastTime = progressEvent.timeStamp
-                            lastLoaded = progressEvent.loaded
-
-                            return
-                        }
-
-                        const time = progressEvent.timeStamp - lastTime
-                        if (time < 1000) return
-
-                        const data = progressEvent.loaded - lastLoaded
-                        const speed = data / (time / 1000)
-                        commit('uploadSetSpeed', speed)
-
-                        lastTime = progressEvent.timeStamp
-                        lastLoaded = progressEvent.loaded
+                        const rate = progressEvent.rate ?? 0
+                        commit('uploadSetSpeed', rate)
                     },
                 })
                 .then((result: any) => {

From 8e7db0da04915f734fa8802ae76d5f283621f4de Mon Sep 17 00:00:00 2001
From: "Michal Dziekonski (mdz)" <michal.dziekonski+github@gmail.com>
Date: Thu, 15 Feb 2024 22:28:56 +0100
Subject: [PATCH 20/46] feat: add ability to add history items to job queue
 (#1778)

Co-authored-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/AddBatchToQueueDialog.vue         | 120 ++++++++++++++++++
 src/components/panels/GcodefilesPanel.vue     | 100 +++------------
 src/components/panels/HistoryListPanel.vue    |  47 ++++++-
 src/components/panels/Status/Gcodefiles.vue   |  96 ++------------
 src/components/panels/Status/Jobqueue.vue     |   4 +-
 src/locales/en.json                           |   1 +
 6 files changed, 198 insertions(+), 170 deletions(-)
 create mode 100644 src/components/dialogs/AddBatchToQueueDialog.vue

diff --git a/src/components/dialogs/AddBatchToQueueDialog.vue b/src/components/dialogs/AddBatchToQueueDialog.vue
new file mode 100644
index 000000000..f98c958c9
--- /dev/null
+++ b/src/components/dialogs/AddBatchToQueueDialog.vue
@@ -0,0 +1,120 @@
+<template>
+    <v-dialog :value="isVisible" :max-width="400" @click:outside="closeDialog" @keydown.esc="closeDialog">
+        <panel
+            :title="$t('Files.AddToQueue')"
+            card-class="gcode-files-add-to-queue-dialog"
+            :icon="mdiPlaylistPlus"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+
+            <v-form v-model="isValid" @submit.prevent="addBatchToQueueAction">
+                <v-card-text>
+                    <v-text-field
+                        ref="inputFieldAddToQueueCount"
+                        v-model="input"
+                        :label="$t('Files.Count')"
+                        required
+                        hide-spin-buttons
+                        type="number"
+                        :rules="rules.count">
+                        <template #append-outer>
+                            <div class="_spin_button_group">
+                                <v-btn class="mt-n3" icon plain small @click="input++">
+                                    <v-icon>{{ mdiChevronUp }}</v-icon>
+                                </v-btn>
+                                <v-btn :disabled="input <= 1" class="mb-n3" icon plain small @click="input--">
+                                    <v-icon>{{ mdiChevronDown }}</v-icon>
+                                </v-btn>
+                            </div>
+                        </template>
+                    </v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn text @click="closeDialog">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="primary" text type="submit" :disabled="!isValid">
+                        {{ $t('Files.AddToQueue') }}
+                    </v-btn>
+                </v-card-actions>
+            </v-form>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiChevronDown, mdiChevronUp, mdiPlaylistPlus, mdiCloseThick } from '@mdi/js'
+
+@Component
+export default class AddBatchToQueueDialog extends Mixins(BaseMixin) {
+    mdiChevronDown = mdiChevronDown
+    mdiChevronUp = mdiChevronUp
+    mdiPlaylistPlus = mdiPlaylistPlus
+    mdiCloseThick = mdiCloseThick
+
+    /**
+     * Is the dialog currently visible?
+     */
+    @Prop({ type: Boolean, default: false }) declare readonly isVisible: boolean
+
+    /**
+     * Should there be a toast message after the file was added to the queue?
+     */
+    @Prop({ type: Boolean, default: false }) declare readonly showToast: boolean
+
+    /**
+     * Filename of the model to be added to the Queue.
+     */
+    @Prop({ type: String, required: true }) declare readonly filename: string
+
+    isValid = false
+    // because of the text field, the input is always a string
+    input: string = '1'
+
+    rules = {
+        count: [
+            (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+            (value: string) => parseInt(value, 10) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
+        ],
+    }
+
+    async addBatchToQueueAction() {
+        const array = Array(parseInt(this.input)).fill(this.filename)
+
+        await this.$store.dispatch('server/jobQueue/addToQueue', array)
+
+        if (this.showToast)
+            this.$toast.info(this.$t('History.AddToQueueSuccessful', { filename: this.filename }).toString())
+
+        this.closeDialog()
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    resetFormState() {
+        this.input = '1'
+    }
+
+    @Watch('isVisible')
+    isVisibleChanged(newIsVisible: boolean) {
+        if (newIsVisible) this.resetFormState()
+    }
+}
+</script>
+
+<style scoped>
+._spin_button_group {
+    width: 24px;
+    margin-top: -6px;
+    margin-left: -6px;
+    margin-bottom: -6px;
+}
+</style>
diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 052a61bde..712ba6136 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -568,53 +568,10 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <v-dialog v-model="dialogAddBatchToQueue.show" max-width="400">
-            <panel
-                :title="$t('Files.AddToQueue')"
-                card-class="gcode-files-add-to-queue-dialog"
-                :icon="mdiPlaylistPlus"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="dialogAddBatchToQueue.show = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-
-                <v-card-text>
-                    <v-text-field
-                        ref="inputFieldAddToQueueCount"
-                        v-model="dialogAddBatchToQueue.count"
-                        :label="$t('Files.Count')"
-                        required
-                        hide-spin-buttons
-                        type="number"
-                        :rules="countInputRules"
-                        @keyup.enter="addBatchToQueueAction">
-                        <template #append-outer>
-                            <div class="_spin_button_group">
-                                <v-btn class="mt-n3" icon plain small @click="dialogAddBatchToQueue.count++">
-                                    <v-icon>{{ mdiChevronUp }}</v-icon>
-                                </v-btn>
-                                <v-btn
-                                    :disabled="dialogAddBatchToQueue.count <= 1"
-                                    class="mb-n3"
-                                    icon
-                                    plain
-                                    small
-                                    @click="dialogAddBatchToQueue.count--">
-                                    <v-icon>{{ mdiChevronDown }}</v-icon>
-                                </v-btn>
-                            </div>
-                        </template>
-                    </v-text-field>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogAddBatchToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="addBatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
+        <add-batch-to-queue-dialog
+            :is-visible="dialogAddBatchToQueue.isVisible"
+            :filename="dialogAddBatchToQueue.filename"
+            @close="closeAddBatchToQueueDialog" />
     </div>
 </template>
 
@@ -628,8 +585,6 @@ import Panel from '@/components/ui/Panel.vue'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import draggable from 'vuedraggable'
 import {
-    mdiChevronDown,
-    mdiChevronUp,
     mdiDragVertical,
     mdiCheckboxBlankOutline,
     mdiCheckboxMarked,
@@ -654,6 +609,7 @@ import {
     mdiContentCopy,
 } from '@mdi/js'
 import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
+import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue'
 import ControlMixin from '@/components/mixins/control'
 import PathNavigation from '@/components/ui/PathNavigation.vue'
 
@@ -675,12 +631,6 @@ interface dialogPrintFile {
     item: FileStateGcodefile
 }
 
-interface dialogAddBatchToQueue {
-    show: boolean
-    count: number
-    item: FileStateGcodefile
-}
-
 interface dialogRenameObject {
     show: boolean
     newName: string
@@ -698,11 +648,9 @@ interface tableColumnSetting {
 }
 
 @Component({
-    components: { StartPrintDialog, Panel, SettingsRow, PathNavigation, draggable },
+    components: { StartPrintDialog, AddBatchToQueueDialog, Panel, SettingsRow, PathNavigation, draggable },
 })
 export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
-    mdiChevronDown = mdiChevronDown
-    mdiChevronUp = mdiChevronUp
     mdiContentCopy = mdiContentCopy
     mdiFile = mdiFile
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
@@ -779,10 +727,9 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         item: { ...this.contextMenu.item },
     }
 
-    private dialogAddBatchToQueue: dialogAddBatchToQueue = {
-        show: false,
-        count: 1,
-        item: { ...this.contextMenu.item },
+    dialogAddBatchToQueue: { isVisible: boolean; filename: string } = {
+        isVisible: false,
+        filename: '',
     }
 
     private dialogRenameFile: dialogRenameObject = {
@@ -1272,23 +1219,15 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
     }
 
     openAddBatchToQueueDialog(item: FileStateGcodefile) {
-        this.dialogAddBatchToQueue.show = true
-        this.dialogAddBatchToQueue.count = 1
-        this.dialogAddBatchToQueue.item = item
-    }
-
-    async addBatchToQueueAction() {
-        let filename = [this.currentPath, this.dialogAddBatchToQueue.item.filename].join('/')
+        let filename = [this.currentPath, item.filename].join('/')
         if (filename.startsWith('/')) filename = filename.slice(1)
 
-        const array: string[] = []
-        for (let i = 0; i < this.dialogAddBatchToQueue.count; i++) {
-            array.push(filename)
-        }
-
-        await this.$store.dispatch('server/jobQueue/addToQueue', array)
+        this.dialogAddBatchToQueue.isVisible = true
+        this.dialogAddBatchToQueue.filename = filename
+    }
 
-        this.dialogAddBatchToQueue.show = false
+    closeAddBatchToQueueDialog() {
+        this.dialogAddBatchToQueue.isVisible = false
     }
 
     changeMetadataVisible(name: string, value: boolean) {
@@ -1549,15 +1488,6 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
 }
 </script>
 
-<style scoped>
-._spin_button_group {
-    width: 24px;
-    margin-top: -6px;
-    margin-left: -6px;
-    margin-bottom: -6px;
-}
-</style>
-
 <style>
 /*noinspection CssUnusedSymbol*/
 .files-table .v-data-table-header__icon {
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 3ef8af0b9..1c0e6e52c 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -223,6 +223,18 @@
                     <v-icon class="mr-1">{{ mdiPrinter }}</v-icon>
                     {{ $t('History.Reprint') }}
                 </v-list-item>
+                <v-list-item
+                    v-if="contextMenu.item.exists && isJobQueueAvailable"
+                    @click="addToQueue(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddToQueue') }}
+                </v-list-item>
+                <v-list-item
+                    v-if="contextMenu.item.exists && isJobQueueAvailable"
+                    @click="openAddBatchToQueueDialog(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddBatchToQueue') }}
+                </v-list-item>
                 <v-list-item class="red--text" @click="deleteDialog = true">
                     <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('History.Delete') }}
@@ -493,6 +505,11 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <add-batch-to-queue-dialog
+            :is-visible="dialogAddBatchToQueue.isVisible"
+            :show-toast="true"
+            :filename="dialogAddBatchToQueue.filename"
+            @close="closeAddBatchToQueueDialog" />
     </div>
 </template>
 
@@ -509,6 +526,7 @@ import {
     mdiDatabaseArrowDownOutline,
     mdiCog,
     mdiPrinter,
+    mdiPlaylistPlus,
     mdiTextBoxSearch,
     mdiFile,
     mdiFileDocumentMultipleOutline,
@@ -520,8 +538,10 @@ import {
     mdiNotebook,
     mdiFileCancel,
 } from '@mdi/js'
+import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue'
+
 @Component({
-    components: { Panel },
+    components: { Panel, AddBatchToQueueDialog },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
@@ -529,6 +549,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     mdiCog = mdiCog
     mdiPrinter = mdiPrinter
+    mdiPlaylistPlus = mdiPlaylistPlus
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiTextBoxSearch = mdiTextBoxSearch
     mdiFile = mdiFile
@@ -559,6 +580,11 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         boolShow: false,
     }
 
+    dialogAddBatchToQueue: { isVisible: boolean; filename: string } = {
+        isVisible: false,
+        filename: '',
+    }
+
     private noteDialog: {
         item: ServerHistoryStateJob | null
         note: string
@@ -785,6 +811,10 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return this.$store.state.gui.general?.language ?? 'en'
     }
 
+    get isJobQueueAvailable() {
+        return this.moonrakerComponents.includes('job_queue')
+    }
+
     refreshHistory() {
         this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
 
@@ -941,6 +971,21 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
             this.$socket.emit('printer.print.start', { filename: item.filename }, { action: 'switchToDashboard' })
     }
 
+    async addToQueue(item: ServerHistoryStateJob) {
+        await this.$store.dispatch('server/jobQueue/addToQueue', [item.filename])
+
+        this.$toast.info(this.$t('History.AddToQueueSuccessful', { filename: item.filename }).toString())
+    }
+
+    openAddBatchToQueueDialog(item: ServerHistoryStateJob) {
+        this.dialogAddBatchToQueue.isVisible = true
+        this.dialogAddBatchToQueue.filename = item.filename
+    }
+
+    closeAddBatchToQueueDialog() {
+        this.dialogAddBatchToQueue.isVisible = false
+    }
+
     deleteJob() {
         this.$socket.emit(
             'server.history.delete_job',
diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
index 6ddcb7a66..d2a38e6fa 100644
--- a/src/components/panels/Status/Gcodefiles.vue
+++ b/src/components/panels/Status/Gcodefiles.vue
@@ -173,53 +173,10 @@
             </panel>
         </v-dialog>
 
-        <v-dialog v-model="dialogAddBatchToQueue.show" max-width="400">
-            <panel
-                :title="$t('Files.AddToQueue')"
-                card-class="gcode-files-add-to-queue-dialog"
-                :icon="mdiPlaylistPlus"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="dialogAddBatchToQueue.show = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-
-                <v-card-text>
-                    <v-text-field
-                        ref="inputFieldAddToQueueCount"
-                        v-model="dialogAddBatchToQueue.count"
-                        :label="$t('Files.Count')"
-                        required
-                        hide-spin-buttons
-                        type="number"
-                        :rules="countInputRules"
-                        @keyup.enter="addBatchToQueueAction">
-                        <template #append-outer>
-                            <div class="_spin_button_group">
-                                <v-btn class="mt-n3" icon plain small @click="dialogAddBatchToQueue.count++">
-                                    <v-icon>{{ mdiChevronUp }}</v-icon>
-                                </v-btn>
-                                <v-btn
-                                    :disabled="dialogAddBatchToQueue.count <= 1"
-                                    class="mb-n3"
-                                    icon
-                                    plain
-                                    small
-                                    @click="dialogAddBatchToQueue.count--">
-                                    <v-icon>{{ mdiChevronDown }}</v-icon>
-                                </v-btn>
-                            </div>
-                        </template>
-                    </v-text-field>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogAddBatchToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="addBatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
+        <add-batch-to-queue-dialog
+            :is-visible="dialogAddBatchToQueue.isVisible"
+            :filename="dialogAddBatchToQueue.filename"
+            @close="closeAddBatchToQueueDialog" />
     </v-card>
 </template>
 
@@ -231,8 +188,6 @@ import ControlMixin from '@/components/mixins/control'
 import { FileStateGcodefile } from '@/store/files/types'
 import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue'
 import {
-    mdiChevronDown,
-    mdiChevronUp,
     mdiFile,
     mdiPlay,
     mdiPlaylistPlus,
@@ -246,6 +201,7 @@ import {
 } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
 import { defaultBigThumbnailBackground } from '@/store/variables'
+import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue'
 
 interface dialogRenameObject {
     show: boolean
@@ -253,21 +209,14 @@ interface dialogRenameObject {
     item: FileStateGcodefile
 }
 
-interface dialogAddBatchToQueue {
-    show: boolean
-    count: number
-    item: FileStateGcodefile
-}
-
 @Component({
     components: {
         Panel,
         StartPrintDialog,
+        AddBatchToQueueDialog,
     },
 })
 export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixin) {
-    mdiChevronDown = mdiChevronDown
-    mdiChevronUp = mdiChevronUp
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiPlaylistPlus = mdiPlaylistPlus
@@ -320,10 +269,9 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         item: { ...this.dialogFile },
     }
 
-    private dialogAddBatchToQueue: dialogAddBatchToQueue = {
-        show: false,
-        count: 1,
-        item: { ...this.contextMenu.item },
+    dialogAddBatchToQueue: { isVisible: boolean; filename: string } = {
+        isVisible: false,
+        filename: '',
     }
 
     private countInputRules = [
@@ -470,23 +418,12 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
     }
 
     openAddBatchToQueueDialog(item: FileStateGcodefile) {
-        this.dialogAddBatchToQueue.show = true
-        this.dialogAddBatchToQueue.count = 1
-        this.dialogAddBatchToQueue.item = item
+        this.dialogAddBatchToQueue.isVisible = true
+        this.dialogAddBatchToQueue.filename = item.filename
     }
 
-    async addBatchToQueueAction() {
-        let filename = [this.currentPath, this.dialogAddBatchToQueue.item.filename].join('/')
-        if (filename.startsWith('/')) filename = filename.slice(1)
-
-        const array: string[] = []
-        for (let i = 0; i < this.dialogAddBatchToQueue.count; i++) {
-            array.push(filename)
-        }
-
-        await this.$store.dispatch('server/jobQueue/addToQueue', array)
-
-        this.dialogAddBatchToQueue.show = false
+    closeAddBatchToQueueDialog() {
+        this.dialogAddBatchToQueue.isVisible = false
     }
 
     view3D(item: FileStateGcodefile) {
@@ -571,11 +508,4 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
 .filesGcodeCard {
     position: relative;
 }
-
-._spin_button_group {
-    width: 24px;
-    margin-top: -6px;
-    margin-left: -6px;
-    margin-bottom: -6px;
-}
 </style>
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 85ca50dd9..e9ee73c94 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -13,7 +13,9 @@
                 </v-col>
             </v-row>
         </template>
-        <div v-else class="text-center">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</div>
+        <div v-else>
+            <p class="body-2 my-3 text-center text--disabled">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</p>
+        </div>
     </v-card>
 </template>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 504b53644..1006432eb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -339,6 +339,7 @@
     },
     "History": {
         "AddNote": "Add note",
+        "AddToQueueSuccessful": "File {filename} added to Queue.",
         "AllJobs": "All",
         "AvgPrinttime": "Print Time - Ø",
         "Cancel": "Cancel",

From 021cb61f61485b61017153d0401d9e101330ffd3 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:40:03 +0000
Subject: [PATCH 21/46] chore: push version number to v2.10.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 011e9f425..f03b16774 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mainsail",
-    "version": "2.9.1",
+    "version": "2.10.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mainsail",
-            "version": "2.9.1",
+            "version": "2.10.0",
             "dependencies": {
                 "@codemirror/commands": "^6.0.1",
                 "@codemirror/lang-css": "^6.0.0",
diff --git a/package.json b/package.json
index c2c31dfc2..f077bb3ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mainsail",
-    "version": "2.9.1",
+    "version": "2.10.0",
     "private": true,
     "decription": "a klipper web interface",
     "author": {

From 9c4eade646a957a40e4af91218cac49f4f716293 Mon Sep 17 00:00:00 2001
From: meteyou <meteyou@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:42:51 +0000
Subject: [PATCH 22/46] docs(changelog): update changelog

---
 CHANGELOG.md | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca2208e0d..e6175037c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,47 @@
 # Changelog
 All notable changes to Mainsail will be documented in this file.
 
+## [2.10.0](https://github.com/mainsail-crew/mainsail/releases/tag/v2.10.0) - 2024-02-15
+### Features
+
+- **history**: Add interrupted state to history job ([#1738](https://github.com/mainsail-crew/mainsail/pull/1738))
+- Add ability to re-arrange job queue's items ([#1692](https://github.com/mainsail-crew/mainsail/pull/1692))
+- Add sum + eta in jobqueue panel ([#1770](https://github.com/mainsail-crew/mainsail/pull/1770))
+- Add devices dialog in editor ([#1765](https://github.com/mainsail-crew/mainsail/pull/1765))
+- Add ability to add history items to job queue ([#1778](https://github.com/mainsail-crew/mainsail/pull/1778))
+
+### Bug Fixes and Improvements
+
+- **console**: Fix color of autocomplete and command list ([#1733](https://github.com/mainsail-crew/mainsail/pull/1733))
+- **timelapse**: Fix issue with changing timelapse settings ([#1745](https://github.com/mainsail-crew/mainsail/pull/1745))
+- Incorrect scaling of images in dialogImage ([#1746](https://github.com/mainsail-crew/mainsail/pull/1746))
+- Show extruder extra menu without load/unload macros ([#1747](https://github.com/mainsail-crew/mainsail/pull/1747))
+- Fix ETA calculation from jobqueue during print preheat ([#1773](https://github.com/mainsail-crew/mainsail/pull/1773))
+- File upload rate displays `NaN` instead of an actual value ([#1777](https://github.com/mainsail-crew/mainsail/pull/1777))
+
+### Performance
+
+- Batch gcode file metadata requests ([#1737](https://github.com/mainsail-crew/mainsail/pull/1737))
+
+### Refactor
+
+- Refactor spoolman integration to support v2 response ([#1749](https://github.com/mainsail-crew/mainsail/pull/1749))
+- Refactor heightmap page ([#1759](https://github.com/mainsail-crew/mainsail/pull/1759))
+
+### Localization
+
+- **da**: Update danish translation ([#1757](https://github.com/mainsail-crew/mainsail/pull/1757))
+- **de**: Update german locale ([#1772](https://github.com/mainsail-crew/mainsail/pull/1772))
+- **en**: Fix typo in DescriptionPreviouslyThrottled ([#1776](https://github.com/mainsail-crew/mainsail/pull/1776))
+- **it**: Update italian translation ([#1763](https://github.com/mainsail-crew/mainsail/pull/1763))
+- **zh**: Update chinese locale ([#1767](https://github.com/mainsail-crew/mainsail/pull/1767))
+
+### Other
+
+- **deps**: Update @sindarius/gcodeviewer ([#1755](https://github.com/mainsail-crew/mainsail/pull/1755))
+- Update github issue bot text ([#1743](https://github.com/mainsail-crew/mainsail/pull/1743))
+- Fix typo in bot text ([#1748](https://github.com/mainsail-crew/mainsail/pull/1748))
+
 ## [2.9.1](https://github.com/mainsail-crew/mainsail/releases/tag/v2.9.1) - 2023-12-31
 ### Bug Fixes and Improvements
 

From 4f46d40071347b764452b42625082b1b3254b004 Mon Sep 17 00:00:00 2001
From: Paolo Paterna <TopoDiFogna@users.noreply.github.com>
Date: Sat, 17 Feb 2024 15:23:26 +0100
Subject: [PATCH 23/46] chore(deps): Update @sindarius/gcodeviewer (#1755)
 (#1783)

---
 package-lock.json | 148 +++++++++++++++++++++++-----------------------
 package.json      |   2 +-
 2 files changed, 75 insertions(+), 75 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f03b16774..aa968f738 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
                 "@codemirror/view": "^6.0.3",
                 "@jaames/iro": "^5.5.2",
                 "@lezer/highlight": "^1.0.0",
-                "@sindarius/gcodeviewer": "^3.7.6",
+                "@sindarius/gcodeviewer": "^3.7.8",
                 "@uiw/codemirror-theme-vscode": "^4.19.11",
                 "axios": "^1.6.0",
                 "codemirror": "^6.0.1",
@@ -2136,76 +2136,76 @@
             }
         },
         "node_modules/@babylonjs/core": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-5.57.1.tgz",
-            "integrity": "sha512-k8U+SFPVGvHgeNr651nxZL26iVCmTzjmRrdbQa0BGas+lg8PIV/tfhN4uTeWWQeRFLvjbkcHA5qD8x/Xk3EpMQ=="
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.43.0.tgz",
+            "integrity": "sha512-pLFvvtC26TeICUcF0YjuuQqvCahJwPlATXnJkvBzMWXXxUE0Y5rI8L28iScu2WKy975605KdccJI5VL2NG7sUQ=="
         },
         "node_modules/@babylonjs/gui": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-5.57.1.tgz",
-            "integrity": "sha512-NUOYKF5iAA0UmFFHUBkb12K9Zvqw8BnOVAbM27CZ7WpnHFQ+4/CJuy9nFoCGkBjv2A5W7M1ML/7cjmce0CbdRA==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.43.0.tgz",
+            "integrity": "sha512-iYsB7uyC40w0QkFGcPw8jAzE26jsgTFvWHTVKPSZxjQ5cG2RQEeK3aD8l+GvWauSc2qPB0wMOsvkAtusdy1g7g==",
             "peer": true,
             "peerDependencies": {
-                "@babylonjs/core": "^5.22.0"
+                "@babylonjs/core": "^6.0.0"
             }
         },
         "node_modules/@babylonjs/gui-editor": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/gui-editor/-/gui-editor-5.57.1.tgz",
-            "integrity": "sha512-FY4py7CzLiW0NAd0atBb5oCI/bS6kLsfszliZFvgrWl+eJ6z54aD1m23dZ+zvy8IqxcbSUkFYKqSfRinZttnkA==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/gui-editor/-/gui-editor-6.43.0.tgz",
+            "integrity": "sha512-OtahbC04Mklj2i2WdGlYXc9oN/ntpp2DuNZhqc1l95ioPIZWtlhSzMQKzh6/VmJQZBwwRi8HZwPPjQ1arIkRHA==",
             "peer": true,
             "peerDependencies": {
-                "@babylonjs/core": "^5.22.0",
-                "@babylonjs/gui": "^5.22.0",
+                "@babylonjs/core": "^6.0.0",
+                "@babylonjs/gui": "^6.0.0",
                 "@types/react": ">=16.7.3",
                 "@types/react-dom": ">=16.0.9"
             }
         },
         "node_modules/@babylonjs/inspector": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-5.57.1.tgz",
-            "integrity": "sha512-F40V91R4h+vhlmBs7FHA4qQkFKjJwWF78cUhUgTVwGdwHDRwZ3Pweu26xEfTtw71am26tgHgBZedBTNCokgqtQ==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.43.0.tgz",
+            "integrity": "sha512-Cjw/Xk8v5/84IFi6rhLS363XgDkQzPrfQG7nFKHF6k8OWwz8Ze/cb8O8IeXKEc2QFImCdRnZoDv7BkJnZ03Caw==",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.1.0",
                 "@fortawesome/free-regular-svg-icons": "^6.0.0",
                 "@fortawesome/free-solid-svg-icons": "^6.0.0"
             },
             "peerDependencies": {
-                "@babylonjs/core": "^5.22.0",
-                "@babylonjs/gui": "^5.22.0",
-                "@babylonjs/gui-editor": "^5.22.0",
-                "@babylonjs/loaders": "^5.22.0",
-                "@babylonjs/materials": "^5.22.0",
-                "@babylonjs/serializers": "^5.22.0",
+                "@babylonjs/core": "^6.0.0",
+                "@babylonjs/gui": "^6.0.0",
+                "@babylonjs/gui-editor": "^6.0.0",
+                "@babylonjs/loaders": "^6.0.0",
+                "@babylonjs/materials": "^6.0.0",
+                "@babylonjs/serializers": "^6.0.0",
                 "@types/react": ">=16.7.3",
                 "@types/react-dom": ">=16.0.9"
             }
         },
         "node_modules/@babylonjs/loaders": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-5.57.1.tgz",
-            "integrity": "sha512-DHk0iOwJgnTcj8vI+cQVzpiUvWGJvYqWyZxsf7nzhbeND+ZwNWSG0AelaGbGHpWTaDSd/DjUcoWVZuT4Cg6/Xg==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.43.0.tgz",
+            "integrity": "sha512-+cgw4NDchjc/5dZYGzOEhJU+9++ygYlA+ChybE5yvF+yUDWZ7fGXnEXMFImXeFELjk5RRK1NS3H3YvPe7A+Rug==",
             "peerDependencies": {
-                "@babylonjs/core": "^5.22.0",
-                "babylonjs-gltf2interface": "^5.22.0"
+                "@babylonjs/core": "^6.0.0",
+                "babylonjs-gltf2interface": "^6.0.0"
             }
         },
         "node_modules/@babylonjs/materials": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-5.57.1.tgz",
-            "integrity": "sha512-NLdR6eGUr+wFqie937HRWsnaWPeECpjOrYDGvjjYDg08VAcIC3YyctAuQxv8rId7BoDttkUd8Ey/IZ5d/9H7GA==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.43.0.tgz",
+            "integrity": "sha512-x4pKz2d0IRFZ9pmWIJ4FR/X5mak8Ycl2tAQtOf1ihsanNyDgXnB3Jfgl9z9TaoQSoU2y+HpjvenDF4oaLkXzUw==",
             "peerDependencies": {
-                "@babylonjs/core": "^5.22.0"
+                "@babylonjs/core": "^6.0.0"
             }
         },
         "node_modules/@babylonjs/serializers": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-5.57.1.tgz",
-            "integrity": "sha512-wV7pMhvEP9lf3zjYo2YmQDl2D8V617wONkMuNRj+lpJsD2I2PT7B2wxUqtKVoCY+TyCEM5ns9vn722V7bHZiHg==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.43.0.tgz",
+            "integrity": "sha512-cVFGO98SapRf/QJRQx7+hZkbFnDhXuHK9obDJKKpv/76vSpLWDoLoZk1v1Nu8pm30n75Ukffcco77Za14ZZhFA==",
             "peer": true,
             "peerDependencies": {
-                "@babylonjs/core": "^5.22.0",
-                "babylonjs-gltf2interface": "^5.22.0"
+                "@babylonjs/core": "^6.0.0",
+                "babylonjs-gltf2interface": "^6.0.0"
             }
         },
         "node_modules/@codemirror/autocomplete": {
@@ -2825,45 +2825,45 @@
             }
         },
         "node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.4.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
-            "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+            "version": "6.5.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+            "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
             "hasInstallScript": true,
             "engines": {
                 "node": ">=6"
             }
         },
         "node_modules/@fortawesome/fontawesome-svg-core": {
-            "version": "6.4.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
-            "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+            "version": "6.5.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+            "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
             "hasInstallScript": true,
             "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.4.2"
+                "@fortawesome/fontawesome-common-types": "6.5.1"
             },
             "engines": {
                 "node": ">=6"
             }
         },
         "node_modules/@fortawesome/free-regular-svg-icons": {
-            "version": "6.4.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
-            "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+            "version": "6.5.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz",
+            "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==",
             "hasInstallScript": true,
             "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.4.2"
+                "@fortawesome/fontawesome-common-types": "6.5.1"
             },
             "engines": {
                 "node": ">=6"
             }
         },
         "node_modules/@fortawesome/free-solid-svg-icons": {
-            "version": "6.4.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
-            "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+            "version": "6.5.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+            "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
             "hasInstallScript": true,
             "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.4.2"
+                "@fortawesome/fontawesome-common-types": "6.5.1"
             },
             "engines": {
                 "node": ">=6"
@@ -3197,14 +3197,14 @@
             "dev": true
         },
         "node_modules/@sindarius/gcodeviewer": {
-            "version": "3.7.6",
-            "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-3.7.6.tgz",
-            "integrity": "sha512-6L8znazyJgAJ8IiDTSF1o4DB+iQxszM3WfsQBFcKaSIwUYJVWQIpuccHrXvsvFQB6xQ7WAwrac5grkGfzIrNpA==",
-            "dependencies": {
-                "@babylonjs/core": "^5.53.0",
-                "@babylonjs/inspector": "^5.53.0",
-                "@babylonjs/loaders": "^5.53.0",
-                "@babylonjs/materials": "^5.53.0",
+            "version": "3.7.8",
+            "resolved": "https://registry.npmjs.org/@sindarius/gcodeviewer/-/gcodeviewer-3.7.8.tgz",
+            "integrity": "sha512-/Z9YE/GaVBV4dydju9kJ1uv8/GlffUzjoIGYxlj+kvZnBhP7OZ0ZWviL7zs4d7npSwSw7J+LNYWaIpVW13KQrA==",
+            "dependencies": {
+                "@babylonjs/core": "^6.43.0",
+                "@babylonjs/inspector": "^6.43.0",
+                "@babylonjs/loaders": "^6.43.0",
+                "@babylonjs/materials": "^6.43.0",
                 "d3": "^7.4.4"
             }
         },
@@ -3293,15 +3293,15 @@
             "dev": true
         },
         "node_modules/@types/prop-types": {
-            "version": "15.7.8",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
-            "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==",
+            "version": "15.7.11",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+            "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
             "peer": true
         },
         "node_modules/@types/react": {
-            "version": "18.2.24",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.24.tgz",
-            "integrity": "sha512-Ee0Jt4sbJxMu1iDcetZEIKQr99J1Zfb6D4F3qfUWoR1JpInkY1Wdg4WwCyBjL257D0+jGqSl1twBjV8iCaC0Aw==",
+            "version": "18.2.56",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.56.tgz",
+            "integrity": "sha512-NpwHDMkS/EFZF2dONFQHgkPRwhvgq/OAvIaGQzxGSBmaeR++kTg6njr15Vatz0/2VcCEwJQFi6Jf4Q0qBu0rLA==",
             "peer": true,
             "dependencies": {
                 "@types/prop-types": "*",
@@ -3310,9 +3310,9 @@
             }
         },
         "node_modules/@types/react-dom": {
-            "version": "18.2.8",
-            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.8.tgz",
-            "integrity": "sha512-bAIvO5lN/U8sPGvs1Xm61rlRHHaq5rp5N3kp9C+NJ/Q41P8iqjkXSu0+/qu8POsjH9pNWb0OYabFez7taP7omw==",
+            "version": "18.2.19",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
+            "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
             "peer": true,
             "dependencies": {
                 "@types/react": "*"
@@ -3328,9 +3328,9 @@
             }
         },
         "node_modules/@types/scheduler": {
-            "version": "0.16.4",
-            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz",
-            "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==",
+            "version": "0.16.8",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+            "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
             "peer": true
         },
         "node_modules/@types/semver": {
@@ -4225,9 +4225,9 @@
             }
         },
         "node_modules/babylonjs-gltf2interface": {
-            "version": "5.57.1",
-            "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-5.57.1.tgz",
-            "integrity": "sha512-RZnaKfJ6Q/AYLdIjBYMRxCW/HPEC8jabAL1U8wJ0KVziw6NSbSV6S80S22fUCPTyaZ7nCekn1TYg1IPmJ/eA6w==",
+            "version": "6.43.0",
+            "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-6.43.0.tgz",
+            "integrity": "sha512-+orCb4giE41Ysl8d2ZOeYCRBsT6FnmDwkW9+sHcEACUEpdtFeTShZ+ckucDAB/Ia2e3ah9F2hADbGA/8TfFngg==",
             "peer": true
         },
         "node_modules/balanced-match": {
diff --git a/package.json b/package.json
index f077bb3ac..74cbd5c73 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
         "@codemirror/view": "^6.0.3",
         "@jaames/iro": "^5.5.2",
         "@lezer/highlight": "^1.0.0",
-        "@sindarius/gcodeviewer": "^3.7.6",
+        "@sindarius/gcodeviewer": "^3.7.8",
         "@uiw/codemirror-theme-vscode": "^4.19.11",
         "axios": "^1.6.0",
         "codemirror": "^6.0.1",

From 20de6be9074db740dd871b9ba34644b002f604a1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 17 Feb 2024 20:55:29 +0100
Subject: [PATCH 24/46] fix: fix commit list view on desktop and mobile devices
 (#1785)

---
 .../Machine/UpdatePanel/GitCommitsList.vue    | 88 ++++++++++++-------
 .../UpdatePanel/GitCommitsListDayCommit.vue   |  4 +-
 2 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue b/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue
index 688ff0e4d..cc11e51d5 100644
--- a/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue
+++ b/src/components/panels/Machine/UpdatePanel/GitCommitsList.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-dialog v-model="boolShowDialog" persistent max-width="800">
+    <v-dialog v-model="boolShowDialog" persistent :max-width="800" :fullscreen="isMobile">
         <panel
             :title="$t('Machine.UpdatePanel.Commits')"
             :icon="mdiUpdate"
@@ -11,35 +11,31 @@
                 </v-btn>
             </template>
             <v-card-text class="py-0 px-0">
-                <overlay-scrollbars style="max-height: 400px" :options="{ overflowBehavior: { x: 'hidden' } }">
-                    <v-row>
-                        <v-col>
-                            <v-timeline class="groupedCommits" align-top dense>
-                                <git-commits-list-day
-                                    v-for="group of groupedCommits"
-                                    :key="group.date.getTime()"
-                                    :repo="repo"
-                                    :grouped-commits="group" />
-                                <v-timeline-item
-                                    v-if="displayFullHistoryWaring"
-                                    small
-                                    class="git-commit-list-day git-commit-list-warning">
-                                    <v-row class="pt-0">
-                                        <v-col class="pr-12">
-                                            <v-alert dense text type="info">
-                                                <p>{{ $t('Machine.UpdatePanel.MoreCommitsInfo') }}</p>
-                                                <div class="text-center mb-3">
-                                                    <v-btn :href="linkToGithub" target="_blank">
-                                                        {{ $t('Machine.UpdatePanel.LinkToGithub') }}
-                                                    </v-btn>
-                                                </div>
-                                            </v-alert>
-                                        </v-col>
-                                    </v-row>
-                                </v-timeline-item>
-                            </v-timeline>
-                        </v-col>
-                    </v-row>
+                <overlay-scrollbars :style="overlayScrollbarsStyle" :options="{ overflowBehavior: { x: 'hidden' } }">
+                    <v-timeline :class="timelineClassName" align-top dense style="min-height: 100%">
+                        <git-commits-list-day
+                            v-for="group of groupedCommits"
+                            :key="group.date.getTime()"
+                            :repo="repo"
+                            :grouped-commits="group" />
+                        <v-timeline-item
+                            v-if="displayFullHistoryWaring"
+                            small
+                            class="git-commit-list-day git-commit-list-warning">
+                            <v-row class="pt-0">
+                                <v-col class="pr-12">
+                                    <v-alert dense text type="info">
+                                        <p>{{ $t('Machine.UpdatePanel.MoreCommitsInfo') }}</p>
+                                        <div class="text-center mb-3">
+                                            <v-btn :href="linkToGithub" target="_blank">
+                                                {{ $t('Machine.UpdatePanel.LinkToGithub') }}
+                                            </v-btn>
+                                        </div>
+                                    </v-alert>
+                                </v-col>
+                            </v-row>
+                        </v-timeline-item>
+                    </v-timeline>
                 </overlay-scrollbars>
             </v-card-text>
         </panel>
@@ -110,6 +106,24 @@ export default class GitCommitsList extends Mixins(BaseMixin) {
         return `https://github.com/${this.repo?.owner}/${this.repo?.name}/commits/${this.repo?.branch}/?after=${this.lastCommit?.sha}+0`
     }
 
+    get overlayScrollbarsStyle() {
+        if (this.isMobile) {
+            return {
+                height: 'calc(100vh - 48px)',
+            }
+        }
+
+        return {
+            height: '400px',
+        }
+    }
+
+    get timelineClassName() {
+        if (this.isMobile) return ['groupedCommits', 'mobile']
+
+        return ['groupedCommits']
+    }
+
     closeDialog() {
         this.$emit('close-dialog')
     }
@@ -161,4 +175,18 @@ export default class GitCommitsList extends Mixins(BaseMixin) {
         }
     }
 }
+
+::v-deep .groupedCommits.mobile {
+    &:before {
+        left: 20px;
+    }
+
+    .v-timeline-item__body {
+        max-width: calc(100% - 41px);
+    }
+
+    .v-timeline-item__divider {
+        min-width: 41px;
+    }
+}
 </style>
diff --git a/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue b/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue
index 68854fbc9..44c2a3160 100644
--- a/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue
+++ b/src/components/panels/Machine/UpdatePanel/GitCommitsListDayCommit.vue
@@ -1,6 +1,6 @@
 <template>
     <li class="commit px-3 py-2">
-        <v-row>
+        <v-row class="flex-column flex-sm-row">
             <v-col>
                 <h4 class="subtitle-2 text--white mb-0">
                     {{ title }}
@@ -20,7 +20,7 @@
                     <span>{{ commitFormatDate }}</span>
                 </p>
             </v-col>
-            <v-col class="col-auto pt-4">
+            <v-col class="col-auto pt-0 pt-sm-4">
                 <v-chip outlined label small :href="commitHref" target="_blank">
                     {{ commitShortSha }}
                 </v-chip>

From eaaa19b261d8c3de832eed86e781dcb5279c8963 Mon Sep 17 00:00:00 2001
From: "Michal Dziekonski (mdz)" <michal.dziekonski+github@gmail.com>
Date: Sat, 17 Feb 2024 22:17:23 +0100
Subject: [PATCH 25/46] fix(spoolman): break long comments & support multiline
 comments (#1781)

---
 src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index a5d0ba8fd..2ef2741fa 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -16,7 +16,7 @@
                         </template>
                         <template v-if="spool.comment">
                             <br />
-                            <small>{{ spool.comment }}</small>
+                            <small class="comment">{{ spool.comment }}</small>
                         </template>
                     </v-list-item-title>
                 </v-list-item-content>
@@ -131,4 +131,9 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
 .no--padding {
     padding: 0;
 }
+
+.comment {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
 </style>

From e0bcd7464c89856e0d0c5f35984d198f1eeb830e Mon Sep 17 00:00:00 2001
From: evgarthub <evgart.kiev@gmail.com>
Date: Sun, 18 Feb 2024 19:09:12 +0200
Subject: [PATCH 26/46] locale(uk): update ukrainian translation (#1788)

---
 src/locales/uk.json | 469 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 359 insertions(+), 110 deletions(-)

diff --git a/src/locales/uk.json b/src/locales/uk.json
index 02e6b68ca..684818cc9 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -1,12 +1,16 @@
 {
     "App": {
         "Notifications": {
+            "BrowserWarnings": {
+                "Description": "{name} більше не підтримується. Поточна версія {version}, але Mainsail потребує версію {minVersion} або вище.",
+                "Headline": "Застарілий браузер"
+            },
             "DependencyDescription": "Поточна версія {name} не підтримує всі функції Mainsail. Оновіть {Ім'я} принаймні до {needversion}.",
             "DependencyName": "Залежність: {Ім'я}",
             "DismissAll": "Відкинути всі",
             "KlipperWarnings": {
                 "DeprecatedOption": "Опція '{option}' у розділі '{section}' застаріла і буде видалена у майбутньому випуску.",
-                "DeprecatedOptionHeadline": "Застаріла опція кліппера",
+                "DeprecatedOptionHeadline": "Застаріла опція Klipper",
                 "DeprecatedValue": "Значення '{value}' опції '{option}' у секції '{section}' застаріла і буде видалена у майбутньому випуску.",
                 "DeprecatedValueHeadline": "Застаріле значення Klipper",
                 "KlipperWarning": "Попередження Klipper"
@@ -14,6 +18,8 @@
             "MoonrakerWarnings": {
                 "MoonrakerComponent": "Moonraker: {component}",
                 "MoonrakerFailedComponentDescription": "Помилка була виявлена під час завантаження компонента Moonraker '{component}'. Будь ласка, перевірте файл журналу та виправте проблему.",
+                "MoonrakerFailedInitComponentDescription": "Було виявлено помилку під час ініціалізації компонента moonraker '{component}'. Перевірте файл журналу та виправте проблему.",
+                "MoonrakerInitComponent": "Поч. компонент Moonraker: {component}",
                 "MoonrakerWarning": "Попередження Moonraker",
                 "UnparsedConfigOption": "Непарний параметр конфігурації '{option}: {value}' виявлено в розділі [{section}]. Це може бути варіантом, який більше не доступний, або може бути результатом модуля, який не зміг завантажитися.",
                 "UnparsedConfigSection": "Непарний розділ конфігурації [{section}] виявлений. Це може бути результатом компонента, який не вдалося завантажити.."
@@ -30,8 +36,16 @@
             "NoEmptyAllowedError": "Поле не повинно бути порожнім!"
         },
         "Printers": "Принтери",
+        "TextfieldWithCopy": {
+            "Copied": "Скопійовано"
+        },
+        "TheServiceWorker": {
+            "DescriptionNeedUpdate": "Локальний кеш застарів і потребує оновлення. Щоб оновити кеш, натисніть кнопку нижче.",
+            "TitleNeedUpdate": "Веб додаток потребує оновлення",
+            "Update": "оновити"
+        },
         "ThrottledStates": {
-            "DescriptionCurrentlyThrottled": "Ядро (и) RPI ARM в даний час зменьшуються.",
+            "DescriptionCurrentlyThrottled": "Ядро (и) RPI ARM в даний час зменшується.",
             "DescriptionFrequencyCapped": "Частота Max ARM RPI наразі обмежена 1,2 ГГц.",
             "DescriptionPreviouslyFrequencyCapped": "Частота Max ARM RPI принаймні раз була обмежена 1,2 ГГц з останнього ввімкнення.",
             "DescriptionPreviouslyTemperatureLimited": "Температура RPI UC (3a+/3b+) була принаймні раз вище за легке обмеження (за замовчуванням 60°) з останнього ввімкнення.",
@@ -52,16 +66,17 @@
             "Complete": "Завершено - {filename}",
             "Error": "Помилка",
             "Pause": "Призупинення друку",
+            "PrinterOff": "Принтер вимкнений",
             "Printing": "{percent}% Друк - {filename}",
             "PrintingETA": "{percent}% Друк - Очікуваний час: {eta} - {filename}"
         },
         "TopBar": {
             "CannotUploadTheFile": "Не вдається завантажити файл!",
             "EmergencyStop": "АВАРІЙНА ЗУПИНКА",
-            "SAVE_CONFIG": "ЗБЕРЕЖЕННЯ КОНФІГУРАЦІЇ",
+            "SAVE_CONFIG": "ЗБЕРЕГТИ КОНФІГУРАЦІЮ",
             "Uploading": "Завантаження",
             "UploadOfFileSuccessful": "Завантаження {file} успішно!",
-            "UploadPrint": "Завантажити та Друканутити"
+            "UploadPrint": "Завантажити та надрукувати"
         },
         "TopCornerMenu": {
             "Cancel": "Скасувати",
@@ -71,10 +86,10 @@
                     "HostShutdown": "Вимкнення хоста призведе до зупинки поточного друку!",
                     "KlipperFirmwareRestart": "Перезапуск прошивки Klipper призведе до зупинки поточного друку!",
                     "KlipperRestart": "Перезапуск Klipper призведе до зупинки поточного друку!",
-                    "KlipperStop": "Зупинення Кліппера призведе до зупинки поточного друку! ",
+                    "KlipperStop": "Зупинення Klipper призведе до зупинки поточного друку! ",
                     "ServiceRestart": "Перезапуск цього сервісу може призвести до виходу з ладу поточного друку!",
-                    "ServiceStart": "Запуск цього сервіса може призвести до виходу з ладу поточного друку!",
-                    "ServiceStop": "Зупинення цього сервіса може призвести до виходу з ладу поточного друку!"
+                    "ServiceStart": "Запуск цього сервісу може призвести до виходу з ладу поточного друку!",
+                    "ServiceStop": "Зупинення цього сервісу може призвести до виходу з ладу поточного друку!"
                 },
                 "Title": {
                     "HostReboot": "Перезавантаження хоста",
@@ -107,6 +122,17 @@
             "UpdatingDone": "Оновлення {software} виконано!"
         }
     },
+    "BedScrews": {
+        "Abort": "перервати",
+        "Accept": "прийняти",
+        "Adjusted": "відрегульований",
+        "Description": "Натисніть <b>ADJUSTED</b>, якщо поточний гвинт було відрегульовано. Натисніть <b>ACCEPT</b>, щоб продовжити без коригування.",
+        "Headline": "Гвинти столу",
+        "ScrewAccepted": "Готові гвинти",
+        "ScrewIndex": "Індекс гвинта",
+        "ScrewName": "Ім'я гвинта",
+        "ScrewOutput": "{current} з {max}"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Не вдається підключитися до Moonraker ({host}).",
         "CheckMoonrakerLog": "Якщо це повідомлення з’являється неодноразово, будь ласка, подивіться у файл журналу, розташований за адресою:",
@@ -123,10 +149,25 @@
         "SendCode": "Надіслати код...",
         "SetupConsole": "Консоль налаштування"
     },
+    "DevicesDialog": {
+        "CanBusInfo": "Можна виявити лише непризначені вузли. Рекомендується мати лише один непризначений пристрій, підключений до шини can, щоб уникнути проблем зі зв’язком. Щоб отримати детальнішу інформацію, натисніть на посилання:",
+        "ClickRefresh": "Натисніть кнопку оновити, щоб знайти пристрої.",
+        "DevicePath": "Шлях пристрою",
+        "Formats": "Формати",
+        "Headline": "Пристрої",
+        "HideSystemEntries": "Приховати системні записи",
+        "LibcameraId": "Libcamera ID",
+        "NoDeviceFound": "Пристрій не знайдено. Перевірте підключення та натисніть кнопку оновити.",
+        "PathByHardware": "Фізичний шлях",
+        "PathById": "Шлях за ID",
+        "Refresh": "оновити",
+        "Resolutions": "Резолюції"
+    },
     "Dialogs": {
         "StartPrint": {
             "Cancel": "Скасувати",
             "DoYouWantToStartFilename": "Ви хочете роздрукувати {filename}?",
+            "DoYouWantToStartFilenameFilament": "Хочете почати друк {filename} з наявного філаменту?",
             "Headline": "Почати друк",
             "Print": "друк",
             "Timelapse": "Таймлапс"
@@ -134,6 +175,7 @@
     },
     "Editor": {
         "ConfigReference": "Довідка Конфігурації",
+        "DeviceDialog": "Пристрої",
         "DontSave": "Не зберігати",
         "Downloading": "Завантаження",
         "FailedSave": "{filename} не вдалося завантажити!",
@@ -149,15 +191,17 @@
     "EmergencyStopDialog": {
         "AreYouSure": "Ви впевнені?",
         "EmergencyStop": "АВАРІЙНА ЗУПИНКА",
-        "No": "НІТ",
+        "No": "НІ",
         "Yes": "ТАК"
     },
     "Files": {
+        "AddBatchToQueue": "Додати партію в чергу",
         "AddToQueue": "Додати в чергу",
         "AllFiles": "ВСІ",
         "BedTemp": "t° Столу.",
         "Cancel": "Скасувати",
         "ChamberTemp": "t° Камери.",
+        "Count": "Кількість",
         "Create": "Створити",
         "CreateNewDirectory": "Створити нову теку",
         "CurrentPath": "Директорія",
@@ -165,11 +209,13 @@
         "DeleteDirectory": "Видалити теку",
         "DeleteDirectoryQuestion": "Ви дійсно хочете видалити \"{name}\" теку із усім її вмістом?",
         "DeleteSelectedQuestion": "Ви дійсно хочете видалити {count} обрані файли?",
+        "DeleteSingleFileQuestion": "Ви дійсно хочете видалити файл \"{name}\"?",
         "Download": "Завантажити",
+        "Duplicate": "Дублікат",
+        "DuplicateFile": "Дублікат файлу",
         "EditFile": "Редагувати Файл",
         "Empty": "Порожньо",
         "ExtruderTemp": "t° Екструдеру.",
-        "Filament": "Пруток",
         "FilamentName": "Назва Прутка",
         "FilamentType": "Тип Прутка",
         "FilamentUsage": "Використано Прутка",
@@ -181,6 +227,8 @@
         "GCodeFiles": "Файли G-Code",
         "GcodesRootDirectoryDoesntExists": "Жодного каталогу G-коду не знайдено. Будь ласка, перевірте опцію \"path\" in the [virtual_sdcard] розділі конфігурації Klipper.",
         "HiddenFiles": "Приховані файли",
+        "InvalidNameAlreadyExists": "Ім'я вже існує, виберіть інше ім'я.",
+        "InvalidNameEmpty": "Поле не повинне бути порожнім!",
         "LastEndTime": "Закінчено",
         "LastFilamentUsed": "Використано прутку",
         "LastModified": "Завантажено",
@@ -196,10 +244,12 @@
         "PrintedFiles": "Надруковані Файли",
         "PrintStart": "Почати Друк",
         "PrintTime": "Час Друку",
-        "RefreshCurrentDirectory": "Оновити поточну дирикторію",
+        "RefreshCurrentDirectory": "Оновити поточну директорію",
         "Rename": "Перейменувати",
         "RenameDirectory": "Перейменувати директорію",
         "RenameFile": "Перейменувати Файл",
+        "ScanMeta": "Сканувати метадані",
+        "ScanMetaSuccess": "Успішно проскановано метадані з: {filename}",
         "Search": "Пошук",
         "SetupCurrentList": "Поточний список налаштування",
         "Slicer": "Слайсер",
@@ -219,6 +269,7 @@
     },
     "GCodeViewer": {
         "ClearLoadedFile": "Очистити",
+        "CNCMode": "Режим ЧПД",
         "ColorMode": "Кольоровий Режим",
         "Downloading": "Завантаження",
         "ForceLineRendering": "Примусова лінійна Візуалізація",
@@ -229,9 +280,10 @@
         "Low": "Низько",
         "Max": "Максимум",
         "Medium": "Середньо",
-        "ReloadRequired": "Потрібно перезавантаження",
+        "ReloadRequired": "Потрібне перезавантаження",
         "Rendering": "Візуалізація",
         "RenderQuality": "Якість Візуалізації",
+        "ShowGCode": "Показати G-Code",
         "ShowObjectSelection": "Показати Вибір Об'єктів",
         "ShowToolhead": "Показати Інструмент",
         "ShowTravelMoves": "Показати Вільні Переміщення",
@@ -253,8 +305,8 @@
             "Max": "Max",
             "Min": "Min",
             "Name": "Ім'я",
-            "Size": "Розмір",
-            "Variance": "Розбіжність"
+            "Range": "Діапазон",
+            "Size": "Розмір"
         },
         "DeleteBedMeshProfile": "Видалити профіль сітки для столу",
         "DoYouReallyWantToDelete": "Ви дійсно хочете видалити профіль \"{name}\"?",
@@ -262,36 +314,36 @@
         "Flat": "Плоский",
         "Heightmap": "Карта",
         "InvalidNameAlreadyExists": "Ім'я профілю вже існує, будь ласка, виберіть інше ім'я профілю.",
+        "InvalidNameAscii": "Ім'я недійсне. Дозволяється лише символи ascii.",
         "InvalidNameEmpty": "Введення не повинно бути порожнім!",
         "InvalidNameReserved": "Profile 'default' зарезервовано, будь ласка, виберіть інше ім'я профілю.",
-        "Later": "Згодом",
         "Mesh": "Сітка",
         "Name": "Ім'я",
         "NoBedMeshHasBeenLoadedYet": "Жодна сітка для ліжка ще не була завантажена.",
         "NoProfile": "Немає профілю",
-        "Ok": "OK",
         "Probed": "Зондований",
         "Profiles": "Профілі",
         "Remove": "видалити",
-        "RemoveSaveDescription": "Профіль BED_MESH зареєстрований як видалений. Клацніть на SAVE_CONFIG, щоб видалити його з printer.cfg та перезапустіть Klipper.",
         "Rename": "перейменувати",
         "RenameBedMeshProfile": "Перейменуйте профіль сітки для столу",
-        "SAVE_CONFIG": "SAVE_CONFIG",
         "ScaleGradient": "Градієнт Масштабу",
         "ScaleZMax": "Масштаб Z-Max.",
         "TitleCalibrate": "Калібрування нової сітки столу",
-        "TitleClear": "Очистити сітку калібровки",
+        "TitleClear": "Очистити сітку калібрування",
         "TitleHomeAll": "Всі до Дому",
         "Wireframe": "Каркас"
     },
     "History": {
         "AddNote": "Додати коментар",
+        "AddToQueueSuccessful": "Файл {filename} додано до черги.",
         "AllJobs": "ВСІ",
         "AvgPrinttime": "Час Друку - Ø",
         "Cancel": "Скасувати",
+        "Chart": "Графік",
         "CreateNote": "Створити Примітку",
         "Delete": "Видалити",
-        "DeleteSelectedQuestion": "Ви дійсно хочете видалити {count} вибрану роботу?",
+        "DeleteSelectedQuestion": "Ви дійсно хочете видалити {count} вибране завдання?",
+        "DeleteSingleJobQuestion": "Ви справді хочете видалити завдання?",
         "Details": "Деталі",
         "EditNote": "Редагувати Примітку",
         "Empty": "порожньо",
@@ -300,7 +352,7 @@
         "EstimatedFilamentWeight": "Орієнтовна вага прутка",
         "EstimatedTime": "Орієнтовний Час",
         "FilamentCalc": "Калькулятор Прутка",
-        "FilamentUsage": "Використаня Прутка",
+        "FilamentUsage": "Використання Прутка",
         "FilamentUsed": "Використано Прутка",
         "Filename": "Ім'я",
         "Filesize": "Розмір",
@@ -309,22 +361,23 @@
         "FirstLayerHeight": "Висота першого шару",
         "HistoryFilamentUsage": "Пруток",
         "HistoryPrinttimeAVG": "Друк",
-        "JobDetails": "Деталі Роботи",
-        "Jobs": "Робота",
+        "JobDetails": "Деталі Завдань",
+        "Jobs": "Завдання",
         "LastModified": "Дата Створення",
         "LayerHeight": "Висота Шару",
+        "LoadCompleteHistory": "Завантажити повну історію",
         "LongestPrinttime": "Найдовший Час Друку",
         "Note": "Примітка",
         "ObjectHeight": "Висота Об'єкта",
         "PrintDuration": "Час Друку",
-        "PrintHistory": "Історія Роздруківок",
+        "PrintHistory": "Історія друку",
         "PrintTime": "Час Друку",
         "PrinttimeAvg": "Час Друку - Ø",
         "Reprint": "Передрукувати",
-        "Save": "зберігти",
+        "Save": "зберегти",
         "Search": "пошук",
-        "SelectedFilamentUsed": "Вибран використовуваний пруток",
-        "SelectedJobs": "Вибрані Роботи",
+        "SelectedFilamentUsed": "Використано філаменту",
+        "SelectedJobs": "Вибрані завдання",
         "SelectedPrinttime": "Вибраний Час Друку",
         "Slicer": "Слайсер",
         "SlicerVersion": "Версія Слайсера",
@@ -336,28 +389,32 @@
             "completed": "Закінчені",
             "error": "Помилкові",
             "in_progress": "Триває",
+            "interrupted": "Перерваний",
             "klippy_disconnect": "Klippy відключився",
-            "klippy_shutdown": "Помилка Кліпперу",
+            "klippy_shutdown": "Помилка Klipper",
             "Others": "Інші",
             "server_exit": "Вихід сервера"
         },
+        "Table": "Таблиця",
         "TitleExportHistory": "Історія Експорту",
-        "TitleRefreshHistory": "Оновити Історію",
-        "TitleSettings": "Налаштування",
         "TotalDuration": "Загальний Час",
-        "TotalFilamentUsed": "Використано Прутка",
-        "TotalJobs": "Всі Роботи",
+        "TotalFilamentUsed": "Використано філаменту",
+        "TotalJobs": "Всі завдання",
         "TotalPrinttime": "Загальний Час Друку",
         "TotalTime": "Загальний Час"
     },
     "JobQueue": {
-        "AllJobs": "Всі Роботи",
+        "Cancel": "Скасувати",
+        "ChangeCount": "Змінити кількість",
+        "Count": "Кількість",
         "Empty": "Порожньо",
-        "JobQueue": "Черга Робіт",
-        "Jobs": "Роботи",
+        "InvalidCountEmpty": "Поле не повинне бути порожнім!",
+        "InvalidCountGreaterZero": "Значення має бути більше 0!",
+        "JobQueue": "Черга завдань",
         "Pause": "Пауза",
         "RemoveFromQueue": "Видаліть з Черги",
-        "Start": "Почати"
+        "Start": "Почати",
+        "StartPrint": "Почати завдання"
     },
     "Machine": {
         "ConfigFilesPanel": {
@@ -373,7 +430,10 @@
             "DeleteDirectory": "Видалити директорію",
             "DeleteDirectoryQuestion": "Видалити директорію \"{name}\" і весь її вміст?",
             "DeleteSelectedQuestion": "Видалити {count} вибрані елементи?",
+            "DeleteSingleFileQuestion": "Ви дійсно хочете видалити файл \"{name}\"?",
             "Download": "Завантажити",
+            "Duplicate": "Дублікат",
+            "DuplicateFile": "Дублікат файлу",
             "EditFile": "Редагувати файл",
             "Empty": "Порожньо",
             "Files": "Файл",
@@ -404,15 +464,21 @@
             "TRIGGERED": "ЗАМКНЕНО"
         },
         "LogfilesPanel": {
-            "Logfiles": "Журнали"
+            "Accept": "прийняти",
+            "Cancel": "скасувати",
+            "Logfiles": "Журнали",
+            "Rollover": "Журнали переходів",
+            "RolloverDescription": "Виберіть, які журнали потрібно скинути:",
+            "RolloverToastFailed": "Перехідний журнал для \"{name}\": {message}",
+            "RolloverToastSuccessful": "Журнал для \"{name}\" успішно скинуто."
         },
         "SystemPanel": {
             "Constants": "Константи",
-            "Cpu": "ЦПК",
+            "Cpu": "CPU",
             "HostDetails": "Деталі хоста",
             "LastStats": "Остання статистика",
             "Load": "Навантаження",
-            "Memory": "ОЗУ",
+            "Memory": "RAM",
             "NoMoreInfos": "Більше немає Infos",
             "SystemLoad": "Навантаження системи",
             "Values": {
@@ -421,8 +487,8 @@
                 "Distro": "Дистрибутив: {name} {version_id}",
                 "Frequency": "Частота: {frequency}",
                 "Load": "Навантаження: {load}",
-                "Memory": "ОЗУ: {memory}",
-                "Os": "Операційка: {os}",
+                "Memory": "RAM: {memory}",
+                "Os": "Операційна Система: {os}",
                 "Received": "Отримано: {received}",
                 "Temp": "t° проц.: {temp}°C",
                 "TempMax": "макс: {temp}°C",
@@ -432,38 +498,68 @@
             }
         },
         "UpdatePanel": {
+            "Abort": "Перервати",
+            "AreYouSure": "Ти впевнений?",
             "CheckForUpdates": "Перевірити оновлення",
-            "Commits": "Коментар",
-            "CommitsAvailable": "Немає коментарів | {count} доступний коментар | {count} Доступні",
-            "CommitsOnDate": "Коментар від {date}",
-            "CommittedDaysAgo": "Прокоментовано {days} днів тому",
-            "CommittedHoursAgo": "Прокоментовано {hours} годин тому",
-            "CommittedOnDate": "Прокоментовано {date}",
-            "CommittedYesterday": "Сьогоднішній комент",
+            "Close": "Закрити",
+            "CommitHistory": "Історія комітів",
+            "Commits": "Коміт",
+            "CommitsAvailable": "Немає комітів | {count} доступний коміт | {count} доступних комітів",
+            "CommitsOnDate": "Коміт від {date}",
+            "CommittedDaysAgo": "Коміт {days} днів тому",
+            "CommittedHoursAgo": "Коміт {hours} годин тому",
+            "CommittedOnDate": "Коміт {date}",
+            "CommittedYesterday": "Коміт вчорашній",
+            "ConfigChanges": "Зміни конфігурації",
+            "Corrupt": "пошкоджений",
+            "CountPackagesCanBeUpgraded": "{count} пакетів можна оновити",
             "Detached": "відокремлений",
             "Dirty": "брудний",
-            "ERROR": "ПОМИЛКА",
+            "GenericUpdateQuestion": "Перевірте історію комітів (якщо доступна) і сторінку GitHub для цього пакету, щоб дізнатися, чи потрібні якісь ручні налаштування для цього оновлення.",
+            "GitHubPage": "Сторінка GitHub",
+            "HardRecovery": "Повне скидання",
+            "InitUpdateManager": "Менеджер оновлень ще не ініціалізовано. Це нормально, коли ви запускаєте систему вперше. Натисніть кнопку оновити, щоб ініціалізувати всі компоненти.",
             "Invalid": "недійсний",
+            "IUnderstandTheRisks": "Я розумію ризики",
+            "KlipperUpdateQuestionConfig": "Це оновлення також може містити зміни в параметрах конфігурації, які потрібно буде змінити у файлі printer.cfg, подробиці дивіться в журналі змін.",
+            "KlipperUpdateQuestionFirmware": "Це призведе до оновлення програмного забезпечення Klipper хоста. Плати керування (MCU), на яких працює мікропрограмне забезпечення Klipper, можливо, потребуватиме перепрошивки за допомогою перекомпільованого мікропрограмного забезпечення, перш ніж принтер можна буде знову ввести в експлуатацію.",
+            "LinkToGithub": "Посилання на GitHub",
+            "MoonrakerUpdateQuestion": "Це оновить Moonraker API. Для продовження використання принтера можуть знадобитися зміни у файлі moonraker.conf.",
+            "MoreCommitsInfo": "Тут відображено максимум 30 комітів. Щоб переглянути всі коміти, перейдіть за посиланням:",
             "OSPackages": "ОС-Пакети",
-            "PackagesCanBeUpgraded": "пакети можна оновити",
+            "SoftRecovery": "Часткове відновлення",
+            "StartUpdate": "Почати оновлення",
             "System": "Система",
+            "ThesePackagesCanBeUpgrade": "Ці системні пакети можна оновити:",
             "Unknown": "невідомо",
             "Update": "оновити",
-            "UpdateAll": "Оновіть усі компоненти",
+            "UpdateAll": "Оновити всі",
             "UpdateManager": "Менеджер Оновлень",
+            "UpdateWarning": "Попередження про оновлення: {name}",
             "Upgrade": "оновити",
-            "UpToDate": "актуальний"
+            "UpgradeableSystemPackages": "Системні пакети що можна оновити",
+            "UpToDate": "актуальний",
+            "WebClientUpdateQuestion": "У деяких випадках оновлення веб-клієнт має зміни, які можуть спричинити несумісність. Для отримання додаткової інформації див. примітки до релізу."
         }
     },
+    "ManualProbe": {
+        "Abort": "перервати",
+        "Accept": "прийняти",
+        "Advanced": "Просунутий",
+        "Headline": "Проба вручну"
+    },
     "Panels": {
         "ExtruderControlPanel": {
             "Allowed": "Допущений",
+            "CleanNozzle": "Очистити сопло",
             "EstimatedExtrusion": "Розрахункова екструзія:",
             "Extrude": "Видавити",
+            "ExtruderControl": "Керування екструдером",
             "ExtruderTempTooLow": " t° екструдера. <",
             "ExtrusionFactor": "Коефіцієнт ЕКСТРУЗІЇ",
             "ExtrusionFeedrate": "Екструзійна подача",
-            "FilamentLength": "Продавити на",
+            "FilamentLength": "Довжина філаменту",
+            "FirmwareRetraction": "Програмний ретракт",
             "FirmwareRetractionSettings": {
                 "RetractLength": "Довжина Ретракту",
                 "RetractSpeed": "Швидкість Ретракту",
@@ -472,41 +568,50 @@
             },
             "Headline": "Екструдер",
             "LoadFilament": "Завантажити Пруток",
+            "PressureAdvance": "Pressure Advance",
             "PressureAdvanceSettings": {
                 "Advance": "Pressure Advance",
                 "Extruder": "Екструдер",
                 "SmoothTime": "Плавний Час"
             },
-            "Requested": "Запитуваний",
+            "PurgeFilament": "Purge філаменту",
+            "Requested": "Заданий",
             "Retract": "Ретракт",
             "TooLargeExtrusion": "Екструзія занадто велика!",
-            "UnloadFilament": "Вигрузка Прутка"
+            "Tools": "Інструменти",
+            "UnloadFilament": "Вивантаження філаменту"
         },
         "FarmPrinterPanel": {
-            "ReconnectToPrinter": "Переподключення",
+            "ReconnectToPrinter": "Перепідключення",
             "SwitchToPrinter": "Перемкнутися на Принтер",
             "WebcamOff": "ВИМК"
         },
         "KlippyStatePanel": {
+            "CheckKlippyAndUdsAddress": "Будь ласка, перевірте, чи працює служба Klipper і чи правильно налаштовано klippy_uds_address у файлі moonraker.conf.",
             "FirmwareRestart": "Перезапуск Прошивки",
-            "KlipperCheck": "Будь ласка, перевірте, чи працює служба Klipper та налаштована UDS (UNIX домен).",
             "MoonrakerCannotConnect": "Moonraker не може підключитися до Klipper!",
-            "Restart": "Перезапустити"
+            "PowerOn": "Увімкнено",
+            "PrinterSwitchedOff": "Принтер вимкнений",
+            "PrinterSwitchedOffDescription": "Принтер наразі вимкнено, і Klipper не може підключитися. Щоб увімкнути принтер, натисніть кнопку нижче:",
+            "Restart": "Перезапустити",
+            "ServiceReports": "{service} повідомляє"
         },
         "MachineSettingsPanel": {
             "Headline": "Машина",
             "MotionSettings": {
                 "Acceleration": "Прискорення",
-                "MaxAccelToDecel": "Max Accel. to Decel.",
+                "MaxAccelToDecel": "Макс. прискорення до сповільнення.",
+                "MinimumCruiseRatio": "Мін. коефіцієнт руху",
                 "SquareCornerVelocity": "Квадратна кутова швидкість",
                 "Velocity": "Швидкість"
             }
         },
         "MacrosPanel": {
             "Headline": "Макрос",
-            "Send": "надсилати"
+            "Send": "відправити"
         },
         "MiniconsolePanel": {
+            "Autoscroll": "Автопрокручування",
             "Headline": "Консоль",
             "HideTemperatures": "Сховати температуру",
             "HideTimelapse": "Сховати таймлапс",
@@ -521,26 +626,57 @@
         },
         "MiscellaneousPanel": {
             "Headline": "Різне",
+            "Light": {
+                "Blue": "блакитний",
+                "Green": "зелений",
+                "Red": "червоний",
+                "White": "білий"
+            },
             "RunoutSensor": {
                 "Detected": "виявлено",
-                "Disabled": "Не активно",
                 "Empty": "Порожньо"
             }
         },
         "PowerControlPanel": {
             "Error": "Помилка",
             "Off": "ВИМК",
-            "On": "ВВІМК",
+            "On": "УВІМК",
             "PowerControl": "Управління Живленням"
         },
+        "SpoolmanPanel": {
+            "Cancel": "Скасувати",
+            "ChangeSpool": "Зміна шпулі",
+            "DaysAgo": "{days} днів тому",
+            "EjectSpool": "Прибрати шпулю",
+            "EjectSpoolQuestion": "Ви впевнені, що хочете прибрати шпулю з філаментом?",
+            "Filament": "Філамент",
+            "FilamentTypeMismatch": "Матеріал активної шпулі ({spoolType}) не збігається з матеріалом G-коду ({fileType}).",
+            "Headline": "Spoolman",
+            "LastUsed": "Останнє використання",
+            "Location": "Місцезнаходження",
+            "Material": "Матеріал",
+            "Never": "Ніколи",
+            "NoActiveSpool": "Відстеження філаменту неактивне. Щоб почати, будь ласка, виберіть котушку.",
+            "NoResults": "За поточними критеріями пошуку шпулю не знайдено.",
+            "NoSpools": "Немає шпуль",
+            "NoSpoolSelected": "Шпулю не вибрано. Виберіть шпулю, інакше цей друк не відстежуватиметься.",
+            "OpenSpoolManager": "відкрити менеджер шпуль",
+            "Refresh": "оновити",
+            "Search": "Пошук",
+            "SelectSpool": "Виберіть шпулю",
+            "Today": "Сьогодні",
+            "TooLessFilament": "У поточній котушці може бути недостатньо філаменту для цього друку. ({spoolWeight}г з {fileWeight}г)",
+            "Weight": "Вага",
+            "Yesterday": "Вчора"
+        },
         "StatusPanel": {
             "CancelPrint": "Скасувати друк",
             "ClearPrintStats": "Чітка статистика друку",
             "Difference": "Різниця",
             "EmptyGcodes": "Немає G-коду, що доступний.",
-            "EmptyJobqueue": "Наразі в черзі роботи немає файлу.",
+            "EmptyJobqueue": "Наразі в черзі завдань немає файлу.",
             "Estimate": "Оцінка",
-            "ETA": "Час Закінченя",
+            "ETA": "Час закінчення",
             "ExcludeObject": {
                 "Cancel": "скасувати",
                 "Excluded": "Виключений",
@@ -548,21 +684,33 @@
                 "ExcludeObjectHeadline": "Виключіть Об'єкт",
                 "ExcludeObjectText": "Ви дійсно хочете виключити \"{name}\"?"
             },
-            "Filament": "Пруток",
+            "Filament": "Філамент",
             "File": "Файл",
             "Files": "Файли",
             "Flow": "Потік",
             "Headline": "Статус",
-            "Jobqueue": "Черга робіт",
-            "JobqueueMoreFiles": "більше нема робіт | ще одна робота | {count} більше робіт",
+            "Jobqueue": "Черга завдань",
+            "JobqueueMoreFiles": "більше нема робіт | ще одне завдання | {count} більше завдань",
             "Layer": "Шар",
             "Max": "макс",
             "ObjectHeight": "Висота Об'кта",
+            "PauseAtLayer": {
+                "Abort": "перервати",
+                "Accept": "прийняти",
+                "AtLayer": "на Шарі",
+                "Call": "Виклик",
+                "DescriptionPauseAtLayerActive": "Ця функція вже активна та викличе \"{call}\" на шарі {layer}. Якщо ви знову викличете команду, ці параметри буде перезаписано.",
+                "DescriptionPauseNextLayerActive": "Ця функція вже активна та викличе \"{call}\" на наступному шарі.",
+                "Layer": "Шар",
+                "NextLayer": "наступний шар",
+                "PauseAtLayer": "Пауза на шарі",
+                "Type": "Тип"
+            },
             "PausePrint": "Призупинення друку",
             "Print": "Друк",
             "PrintTime": "Час Друку",
             "ReprintJob": "Роздруковано",
-            "Requested": "Запитуваний",
+            "Requested": "Встановлено",
             "ResumePrint": "Відновити друк",
             "Slicer": "Слайсер",
             "Speed": "Швидкість",
@@ -581,7 +729,9 @@
                 "Target": "цільова температура",
                 "Temperature": "поточна температура"
             },
-            "Headline": "Температури",
+            "Headline": "Температура",
+            "HideMcuHostSensors": "Приховати датчики хоста/MCU",
+            "HideMonitors": "Приховати монітори",
             "Max": "макс",
             "Min": "мін",
             "Name": "Ім'я",
@@ -599,18 +749,22 @@
         "ToolheadControlPanel": {
             "Absolute": "абсолютні",
             "ALL": "ВСІ",
+            "ControlButtons": "Кнопки управління",
+            "CoordinateFields": "Поля координат",
             "Headline": "Інструмент",
             "PleaseConfigureSteps": "Будь ласка, налаштуйте кроки",
             "Position": "Положення",
+            "PositionOutput": "Розташування",
             "QGL": "QGL",
             "Relative": "відносні",
             "SettingsInterfaceControl": "Налаштування > Інтерфейс > Контроль",
-            "SpeedFactor": "Коефіцієнт ШВИДКОСТІі",
+            "SpeedFactor": "Коефіцієнт ШВИДКОСТІ",
+            "ZOffset": "Z-Offset",
             "ZTilt": "Z-Нахил"
         },
         "WebcamPanel": {
             "All": "ВСІ",
-            "FPS": "ФПС",
+            "FPS": "FPS",
             "Headline": "Веб-камера",
             "NoWebcam": "Немає веб-камери. Додайте веб -камеру \"Налаштування Інтерфейсу\" -> \"Веб-камери\".",
             "UnknownWebcamService": "Невідома служба веб-камери"
@@ -618,22 +772,20 @@
         "ZoffsetPanel": {
             "Clear": "Очистити",
             "Headline": "Z-Offset",
-            "Later": "Згодом",
+            "Later": "Пізніше",
             "Ok": "OK",
             "Save": "Зберегти",
-            "SaveConfig": "SAVE CONFIG",
-            "SaveInfoDescription": "Новий Z-Offset був обчислений та зареєстрований. Натисніть на \"SAVE CONFIG\" Щоб зберегти його на printer.cfg та перезапустити Klipper.",
-            "SaveInfoDescriptionPrint": "Новий Z-Offset був обчислений та зареєстрований. Після друку натисніть на \"SAVE CONFIG\" у верхній панелі, щоб зберегти його у printer.cfg та перезапустити Klipper.",
-            "SaveInfoHeadline": "Інформація",
-            "ToEndstop": "до Кінцевика",
-            "ToProbe": "Зондувати"
+            "SaveConfig": "ЗБЕРЕГТИ КОНФІГУРАЦІЮ",
+            "SaveInfoDescription": "Новий Z-Offset був обчислений та зареєстрований. Натисніть на \"ЗБЕРЕГТИ КОНФІГУРАЦІЮ\" Щоб зберегти його на printer.cfg та перезапустити Klipper.",
+            "SaveInfoDescriptionPrint": "Новий Z-Offset був обчислений та зареєстрований. Після друку натисніть на \"ЗБЕРЕГТИ КОНФІГУРАЦІЮ\" у верхній панелі, щоб зберегти його у printer.cfg та перезапустити Klipper.",
+            "SaveInfoHeadline": "Інформація"
         }
     },
     "PowerDeviceChangeDialog": {
         "AreYouSure": "Ви впевнені?",
-        "No": "НІТ",
+        "No": "НІ",
         "TurnDeviceOff": "Поворот {device} ВИМК",
-        "TurnDeviceOn": "Поворот {device} ВВІМК",
+        "TurnDeviceOn": "Поворот {device} УВІМК",
         "Yes": "ТАК"
     },
     "Router": {
@@ -648,6 +800,13 @@
         "Timelapse": "Таймлапс",
         "Webcam": "Веб-камера"
     },
+    "ScrewsTiltAdjust": {
+        "Accept": "прийняти",
+        "Base": "Основа",
+        "ErrorText": "Щось пішло не так під час процесу взяття проби.",
+        "Headline": "Гвинти регулювання нахилу",
+        "Retry": "повторити спробу"
+    },
     "SelectPrinterDialog": {
         "AddPrinter": "Додати Принтер",
         "AddPrintersToJson": "Будь ласка, додайте принтери до config.json.",
@@ -659,7 +818,7 @@
         "Hello": "Привіт і ласкаво просимо до віддаленого режиму Mainsail!",
         "HostnameInvalid": "Недійсне ім'я хоста/IP",
         "HostnameIp": "Ім'я хоста/IP",
-        "HostnameRequired": "Ім'я хоста потрібно",
+        "HostnameRequired": "Необхідне ім'я хоста",
         "Port": "Порт",
         "PortRequired": "Потрібен порт",
         "RememberToAdd": "Будь ласка, не забудьте додати '{cors}' у moonraker.conf всередині 'cors_domains'.",
@@ -676,10 +835,10 @@
             "Console": "Консоль",
             "CreateHeadline": "Створити фільтр",
             "Direction": "Напрямок",
-            "DirectionShell": "Останній запис унизу",
-            "DirectionTable": "Останній запис у верхній частині",
+            "DirectionShell": "Останній запис внизу",
+            "DirectionTable": "Останній запис звурху",
             "EditHeadline": "Редагувати фільтр",
-            "EntryStyle": "Entry-Дизайн",
+            "EntryStyle": "Початковий дизайн",
             "EntryStyleCompact": "компактний",
             "EntryStyleDefault": "за замовчуванням",
             "Filters": "Фільтри",
@@ -692,13 +851,14 @@
             "UpdateButton": "Оновити фільтр"
         },
         "ControlTab": {
-            "Bars": "Брус",
-            "Circle": "Кола",
+            "Bars": "Вкладка",
+            "Circle": "Коло",
             "Control": "Контроль",
             "Cross": "Перехрестя",
             "EnableXYHoming": "Увімкнути комбіноване наведення вісь X і Y до дому",
             "EstimatedExtrusionInfo": "Показати орієнтовну інформацію про екструзію",
             "EstimatedExtrusionInfoDescription": "Показати / приховати інформацію про орієнтовні екструзії на основі кількості екструзії та подачі",
+            "HideDuringPrint": "Приховати елементи керування віссю під час друку",
             "InvertXMovement": "Інвертуйте напрямок руху осі X",
             "InvertYMovement": "Інвертувати напрямок руху осі Y",
             "InvertZMovement": "Інвертувати напрямок руху осі Z",
@@ -713,11 +873,13 @@
             "MoveDistancesZInMm": "Дистанція переміщення вісі Z у мм",
             "QuadGantryLevel": "Quad Gantry Вирівнювання{isDefault}",
             "SpeedEInMms": "Швидкість екструзії (у мм/с)",
-            "SpeedXY": "Швидкість руху вісєй X та Y",
+            "SpeedXY": "Швидкість руху вісі X та Y",
             "SpeedZ": "Швидкість руху вісі Z",
             "Style": "Стиль",
             "ValueGreaterThan": "Значення повинно бути більшим, ніж {value}",
             "ZOffsetIncrements": "Збільшення Z-Offset (в мм)",
+            "ZOffsetSaveOption": "Опція збереження Z-Offset",
+            "ZOffsetSaveOptionDescription": "Змініть параметр, щоб зберегти Z-Offset",
             "ZTiltAdjust": "Налаштування Z-нахилу{isDefault}"
         },
         "DashboardTab": {
@@ -730,13 +892,16 @@
         },
         "Edit": "Редагувати",
         "EditorTab": {
-            "ConfirmUnsavedChanges": "Підказувати зберігати чи ніт не збережені зміни",
+            "ConfirmUnsavedChanges": "Підказувати зберігати чи ні не збережені зміни",
             "ConfirmUnsavedChangesDescription": "Якщо ввімкнено, редактор вимагає підтвердження, щоб зберегти, або відкинути внесені зміни. Якщо відключено, зміни не зберігаються.",
             "Editor": "Редактор",
             "KlipperRestartMethod": "Метод перезапуску Klipper",
             "KlipperRestartMethodDescription": "Виберіть, який метод перезавантаження буде використовуватися на 'Зберегти та перезапустити' під час редагування файлів конфігурації Klipper..",
-            "UseEscToClose": "Використовуйте ESC для закриття редактора",
-            "UseEscToCloseDescription": "Дозволяє клавішу ESC закрити редактор"
+            "Spaces": "Пробіли: {count}",
+            "TabSize": "Розмір відступів",
+            "TabSizeDescription": "Регулює кількість пробілів для табуляції",
+            "UseEscToClose": "ESC закриває редактор",
+            "UseEscToCloseDescription": "Дозволити клавішу ESC для закриття редактора"
         },
         "GCodeViewerTab": {
             "BackgroundColor": "Колір фону",
@@ -746,9 +911,11 @@
             "MaxFeed": "Максимальна швидкість подачі",
             "MinFeed": "Мінімальна швидкість подачі",
             "ProgressColor": "Колір прогресу",
-            "ShowAxes": "Показати осі"
+            "ShowAxes": "Показати вісі"
         },
         "GeneralTab": {
+            "12hours": "12 годин ({time})",
+            "24hours": "24 години ({time})",
             "Backup": "Резервна копія",
             "BackupDialog": "Виберіть усі розділи, які ви хочете створити резервну копію:",
             "CalcEstimateTime": "Оцінка розрахунку часу",
@@ -763,27 +930,42 @@
                 "FileRelative": "Позиція файлу (відносна)",
                 "Slicer": "Слайсер (M73)"
             },
-            "CannotReadJson": "Не вдається читати/розбирати резервний файл.",
+            "CannotReadJson": "Не вдається читати/розібрати резервний файл.",
+            "DateFormat": "Формат дати",
             "DbConsoleHistory": "Історія Консолі",
-            "DbHistoryJobs": "Історія роботи",
+            "DbHistoryJobs": "Історія завдань",
             "DbHistoryTotals": "Загальна Історія",
+            "DBNavigation": "Навігація",
             "DbTimelapseSettings": "Налаштування Таймлапсу",
             "DbView": "Налаштування перегляду",
-            "DbWebcams": "Веб -камери",
             "EstimateValues": {
                 "Filament": "Пруток",
                 "File": "Файл",
                 "Slicer": "Слайсер"
             },
+            "Everything": "Все",
             "FactoryDialog": "Будь ласка, виберіть усі розділи, які ви хочете скинути:",
             "FactoryReset": "Заводські налаштування",
             "General": "Загальний",
             "Language": "Мова",
-            "MoonrakerDb": "Moonraker DB",
+            "MainsailSettingsMoonrakerDb": "Параметри Mainsail в БД Moonraker",
             "PrinterName": "Ім'я принтера",
             "Reset": "скинути",
             "Restore": "Відновити",
-            "RestoreDialog": "Будь ласка, виберіть усі розділи, які ви хочете відновити:"
+            "RestoreDialog": "Будь ласка, виберіть усі розділи, які ви хочете відновити:",
+            "TimeFormat": "Формат часу"
+        },
+        "HeightmapTab": {
+            "ColorSchemes": "Палітри кольорів",
+            "Heightmap": "Карта висот",
+            "IsDefault": "(за замовчуванням)",
+            "Schemes": {
+                "GrayScale": "Відтінки сірого",
+                "Hot": "Теплота",
+                "Hsv": "Hsv",
+                "Portland": "Портленд",
+                "Spring": "Весна"
+            }
         },
         "InterfaceSettings": "Налаштування інтерфейсу",
         "MacrosTab": {
@@ -792,7 +974,7 @@
             "AvailableMacros": "Доступні Макроси",
             "ChangeMacroColor": "Змініть колір кнопки.",
             "Color": "Колір",
-            "CountMacros": "Жодних макросів не додано | {count} Макрос | {count} Макроси",
+            "CountMacros": "Жодних макросів не додано | {count} Макрос | {count} Макросів",
             "Custom": "свій",
             "CustomColor": "Свій Колір",
             "DeletedMacro": "Видалений макрос",
@@ -813,20 +995,46 @@
             "NoMacrosInGroup": "У цій групі немає макросів.",
             "Primary": "основний",
             "Secondary": "вторинний",
-            "ShowInStatePaused": "Показати/приховати, якщо принтер призупинений.",
-            "ShowInStatePrinting": "Показати/приховати, якщо принтер друкує.",
-            "ShowInStateStandby": "Показати/приховати, якщо принтер буде в режимі очікування.",
+            "ShowInStatePaused": "Показати/приховати, коли принтер призупинений.",
+            "ShowInStatePrinting": "Показати/приховати, коли принтер друкує.",
+            "ShowInStateStandby": "Показати/приховати, коли принтер в режимі очікування.",
             "Simple": "Простий",
             "Status": "Статус",
             "Success": "успіх",
             "UnknownGroup": "Невідома Група",
             "Warning": "УВАГА"
         },
+        "MiscellaneousTab": {
+            "AddGroup": "додати групу",
+            "AddPreset": "додати предустановку",
+            "Color": "Колір",
+            "CreateGroup": "Створити групу",
+            "CreatePreset": "Створити предустановку",
+            "End": "Кінець",
+            "EndDescription": "Останній світлодіод цієї групи.",
+            "Groups": "Групи",
+            "GroupSubTitle": "Початок: {start}, кінець: {end}",
+            "LightGroups": "{name} - Групи",
+            "LightPresets": "{name} - Предустановки",
+            "Miscellaneous": "Різне",
+            "Name": "Ім'я",
+            "NoDevicesFound": "Пристроїв не знайдено",
+            "NoGroupFound": "Групи не знайдено",
+            "NoPresetFound": "Предустановки не знайдено",
+            "Presets": "Предустановки",
+            "Start": "Cтарт",
+            "StartDescription": "Перший світлодіод цієї групи.",
+            "UnableToLoadLight": "Не вдалося завантажити світло",
+            "UnableToLoadPreset": "Неможливо завантажити предналаштування"
+        },
+        "NavigationTab": {
+            "Navigation": "Навігація"
+        },
         "PresetsTab": {
             "AddPreset": "додати пресет",
             "Cooldown": "ОХОЛОДЖЕННЯ Нагрівачів",
             "CreateHeadline": "Створити пресет",
-            "CustomGCode": "Свій Г-код",
+            "CustomGCode": "Свій G-код",
             "EditCooldown": "Редагувати ОХОЛОДЖЕННЯ",
             "EditHeadline": "Редагувати пресет",
             "ErrorInvalidValue": "Недійсне значення",
@@ -849,6 +1057,7 @@
             "UpdatePrinter": "Оновити принтер",
             "UseConfigJson": "InstanceDB = JSON виявлений. Будь ласка, використовуйте config.json щоб змінити список принтерів."
         },
+        "Store": "зберегти",
         "TimelapseTab": {
             "Autorender": "Автовізуалізація",
             "AutorenderDescription": "Якщо ввімкнено, відео Таймлапс автоматично відображатиметься в кінці друку",
@@ -894,6 +1103,11 @@
             "RetractDistanceDescription": "Довжина прутка, яку екструдер втягує.",
             "RetractSpeed": "Швидкість втягування",
             "RetractSpeedDescription": "Швидкість, з якою екструдер відтягує пруток.",
+            "RulesBetweenMinMax": "Значення має бути від {min} до {max}!",
+            "RulesMin": "Значення має бути не менше {min}!",
+            "RulesPositive": "Значення не має бути від'ємним!",
+            "RulesRequired": "Необхідно вказати значення!",
+            "RulesZeroAndPositive": "Значення має бути 0 або більше!",
             "SaveFrames": "Зберегти зображення",
             "SaveFramesDescription": "Збережіть кадри у zip-файлі для зовнішнього відображення",
             "StreamDelayCompensation": "Компенсація затримки потоку",
@@ -911,12 +1125,15 @@
             "UnretractSpeedDescription": "Швидкість, з якою екструдер подає пруток після втягування.",
             "VariableFps": "Змінна FPS",
             "VariableFpsDescription": "Якщо ввімкнено, кадри вихідного відео буде обчислено на основі довжини відео",
-            "VariableFpsMax": "Змінна FPS макс",
-            "VariableFpsMaxDescription": "",
-            "VariableFpsMin": "Змінна FPS мін",
-            "VariableFpsMinDescription": ""
+            "VariableFpsMax": "Динамічний FPS макс",
+            "VariableFpsMaxDescription": "Максимальне значення при динамічному FPS",
+            "VariableFpsMin": "Динамічний FPS мін",
+            "VariableFpsMinDescription": "Мінімальне значення при динамічному FPS"
         },
         "UiSettingsTab": {
+            "BedScrewsDialog": "Вікно гвинтів стола",
+            "BedScrewsDialogDescription": "Відобразити допоміжне діалогове вікно для BED_SCREWS_ADJUST.",
+            "BigThumbnailBackground": "Колір тла великої мініатюри",
             "BoolBigThumbnail": "Велика мініатюра",
             "BoolBigThumbnailDescription": "Відобразити велику мініатюру на панелі статусу під час друку.",
             "BoolHideUploadAndPrintButton": "Приховати кнопку завантаження та друк",
@@ -925,40 +1142,67 @@
             "ConfirmOnEmergencyStopDescription": "Показати діалогове вікно підтвердження АВАРІЙНОЇ ЗУПИНКИ",
             "ConfirmOnPowerDeviceChange": "Вимагати підтвердження змін живлення пристрою",
             "ConfirmOnPowerDeviceChangeDescription": "Показати діалогове вікно підтвердження щодо змін живлення пристрою",
+            "DefaultNavigationState": "Стандартний стан навігації",
+            "DefaultNavigationStateAlwaysClosed": "завжди закрита",
+            "DefaultNavigationStateAlwaysOpen": "завжди відкрита",
+            "DefaultNavigationStateDescription": "У якому стані має бути навігація за умовчанням.",
+            "DefaultNavigationStateLastState": "останній стан",
+            "DisableFanAnimation": "Вимкнути анімацію кулера",
+            "DisableFanAnimationDescription": "Це може зменшити навантаження на ваш браузер.",
             "DisplayCANCEL_PRINT": "Відображати кнопку Скасування Друку",
             "DisplayCANCEL_PRINTDescription": "Показує кнопку CANCEL_PRINT постійно - не потрібно підтвердження другого рівня.",
             "GcodeThumbnails": "Ескіз G-Code",
             "GcodeThumbnailsDescription": "Клацніть на кнопку, щоб дістатися до інструкцій.",
             "Guide": "Інструкція",
+            "HideSaveConfigButtonForBedMesh": "Приховати кнопку SAVE_CONFIG для змін bed_mesh",
+            "HideSaveConfigButtonForBedMeshDescription": "Приховати SAVE_CONFIG, якщо тільки зміни bed_mesh очікують на збереження в Klipper.",
+            "HideUpdateWarnings": "Приховати попередження про оновлення",
+            "HideUpdateWarningsDescription": "Ця опція приховає всі попередження про оновлення в менеджері оновлень.",
             "LockSliders": "Заблокуйте повзунки на пристроях сенсорного екрану",
             "LockSlidersDelay": "Затримка блокування повзунка",
             "LockSlidersDelayDescription": "Слайдери заблокуються після заданої затримки. Якщо встановлено на 0 або залишився порожнім, повзунки лише заблокують зміну/перезавантаження сторінки.",
             "LockSlidersDescription": "Слайдери на сенсорному екрані потрібно розблокувати, перш ніж зміни будуть дозволені.",
             "Logo": "Колір Логотипу",
+            "ManualProbeDialog": "Вікно помічника ручної проби",
+            "ManualProbeDialogDescription": "Відобразити допоміжне діалогове вікно для PROBE_CALIBRATE або Z_ENDSTOP_CALIBRATE.",
             "NavigationStyle": "Стиль навігації",
             "NavigationStyleDescription": "Змінити зовнішній вигляд навігації",
             "NavigationStyleIconsAndText": "Піктограми + текст",
             "NavigationStyleIconsOnly": "Тільки іконки",
+            "PowerDeviceName": "Пристрій живлення принтера",
+            "PowerDeviceNameDescription": "Виберіть, який пристрій живлення Moonraker слід використовувати для живлення принтера.",
             "Primary": "Основний Колір",
-            "ShowWebcamInNavigation": "Показати веб -камеру в навігації",
+            "ScrewsTiltAdjustDialog": "Вікно налаштування гвинтів нахилу стола",
+            "ScrewsTiltAdjustDialogDescription": "Відобразити допоміжне вікно для SCREWS_TILT_CALCULATE.",
+            "TempchartHeight": "Висота графіку температур",
+            "TempchartHeightDescription": "Змініть висоту графіка температури на інформаційній панелі.",
+            "Theme": "Тема",
+            "ThemeDark": "Темна",
+            "ThemeDescription": "Змініть загальний вигляд програми",
+            "ThemeLight": "Світла",
             "UiSettings": "Налаштування в інтерфейсі"
         },
+        "Update": "оновлення",
         "WebcamsTab": {
             "AddWebcam": "Додати веб-камеру",
             "CreateWebcam": "Створити веб-камеру",
             "EditCrowsnestConf": "Редагувати crowsnest.conf",
             "EditWebcam": "Редагувати веб-камеру",
+            "EnableAudio": "Увімкнути аудіо",
             "FlipWebcam": "Повернути веб-камеру:",
+            "HideFps": "Приховати лічильник FPS",
+            "Hlsstream": "Потік HLS",
             "Horizontally": "горизонтально",
             "IconBed": "Ліжко",
             "IconCam": "Cam",
             "IconDoor": "Двері",
             "IconFilament": "Пруток",
             "IconHot": "Гарячий",
-            "IconMcu": "ЦПК",
+            "IconMcu": "MCU",
             "IconNozzle": "Сопло",
             "IconPrinter": "Прінтер",
-            "Ipstream": "IP -камера",
+            "Ipstream": "IP-камера",
+            "JMuxerStream": "Необроблений потік h264 (jmuxer)",
             "Mjpegstreamer": "MJPEG-Стример",
             "MjpegstreamerAdaptive": "Adaptive MJPEG-Streamer (експериментальний)",
             "Name": "Ім'я",
@@ -973,7 +1217,11 @@
             "UrlStream": "URL-адреса Потоку",
             "Uv4lMjpeg": "UV4L-MJPEG",
             "Vertically": "вертикально",
-            "Webcams": "Веб-камери"
+            "Webcams": "Веб-камери",
+            "WebrtcCameraStreamer": "WebRTC (camera-streamer)",
+            "WebrtcGo2rtc": "WebRTC (go2rtc)",
+            "WebrtcJanus": "WebRTC (janus-gateway)",
+            "WebrtcMediaMTX": "WebRTC (MediaMTX)"
         }
     },
     "Timelapse": {
@@ -987,6 +1235,7 @@
         "DeleteDirectory": "Видалити директорію",
         "DeleteDirectoryQuestion": "Ви дійсно хочете видалити \"{name}\" директоріб із усім її вмістом?",
         "DeleteSelectedQuestion": "Ви дійсно хочете видалити {count} вибрані файли?",
+        "DeleteSingleFileQuestion": "Ви дійсно хочете видалити файл \"{name}\"?",
         "Download": "Завантажити",
         "DuplicateLastframe": "Дублікат останнього кадру",
         "Empty": "Не знайдено закінченого Таймлапсу.",
@@ -998,8 +1247,8 @@
         "Framerate": "Частота кадрів",
         "Frames": "Кадри",
         "Free": "Вільно",
-        "FreeDisk": "Вільний диск",
-        "LastModified": "Датат Створення",
+        "FreeDisk": "Вільнр на диску",
+        "LastModified": "Дата Створення",
         "MaxFramerate": "Макс. частота кадрів",
         "MinFramerate": "Мін. частота кадрів",
         "Name": "Ім'я",

From 5c6556cfd987954b79486c8586793256f2cfe38d Mon Sep 17 00:00:00 2001
From: Samuel Wang <imhsaw@gmail.com>
Date: Sun, 3 Mar 2024 05:18:17 -0800
Subject: [PATCH 27/46] locale(zh): update chinese locale (#1791)

Co-authored-by: Stefan Dej <meteyou@gmail.com>
---
 src/locales/zh.json | 67 +++++++++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/locales/zh.json b/src/locales/zh.json
index a7d862a11..f33d907d1 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -6,7 +6,7 @@
                 "Headline": "浏览器已过时"
             },
             "DependencyDescription": "当前版本的{name}并不支持Mainsail的全部功能。{name}需要至少更新到{neededVersion}版本。",
-            "DependencyName": "{name}依赖",
+            "DependencyName": "依赖：{name}",
             "DismissAll": "忽略全部",
             "KlipperWarnings": {
                 "DeprecatedOption": "在'{section}'标签中的'{option}'选项已被弃用，将在未来的版本中删除。",
@@ -16,17 +16,17 @@
                 "KlipperWarning": "Klipper警告"
             },
             "MoonrakerWarnings": {
-                "MoonrakerComponent": "Moonraker: {component}",
+                "MoonrakerComponent": "Moonraker：{component}",
                 "MoonrakerFailedComponentDescription": "加载moonraker组件'{component}'时发生错误。请检查日志文件并修复此问题。",
                 "MoonrakerFailedInitComponentDescription": "初始化moonraker组件'{component}'时发生错误。请检查日志文件并修复此问题。",
-                "MoonrakerInitComponent": "初始化 Moonraker: {component}",
+                "MoonrakerInitComponent": "初始化 Moonraker：{component}",
                 "MoonrakerWarning": "Moonraker警告",
                 "UnparsedConfigOption": "在[{section}]标签中检测到无法解析的配置'{option}: {value}'。这可能是一个不再可用的选项，也可能是组件加载失败的结果。在将来，这将导致启动错误。",
                 "UnparsedConfigSection": "检测到无法解析的标签[{section}]。这可能是一个不再可用的标签，也可能是组件加载失败的结果。在未来，这将导致启动错误。"
             },
             "Never": "永不",
             "NextReboot": "下次重启",
-            "NoNotification": "没有通知",
+            "NoNotification": "没有可用的通知",
             "Notifications": "通知",
             "Remind": "提醒："
         },
@@ -36,6 +36,9 @@
             "NoEmptyAllowedError": "输入值不能为空！"
         },
         "Printers": "打印机列表",
+        "TextfieldWithCopy": {
+            "Copied": "复制"
+        },
         "TheServiceWorker": {
             "DescriptionNeedUpdate": "本地缓存已过时，需要进行更新。请点击下面的按钮来更新缓存。",
             "TitleNeedUpdate": "PWA需要更新",
@@ -63,7 +66,7 @@
             "Complete": "已完成 - {filename}",
             "Error": "错误",
             "Pause": "暂停打印",
-            "PrinterOff": "打印机已关闭",
+            "PrinterOff": "打印机关闭",
             "Printing": "已打印 {percent}% - {filename}",
             "PrintingETA": "已打印 {percent}% - 预估: {eta} - {filename}"
         },
@@ -120,13 +123,13 @@
         }
     },
     "BedScrews": {
-        "Abort": "取消",
+        "Abort": "中止",
         "Accept": "接受",
         "Adjusted": "已调整",
-        "Description": "如果当前螺丝已调整，请点击<b>已调整</b>。未调整下继续请点击<b>认可</b>。",
+        "Description": "如果当前螺丝已调整，请点击<b>已调整</b>。如果不需要调整，请点击<b>接受</b>继续。",
         "Headline": "热床调平螺丝",
         "ScrewAccepted": "已接受的调平螺丝",
-        "ScrewIndex": "螺丝索引",
+        "ScrewIndex": "螺丝编号",
         "ScrewName": "螺丝名称",
         "ScrewOutput": "{current}/{max}"
     },
@@ -146,6 +149,20 @@
         "SendCode": "输入要执行的代码...",
         "SetupConsole": "设置控制台"
     },
+    "DevicesDialog": {
+        "CanBusInfo": "只有未分配的节点才能被检测到。建议仅连接一个未分配的设备到CAN总线，以避免通信问题。更多详情，请点击链接：",
+        "ClickRefresh": "点击刷新按钮以搜索设备。",
+        "DevicePath": "设备路径",
+        "Formats": "格式",
+        "Headline": "设备",
+        "HideSystemEntries": "隐藏系统条目",
+        "LibcameraId": "Libcamera标识符",
+        "NoDeviceFound": "未发现设备。请检查连接并点击刷新按钮。",
+        "PathByHardware": "硬件路径",
+        "PathById": "标识符路径",
+        "Refresh": "刷新",
+        "Resolutions": "分辨率"
+    },
     "Dialogs": {
         "StartPrint": {
             "Cancel": "取消",
@@ -153,11 +170,12 @@
             "DoYouWantToStartFilenameFilament": "是否使用以下耗材开始打印文件{filename}？",
             "Headline": "开始任务",
             "Print": "打印",
-            "Timelapse": "延时摄像"
+            "Timelapse": "延时摄影"
         }
     },
     "Editor": {
         "ConfigReference": "配置参考",
+        "DeviceDialog": "设备",
         "DontSave": "不保存",
         "Downloading": "正在下载",
         "FailedSave": "上传{filename}失败！",
@@ -274,10 +292,10 @@
         "Tracking": "正在追踪",
         "Transparency": "透明度",
         "Ultra": "极致",
-        "VoxelMode": "体素模式(ASMBL)"
+        "VoxelMode": "三维像素模式(ASMBL)"
     },
     "Heightmap": {
-        "Abort": "取消",
+        "Abort": "中止",
         "BedMeshCalibrate": "校准床网",
         "BedMeshRemove": "移除床网",
         "Calibrate": "测量",
@@ -298,20 +316,16 @@
         "InvalidNameAlreadyExists": "预设名称已经存在，请换一个名称。",
         "InvalidNameAscii": "错误的名称，请删除所有非ascii字符后重试。",
         "InvalidNameEmpty": "输入值不能为空！",
-        "InvalidNameReserved": "预设 'default' 已保留，请选择其他预设名称。",
-        "Later": "以后",
+        "InvalidNameReserved": "预设'default'已保留，请选择其他预设名称。",
         "Mesh": "网格",
         "Name": "名称",
         "NoBedMeshHasBeenLoadedYet": "没有加载床网。",
         "NoProfile": "没有预设可用",
-        "Ok": "好的",
         "Probed": "测量结果",
         "Profiles": "预设",
         "Remove": "删除",
-        "RemoveSaveDescription": "预设床网已标记需删除。点击\"保存配置\"将会从printer.cfg中移除并重启Klipper。",
         "Rename": "重命名",
         "RenameBedMeshProfile": "重命名预设床网",
-        "SAVE_CONFIG": "保存配置",
         "ScaleGradient": "尺度梯度",
         "ScaleZMax": "Z最大标度",
         "TitleCalibrate": "校准新床网",
@@ -321,6 +335,7 @@
     },
     "History": {
         "AddNote": "添加便条",
+        "AddToQueueSuccessful": "文件{filename}已添加到队列。",
         "AllJobs": "全部",
         "AvgPrinttime": "平均打印时长",
         "Cancel": "取消",
@@ -483,7 +498,7 @@
             }
         },
         "UpdatePanel": {
-            "Abort": "放弃",
+            "Abort": "中止",
             "AreYouSure": "你确定吗？",
             "CheckForUpdates": "检查更新",
             "Close": "关闭",
@@ -528,7 +543,7 @@
         }
     },
     "ManualProbe": {
-        "Abort": "取消",
+        "Abort": "中止",
         "Accept": "接受",
         "Advanced": "高级",
         "Headline": "手动Probe"
@@ -680,7 +695,7 @@
             "Max": "最高",
             "ObjectHeight": "物体高度",
             "PauseAtLayer": {
-                "Abort": "取消",
+                "Abort": "中止",
                 "Accept": "接受",
                 "AtLayer": "所在层",
                 "Call": "调用",
@@ -776,8 +791,8 @@
     "Router": {
         "Console": "控制台",
         "Dashboard": "控制面板",
-        "G-Code Files": "G-Code 文件",
-        "G-Code Viewer": "G-Code 预览",
+        "G-Code Files": "G-Code文件",
+        "G-Code Viewer": "G-Code预览",
         "Heightmap": "高度图",
         "History": "历史记录",
         "Machine": "机器",
@@ -794,8 +809,8 @@
     },
     "SelectPrinterDialog": {
         "AddPrinter": "添加打印机",
-        "AddPrintersToJson": "请将打印机添加到 config.json 。",
-        "CannotConnectTo": "无法连接到{host} 。",
+        "AddPrintersToJson": "请将打印机添加到config.json。",
+        "CannotConnectTo": "无法连接到{host}。",
         "ChangePrinter": "切换打印机",
         "Connecting": "正在连接到{host}",
         "ConnectionFailed": "连接失败",
@@ -891,7 +906,7 @@
         "GCodeViewerTab": {
             "BackgroundColor": "背景颜色",
             "ExtruderColor": "喷嘴颜色",
-            "GCodeViewer": "G-Code 预览",
+            "GCodeViewer": "G-Code预览",
             "GridColor": "网格颜色",
             "MaxFeed": "最大挤出速度",
             "MinFeed": "最小挤出速度",
@@ -1040,7 +1055,7 @@
             "Port": "Moonraker服务端口",
             "RemotePrinters": "打印机",
             "UpdatePrinter": "更新打印机",
-            "UseConfigJson": "检测到InstanceDB参数为JSON。请使用 config.json 来修改打印机列表。"
+            "UseConfigJson": "检测到InstanceDB参数为JSON。请使用config.json来修改打印机列表。"
         },
         "Store": "存储",
         "TimelapseTab": {
@@ -1064,7 +1079,7 @@
             "HyperlapseCycle": "Hyperlapse周期时间",
             "HyperlapseCycleDescription": "每隔X秒获取一张快照",
             "Mode": "模式",
-            "ModeDescription": "选择Layermacro(基于层变化)或者Hyperlapse(基于时间)模式",
+            "ModeDescription": "选择Layermacro模式(基于层变化)或者Hyperlapse模式(基于时间)",
             "OutputFramerate": "输出帧率",
             "OutputFramerateDescription": "设置视频帧率。注意：如果可变FPS设置开启，此设置会被忽略",
             "Parkhead": "放置打印头到停靠位置",

From 5071f61a1e2be946f555b8dedea4307a6534c5f0 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 3 Mar 2024 20:00:45 +0100
Subject: [PATCH 28/46] refactor: update branch and add "add to queue" function
 from develop

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryList/HistoryListEntryJob.vue       | 42 +++++++++++++++----
 src/components/panels/HistoryListPanel.vue    | 27 +++---------
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/components/panels/HistoryList/HistoryListEntryJob.vue b/src/components/panels/HistoryList/HistoryListEntryJob.vue
index 2af687651..44b098716 100644
--- a/src/components/panels/HistoryList/HistoryListEntryJob.vue
+++ b/src/components/panels/HistoryList/HistoryListEntryJob.vue
@@ -96,6 +96,14 @@
                     <v-icon class="mr-1">{{ mdiPrinter }}</v-icon>
                     {{ $t('History.Reprint') }}
                 </v-list-item>
+                <v-list-item v-if="item.exists && isJobQueueAvailable" @click="addToQueue">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddToQueue') }}
+                </v-list-item>
+                <v-list-item v-if="item.exists && isJobQueueAvailable" @click="addBatchToQueueDialogBool = true">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddBatchToQueue') }}
+                </v-list-item>
                 <v-list-item class="red--text" @click="deleteJob">
                     <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('History.Delete') }}
@@ -113,6 +121,12 @@
             :type="noteDialogType"
             :job="item"
             @close-dialog="noteDialogBool = false" />
+        <!-- add to queue dialog -->
+        <add-batch-to-queue-dialog
+            :is-visible="addBatchToQueueDialogBool"
+            :show-toast="true"
+            :filename="item.filename"
+            @close="addBatchToQueueDialogBool = false" />
     </tr>
 </template>
 <script lang="ts">
@@ -130,15 +144,17 @@ import {
     mdiNotebook,
     mdiNotebookEdit,
     mdiNotebookPlus,
+    mdiPlaylistPlus,
     mdiPrinter,
     mdiTextBoxSearch,
 } from '@mdi/js'
 import { formatFilesize } from '@/plugins/helpers'
 import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
 import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
+import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue'
 
 @Component({
-    components: { HistoryListPanelNoteDialog, HistoryListPanelDetailsDialog, Panel },
+    components: { AddBatchToQueueDialog, HistoryListPanelNoteDialog, HistoryListPanelDetailsDialog, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
@@ -150,15 +166,18 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiNotebookPlus = mdiNotebookPlus
     mdiPrinter = mdiPrinter
     mdiTextBoxSearch = mdiTextBoxSearch
+    mdiPlaylistPlus = mdiPlaylistPlus
 
-    private detailsDialogBool = false
+    detailsDialogBool = false
 
-    private contextMenuBool = false
-    private contextMenuX = 0
-    private contextMenuY = 0
+    contextMenuBool = false
+    contextMenuX = 0
+    contextMenuY = 0
 
-    private noteDialogBool = false
-    private noteDialogType: 'create' | 'edit' = 'create'
+    noteDialogBool = false
+    noteDialogType: 'create' | 'edit' = 'create'
+
+    addBatchToQueueDialogBool = false
 
     @Prop({ type: Object, required: true }) readonly item!: ServerHistoryStateJob
     @Prop({ type: Array, required: true }) readonly tableFields!: HistoryListPanelRow[]
@@ -227,6 +246,10 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return output
     }
 
+    get isJobQueueAvailable() {
+        return this.moonrakerComponents.includes('job_queue')
+    }
+
     select(newVal: boolean) {
         this.$emit('select', newVal)
     }
@@ -260,6 +283,11 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         this.noteDialogBool = true
     }
 
+    addToQueue() {
+        this.$store.dispatch('server/jobQueue/addToQueue', [this.item.filename])
+        this.$toast.info(this.$t('History.AddToQueueSuccessful', { filename: this.item.filename }).toString())
+    }
+
     deleteJob() {
         this.$socket.emit(
             'server.history.delete_job',
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 4c5d34df9..a94efbf75 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -70,7 +70,10 @@
                                     </v-list-item>
                                     <v-divider />
                                 </template>
-                                <v-list-item v-for="header of configHeaders" :key="header.key" class="minHeight36">
+                                <v-list-item
+                                    v-for="(header, index) of configHeaders"
+                                    :key="'history-list-panel-header-option-' + index"
+                                    class="minHeight36">
                                     <v-checkbox
                                         v-model="header.visible"
                                         class="mt-0"
@@ -147,11 +150,6 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <add-batch-to-queue-dialog
-            :is-visible="dialogAddBatchToQueue.isVisible"
-            :show-toast="true"
-            :filename="dialogAddBatchToQueue.filename"
-            @close="closeAddBatchToQueueDialog" />
     </div>
 </template>
 
@@ -164,12 +162,11 @@ import Panel from '@/components/ui/Panel.vue'
 import {
     mdiCloseThick,
     mdiCog,
+    mdiDatabaseArrowDownOutline,
     mdiDatabaseExportOutline,
     mdiDelete,
     mdiFileDocumentMultipleOutline,
     mdiMagnify,
-    mdiNotebookPlus,
-    mdiRefresh,
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
@@ -187,8 +184,6 @@ export interface HistoryListPanelRow {
     outputType?: string
 }
 
-import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue'
-
 @Component({
     components: {
         HistoryListEntryMaintenance,
@@ -196,7 +191,6 @@ import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vu
         HistoryListEntryJob,
         HistoryListPanelDetailsDialog,
         Panel,
-        AddBatchToQueueDialog
     },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
@@ -206,8 +200,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiDelete = mdiDelete
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiMagnify = mdiMagnify
-    mdiNotebookPlus = mdiNotebookPlus
-    mdiRefresh = mdiRefresh
+    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
 
     formatFilesize = formatFilesize
 
@@ -447,14 +440,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.history.hideColums', value: newVal })
     }
 
-    get currentLanguage() {
-        return this.$store.state.gui.general?.language ?? 'en'
-    }
-
-    get isJobQueueAvailable() {
-        return this.moonrakerComponents.includes('job_queue')
-    }
-
     refreshHistory() {
         this.$store.dispatch('socket/addLoading', { name: 'historyLoadAll' })
 

From 9063f513184ffa973ec9bab12604b4b06e9c2c9b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 4 Mar 2024 21:05:19 +0100
Subject: [PATCH 29/46] refactor: remove reminder panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/pages/History.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/pages/History.vue b/src/pages/History.vue
index 08a751978..4a304f4c4 100644
--- a/src/pages/History.vue
+++ b/src/pages/History.vue
@@ -5,11 +5,6 @@
                 <history-statistics-panel />
             </v-col>
         </v-row>
-        <v-row>
-            <v-col>
-                <history-reminders-panel></history-reminders-panel>
-            </v-col>
-        </v-row>
         <v-row class="mt-0">
             <v-col>
                 <history-list-panel />
@@ -22,13 +17,9 @@ import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import HistoryListPanel from '@/components/panels/HistoryListPanel.vue'
 import HistoryStatisticsPanel from '@/components/panels/HistoryStatisticsPanel.vue'
-import HistoryRemindersPanel from '@/components/panels/HistoryRemindersPanel.vue'
+
 @Component({
-    components: {
-        HistoryStatisticsPanel,
-        HistoryListPanel,
-        HistoryRemindersPanel,
-    },
+    components: { HistoryListPanel, HistoryStatisticsPanel },
 })
 export default class PageHistory extends Mixins(BaseMixin) {}
 </script>

From d5953d6e5d0b72dedccd0fe41439e3674586b3c5 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 4 Mar 2024 21:07:13 +0100
Subject: [PATCH 30/46] refactor: refactor addMaintenance dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryListPanelAddMaintenance.vue        | 219 +++++++++---------
 src/components/panels/HistoryListPanel.vue    |  10 +-
 2 files changed, 114 insertions(+), 115 deletions(-)

diff --git a/src/components/dialogs/HistoryListPanelAddMaintenance.vue b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
index 3ceb15d5f..481f71875 100644
--- a/src/components/dialogs/HistoryListPanelAddMaintenance.vue
+++ b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
@@ -1,116 +1,111 @@
 <template>
-    <div>
-        <v-btn class="px-2 minwidth-0 ml-3" @click="openDialog">
-            <v-icon>{{ mdiNotebookPlus }}</v-icon>
-        </v-btn>
-        <v-dialog v-model="show" :max-width="600" persistent @keydown.esc="closeDialog">
-            <panel
-                :title="$t('History.AddMaintenance')"
-                :icon="mdiNotebookPlus"
-                card-class="history-note-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="closeDialog">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="pb-0">
+    <v-dialog :value="show" :max-width="600" persistent @keydown.esc="closeDialog">
+        <panel
+            :title="$t('History.AddMaintenance')"
+            :icon="mdiNotebookPlus"
+            card-class="history-note-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="pb-0">
+                <v-row>
+                    <v-col>
+                        <v-text-field
+                            v-model="name"
+                            :rules="nameInputRules"
+                            :label="$t('History.Name')"
+                            hide-details="auto"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col>
+                        <v-textarea v-model="note" outlined hide-details="auto" :label="$t('History.Note')" />
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col>
+                        <settings-row :title="$t('History.AddReminder')">
+                            <v-switch v-model="reminder" hide-details class="mt-0" />
+                        </settings-row>
+                    </v-col>
+                </v-row>
+                <template v-if="reminder">
+                    <v-row>
+                        <v-col>
+                            <settings-row :title="$t('History.Repeat')">
+                                <v-switch v-model="reminderRepeat" hide-details class="mt-0" />
+                            </settings-row>
+                        </v-col>
+                    </v-row>
                     <v-row>
                         <v-col>
-                            <v-text-field
-                                v-model="name"
-                                :rules="nameInputRules"
-                                :label="$t('History.Name')"
-                                hide-details="auto"
-                                outlined
-                                dense />
+                            <settings-row
+                                :title="$t('History.FilamentBasedReminder')"
+                                :sub-title="$t('History.FilamentBasedReminderDescription')">
+                                <v-checkbox v-model="reminderFilament" hide-details class="mt-0" />
+                                <v-text-field
+                                    v-model="reminderFilamentValue"
+                                    hide-details="auto"
+                                    type="number"
+                                    class="mt-0"
+                                    outlined
+                                    dense
+                                    :suffix="$t('History.Meter')" />
+                            </settings-row>
                         </v-col>
                     </v-row>
                     <v-row>
                         <v-col>
-                            <v-textarea v-model="note" outlined hide-details="auto" :label="$t('History.Note')" />
+                            <settings-row
+                                :title="$t('History.PrinttimeBasedReminder')"
+                                :sub-title="$t('History.PrinttimeBasedReminderDescription')">
+                                <v-checkbox v-model="reminderPrinttime" hide-details class="mt-0" />
+                                <v-text-field
+                                    v-model="reminderPrinttimeValue"
+                                    hide-details="auto"
+                                    type="number"
+                                    class="mt-0"
+                                    outlined
+                                    dense
+                                    :suffix="$t('History.Hours')" />
+                            </settings-row>
                         </v-col>
                     </v-row>
                     <v-row>
                         <v-col>
-                            <settings-row :title="$t('History.AddReminder')">
-                                <v-switch v-model="reminder" hide-details class="mt-0" />
+                            <settings-row
+                                :title="$t('History.DateBasedReminder')"
+                                :sub-title="$t('History.DateBasedReminderDescription')">
+                                <v-checkbox v-model="reminderDate" hide-details class="mt-0" />
+                                <v-text-field
+                                    v-model="reminderDateValue"
+                                    hide-details="auto"
+                                    type="number"
+                                    class="mt-0"
+                                    outlined
+                                    dense
+                                    :suffix="$t('History.Days')" />
                             </settings-row>
                         </v-col>
                     </v-row>
-                    <template v-if="reminder">
-                        <v-row>
-                            <v-col>
-                                <settings-row :title="$t('History.Repeat')">
-                                    <v-switch v-model="reminderRepeat" hide-details class="mt-0" />
-                                </settings-row>
-                            </v-col>
-                        </v-row>
-                        <v-row>
-                            <v-col>
-                                <settings-row
-                                    :title="$t('History.FilamentBasedReminder')"
-                                    :sub-title="$t('History.FilamentBasedReminderDescription')">
-                                    <v-checkbox v-model="reminderFilament" hide-details class="mt-0" />
-                                    <v-text-field
-                                        v-model="reminderFilamentValue"
-                                        hide-details="auto"
-                                        type="number"
-                                        class="mt-0"
-                                        outlined
-                                        dense
-                                        :suffix="$t('History.Meter')" />
-                                </settings-row>
-                            </v-col>
-                        </v-row>
-                        <v-row>
-                            <v-col>
-                                <settings-row
-                                    :title="$t('History.PrinttimeBasedReminder')"
-                                    :sub-title="$t('History.PrinttimeBasedReminderDescription')">
-                                    <v-checkbox v-model="reminderPrinttime" hide-details class="mt-0" />
-                                    <v-text-field
-                                        v-model="reminderPrinttimeValue"
-                                        hide-details="auto"
-                                        type="number"
-                                        class="mt-0"
-                                        outlined
-                                        dense
-                                        :suffix="$t('History.Hours')" />
-                                </settings-row>
-                            </v-col>
-                        </v-row>
-                        <v-row>
-                            <v-col>
-                                <settings-row
-                                    :title="$t('History.DateBasedReminder')"
-                                    :sub-title="$t('History.DateBasedReminderDescription')">
-                                    <v-checkbox v-model="reminderDate" hide-details class="mt-0" />
-                                    <v-text-field
-                                        v-model="reminderDateValue"
-                                        hide-details="auto"
-                                        type="number"
-                                        class="mt-0"
-                                        outlined
-                                        dense
-                                        :suffix="$t('History.Days')" />
-                                </settings-row>
-                            </v-col>
-                        </v-row>
-                    </template>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn color="" text @click="closeDialog">{{ $t('History.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="save">{{ $t('History.Save') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </div>
+                </template>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('History.Cancel') }}</v-btn>
+                <v-btn color="primary" text @click="save">{{ $t('History.Save') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import Panel from '@/components/ui/Panel.vue'
@@ -126,23 +121,23 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
     mdiNotebookPlus = mdiNotebookPlus
 
-    private show: boolean = false
+    @Prop({ type: Boolean, default: false }) readonly show!: boolean
 
-    private name: string = ''
-    private note: string = ''
-    private reminder: boolean = false
-    private reminderRepeat: boolean = false
+    name: string = ''
+    note: string = ''
+    reminder: boolean = false
+    reminderRepeat: boolean = false
 
-    private reminderFilament: boolean = false
-    private reminderFilamentValue: number = 0
+    reminderFilament: boolean = false
+    reminderFilamentValue: number = 0
 
-    private reminderPrinttime: boolean = false
-    private reminderPrinttimeValue: number = 0
+    reminderPrinttime: boolean = false
+    reminderPrinttimeValue: number = 0
 
-    private reminderDate: boolean = false
-    private reminderDateValue: number = 0
+    reminderDate: boolean = false
+    reminderDateValue: number = 0
 
-    private nameInputRules = [(value: string) => !!value || this.$t('History.InvalidNameEmpty')]
+    nameInputRules = [(value: string) => !!value || this.$t('History.InvalidNameEmpty')]
 
     get totalFilamentUsed() {
         return this.$store.state.server.history.job_totals?.total_filament_used ?? 0
@@ -152,12 +147,8 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
         return this.$store.state.server.history.job_totals?.total_print_time ?? 0
     }
 
-    openDialog() {
-        this.show = true
-    }
-
     closeDialog() {
-        this.show = false
+        this.$emit('close')
     }
 
     save() {
@@ -201,6 +192,8 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
                 reminderDateTrigger: reminderDateTrigger,
             },
         })
+
+        this.closeDialog()
     }
 }
 </script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index a94efbf75..dc1789f99 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -27,7 +27,9 @@
                                 <v-icon>{{ mdiDelete }}</v-icon>
                             </v-btn>
                         </template>
-                        <history-list-panel-add-maintenance />
+                        <v-btn class="px-2 minwidth-0 ml-3" @click="addMaintenanceDialog = true">
+                            <v-icon>{{ mdiNotebookPlus }}</v-icon>
+                        </v-btn>
                         <v-tooltip v-if="!allLoaded" top>
                             <template #activator="{ on, attrs }">
                                 <v-btn
@@ -150,6 +152,7 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <history-list-panel-add-maintenance :show="addMaintenanceDialog" @close="addMaintenanceDialog = false" />
     </div>
 </template>
 
@@ -167,6 +170,7 @@ import {
     mdiDelete,
     mdiFileDocumentMultipleOutline,
     mdiMagnify,
+    mdiNotebookPlus,
 } from '@mdi/js'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntryJob.vue'
@@ -196,11 +200,12 @@ export interface HistoryListPanelRow {
 export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
     mdiCog = mdiCog
+    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     mdiDatabaseExportOutline = mdiDatabaseExportOutline
     mdiDelete = mdiDelete
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiMagnify = mdiMagnify
-    mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
+    mdiNotebookPlus = mdiNotebookPlus
 
     formatFilesize = formatFilesize
 
@@ -208,6 +213,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     sortBy = 'start_time'
     sortDesc = true
 
+    addMaintenanceDialog = false
     deleteSelectedDialog = false
 
     get allLoaded() {

From 48bf08db296058d2f99d5339d3dd2f5fce4bf249 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 4 Mar 2024 21:07:29 +0100
Subject: [PATCH 31/46] refactor: rename getFilteredJobList getter

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/HistoryListPanel.vue | 2 +-
 src/store/server/history/getters.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index dc1789f99..712327d6a 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -221,7 +221,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     get jobs() {
-        return this.$store.getters['server/history/getFilterdJobList'] ?? []
+        return this.$store.getters['server/history/getFilteredJobList'] ?? []
     }
 
     get maintenanceEntries() {
diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts
index b9841ca47..836f6bc76 100644
--- a/src/store/server/history/getters.ts
+++ b/src/store/server/history/getters.ts
@@ -354,7 +354,7 @@ export const getters: GetterTree<ServerHistoryState, any> = {
         }
     },
 
-    getFilterdJobList: (state, getters, rootState) => {
+    getFilteredJobList: (state, getters, rootState) => {
         const hideStatus = rootState.gui.view.history.hidePrintStatus
 
         return state.jobs.filter((job: ServerHistoryStateJob) => {

From 78f481b971c135777fd790fc86196a8ed3996dea Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 4 Mar 2024 21:07:40 +0100
Subject: [PATCH 32/46] refactor: remove HistoryRemindersPanel.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/HistoryRemindersPanel.vue          | 506 ------------------
 1 file changed, 506 deletions(-)
 delete mode 100644 src/components/panels/HistoryRemindersPanel.vue

diff --git a/src/components/panels/HistoryRemindersPanel.vue b/src/components/panels/HistoryRemindersPanel.vue
deleted file mode 100644
index a6547f417..000000000
--- a/src/components/panels/HistoryRemindersPanel.vue
+++ /dev/null
@@ -1,506 +0,0 @@
-<template>
-    <div>
-        <!-- TODO: translate title -->
-        <panel :icon="mdiBell" title="Reminders" card-class="history-reminders-panel" :collapsible="true">
-            <v-card-text>
-                <v-row>
-                    <v-col class="offset-4 d-flex align-center justify-end">
-                        <template v-if="selectedReminders.length">
-                            <v-btn
-                                title="Delete"
-                                color="error"
-                                class="px-2 minwidth-0 ml-3"
-                                @click="deleteSelectedDialog = true">
-                                <v-icon>{{ mdiDelete }}</v-icon>
-                            </v-btn>
-                        </template>
-                        <!-- TODO: translate title -->
-                        <v-btn title="New Reminder" class="px-2 minwidth-0 ml-3" @click="openCreateReminderDialog">
-                            <v-icon>{{ mdiPlus }}</v-icon>
-                        </v-btn>
-                    </v-col>
-                </v-row>
-            </v-card-text>
-            <v-divider class="mb-3"></v-divider>
-            <v-data-table
-                v-model="selectedReminders"
-                :items="reminders"
-                class="history-reminders-table"
-                :headers="headers"
-                :sort-by.sync="sortBy"
-                :sort-desc.sync="sortDesc"
-                item-key="id"
-                mobile-breakpoint="0"
-                show-select>
-                <template slot="no-data">
-                    <!-- TODO: translate -->
-                    <div class="text-center">No Reminders</div>
-                </template>
-
-                <template #item="{ index, item, isSelected, select }">
-                    <tr
-                        :key="`${index} ${item.id}`"
-                        v-longpress:600="(e) => showContextMenu(e, item)"
-                        :class="'user-select-none'"
-                        @contextmenu="($event) => showContextMenu($event, item)">
-                        <td class="pr-0">
-                            <v-simple-checkbox
-                                v-ripple
-                                :value="isSelected"
-                                class="pa-0 mr-0"
-                                @click.stop="select(!isSelected)"></v-simple-checkbox>
-                        </td>
-                        <td class="text-no-wrap">
-                            {{ item.name }}
-                        </td>
-                        <td class="text-right text-no-wrap">
-                            <v-tooltip top>
-                                <template #activator="{ on, attrs }">
-                                    <span v-bind="attrs" v-on="on">
-                                        <v-icon small :color="getStatusColor(item.remaining_print_time)">
-                                            {{ getStatusIcon(item.remaining_print_time) }}
-                                        </v-icon>
-                                    </span>
-                                </template>
-                                <span>
-                                    {{ getStatusText(item.remaining_print_time) }}
-                                </span>
-                            </v-tooltip>
-                        </td>
-                        <td class="text-no-wrap">
-                            {{ formatPrintTime(item.remaining_print_time) }}
-                        </td>
-                        <td class="text-no-wrap">
-                            {{ formatPrintTime(item.time_delta) }}
-                        </td>
-                    </tr>
-                </template>
-            </v-data-table>
-        </panel>
-        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
-            <v-list>
-                <v-list-item @click="openEditReminderDialog(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiPencil }}</v-icon>
-                    <!-- TODO: translate -->
-                    Edit
-                </v-list-item>
-                <v-list-item @click="repeatReminder(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiRepeatOnce }}</v-icon>
-                    <!-- TODO: translate -->
-                    Repeat
-                </v-list-item>
-                <v-list-item @click="deleteReminder(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiDelete }}</v-icon>
-                    <!-- TODO: translate -->
-                    Delete
-                </v-list-item>
-            </v-list>
-        </v-menu>
-        <v-dialog v-model="deleteSelectedDialog" max-width="400">
-            <panel
-                :title="$t('History.Delete').toString()"
-                card-class="history-reminders-delete-selected-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="deleteSelectedDialog = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text>
-                    <!-- TODO: translate -->
-                    <p class="mb-0">Do you really want to delete {{ selectedReminders.length }} reminders?</p>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="" text @click="deleteSelectedDialog = false">{{ $t('History.Cancel') }}</v-btn>
-                    <v-btn color="error" text @click="deleteSelectedReminders">{{ $t('History.Delete') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-        <v-dialog v-model="createReminderDialog" max-width="400">
-            <!-- TODO: translate title -->
-            <panel title="Create Reminder" card-class="history-reminders-create-dialog" :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="createReminderDialog = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text>
-                    <!-- TODO: translate title -->
-                    <settings-row title="Name">
-                        <v-text-field
-                            v-model="creatingDisplayName"
-                            :rules="nameInputRules"
-                            hide-details
-                            outlined
-                            dense></v-text-field>
-                    </settings-row>
-                    <!-- TODO: translate title -->
-                    <settings-row title="Print Hours">
-                        <v-text-field
-                            v-model="creatingPrintHours"
-                            type="Number"
-                            :rules="hoursInputRules"
-                            hide-details
-                            outlined
-                            dense></v-text-field>
-                    </settings-row>
-                    <!-- TODO: translate -->
-                    <settings-row
-                        title="Repeating"
-                        sub-title="If selected, reminders will repeat beginning from when their notifications are snoozed.">
-                        <v-simple-checkbox v-model="creatingRepeating" v-ripple class="pa-0 mr-0" />
-                    </settings-row>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn :disabled="isInvalidName || isInvalidHours" color="" text @click="createReminder">
-                        <!-- TODO: translate -->
-                        Confirm
-                    </v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-        <v-dialog v-model="editReminderDialog" max-width="400">
-            <panel title="Edit Reminder" card-class="history-reminders-edit-dialog" :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="editReminderDialog = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text>
-                    <!-- TODO: translate title -->
-                    <settings-row title="Name">
-                        <v-text-field
-                            v-model="editingDisplayName"
-                            :rules="nameInputRules"
-                            hide-details
-                            outlined
-                            dense></v-text-field>
-                    </settings-row>
-                    <!-- TODO: translate title -->
-                    <settings-row title="Print Hours">
-                        <v-text-field
-                            v-model="editingPrintHours"
-                            type="Number"
-                            :rules="hoursInputRules"
-                            hide-details
-                            outlined
-                            dense></v-text-field>
-                    </settings-row>
-                    <settings-row
-                        title="Repeating"
-                        sub-title="If selected, reminders will repeat beginning from when their notifications are snoozed.">
-                        <v-simple-checkbox v-model="editingRepeating" v-ripple :disabled="true" class="pa-0 mr-0" />
-                    </settings-row>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn :disabled="isInvalidName || isInvalidHours" color="" text @click="editReminder">
-                        <!-- TODO: translate -->
-                        Confirm
-                    </v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </div>
-</template>
-
-<script lang="ts">
-import {
-    mdiBell,
-    mdiDelete,
-    mdiPencil,
-    mdiPlus,
-    mdiClockOutline,
-    mdiClockAlertOutline,
-    mdiCloseThick,
-    mdiRepeatOnce,
-} from '@mdi/js'
-import { Component, Mixins, Watch } from 'vue-property-decorator'
-import { GuiRemindersStateReminder } from '@/store/gui/reminders/types'
-import BaseMixin from '@/components/mixins/base'
-import Panel from '@/components/ui/Panel.vue'
-import SettingsRow from '@/components/settings/SettingsRow.vue'
-
-@Component({ components: { Panel, SettingsRow } })
-export default class HistoryRemindersPanel extends Mixins(BaseMixin) {
-    mdiBell = mdiBell
-    mdiDelete = mdiDelete
-    mdiPencil = mdiPencil
-    mdiPlus = mdiPlus
-    mdiClockOutline = mdiClockOutline
-    mdiClockAlertOutline = mdiClockAlertOutline
-    mdiCloseThick = mdiCloseThick
-    mdiRepeatOnce = mdiRepeatOnce
-
-    deleteSelectedDialog = false
-    createReminderDialog = false
-    editReminderDialog = false
-    selectedReminders = []
-    editingReminder: GuiRemindersStateReminder | null = null
-    creatingReminder: GuiRemindersStateReminder | null = null
-
-    nameInputRules = [(value: string) => !!value || this.$t('Files.InvalidNameEmpty')]
-    isInvalidName = false
-
-    // TODO: translate
-    hoursInputRules = [(value: number) => value > 0 || 'Must be a positive number']
-    isInvalidHours = false
-
-    sortBy = 'remaining_print_time'
-    sortDesc = false
-
-    contextMenu = {
-        shown: false,
-        touchTimer: undefined,
-        x: 0,
-        y: 0,
-        item: {},
-    }
-
-    // TODO: translate
-    headers = [
-        {
-            text: 'Name',
-            value: '',
-            align: 'left',
-        },
-        {
-            text: '',
-            value: '',
-            align: 'left',
-        },
-        {
-            text: 'Remaining Print Hours',
-            value: '',
-            align: 'left',
-        },
-        {
-            text: 'Total Print Hours',
-            value: '',
-            align: 'left',
-        },
-    ]
-
-    get tableFields() {
-        return this.headers.filter((col: any) => col.value !== '')
-    }
-
-    get totalPrintTime() {
-        return 'total_print_time' in this.$store.state.server.history.job_totals
-            ? this.$store.state.server.history.job_totals.total_print_time
-            : 0
-    }
-
-    get reminders() {
-        const baseReminders: GuiRemindersStateReminder[] = this.$store.getters['gui/reminders/getReminders']
-        if (!baseReminders) return []
-        return baseReminders.map((reminder: GuiRemindersStateReminder) => {
-            let tempReminder = { ...reminder }
-            if (reminder.snooze_print_hours_timestamps.length > 0) {
-                tempReminder.remaining_print_time =
-                    reminder.time_delta -
-                    (this.totalPrintTime -
-                        reminder.snooze_print_hours_timestamps[reminder.snooze_print_hours_timestamps.length - 1])
-            } else {
-                tempReminder.remaining_print_time =
-                    reminder.time_delta - (this.totalPrintTime - reminder.start_total_print_time)
-            }
-            return tempReminder
-        })
-    }
-
-    get editingDisplayName() {
-        if (!this.editingReminder) return ''
-        return this.editingReminder.name
-    }
-
-    set editingDisplayName(value: string) {
-        if (!this.editingReminder) return
-        this.editingReminder.name = value
-    }
-
-    get editingPrintHours() {
-        if (!this.editingReminder) return '0'
-        return String(this.editingReminder.time_delta)
-    }
-
-    set editingPrintHours(value: string) {
-        if (!this.editingReminder) return
-        this.editingReminder.time_delta = parseFloat(value) || 0
-    }
-
-    get editingRepeating() {
-        if (!this.editingReminder) return false
-        return this.editingReminder.repeating
-    }
-
-    set editingRepeating(value: boolean) {
-        if (!this.editingReminder) return
-        this.editingReminder.repeating = value
-    }
-
-    get creatingDisplayName() {
-        if (!this.creatingReminder) return ''
-        return this.creatingReminder.name
-    }
-
-    set creatingDisplayName(value: string) {
-        if (!this.creatingReminder) return
-        this.creatingReminder.name = value
-    }
-
-    get creatingPrintHours() {
-        if (!this.creatingReminder) return '0'
-        return String(this.creatingReminder.time_delta)
-    }
-
-    set creatingPrintHours(value: string) {
-        if (!this.creatingReminder) return
-        this.creatingReminder.time_delta = parseFloat(value) || 0
-    }
-
-    get creatingRepeating() {
-        if (!this.creatingReminder) return false
-        return this.creatingReminder.repeating
-    }
-
-    set creatingRepeating(value: boolean) {
-        if (!this.creatingReminder) return
-        this.creatingReminder.repeating = value
-    }
-
-    getStatusIcon(remainingPrintTime: number) {
-        return remainingPrintTime >= 0 ? mdiClockOutline : mdiClockAlertOutline
-    }
-
-    getStatusColor(remainingPrintTime: number) {
-        return remainingPrintTime >= 0 ? 'orange' : 'red'
-    }
-
-    // TODO: translate
-    getStatusText(remainingPrintTime: number) {
-        return remainingPrintTime >= 0 ? 'Active' : 'Overdue'
-    }
-
-    formatPrintTime(totalSeconds: number) {
-        if (totalSeconds) {
-            let output = ''
-
-            const hours = Math.floor(totalSeconds / 3600)
-            totalSeconds %= 3600
-            if (hours) output += ' ' + hours + 'h'
-
-            const minutes = Math.floor(totalSeconds / 60)
-            if (minutes) output += ' ' + minutes + 'm'
-
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
-        }
-
-        return '--'
-    }
-
-    formatPrintTimeForEdit(totalSeconds: number) {
-        if (totalSeconds) {
-            return (totalSeconds / 3600).toFixed(2)
-        }
-        return '0'
-    }
-
-    showContextMenu(e: any, item: GuiRemindersStateReminder) {
-        if (!this.contextMenu.shown) {
-            e?.preventDefault()
-            this.contextMenu.shown = true
-            this.contextMenu.x = e?.clientX || e?.pageX || window.screenX / 2
-            this.contextMenu.y = e?.clientY || e?.pageY || window.screenY / 2
-            this.contextMenu.item = item
-            this.$nextTick(() => {
-                this.contextMenu.shown = true
-            })
-        }
-    }
-
-    repeatReminder(reminder: GuiRemindersStateReminder) {
-        this.$store.dispatch('gui/reminders/repeat', reminder)
-    }
-
-    deleteSelectedReminders() {
-        this.selectedReminders.forEach((item: GuiRemindersStateReminder) => {
-            this.$store.dispatch('gui/reminders/delete', item.id)
-        })
-
-        this.selectedReminders = []
-        this.deleteSelectedDialog = false
-    }
-
-    deleteReminder(reminder: GuiRemindersStateReminder) {
-        this.$store.dispatch('gui/reminders/delete', reminder.id)
-    }
-
-    openCreateReminderDialog() {
-        this.createReminderDialog = true
-        this.creatingReminder = {
-            id: '',
-            name: '',
-            start_total_print_time: 0,
-            snooze_print_hours_timestamps: [],
-            snooze_epoch_timestamps: [],
-            repeating: true,
-            time_delta: 0,
-        }
-        this.isInvalidHours = true
-        this.isInvalidName = true
-    }
-
-    createReminder() {
-        if (!this.creatingReminder) return
-
-        this.creatingReminder.start_total_print_time = this.totalPrintTime
-        this.creatingReminder.time_delta = Math.round(this.creatingReminder.time_delta * 3600)
-        this.$store.dispatch('gui/reminders/store', { values: this.creatingReminder })
-        this.createReminderDialog = false
-        this.creatingReminder = null
-    }
-
-    openEditReminderDialog(reminder: GuiRemindersStateReminder) {
-        this.editingReminder = { ...reminder }
-        this.editingReminder.time_delta = Math.round(this.editingReminder.time_delta / 3600)
-        this.isInvalidHours = false
-        this.isInvalidName = false
-        this.editReminderDialog = true
-    }
-
-    editReminder() {
-        if (!this.editingReminder) return
-
-        this.editingReminder.time_delta = Math.round(this.editingReminder.time_delta * 3600)
-        this.$store.dispatch('gui/reminders/update', this.editingReminder)
-        this.editReminderDialog = false
-        this.editingReminder = null
-    }
-
-    @Watch('editingDisplayName')
-    onEditingDisplayname(val: string) {
-        this.isInvalidName = !val
-    }
-
-    @Watch('editingPrintHours')
-    onEditingPrintHours(val: string) {
-        this.isInvalidHours = parseFloat(val) <= 0
-    }
-
-    @Watch('creatingDisplayName')
-    onCreatingDisplayName(val: string) {
-        this.isInvalidName = !val
-    }
-
-    @Watch('creatingPrintHours')
-    onCreatingPrintHours(val: string) {
-        this.isInvalidHours = parseFloat(val) <= 0
-    }
-}
-</script>

From b6c42f096b532a0cf73315bda1aa4f4f140fab7d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 4 Mar 2024 21:21:03 +0100
Subject: [PATCH 33/46] refactor: separate
 HistoryListPanelDeleteSelectedDialog.vue from HistoryListPanel.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryListPanelDeleteSelectedDialog.vue  |  66 ++++
 src/components/panels/HistoryListPanel.vue    | 303 +++++++-----------
 2 files changed, 186 insertions(+), 183 deletions(-)
 create mode 100644 src/components/dialogs/HistoryListPanelDeleteSelectedDialog.vue

diff --git a/src/components/dialogs/HistoryListPanelDeleteSelectedDialog.vue b/src/components/dialogs/HistoryListPanelDeleteSelectedDialog.vue
new file mode 100644
index 000000000..281c6d75d
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelDeleteSelectedDialog.vue
@@ -0,0 +1,66 @@
+<template>
+    <v-dialog :value="show" max-width="400">
+        <panel :title="$t('History.Delete')" card-class="history-delete-selected-dialog" :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <p v-if="selectedJobs.length === 1" class="mb-0">
+                    {{ $t('History.DeleteSingleJobQuestion') }}
+                </p>
+                <p v-else class="mb-0">
+                    {{ $t('History.DeleteSelectedQuestion', { count: selectedJobs.length }) }}
+                </p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn color="" text @click="closeDialog">{{ $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 Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick } from '@mdi/js'
+import { ServerHistoryStateJob } from '@/store/server/history/types'
+
+@Component({
+    components: { Panel },
+})
+export default class HistoryListPanelDeleteSelectedDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Boolean, required: true }) readonly show!: boolean
+
+    get selectedJobs() {
+        return this.$store.state.gui.view.history.selectedJobs ?? []
+    }
+
+    set selectedJobs(newVal) {
+        this.$store.dispatch('gui/saveSettingWithoutUpload', { name: 'view.history.selectedJobs', value: newVal })
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    deleteSelectedJobs() {
+        this.selectedJobs.forEach((item: ServerHistoryStateJob) => {
+            this.$socket.emit(
+                'server.history.delete_job',
+                { uid: item.job_id },
+                { action: 'server/history/getDeletedJobs' }
+            )
+        })
+
+        this.selectedJobs = []
+        this.closeDialog()
+    }
+}
+</script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 712327d6a..ad5fec6d2 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -1,159 +1,133 @@
 <template>
-    <div>
-        <panel
-            :icon="mdiFileDocumentMultipleOutline"
-            :title="$t('History.PrintHistory')"
-            card-class="history-list-panel">
-            <v-card-text>
-                <v-row>
-                    <v-col class="col-4 d-flex align-center">
-                        <v-text-field
-                            v-model="search"
-                            :append-icon="mdiMagnify"
-                            :label="$t('History.Search')"
-                            single-line
-                            outlined
-                            clearable
-                            hide-details
-                            dense />
-                    </v-col>
-                    <v-col class="offset-4 col-4 d-flex align-center justify-end">
-                        <template v-if="selectedJobs.length">
+    <panel :icon="mdiFileDocumentMultipleOutline" :title="$t('History.PrintHistory')" card-class="history-list-panel">
+        <v-card-text>
+            <v-row>
+                <v-col class="col-4 d-flex align-center">
+                    <v-text-field
+                        v-model="search"
+                        :append-icon="mdiMagnify"
+                        :label="$t('History.Search')"
+                        single-line
+                        outlined
+                        clearable
+                        hide-details
+                        dense />
+                </v-col>
+                <v-col class="offset-4 col-4 d-flex align-center justify-end">
+                    <template v-if="selectedJobs.length">
+                        <v-btn
+                            :title="$t('History.Delete')"
+                            color="error"
+                            class="px-2 minwidth-0 ml-3"
+                            @click="deleteSelectedDialog = true">
+                            <v-icon>{{ mdiDelete }}</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-btn class="px-2 minwidth-0 ml-3" @click="addMaintenanceDialog = true">
+                        <v-icon>{{ mdiNotebookPlus }}</v-icon>
+                    </v-btn>
+                    <v-tooltip v-if="!allLoaded" top>
+                        <template #activator="{ on, attrs }">
                             <v-btn
-                                :title="$t('History.Delete')"
-                                color="error"
+                                :loading="loadings.includes('historyLoadAll')"
                                 class="px-2 minwidth-0 ml-3"
-                                @click="deleteSelectedDialog = true">
-                                <v-icon>{{ mdiDelete }}</v-icon>
+                                v-bind="attrs"
+                                v-on="on"
+                                @click="refreshHistory">
+                                <v-icon>{{ mdiDatabaseArrowDownOutline }}</v-icon>
                             </v-btn>
                         </template>
-                        <v-btn class="px-2 minwidth-0 ml-3" @click="addMaintenanceDialog = true">
-                            <v-icon>{{ mdiNotebookPlus }}</v-icon>
-                        </v-btn>
-                        <v-tooltip v-if="!allLoaded" top>
-                            <template #activator="{ on, attrs }">
-                                <v-btn
-                                    :loading="loadings.includes('historyLoadAll')"
-                                    class="px-2 minwidth-0 ml-3"
-                                    v-bind="attrs"
-                                    v-on="on"
-                                    @click="refreshHistory">
-                                    <v-icon>{{ mdiDatabaseArrowDownOutline }}</v-icon>
-                                </v-btn>
-                            </template>
-                            <span>{{ $t('History.LoadCompleteHistory') }}</span>
-                        </v-tooltip>
-                        <v-tooltip top>
-                            <template #activator="{ on, attrs }">
-                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on" @click="exportHistory">
-                                    <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
-                                </v-btn>
-                            </template>
-                            <span>{{ $t('History.TitleExportHistory') }}</span>
-                        </v-tooltip>
-                        <v-menu :offset-y="true" :close-on-content-click="false">
-                            <template #activator="{ on, attrs }">
-                                <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on">
-                                    <v-icon>{{ mdiCog }}</v-icon>
-                                </v-btn>
-                            </template>
-                            <v-list>
-                                <template v-if="allPrintStatusArray.length">
-                                    <v-list-item
-                                        v-for="status of allPrintStatusArray"
-                                        :key="status.key"
-                                        class="minHeight36">
-                                        <v-checkbox
-                                            class="mt-0"
-                                            hide-details
-                                            :input-value="status.showInTable"
-                                            :label="`${status.displayName} (${status.value})`"
-                                            @change="changeStatusVisible(status)" />
-                                    </v-list-item>
-                                    <v-divider />
-                                </template>
+                        <span>{{ $t('History.LoadCompleteHistory') }}</span>
+                    </v-tooltip>
+                    <v-tooltip top>
+                        <template #activator="{ on, attrs }">
+                            <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on" @click="exportHistory">
+                                <v-icon>{{ mdiDatabaseExportOutline }}</v-icon>
+                            </v-btn>
+                        </template>
+                        <span>{{ $t('History.TitleExportHistory') }}</span>
+                    </v-tooltip>
+                    <v-menu :offset-y="true" :close-on-content-click="false">
+                        <template #activator="{ on, attrs }">
+                            <v-btn class="px-2 minwidth-0 ml-3" v-bind="attrs" v-on="on">
+                                <v-icon>{{ mdiCog }}</v-icon>
+                            </v-btn>
+                        </template>
+                        <v-list>
+                            <template v-if="allPrintStatusArray.length">
                                 <v-list-item
-                                    v-for="(header, index) of configHeaders"
-                                    :key="'history-list-panel-header-option-' + index"
+                                    v-for="status of allPrintStatusArray"
+                                    :key="status.key"
                                     class="minHeight36">
                                     <v-checkbox
-                                        v-model="header.visible"
                                         class="mt-0"
                                         hide-details
-                                        :label="header.text"
-                                        @change="changeColumnVisible(header.value)" />
+                                        :input-value="status.showInTable"
+                                        :label="`${status.displayName} (${status.value})`"
+                                        @change="changeStatusVisible(status)" />
                                 </v-list-item>
-                            </v-list>
-                        </v-menu>
-                    </v-col>
-                </v-row>
-            </v-card-text>
-            <v-divider class="mb-3" />
-            <v-data-table
-                v-model="selectedJobs"
-                :items="entries"
-                class="history-jobs-table"
-                :headers="filteredHeaders"
-                :custom-sort="sortFiles"
-                :sort-by.sync="sortBy"
-                :sort-desc.sync="sortDesc"
-                :items-per-page.sync="countPerPage"
-                :footer-props="{
-                    itemsPerPageText: $t('History.Jobs'),
-                    itemsPerPageAllText: $t('History.AllJobs'),
-                    itemsPerPageOptions: [10, 25, 50, 100, -1],
-                }"
-                item-key="job_id"
-                :search="search"
-                :custom-filter="advancedSearch"
-                mobile-breakpoint="0"
-                show-select>
-                <template #no-data>
-                    <div class="text-center">{{ $t('History.Empty') }}</div>
-                </template>
-
-                <template #item="{ index, item, isSelected, select }">
-                    <history-list-entry-job
-                        v-if="item.type === 'job'"
-                        :key="`${index}_${item.job_id}`"
-                        :is-selected="isSelected"
-                        :item="item"
-                        :table-fields="tableFields"
-                        @select="select" />
-                    <history-list-entry-maintenance
-                        v-else-if="item.type === 'maintenance'"
-                        :key="`${index}_${item.id}`"
-                        :is-selected="isSelected"
-                        :item="item"
-                        :table-fields="tableFields"
-                        @select="select" />
-                </template>
-            </v-data-table>
-        </panel>
-        <v-dialog v-model="deleteSelectedDialog" max-width="400">
-            <panel :title="$t('History.Delete')" card-class="history-delete-selected-dialog" :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="deleteSelectedDialog = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text>
-                    <p v-if="selectedJobs.length === 1" class="mb-0">
-                        {{ $t('History.DeleteSingleJobQuestion') }}
-                    </p>
-                    <p v-else class="mb-0">
-                        {{ $t('History.DeleteSelectedQuestion', { count: selectedJobs.length }) }}
-                    </p>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn color="" text @click="deleteSelectedDialog = false">{{ $t('History.Cancel') }}</v-btn>
-                    <v-btn color="error" text @click="deleteSelectedJobs">{{ $t('History.Delete') }}</v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
+                                <v-divider />
+                            </template>
+                            <v-list-item
+                                v-for="(header, index) of configHeaders"
+                                :key="'history-list-panel-header-option-' + index"
+                                class="minHeight36">
+                                <v-checkbox
+                                    v-model="header.visible"
+                                    class="mt-0"
+                                    hide-details
+                                    :label="header.text"
+                                    @change="changeColumnVisible(header.value)" />
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-col>
+            </v-row>
+        </v-card-text>
+        <v-divider class="mb-3" />
+        <v-data-table
+            v-model="selectedJobs"
+            :items="entries"
+            class="history-jobs-table"
+            :headers="filteredHeaders"
+            :custom-sort="sortFiles"
+            :sort-by.sync="sortBy"
+            :sort-desc.sync="sortDesc"
+            :items-per-page.sync="countPerPage"
+            :footer-props="{
+                itemsPerPageText: $t('History.Jobs'),
+                itemsPerPageAllText: $t('History.AllJobs'),
+                itemsPerPageOptions: [10, 25, 50, 100, -1],
+            }"
+            item-key="job_id"
+            :search="search"
+            :custom-filter="advancedSearch"
+            mobile-breakpoint="0"
+            show-select>
+            <template #no-data>
+                <div class="text-center">{{ $t('History.Empty') }}</div>
+            </template>
+
+            <template #item="{ index, item, isSelected, select }">
+                <history-list-entry-job
+                    v-if="item.type === 'job'"
+                    :key="`${index}_${item.job_id}`"
+                    :is-selected="isSelected"
+                    :item="item"
+                    :table-fields="tableFields"
+                    @select="select" />
+                <history-list-entry-maintenance
+                    v-else-if="item.type === 'maintenance'"
+                    :key="`${index}_${item.id}`"
+                    :is-selected="isSelected"
+                    :item="item"
+                    :table-fields="tableFields"
+                    @select="select" />
+            </template>
+        </v-data-table>
+        <history-list-panel-delete-selected-dialog :show="deleteSelectedDialog" @close="deleteSelectedDialog = false" />
         <history-list-panel-add-maintenance :show="addMaintenanceDialog" @close="addMaintenanceDialog = false" />
-    </div>
+    </panel>
 </template>
 
 <script lang="ts">
@@ -177,6 +151,7 @@ import HistoryListEntryJob from '@/components/panels/HistoryList/HistoryListEntr
 import HistoryListPanelAddMaintenance from '@/components/dialogs/HistoryListPanelAddMaintenance.vue'
 import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
 import HistoryListEntryMaintenance from '@/components/panels/HistoryList/HistoryListEntryMaintenance.vue'
+import HistoryListPanelDeleteSelectedDialog from '@/components/dialogs/HistoryListPanelDeleteSelectedDialog.vue'
 
 export interface HistoryListPanelRow {
     text: string
@@ -190,6 +165,7 @@ export interface HistoryListPanelRow {
 
 @Component({
     components: {
+        HistoryListPanelDeleteSelectedDialog,
         HistoryListEntryMaintenance,
         HistoryListPanelAddMaintenance,
         HistoryListEntryJob,
@@ -452,32 +428,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
     }
 
-    formatPrintTime(totalSeconds: number) {
-        if (totalSeconds) {
-            let output = ''
-
-            const days = Math.floor(totalSeconds / (3600 * 24))
-            if (days) {
-                totalSeconds %= 3600 * 24
-                output += days + 'd'
-            }
-
-            const hours = Math.floor(totalSeconds / 3600)
-            totalSeconds %= 3600
-            if (hours) output += ' ' + hours + 'h'
-
-            const minutes = Math.floor(totalSeconds / 60)
-            if (minutes) output += ' ' + minutes + 'm'
-
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
-        }
-
-        return '--'
-    }
-
     sortFiles(items: any[], sortBy: string[], sortDesc: boolean[]) {
         const sortByClean = sortBy.length ? sortBy[0] : 'filename'
         const sortDescClean = sortDesc[0]
@@ -530,19 +480,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/showStatusInHistoryList', status.name)
     }
 
-    deleteSelectedJobs() {
-        this.selectedJobs.forEach((item: ServerHistoryStateJob) => {
-            this.$socket.emit(
-                'server.history.delete_job',
-                { uid: item.job_id },
-                { action: 'server/history/getDeletedJobs' }
-            )
-        })
-
-        this.selectedJobs = []
-        this.deleteSelectedDialog = false
-    }
-
     exportHistory() {
         const checkString = parseFloat('1.23').toLocaleString(this.browserLocale)
         const decimalSeparator = checkString.indexOf(',') >= 0 ? ',' : '.'

From 0c6de24ccdb7886219d6b32e6adb9763f5031214 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Mar 2024 19:32:17 +0100
Subject: [PATCH 34/46] fix: fix long M117 outputs in the status panel (#1800)

---
 src/components/panels/StatusPanel.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 1c68082ea..ec8612bec 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -59,8 +59,10 @@
                 <v-container>
                     <v-row>
                         <v-col class="py-2">
-                            <span class="subtitle-2 d-block px-0 text--disabled">
-                                <v-icon class="mr-2" color="warning" small>{{ mdiAlertOutline }}</v-icon>
+                            <span class="subtitle-2 px-0 text--disabled">
+                                <v-icon class="mr-2 mt-1 float-left" color="warning" small>
+                                    {{ mdiAlertOutline }}
+                                </v-icon>
                                 {{ print_stats_message }}
                             </span>
                         </v-col>
@@ -70,10 +72,10 @@
             </template>
             <template v-if="display_message">
                 <v-container>
-                    <v-row>
-                        <v-col class="py-2">
-                            <span class="subtitle-2 d-block px-0 text--disabled">
-                                <v-icon class="mr-2" small>{{ mdiMessageProcessingOutline }}</v-icon>
+                    <v-row class="flex-nowrap">
+                        <v-col class="py-2" style="min-width: 0">
+                            <span class="subtitle-2 px-0 text--disabled">
+                                <v-icon class="mr-2 mt-1 float-left" small>{{ mdiMessageProcessingOutline }}</v-icon>
                                 {{ display_message }}
                             </span>
                         </v-col>

From 7425a2b0137abe31e2b957191561df7295edd622 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Mar 2024 19:32:30 +0100
Subject: [PATCH 35/46] fix: fix long content lines in console (#1799)

---
 src/components/console/ConsoleTableEntry.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index 871ac909d..9e0cd7897 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row :class="entryStyle">
         <v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
-        <v-col :class="messageClass" @click.capture="commandClick" v-html="event.formatMessage" />
+        <v-col :class="messageClass" style="min-width: 0" @click.capture="commandClick" v-html="event.formatMessage" />
     </v-row>
 </template>
 
@@ -17,7 +17,7 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     declare readonly event: ServerStateEvent
 
     get entryStyle() {
-        const classes = ['ma-0']
+        const classes = ['ma-0', 'flex-nowrap']
         classes.push(this.$store.state.gui.console.entryStyle ?? 'default')
         if (this.event.type === 'action') classes.push('text--disabled')
 

From ad021806eb7477e8727b89715c44617f455413c2 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Mar 2024 19:32:46 +0100
Subject: [PATCH 36/46] feat(miscellaneous): add support for pwm_tool and
 pwm_cycle_time (#1804)

---
 src/components/inputs/MiscellaneousSlider.vue |  7 +++----
 src/store/printer/getters.ts                  | 13 +++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/inputs/MiscellaneousSlider.vue b/src/components/inputs/MiscellaneousSlider.vue
index 43536deb7..6c7e3d70a 100644
--- a/src/components/inputs/MiscellaneousSlider.vue
+++ b/src/components/inputs/MiscellaneousSlider.vue
@@ -14,9 +14,9 @@
                     <v-icon v-else-if="type === 'led'" class="mr-2" small :retain-focus-on-click="true" @click="ledOn">
                         {{ mdiLightbulbOutline }}
                     </v-icon>
-                    <v-icon v-else-if="type !== 'output_pin'" small :class="fanClasses">{{ mdiFan }}</v-icon>
+                    <v-icon v-else-if="type.includes('fan')" small :class="fanClasses">{{ mdiFan }}</v-icon>
                     <span>{{ convertName(name) }}</span>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <small v-if="rpm !== null" :class="rpmClasses">{{ Math.round(rpm ?? 0) }} RPM</small>
                     <span v-if="!controllable" class="font-weight-bold">
                         {{ Math.round(parseFloat(value) * 100) }} %
@@ -199,12 +199,11 @@ export default class MiscellaneousSlider extends Mixins(BaseMixin) {
     sendCmd(newVal: number): void {
         if (this.value === newVal) return
 
-        let gcode = ''
+        let gcode = `SET_PIN PIN=${this.name} VALUE=${newVal.toFixed(2)}`
         if (newVal < this.min) newVal = 0
         newVal = newVal * this.multi
         if (this.type === 'fan') gcode = `M106 S${newVal.toFixed(0)}`
         if (this.type === 'fan_generic') gcode = `SET_FAN_SPEED FAN=${this.name} SPEED=${newVal}`
-        if (this.type === 'output_pin') gcode = `SET_PIN PIN=${this.name} VALUE=${newVal.toFixed(2)}`
         if (this.type === 'led')
             gcode = `SET_LED LED=${this.name} ${this.ledChannelName}=${newVal.toFixed(2)} SYNC=0 TRANSMIT=1`
 
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index 24d5d71d8..225b06bee 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -289,7 +289,15 @@ export const getters: GetterTree<PrinterState, RootState> = {
 
     getMiscellaneous: (state) => {
         const output: PrinterStateMiscellaneous[] = []
-        const supportedObjects = ['controller_fan', 'heater_fan', 'fan_generic', 'fan', 'output_pin']
+        const supportedObjects = [
+            'controller_fan',
+            'heater_fan',
+            'fan_generic',
+            'fan',
+            'output_pin',
+            'pwm_tool',
+            'pwm_cycle_time',
+        ]
 
         const controllableFans = ['fan_generic', 'fan']
 
@@ -308,10 +316,11 @@ export const getters: GetterTree<PrinterState, RootState> = {
 
                     if (nameSplit[0].toLowerCase() === 'fan') scale = 255
 
-                    if (nameSplit[0].toLowerCase() === 'output_pin') {
+                    if (['output_pin', 'pwm_tool', 'pwm_cycle_time'].includes(nameSplit[0])) {
                         controllable = true
                         pwm = false
                         if ('pwm' in settings) pwm = settings?.pwm ?? false
+                        if (['pwm_tool', 'pwm_cycle_time'].includes(nameSplit[0])) pwm = true
                         if ('scale' in settings) scale = settings?.scale ?? 1
                     }
 

From 371de28a634a8fec8f9fda314b10c2d9e0ea8944 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Mar 2024 19:32:58 +0100
Subject: [PATCH 37/46] feat: add fullscreen size for gcodefiles, gcodeviewer
 and webcam (#1803)

---
 src/App.vue                | 17 ++++++++++++++++-
 src/assets/styles/page.css |  4 ++++
 src/routes/index.ts        | 15 +++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 065416668..30d03d53e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
             <the-sidebar />
             <the-topbar />
             <v-main id="content" :style="mainStyle">
-                <v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
+                <v-container id="page-container" fluid :class="containerClasses">
                     <router-view />
                 </v-container>
             </v-main>
@@ -44,6 +44,7 @@ import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
 import { setAndLoadLocale } from './plugins/i18n'
 import TheMacroPrompt from '@/components/dialogs/TheMacroPrompt.vue'
+import { AppRoute } from '@/routes'
 
 Component.registerHooks(['metaInfo'])
 
@@ -172,6 +173,20 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
         return Math.floor(this.$store.getters['printer/getPrintPercent'] * 100)
     }
 
+    get containerClasses() {
+        const currentRouteOptions = this.$router.options.routes?.find(
+            (route) => route.name === this.$route.name
+        ) as AppRoute
+
+        return {
+            'px-3': true,
+            'px-sm-6': true,
+            'py-sm-6': true,
+            'mx-auto': true,
+            fullscreen: currentRouteOptions?.fullscreen ?? false,
+        }
+    }
+
     @Watch('language')
     async languageChanged(newVal: string): Promise<void> {
         await setAndLoadLocale(newVal)
diff --git a/src/assets/styles/page.css b/src/assets/styles/page.css
index fc3438e48..1a9084aa8 100644
--- a/src/assets/styles/page.css
+++ b/src/assets/styles/page.css
@@ -11,6 +11,10 @@ body {
     max-width: 1800px;
 }
 
+#page-container.fullscreen {
+    max-width: none;
+}
+
 .overflowingContentWidgets {
     visibility: hidden;
 }
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 6964df89b..94117ff3c 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -22,6 +22,7 @@ import {
 
 const routes: AppRoute[] = [
     {
+        name: 'dashboard',
         title: 'Dashboard',
         path: '/',
         icon: mdiMonitorDashboard,
@@ -31,6 +32,7 @@ const routes: AppRoute[] = [
         position: 10,
     },
     {
+        name: 'farm',
         title: 'Printers',
         path: '/allPrinters',
         component: Farm,
@@ -38,6 +40,7 @@ const routes: AppRoute[] = [
         showInNavi: false,
     },
     {
+        name: 'webcam',
         title: 'Webcam',
         path: '/cam',
         icon: mdiWebcam,
@@ -45,8 +48,10 @@ const routes: AppRoute[] = [
         alwaysShow: true,
         showInNavi: true,
         position: 20,
+        fullscreen: true,
     },
     {
+        name: 'console',
         title: 'Console',
         path: '/console',
         icon: mdiConsoleLine,
@@ -57,6 +62,7 @@ const routes: AppRoute[] = [
         position: 30,
     },
     {
+        name: 'heightmap',
         title: 'Heightmap',
         path: '/heightmap',
         icon: mdiGrid,
@@ -67,6 +73,7 @@ const routes: AppRoute[] = [
         position: 40,
     },
     {
+        name: 'gcodefiles',
         title: 'G-Code Files',
         path: '/files',
         icon: mdiFileDocumentMultipleOutline,
@@ -75,8 +82,10 @@ const routes: AppRoute[] = [
         showInNavi: true,
         registeredDirectory: 'gcodes',
         position: 50,
+        fullscreen: true,
     },
     {
+        name: 'gcodeviewer',
         title: 'G-Code Viewer',
         path: '/viewer',
         icon: mdiVideo3d,
@@ -84,8 +93,10 @@ const routes: AppRoute[] = [
         alwaysShow: true,
         showInNavi: true,
         position: 60,
+        fullscreen: true,
     },
     {
+        name: 'history',
         title: 'History',
         path: '/history',
         icon: mdiHistory,
@@ -96,6 +107,7 @@ const routes: AppRoute[] = [
         position: 70,
     },
     {
+        name: 'timelapse',
         title: 'Timelapse',
         path: '/timelapse',
         icon: mdiTimelapse,
@@ -106,6 +118,7 @@ const routes: AppRoute[] = [
         position: 80,
     },
     {
+        name: 'machine',
         title: 'Machine',
         path: '/config',
         icon: mdiWrench,
@@ -127,6 +140,7 @@ const routes: AppRoute[] = [
 export default routes
 
 export interface AppRoute {
+    name?: string
     title: string | null
     path: string
     redirect?: string
@@ -140,4 +154,5 @@ export interface AppRoute {
     klipperIsConnected?: boolean
     children?: AppRoute[]
     position?: number
+    fullscreen?: boolean
 }

From ed62a7244052f0694398974e3c1cd3a6f34fe47d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Mar 2024 19:33:09 +0100
Subject: [PATCH 38/46] feat: add qr search function in the spoolman change
 spool dialog (#1802)

---
 src/components/dialogs/SpoolmanChangeSpoolDialog.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 14206b70a..b8e12a27d 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -156,6 +156,11 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     }
 
     customFilter(value: any, search: string, item: ServerSpoolmanStateSpool): boolean {
+        if (search.trim().startsWith('web+spoolman:s-')) {
+            const spoolId = parseInt(search.split('-')[1] ?? -1)
+            return item.id === spoolId
+        }
+
         const querySplits = search.toLowerCase().split(' ')
         const searchArray = [
             item.comment,

From 19c0386db24fd78cfb4e1533cf2e6ab4b993f388 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Mar 2024 20:39:59 +0100
Subject: [PATCH 39/46] refactor: simplify HistoryStatisticsPanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/HistoryStatisticsPanel.vue         | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index 7a42034be..ae6b25126 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -57,17 +57,12 @@
                     </v-simple-table>
                 </v-col>
                 <v-col class="col-12 col-sm-6 col-md-4">
-                    <history-all-print-status-chart
-                        v-if="togglePrintStatus === 'chart'"></history-all-print-status-chart>
-                    <history-all-print-status-table v-else></history-all-print-status-table>
+                    <history-all-print-status-chart v-if="togglePrintStatus === 'chart'" />
+                    <history-all-print-status-table v-else />
                     <div class="text-center mb-3">
                         <v-btn-toggle v-model="togglePrintStatus" small mandatory>
-                            <v-btn small value="chart">
-                                {{ $t('History.Chart') }}
-                            </v-btn>
-                            <v-btn small value="table">
-                                {{ $t('History.Table') }}
-                            </v-btn>
+                            <v-btn small value="chart">{{ $t('History.Chart') }}</v-btn>
+                            <v-btn small value="table">{{ $t('History.Table') }}</v-btn>
                         </v-btn-toggle>
                         <v-tooltip v-if="!allLoaded" top>
                             <template #activator="{ on, attrs }">
@@ -88,16 +83,12 @@
                     </div>
                 </v-col>
                 <v-col class="col-12 col-sm-12 col-md-4">
-                    <history-filament-usage v-if="toggleChart === 'filament_usage'"></history-filament-usage>
-                    <history-printtime-avg v-else-if="toggleChart === 'printtime_avg'"></history-printtime-avg>
+                    <history-filament-usage v-if="toggleChart === 'filament_usage'" />
+                    <history-printtime-avg v-else-if="toggleChart === 'printtime_avg'" />
                     <div class="text-center mt-3">
                         <v-btn-toggle v-model="toggleChart" small mandatory>
-                            <v-btn small value="filament_usage">
-                                {{ $t('History.FilamentUsage') }}
-                            </v-btn>
-                            <v-btn small value="printtime_avg">
-                                {{ $t('History.PrinttimeAvg') }}
-                            </v-btn>
+                            <v-btn small value="filament_usage">{{ $t('History.FilamentUsage') }}</v-btn>
+                            <v-btn small value="printtime_avg">{{ $t('History.PrinttimeAvg') }}</v-btn>
                         </v-btn-toggle>
                     </div>
                 </v-col>

From 11ec2f094a52c57ecd55bd05bb59cc4720acb67a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Mar 2024 20:44:53 +0100
Subject: [PATCH 40/46] refactor: refactor formatPrintTime function and add
 function to disable days

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/plugins/helpers.ts | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index 8cbd54a94..b85341794 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -112,30 +112,30 @@ export const formatFrequency = (frequency: number): string => {
     return Math.max(frequency, 0.1).toFixed() + units[i]
 }
 
-export const formatPrintTime = (totalSeconds: number): string => {
-    if (totalSeconds) {
-        let output = ''
+export const formatPrintTime = (totalSeconds: number, boolDays: boolean = true): string => {
+    if (totalSeconds) return '--'
 
+    const output: string[] = []
+
+    if (boolDays) {
         const days = Math.floor(totalSeconds / (3600 * 24))
         if (days) {
             totalSeconds %= 3600 * 24
-            output += days + 'd'
+            output.push(`${days}d`)
         }
+    }
 
-        const hours = Math.floor(totalSeconds / 3600)
-        totalSeconds %= 3600
-        if (hours) output += ' ' + hours + 'h'
-
-        const minutes = Math.floor(totalSeconds / 60)
-        if (minutes) output += ' ' + minutes + 'm'
+    const hours = Math.floor(totalSeconds / 3600)
+    totalSeconds %= 3600
+    if (hours) output.push(`${hours}h`)
 
-        const seconds = totalSeconds % 60
-        if (seconds) output += ' ' + seconds.toFixed(0) + 's'
+    const minutes = Math.floor(totalSeconds / 60)
+    if (minutes) output.push(`${minutes}m`)
 
-        return output
-    }
+    const seconds = totalSeconds % 60
+    if (seconds) output.push(`${seconds.toFixed(0)}s`)
 
-    return '--'
+    return output.join(' ')
 }
 
 export const sortFiles = (items: FileStateFile[] | null, sortBy: string[], sortDesc: boolean[]): FileStateFile[] => {

From cbfe94a5fe214a6a05b4f6f6ec9331f01966d12a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Mar 2024 20:48:50 +0100
Subject: [PATCH 41/46] fix: fix issue in formatPrintTime helper

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/plugins/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index b85341794..b3aa33bd9 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -113,7 +113,7 @@ export const formatFrequency = (frequency: number): string => {
 }
 
 export const formatPrintTime = (totalSeconds: number, boolDays: boolean = true): string => {
-    if (totalSeconds) return '--'
+    if (!totalSeconds) return '--'
 
     const output: string[] = []
 

From 1841a68970cb75afbf5a78432e9cba8b4f250e40 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Mar 2024 22:24:52 +0100
Subject: [PATCH 42/46] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryListPanelAddMaintenance.vue        | 64 +++++++++++++------
 .../HistoryList/HistoryListEntryJob.vue       | 28 +-------
 .../HistoryListEntryMaintenance.vue           | 57 ++++++++++++++---
 src/components/panels/HistoryListPanel.vue    |  8 +--
 .../panels/HistoryStatisticsPanel.vue         | 34 +++-------
 src/plugins/helpers.ts                        |  2 +-
 src/store/gui/maintenance/actions.ts          |  6 +-
 src/store/gui/maintenance/mutations.ts        |  8 +--
 src/store/gui/maintenance/types.ts            | 32 ++++++----
 9 files changed, 134 insertions(+), 105 deletions(-)

diff --git a/src/components/dialogs/HistoryListPanelAddMaintenance.vue b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
index 481f71875..488b53c97 100644
--- a/src/components/dialogs/HistoryListPanelAddMaintenance.vue
+++ b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
@@ -105,7 +105,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import Panel from '@/components/ui/Panel.vue'
@@ -172,28 +172,56 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
             entry: {
                 name: this.name,
                 note: this.note,
-                start_time: date.getTime(),
+                // divided by 1000 to get seconds, because history entries are also in seconds
+                start_time: date.getTime() / 1000,
                 end_time: null,
-
-                reminder: this.reminder,
-                reminderRepeat: this.reminderRepeat,
-
-                reminderFilament: this.reminderFilament,
-                reminderFilamentStart: this.totalFilamentUsed,
-                reminderFilamentTrigger: reminderFilamentTrigger,
-                reminderFilamentEnd: null,
-
-                reminderPrinttime: this.reminderPrinttime,
-                reminderPrinttimeStart: this.totalPrinttime,
-                reminderPrinttimeTrigger: reminderPrinttimeTrigger,
-                reminderPrinttimeEnd: null,
-
-                reminderDate: this.reminderDate,
-                reminderDateTrigger: reminderDateTrigger,
+                start_filament: this.totalFilamentUsed,
+                start_total_print_time: this.totalPrinttime,
+
+                reminder: {
+                    bool: this.reminder,
+                    repeat: this.reminderRepeat,
+
+                    filament: {
+                        bool: this.reminderFilament,
+                        trigger: reminderFilamentTrigger,
+                        end: null,
+                    },
+
+                    printtime: {
+                        bool: this.reminderPrinttime,
+                        trigger: reminderPrinttimeTrigger,
+                        end: null,
+                    },
+
+                    date: {
+                        bool: this.reminderDate,
+                        trigger: reminderDateTrigger,
+                        end: null,
+                    },
+                },
             },
         })
 
         this.closeDialog()
     }
+
+    resetValues() {
+        this.name = ''
+        this.note = ''
+        this.reminder = false
+        this.reminderRepeat = false
+        this.reminderFilament = false
+        this.reminderFilamentValue = 0
+        this.reminderPrinttime = false
+        this.reminderPrinttimeValue = 0
+        this.reminderDate = false
+        this.reminderDateValue = 0
+    }
+
+    @Watch('show')
+    onShowChanged() {
+        if (this.show) this.resetValues()
+    }
 }
 </script>
diff --git a/src/components/panels/HistoryList/HistoryListEntryJob.vue b/src/components/panels/HistoryList/HistoryListEntryJob.vue
index 44b098716..5ef800e95 100644
--- a/src/components/panels/HistoryList/HistoryListEntryJob.vue
+++ b/src/components/panels/HistoryList/HistoryListEntryJob.vue
@@ -148,7 +148,7 @@ import {
     mdiPrinter,
     mdiTextBoxSearch,
 } from '@mdi/js'
-import { formatFilesize } from '@/plugins/helpers'
+import { formatFilesize, formatPrintTime } from '@/plugins/helpers'
 import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
 import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
 import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue'
@@ -312,7 +312,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 return this.formatDateTime(value * 1000)
 
             case 'time':
-                return this.formatPrintTime(value)
+                return formatPrintTime(value, false)
 
             case 'temp':
                 return value?.toFixed() + ' °C'
@@ -326,29 +326,5 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 return value
         }
     }
-
-    formatPrintTime(totalSeconds: number) {
-        if (!totalSeconds) return '--'
-
-        let output = ''
-
-        const days = Math.floor(totalSeconds / (3600 * 24))
-        if (days) {
-            totalSeconds %= 3600 * 24
-            output += days + 'd'
-        }
-
-        const hours = Math.floor(totalSeconds / 3600)
-        totalSeconds %= 3600
-        if (hours) output += ' ' + hours + 'h'
-
-        const minutes = Math.floor(totalSeconds / 60)
-        if (minutes) output += ' ' + minutes + 'm'
-
-        const seconds = totalSeconds % 60
-        if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-        return output
-    }
 }
 </script>
diff --git a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
index 1ec645e82..638e4837f 100644
--- a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
+++ b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
@@ -9,11 +9,42 @@
             <v-simple-checkbox v-ripple :value="isSelected" class="pa-0 mr-0" @click.stop="select(!isSelected)" />
         </td>
         <td class="px-0 text-center" style="width: 32px">
-            <v-icon>{{ mdiFile }}</v-icon>
+            <v-icon color="primary">{{ mdiNotebook }}</v-icon>
         </td>
         <td>{{ item.name }}</td>
-        <td class="text-right text-no-wrap">bla</td>
-        <td :colspan="tableFields.length" />
+        <td class="text-right text-no-wrap">
+            <template v-if="item.reminder?.bool">
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-icon small color="primary" v-bind="attrs" v-on="on">
+                            {{ mdiAlarm }}
+                        </v-icon>
+                    </template>
+                    <div>
+                        <div v-if="item.reminder.filament.bool">
+                            <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
+                            {{ (item.reminder.filament.trigger / 1000).toFixed(1) }}m
+                        </div>
+                        <div v-if="item.reminder.printtime.bool">
+                            <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
+                            {{ formatPrintTime(item.reminder.printtime.trigger, false) }}
+                        </div>
+                    </div>
+                </v-tooltip>
+            </template>
+        </td>
+        <td class="text-left text-no-wrap">
+            {{ formatDateTime(item.start_time * 1000, false) }}
+        </td>
+        <td :colspan="tableFields.length - 1" />
+        <v-menu v-model="contextMenuBool" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
+            <v-list>
+                <v-list-item class="red--text" @click="deleteEntry">
+                    <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
+                    {{ $t('History.Delete') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
     </tr>
 </template>
 <script lang="ts">
@@ -21,24 +52,26 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import Panel from '@/components/ui/Panel.vue'
 import BaseMixin from '@/components/mixins/base'
-import { mdiCloseThick, mdiDelete, mdiFile } from '@mdi/js'
+import { mdiAlarm, mdiDelete, mdiNotebook } from '@mdi/js'
 import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
 import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
 import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+import { formatPrintTime } from '@/plugins/helpers'
 
 @Component({
     components: { HistoryListPanelNoteDialog, HistoryListPanelDetailsDialog, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
-    mdiCloseThick = mdiCloseThick
+    mdiAlarm = mdiAlarm
     mdiDelete = mdiDelete
-    mdiFile = mdiFile
+    mdiNotebook = mdiNotebook
+    formatPrintTime = formatPrintTime
 
-    private detailsDialogBool = false
+    detailsDialogBool = false
 
-    private contextMenuBool = false
-    private contextMenuX = 0
-    private contextMenuY = 0
+    contextMenuBool = false
+    contextMenuX = 0
+    contextMenuY = 0
 
     @Prop({ type: Object, required: true }) readonly item!: GuiMaintenanceStateEntry
     @Prop({ type: Array, required: true }) readonly tableFields!: HistoryListPanelRow[]
@@ -66,5 +99,9 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
             this.contextMenuBool = true
         })
     }
+
+    deleteEntry() {
+        this.$store.dispatch('gui/maintenance/delete', this.item.id)
+    }
 }
 </script>
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index ad5fec6d2..d4eb7e4a3 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -201,11 +201,7 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     }
 
     get maintenanceEntries() {
-        const entries = this.$store.getters['gui/maintenance/getEntries'] ?? []
-
-        window.console.log('mEntries', entries)
-
-        return entries
+        return this.$store.getters['gui/maintenance/getEntries'] ?? []
     }
 
     get entries() {
@@ -213,6 +209,8 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
             return { ...job, type: 'job' }
         })
 
+        if (this.sortBy !== 'start_time') return entries
+
         entries = [
             ...entries,
             ...this.maintenanceEntries.map((entry: GuiMaintenanceStateEntry) => {
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index ae6b25126..20b31c4c9 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -12,15 +12,15 @@
                             <template v-if="existsSelectedJobs">
                                 <tr>
                                     <td>{{ $t('History.SelectedPrinttime') }}</td>
-                                    <td class="text-right">{{ formatPrintTime(selectedPrintTime) }}</td>
+                                    <td class="text-right">{{ formatPrintTime(selectedPrintTime, false) }}</td>
                                 </tr>
                                 <tr>
                                     <td>{{ $t('History.LongestPrinttime') }}</td>
-                                    <td class="text-right">{{ formatPrintTime(selectedLongestPrintTime) }}</td>
+                                    <td class="text-right">{{ formatPrintTime(selectedLongestPrintTime, false) }}</td>
                                 </tr>
                                 <tr>
                                     <td>{{ $t('History.AvgPrinttime') }}</td>
-                                    <td class="text-right">{{ formatPrintTime(selectedAvgPrintTime) }}</td>
+                                    <td class="text-right">{{ formatPrintTime(selectedAvgPrintTime, false) }}</td>
                                 </tr>
                                 <tr>
                                     <td>{{ $t('History.SelectedFilamentUsed') }}</td>
@@ -34,15 +34,15 @@
                             <template v-else>
                                 <tr>
                                     <td>{{ $t('History.TotalPrinttime') }}</td>
-                                    <td class="text-right">{{ formatPrintTime(totalPrintTime) }}</td>
+                                    <td class="text-right">{{ formatPrintTime(totalPrintTime, false) }}</td>
                                 </tr>
                                 <tr>
                                     <td>{{ $t('History.LongestPrinttime') }}</td>
-                                    <td class="text-right">{{ formatPrintTime(longestPrintTime) }}</td>
+                                    <td class="text-right">{{ formatPrintTime(longestPrintTime, false) }}</td>
                                 </tr>
                                 <tr>
                                     <td>{{ $t('History.AvgPrinttime') }}</td>
-                                    <td class="text-right">{{ formatPrintTime(avgPrintTime) }}</td>
+                                    <td class="text-right">{{ formatPrintTime(avgPrintTime, false) }}</td>
                                 </tr>
                                 <tr>
                                     <td>{{ $t('History.TotalFilamentUsed') }}</td>
@@ -106,12 +106,14 @@ import HistoryPrinttimeAvg from '@/components/charts/HistoryPrinttimeAvg.vue'
 import HistoryAllPrintStatusChart from '@/components/charts/HistoryAllPrintStatusChart.vue'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { mdiChartAreaspline, mdiDatabaseArrowDownOutline } from '@mdi/js'
+import { formatPrintTime } from '@/plugins/helpers'
 @Component({
     components: { Panel, HistoryFilamentUsage, HistoryPrinttimeAvg, HistoryAllPrintStatusChart },
 })
 export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     mdiChartAreaspline = mdiChartAreaspline
     mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
+    formatPrintTime = formatPrintTime
 
     get selectedJobs() {
         return this.$store.state.gui.view.history.selectedJobs ?? []
@@ -206,25 +208,5 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
 
         this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
     }
-
-    formatPrintTime(totalSeconds: number) {
-        if (totalSeconds) {
-            let output = ''
-
-            const hours = Math.floor(totalSeconds / 3600)
-            totalSeconds %= 3600
-            if (hours) output += ' ' + hours + 'h'
-
-            const minutes = Math.floor(totalSeconds / 60)
-            if (minutes) output += ' ' + minutes + 'm'
-
-            const seconds = totalSeconds % 60
-            if (seconds) output += ' ' + seconds.toFixed(0) + 's'
-
-            return output
-        }
-
-        return '--'
-    }
 }
 </script>
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index b3aa33bd9..719408ce8 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -112,7 +112,7 @@ export const formatFrequency = (frequency: number): string => {
     return Math.max(frequency, 0.1).toFixed() + units[i]
 }
 
-export const formatPrintTime = (totalSeconds: number, boolDays: boolean = true): string => {
+export const formatPrintTime = (totalSeconds: number, boolDays = true): string => {
     if (!totalSeconds) return '--'
 
     const output: string[] = []
diff --git a/src/store/gui/maintenance/actions.ts b/src/store/gui/maintenance/actions.ts
index b03e2c088..f0e9c318e 100644
--- a/src/store/gui/maintenance/actions.ts
+++ b/src/store/gui/maintenance/actions.ts
@@ -49,12 +49,12 @@ export const actions: ActionTree<GuiMaintenanceState, RootState> = {
         })
     },
 
-    /*delete({ commit }, payload) {
+    delete({ commit }, payload) {
         commit('delete', payload)
-        Vue.$socket.emit('server.database.delete_item', { namespace: 'reminders', key: payload })
+        Vue.$socket.emit('server.database.delete_item', { namespace: 'maintenance', key: payload })
     },
 
-    repeat({ dispatch, getters, state, rootState }, payload) {
+    /*repeat({ dispatch, getters, state, rootState }, payload) {
         if (!(payload.id in state.reminders)) return
         const reminder = getters['getReminder'](payload.id)
         const new_start_time = rootState.server?.history?.job_totals.total_print_time || 0
diff --git a/src/store/gui/maintenance/mutations.ts b/src/store/gui/maintenance/mutations.ts
index 9d88fa90d..9ec013b59 100644
--- a/src/store/gui/maintenance/mutations.ts
+++ b/src/store/gui/maintenance/mutations.ts
@@ -24,9 +24,9 @@ export const mutations: MutationTree<GuiMaintenanceState> = {
         }
     },
 
-    /*delete(state, payload) {
-        if (payload in state.reminders) {
-            Vue.delete(state.reminders, payload)
+    delete(state, payload) {
+        if (payload in state.entries) {
+            Vue.delete(state.entries, payload)
         }
-    },*/
+    },
 }
diff --git a/src/store/gui/maintenance/types.ts b/src/store/gui/maintenance/types.ts
index ca77aae3f..7f26aca50 100644
--- a/src/store/gui/maintenance/types.ts
+++ b/src/store/gui/maintenance/types.ts
@@ -9,21 +9,29 @@ export interface GuiMaintenanceStateEntry {
     name: string
     note: string
     start_time: number
+    start_filament: number
+    start_printtime: number
     end_time: number | null
 
-    reminder: boolean
-    reminderRepeat: boolean
+    reminder: {
+        bool: boolean
+        repeat: boolean
 
-    reminderFilament: boolean
-    reminderFilamentStart: number
-    reminderFilamentTrigger: number | null
-    reminderFilamentEnd: number | null
+        filament: {
+            bool: boolean
+            trigger: number | null
+            end: number | null
+        }
 
-    reminderPrinttime: boolean
-    reminderPrinttimeStart: number | null
-    reminderPrinttimeTrigger: number | null
-    reminderPrinttimeEnd: number | null
+        printtime: {
+            bool: boolean
+            trigger: number | null
+            end: number | null
+        }
 
-    reminderDate: boolean
-    reminderDateTrigger: number | null
+        date: {
+            bool: boolean
+            trigger: number | null
+        }
+    }
 }

From ffb2c4df1fd78110d7631d5b20187917243b6f77 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Mar 2024 22:49:42 +0100
Subject: [PATCH 43/46] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryListPanelAddMaintenance.vue        |  91 +++++++----
 .../HistoryListPanelDetailMaintenance.vue     | 151 ++++++++++++++++++
 .../HistoryListEntryMaintenance.vue           | 127 ++++++++++++---
 src/locales/en.json                           |   3 +
 src/store/gui/maintenance/types.ts            |  13 +-
 5 files changed, 327 insertions(+), 58 deletions(-)
 create mode 100644 src/components/dialogs/HistoryListPanelDetailMaintenance.vue

diff --git a/src/components/dialogs/HistoryListPanelAddMaintenance.vue b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
index 488b53c97..3dfd2b617 100644
--- a/src/components/dialogs/HistoryListPanelAddMaintenance.vue
+++ b/src/components/dialogs/HistoryListPanelAddMaintenance.vue
@@ -3,7 +3,7 @@
         <panel
             :title="$t('History.AddMaintenance')"
             :icon="mdiNotebookPlus"
-            card-class="history-note-dialog"
+            card-class="history-add-maintenance-dialog"
             :margin-bottom="false">
             <template #buttons>
                 <v-btn icon tile @click="closeDialog">
@@ -29,27 +29,27 @@
                 </v-row>
                 <v-row>
                     <v-col>
-                        <settings-row :title="$t('History.AddReminder')">
-                            <v-switch v-model="reminder" hide-details class="mt-0" />
+                        <settings-row :title="$t('History.Reminder')">
+                            <v-select
+                                v-model="reminder"
+                                :items="reminderItems"
+                                outlined
+                                dense
+                                hide-details
+                                class="mt-0" />
                         </settings-row>
                     </v-col>
                 </v-row>
                 <template v-if="reminder">
-                    <v-row>
-                        <v-col>
-                            <settings-row :title="$t('History.Repeat')">
-                                <v-switch v-model="reminderRepeat" hide-details class="mt-0" />
-                            </settings-row>
-                        </v-col>
-                    </v-row>
                     <v-row>
                         <v-col>
                             <settings-row
+                                :icon="mdiAdjust"
                                 :title="$t('History.FilamentBasedReminder')"
                                 :sub-title="$t('History.FilamentBasedReminderDescription')">
                                 <v-checkbox v-model="reminderFilament" hide-details class="mt-0" />
                                 <v-text-field
-                                    v-model="reminderFilamentValue"
+                                    v-model.number="reminderFilamentValue"
                                     hide-details="auto"
                                     type="number"
                                     class="mt-0"
@@ -62,11 +62,12 @@
                     <v-row>
                         <v-col>
                             <settings-row
+                                :icon="mdiAlarm"
                                 :title="$t('History.PrinttimeBasedReminder')"
                                 :sub-title="$t('History.PrinttimeBasedReminderDescription')">
                                 <v-checkbox v-model="reminderPrinttime" hide-details class="mt-0" />
                                 <v-text-field
-                                    v-model="reminderPrinttimeValue"
+                                    v-model.number="reminderPrinttimeValue"
                                     hide-details="auto"
                                     type="number"
                                     class="mt-0"
@@ -79,11 +80,12 @@
                     <v-row>
                         <v-col>
                             <settings-row
+                                :icon="mdiCalendar"
                                 :title="$t('History.DateBasedReminder')"
                                 :sub-title="$t('History.DateBasedReminderDescription')">
                                 <v-checkbox v-model="reminderDate" hide-details class="mt-0" />
                                 <v-text-field
-                                    v-model="reminderDateValue"
+                                    v-model.number="reminderDateValue"
                                     hide-details="auto"
                                     type="number"
                                     class="mt-0"
@@ -98,7 +100,7 @@
             <v-card-actions>
                 <v-spacer />
                 <v-btn text @click="closeDialog">{{ $t('History.Cancel') }}</v-btn>
-                <v-btn color="primary" text @click="save">{{ $t('History.Save') }}</v-btn>
+                <v-btn color="primary" text :disabled="!isValid" @click="save">{{ $t('History.Save') }}</v-btn>
             </v-card-actions>
         </panel>
     </v-dialog>
@@ -109,7 +111,7 @@ import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiCloseThick, mdiNotebookPlus } from '@mdi/js'
+import { mdiAdjust, mdiAlarm, mdiCalendar, mdiCloseThick, mdiNotebookPlus } from '@mdi/js'
 
 @Component({
     components: {
@@ -118,6 +120,9 @@ import { mdiCloseThick, mdiNotebookPlus } from '@mdi/js'
     },
 })
 export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
+    mdiAlarm = mdiAlarm
+    mdiCalendar = mdiCalendar
     mdiCloseThick = mdiCloseThick
     mdiNotebookPlus = mdiNotebookPlus
 
@@ -125,8 +130,7 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
 
     name: string = ''
     note: string = ''
-    reminder: boolean = false
-    reminderRepeat: boolean = false
+    reminder: 'one-time' | 'repeat' | null = null
 
     reminderFilament: boolean = false
     reminderFilamentValue: number = 0
@@ -137,8 +141,27 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
     reminderDate: boolean = false
     reminderDateValue: number = 0
 
+    formWarning = ''
+
     nameInputRules = [(value: string) => !!value || this.$t('History.InvalidNameEmpty')]
 
+    get reminderItems() {
+        return [
+            {
+                text: this.$t('History.NoReminder').toString(),
+                value: null,
+            },
+            {
+                text: this.$t('History.OneTime').toString(),
+                value: 'one-time',
+            },
+            {
+                text: this.$t('History.Repeat').toString(),
+                value: 'repeat',
+            },
+        ]
+    }
+
     get totalFilamentUsed() {
         return this.$store.state.server.history.job_totals?.total_filament_used ?? 0
     }
@@ -147,12 +170,26 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
         return this.$store.state.server.history.job_totals?.total_print_time ?? 0
     }
 
+    get isValid() {
+        if (this.name === '') return false
+
+        if (this.reminder !== null) {
+            if (!this.reminderFilament && !this.reminderPrinttime && !this.reminderDate) return false
+
+            if (this.reminderFilament && !this.reminderFilamentValue) return false
+            if (this.reminderPrinttime && !this.reminderPrinttimeValue) return false
+            if (this.reminderDate && !this.reminderDateValue) return false
+        }
+
+        return true
+    }
+
     closeDialog() {
         this.$emit('close')
     }
 
     save() {
-        let reminderFilamentTrigger: number | null = null
+        /*let reminderFilamentTrigger: number | null = null
         if (this.reminderFilament) {
             reminderFilamentTrigger = this.totalFilamentUsed + this.reminderFilamentValue * 100
         }
@@ -162,12 +199,12 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
             reminderPrinttimeTrigger = this.totalPrinttime + this.reminderPrinttimeValue * 60 * 60
         }
 
-        const date = new Date()
         let reminderDateTrigger: number | null = null
         if (this.reminderDate) {
             reminderDateTrigger = date.getTime() + this.reminderDateValue * 24 * 60 * 60 * 1000
-        }
+        }*/
 
+        const date = new Date()
         this.$store.dispatch('gui/maintenance/store', {
             entry: {
                 name: this.name,
@@ -176,27 +213,26 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
                 start_time: date.getTime() / 1000,
                 end_time: null,
                 start_filament: this.totalFilamentUsed,
-                start_total_print_time: this.totalPrinttime,
+                start_printtime: this.totalPrinttime,
 
                 reminder: {
-                    bool: this.reminder,
-                    repeat: this.reminderRepeat,
+                    type: this.reminder,
 
                     filament: {
                         bool: this.reminderFilament,
-                        trigger: reminderFilamentTrigger,
+                        value: this.reminderFilamentValue,
                         end: null,
                     },
 
                     printtime: {
                         bool: this.reminderPrinttime,
-                        trigger: reminderPrinttimeTrigger,
+                        value: this.reminderPrinttimeValue,
                         end: null,
                     },
 
                     date: {
                         bool: this.reminderDate,
-                        trigger: reminderDateTrigger,
+                        value: this.reminderDateValue,
                         end: null,
                     },
                 },
@@ -209,8 +245,7 @@ export default class HistoryListPanelAddMaintenance extends Mixins(BaseMixin) {
     resetValues() {
         this.name = ''
         this.note = ''
-        this.reminder = false
-        this.reminderRepeat = false
+        this.reminder = null
         this.reminderFilament = false
         this.reminderFilamentValue = 0
         this.reminderPrinttime = false
diff --git a/src/components/dialogs/HistoryListPanelDetailMaintenance.vue b/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
new file mode 100644
index 000000000..a0aaeccbd
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
@@ -0,0 +1,151 @@
+<template>
+    <v-dialog :value="show" :max-width="500" persistent @keydown.esc="closeDialog">
+        <panel
+            :title="$t('History.Maintenance')"
+            :icon="mdiNotebook"
+            card-class="history-maintenance-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <overlay-scrollbars style="height: 350px">
+                <v-card-text class="pb-0">
+                    <v-row>
+                        <v-col>
+                            <div>Word of the Day</div>
+                            <p class="text-h4 text--primary">{{ item.name }}</p>
+                            <div v-if="note" class="text--primary" v-html="note" />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-divider class="my-3" />
+                <v-card-text class="pb-0">
+                    <template v-if="item.reminder">
+                        <v-row v-if="restTextFilament">
+                            <v-col>
+                                <v-icon small class="mr-1">{{ mdiAdjust }}</v-icon>
+                                {{ $t('History.FilamentBasedReminder') }}
+                            </v-col>
+                            <v-col class="text-right">{{ restTextFilament }}</v-col>
+                        </v-row>
+                        <v-row v-if="restTextPrinttime">
+                            <v-col>
+                                <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
+                                {{ $t('History.PrinttimeBasedReminder') }}
+                            </v-col>
+                            <v-col class="text-right">{{ restTextPrinttime }}</v-col>
+                        </v-row>
+                        <v-row v-if="restTextDays">
+                            <v-col>
+                                <v-icon small class="mr-1">{{ mdiCalendar }}</v-icon>
+                                {{ $t('History.DateBasedReminder') }}
+                            </v-col>
+                            <v-col class="text-right">{{ restTextDays }}</v-col>
+                        </v-row>
+                    </template>
+                </v-card-text>
+            </overlay-scrollbars>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiAdjust, mdiAlarm, mdiCalendar, mdiCloseThick, mdiNotebook } from '@mdi/js'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+
+@Component({
+    components: { Panel },
+})
+export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
+    mdiAlarm = mdiAlarm
+    mdiCalendar = mdiCalendar
+    mdiCloseThick = mdiCloseThick
+    mdiNotebook = mdiNotebook
+
+    @Prop({ type: Boolean, default: false }) readonly show!: boolean
+    @Prop({ type: Object, default: false }) readonly item!: GuiMaintenanceStateEntry
+
+    get note() {
+        return this.item.note.replaceAll('\n', '<br>')
+    }
+
+    get restFilament() {
+        const start = this.item?.start_filament ?? 0
+        const end = this.item.end_filament ?? 0
+        const current = this.$store.state.server.history.job_totals?.total_filament_used ?? 0
+
+        // calc filament since start
+        // if end is not null, calc used filament until end
+        let used = current - start
+        if (end) used = end - start
+
+        // convert to m
+        used /= 1000
+
+        return used
+    }
+
+    get restTextFilament() {
+        if (!this.item.reminder.filament.bool) return false
+
+        const value = this.item.reminder.filament?.value ?? 0
+
+        return `${this.restFilament.toFixed(0)} / ${value} m`
+    }
+
+    get restPrinttime() {
+        const start = this.item.start_printtime ?? 0
+        const end = this.item.end_printtime ?? 0
+        const current = this.$store.state.server.history.job_totals?.total_print_time ?? 0
+
+        // calc filament since start
+        // if end is not null, calc used filament until end
+        let used = current - start
+        if (end) used = end - start
+
+        // convert to h
+        used /= 3600
+
+        return used
+    }
+
+    get restTextPrinttime() {
+        if (!this.item.reminder.printtime.bool) return false
+
+        const value = this.item.reminder.printtime?.value ?? 0
+
+        return `${this.restPrinttime.toFixed(1)} / ${value} h`
+    }
+
+    get restDays() {
+        const start = this.item.start_time ?? 0
+        const end = this.item.end_time ?? 0
+        const current = new Date().getTime() / 1000
+
+        // calc days since start
+        // if end is not null, calc used days until end
+        let used = current - start
+        if (end) used = end - start
+
+        return used / (60 * 60 * 24)
+    }
+
+    get restTextDays() {
+        if (!this.item.reminder.date.bool) return false
+
+        const value = this.item.reminder.date?.value ?? 0
+
+        return `${this.restDays.toFixed(0)} / ${value} days`
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+}
+</script>
diff --git a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
index 638e4837f..3aad89391 100644
--- a/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
+++ b/src/components/panels/HistoryList/HistoryListEntryMaintenance.vue
@@ -13,25 +13,27 @@
         </td>
         <td>{{ item.name }}</td>
         <td class="text-right text-no-wrap">
-            <template v-if="item.reminder?.bool">
-                <v-tooltip top>
-                    <template #activator="{ on, attrs }">
-                        <v-icon small color="primary" v-bind="attrs" v-on="on">
-                            {{ mdiAlarm }}
-                        </v-icon>
-                    </template>
-                    <div>
-                        <div v-if="item.reminder.filament.bool">
-                            <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
-                            {{ (item.reminder.filament.trigger / 1000).toFixed(1) }}m
-                        </div>
-                        <div v-if="item.reminder.printtime.bool">
-                            <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
-                            {{ formatPrintTime(item.reminder.printtime.trigger, false) }}
-                        </div>
+            <v-tooltip top :disabled="item.reminder?.type === null">
+                <template #activator="{ on, attrs }">
+                    <v-icon small color="primary" v-bind="attrs" v-on="on">
+                        {{ mdiAlarm }}
+                    </v-icon>
+                </template>
+                <div>
+                    <div v-if="restTextFilament">
+                        <v-icon small class="mr-1">{{ mdiAdjust }}</v-icon>
+                        {{ restTextFilament }}
                     </div>
-                </v-tooltip>
-            </template>
+                    <div v-if="restTextPrinttime">
+                        <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
+                        {{ restTextPrinttime }}
+                    </div>
+                    <div v-if="restTextDays">
+                        <v-icon small class="mr-1">{{ mdiCalendar }}</v-icon>
+                        {{ restTextDays }}
+                    </div>
+                </div>
+            </v-tooltip>
         </td>
         <td class="text-left text-no-wrap">
             {{ formatDateTime(item.start_time * 1000, false) }}
@@ -39,33 +41,41 @@
         <td :colspan="tableFields.length - 1" />
         <v-menu v-model="contextMenuBool" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
             <v-list>
+                <v-list-item @click="detailsDialogBool = true">
+                    <v-icon class="mr-1">{{ mdiTextBoxSearch }}</v-icon>
+                    {{ $t('History.Details') }}
+                </v-list-item>
                 <v-list-item class="red--text" @click="deleteEntry">
                     <v-icon class="mr-1" color="error">{{ mdiDelete }}</v-icon>
                     {{ $t('History.Delete') }}
                 </v-list-item>
             </v-list>
         </v-menu>
+        <history-list-panel-detail-maintenance
+            :show="detailsDialogBool"
+            :item="item"
+            @close="detailsDialogBool = false" />
     </tr>
 </template>
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
-import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import Panel from '@/components/ui/Panel.vue'
 import BaseMixin from '@/components/mixins/base'
-import { mdiAlarm, mdiDelete, mdiNotebook } from '@mdi/js'
+import { mdiAdjust, mdiAlarm, mdiCalendar, mdiDelete, mdiNotebook, mdiTextBoxSearch } from '@mdi/js'
 import { HistoryListPanelRow } from '@/components/panels/HistoryListPanel.vue'
-import HistoryListPanelNoteDialog from '@/components/dialogs/HistoryListPanelNoteDialog.vue'
 import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
-import { formatPrintTime } from '@/plugins/helpers'
+import HistoryListPanelDetailMaintenance from '@/components/dialogs/HistoryListPanelDetailMaintenance.vue'
 
 @Component({
-    components: { HistoryListPanelNoteDialog, HistoryListPanelDetailsDialog, Panel },
+    components: { HistoryListPanelDetailMaintenance, Panel },
 })
 export default class HistoryListPanel extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
     mdiAlarm = mdiAlarm
+    mdiCalendar = mdiCalendar
     mdiDelete = mdiDelete
     mdiNotebook = mdiNotebook
-    formatPrintTime = formatPrintTime
+    mdiTextBoxSearch = mdiTextBoxSearch
 
     detailsDialogBool = false
 
@@ -83,6 +93,75 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         return output
     }
 
+    get restFilament() {
+        const start = this.item?.start_filament ?? 0
+        const end = this.item.end_filament ?? 0
+        const current = this.$store.state.server.history.job_totals?.total_filament_used ?? 0
+
+        // calc filament since start
+        // if end is not null, calc used filament until end
+        let used = current - start
+        if (end) used = end - start
+
+        // convert to m
+        used /= 1000
+
+        return used
+    }
+
+    get restTextFilament() {
+        if (!this.item.reminder.filament.bool) return false
+
+        const value = this.item.reminder.filament?.value ?? 0
+
+        return `${this.restFilament.toFixed(0)} / ${value} m`
+    }
+
+    get restPrinttime() {
+        const start = this.item.start_printtime ?? 0
+        const end = this.item.end_printtime ?? 0
+        const current = this.$store.state.server.history.job_totals?.total_print_time ?? 0
+
+        // calc filament since start
+        // if end is not null, calc used filament until end
+        let used = current - start
+        if (end) used = end - start
+
+        // convert to h
+        used /= 3600
+
+        return used
+    }
+
+    get restTextPrinttime() {
+        if (!this.item.reminder.printtime.bool) return false
+
+        const value = this.item.reminder.printtime?.value ?? 0
+
+        return `${this.restPrinttime.toFixed(1)} / ${value} h`
+    }
+
+    get restDays() {
+        const start = this.item.start_time ?? 0
+        const end = this.item.end_time ?? 0
+        const current = new Date().getTime() / 1000
+
+        // calc days since start
+        // if end is not null, calc used days until end
+        let used = current - start
+        if (end) used = end - start
+
+        return used / (60 * 60 * 24)
+    }
+
+    get restTextDays() {
+        if (!this.item.reminder.date.bool) return false
+
+        const value = this.item.reminder.date?.value ?? 0
+
+        return `${this.restDays.toFixed(0)} / ${value} days`
+    }
+
     select(newVal: boolean) {
         this.$emit('select', newVal)
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index f8419e9c6..5f296d9c6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -382,14 +382,17 @@
         "LongestPrinttime": "Longest Print Time",
         "Meter": "meter",
         "Name": "Name",
+        "NoReminder": "No reminder",
         "Note": "Note",
         "ObjectHeight": "Object Height",
+        "OneTime": "One-Time",
         "PrintDuration": "Print Time",
         "PrintHistory": "Print History",
         "PrintTime": "Print Time",
         "PrinttimeAvg": "Print Time - Ø",
         "PrinttimeBasedReminder": "Print Time",
         "PrinttimeBasedReminderDescription": "This reminder is based on the print time.",
+        "Reminder": "Reminder",
         "Repeat": "Repeat",
         "Reprint": "Reprint",
         "Save": "save",
diff --git a/src/store/gui/maintenance/types.ts b/src/store/gui/maintenance/types.ts
index 7f26aca50..0497f208c 100644
--- a/src/store/gui/maintenance/types.ts
+++ b/src/store/gui/maintenance/types.ts
@@ -9,29 +9,30 @@ export interface GuiMaintenanceStateEntry {
     name: string
     note: string
     start_time: number
+    end_time: number | null
     start_filament: number
+    end_filament: number | null
     start_printtime: number
-    end_time: number | null
+    end_printtime: number | null
 
     reminder: {
-        bool: boolean
-        repeat: boolean
+        type: null | 'one-time' | 'repeat'
 
         filament: {
             bool: boolean
-            trigger: number | null
+            value: number | null
             end: number | null
         }
 
         printtime: {
             bool: boolean
-            trigger: number | null
+            value: number | null
             end: number | null
         }
 
         date: {
             bool: boolean
-            trigger: number | null
+            value: number | null
         }
     }
 }

From 3247892ff15be6e6f7b9d4e7b403fc790ee98ffe Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 16 Mar 2024 12:09:10 +0100
Subject: [PATCH 44/46] fix: fix some outputs in the maintenance dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryListPanelDetailMaintenance.vue     | 59 +++++++++++++++----
 src/locales/en.json                           |  1 +
 2 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/components/dialogs/HistoryListPanelDetailMaintenance.vue b/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
index a0aaeccbd..1e566be74 100644
--- a/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
+++ b/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
@@ -14,35 +14,35 @@
                 <v-card-text class="pb-0">
                     <v-row>
                         <v-col>
-                            <div>Word of the Day</div>
+                            <div>{{ date }}</div>
                             <p class="text-h4 text--primary">{{ item.name }}</p>
                             <div v-if="note" class="text--primary" v-html="note" />
                         </v-col>
                     </v-row>
                 </v-card-text>
-                <v-divider class="my-3" />
+                <v-divider class="mt-3" />
                 <v-card-text class="pb-0">
                     <template v-if="item.reminder">
-                        <v-row v-if="restTextFilament">
+                        <v-row v-if="restFilamentText">
                             <v-col>
                                 <v-icon small class="mr-1">{{ mdiAdjust }}</v-icon>
                                 {{ $t('History.FilamentBasedReminder') }}
                             </v-col>
-                            <v-col class="text-right">{{ restTextFilament }}</v-col>
+                            <v-col :class="restFilamentClass">{{ restFilamentText }}</v-col>
                         </v-row>
-                        <v-row v-if="restTextPrinttime">
+                        <v-row v-if="restPrinttimeText">
                             <v-col>
                                 <v-icon small class="mr-1">{{ mdiAlarm }}</v-icon>
                                 {{ $t('History.PrinttimeBasedReminder') }}
                             </v-col>
-                            <v-col class="text-right">{{ restTextPrinttime }}</v-col>
+                            <v-col :class="restPrinttimeClass">{{ restPrinttimeText }}</v-col>
                         </v-row>
-                        <v-row v-if="restTextDays">
+                        <v-row v-if="restDaysText">
                             <v-col>
                                 <v-icon small class="mr-1">{{ mdiCalendar }}</v-icon>
                                 {{ $t('History.DateBasedReminder') }}
                             </v-col>
-                            <v-col class="text-right">{{ restTextDays }}</v-col>
+                            <v-col :class="restDaysClass">{{ restDaysText }}</v-col>
                         </v-row>
                     </template>
                 </v-card-text>
@@ -71,6 +71,10 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
     @Prop({ type: Boolean, default: false }) readonly show!: boolean
     @Prop({ type: Object, default: false }) readonly item!: GuiMaintenanceStateEntry
 
+    get date() {
+        return this.formatDateTime(this.item.start_time * 1000, false)
+    }
+
     get note() {
         return this.item.note.replaceAll('\n', '<br>')
     }
@@ -91,7 +95,7 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return used
     }
 
-    get restTextFilament() {
+    get restFilamentText() {
         if (!this.item.reminder.filament.bool) return false
 
         const value = this.item.reminder.filament?.value ?? 0
@@ -99,6 +103,17 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return `${this.restFilament.toFixed(0)} / ${value} m`
     }
 
+    get restFilamentClass() {
+        const output = ['text-right']
+
+        if (!this.item.reminder.filament.bool) return output
+
+        const value = this.item.reminder.filament?.value ?? 0
+        if (this.restFilament > value) return [...output, 'error--text']
+
+        return output
+    }
+
     get restPrinttime() {
         const start = this.item.start_printtime ?? 0
         const end = this.item.end_printtime ?? 0
@@ -115,7 +130,7 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return used
     }
 
-    get restTextPrinttime() {
+    get restPrinttimeText() {
         if (!this.item.reminder.printtime.bool) return false
 
         const value = this.item.reminder.printtime?.value ?? 0
@@ -123,6 +138,17 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return `${this.restPrinttime.toFixed(1)} / ${value} h`
     }
 
+    get restPrinttimeClass() {
+        const output = ['text-right']
+
+        if (!this.item.reminder.printtime.bool) return output
+
+        const value = this.item.reminder.printtime?.value ?? 0
+        if (this.restPrinttime > value) return [...output, 'error--text']
+
+        return output
+    }
+
     get restDays() {
         const start = this.item.start_time ?? 0
         const end = this.item.end_time ?? 0
@@ -136,7 +162,7 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return used / (60 * 60 * 24)
     }
 
-    get restTextDays() {
+    get restDaysText() {
         if (!this.item.reminder.date.bool) return false
 
         const value = this.item.reminder.date?.value ?? 0
@@ -144,6 +170,17 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return `${this.restDays.toFixed(0)} / ${value} days`
     }
 
+    get restDaysClass() {
+        const output = ['text-right']
+
+        if (!this.item.reminder.date.bool) return output
+
+        const value = this.item.reminder.date?.value ?? 0
+        if (this.restDays > value) return [...output, 'error--text']
+
+        return output
+    }
+
     closeDialog() {
         this.$emit('close')
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index 5f296d9c6..a8e01ef5e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -380,6 +380,7 @@
         "LayerHeight": "Layer Height",
         "LoadCompleteHistory": "Load complete history",
         "LongestPrinttime": "Longest Print Time",
+        "Maintenance": "Maintenance",
         "Meter": "meter",
         "Name": "Name",
         "NoReminder": "No reminder",

From dad79c008de037b2852fa972f1202ea693b205d1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 16 Mar 2024 19:53:18 +0100
Subject: [PATCH 45/46] fix: fix overflow wrap in notifications entries

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/notifications/NotificationMenuEntry.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/notifications/NotificationMenuEntry.vue b/src/components/notifications/NotificationMenuEntry.vue
index 07e92fad9..f6f30b8c1 100644
--- a/src/components/notifications/NotificationMenuEntry.vue
+++ b/src/components/notifications/NotificationMenuEntry.vue
@@ -1,10 +1,10 @@
 <template>
     <v-alert :class="`notification-menu-entry--priority-${entry.priority}`" text :color="alertColor" border="left">
-        <v-row align="start">
+        <v-row align="start" class="flex-nowrap">
             <v-col class="grow">
                 <div class="notification-menu-entry__headline mb-1 text-subtitle-1">
                     <template v-if="'url' in entry">
-                        <a :class="`text-decoration-none ${alertColor}--text`" :href="entry.url" target="_blank">
+                        <a :class="`text-decoration-none ${alertColor}--text `" :href="entry.url" target="_blank">
                             <v-icon small :class="`${alertColor}--text pb-1`">
                                 {{ mdiLinkVariant }}
                             </v-icon>
@@ -28,7 +28,7 @@
                 <v-btn v-else icon plain :color="alertColor" class="mb-2" @click="dismiss('reboot', null)">
                     <v-icon>{{ mdiClose }}</v-icon>
                 </v-btn>
-                <v-spacer></v-spacer>
+                <v-spacer />
                 <v-btn
                     v-if="showRepeatReminderButton"
                     icon
@@ -179,10 +179,12 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
 <style scoped>
 .notification-menu-entry__headline {
     line-height: 1.2;
+    overflow-wrap: anywhere;
 }
 
 .notification-menu-entry__description {
     max-width: 292px;
+    overflow-wrap: anywhere;
 }
 
 .notification-menu-entry--priority-critical .notification-menu-entry__description {

From 5e867933836c993acbf6c2ae0e8b88759611c7b3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 17 Mar 2024 22:24:38 +0100
Subject: [PATCH 46/46] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../notifications/NotificationMenuEntry.vue   | 187 +++++++++---------
 .../notifications/TheNotificationMenu.vue     |  18 +-
 src/locales/en.json                           |   5 +
 src/store/gui/maintenance/getters.ts          |  40 ++--
 src/store/gui/notifications/getters.ts        |  47 +++--
 5 files changed, 163 insertions(+), 134 deletions(-)

diff --git a/src/components/notifications/NotificationMenuEntry.vue b/src/components/notifications/NotificationMenuEntry.vue
index f6f30b8c1..382d6b0da 100644
--- a/src/components/notifications/NotificationMenuEntry.vue
+++ b/src/components/notifications/NotificationMenuEntry.vue
@@ -1,115 +1,95 @@
 <template>
     <v-alert :class="`notification-menu-entry--priority-${entry.priority}`" text :color="alertColor" border="left">
         <v-row align="start" class="flex-nowrap">
-            <v-col class="grow">
+            <v-col class="grow pb-2">
                 <div class="notification-menu-entry__headline mb-1 text-subtitle-1">
-                    <template v-if="'url' in entry">
-                        <a :class="`text-decoration-none ${alertColor}--text `" :href="entry.url" target="_blank">
-                            <v-icon small :class="`${alertColor}--text pb-1`">
-                                {{ mdiLinkVariant }}
-                            </v-icon>
-                            {{ entry.title }}
-                        </a>
-                    </template>
-                    <template v-else>
-                        <span :class="`${alertColor}--text`">{{ entry.title }}</span>
-                    </template>
+                    <a
+                        v-if="'url' in entry"
+                        :class="`text-decoration-none ${alertColor}--text `"
+                        :href="entry.url"
+                        target="_blank">
+                        <v-icon small :class="`${alertColor}--text pb-1`">
+                            {{ mdiLinkVariant }}
+                        </v-icon>
+                        {{ entry.title }}
+                    </a>
+                    <span v-else :class="`${alertColor}--text`">{{ entry.title }}</span>
                 </div>
                 <p
                     class="notification-menu-entry__description text-body-2 mb-0 text--disabled font-weight-light"
-                    v-html="formatedText"></p>
+                    v-html="formatedText" />
+                <v-btn
+                    v-if="entryType === 'maintenance'"
+                    outlined
+                    small
+                    :color="alertColor"
+                    class="mt-3 mb-0 w-100"
+                    @click="showMaintenanceDetails = true">
+                    details
+                </v-btn>
             </v-col>
             <v-col
                 v-if="entry.priority !== 'critical'"
-                class="shrink pl-0 pb-0 pt-1 pr-2 d-flex flex-column align-self-stretch justify-space-between">
-                <v-btn v-if="entryType === 'announcement'" icon plain :color="alertColor" class="mb-2" @click="close">
-                    <v-icon>{{ mdiClose }}</v-icon>
-                </v-btn>
-                <v-btn v-else icon plain :color="alertColor" class="mb-2" @click="dismiss('reboot', null)">
-                    <v-icon>{{ mdiClose }}</v-icon>
-                </v-btn>
-                <v-spacer />
+                class="shrink pl-0 pb-1 pt-1 pr-2 d-flex flex-column align-self-stretch justify-space-between">
                 <v-btn
-                    v-if="showRepeatReminderButton"
+                    v-if="entryType !== 'maintenance'"
                     icon
                     plain
                     :color="alertColor"
-                    class="pb-1"
-                    @click="repeatReminder">
-                    <v-icon>{{ mdiCalendarRefreshOutline }}</v-icon>
+                    class="mb-2"
+                    @click="xButtonAction">
+                    <v-icon>{{ mdiClose }}</v-icon>
                 </v-btn>
-                <v-btn icon plain retain-focus-on-click :color="alertColor" class="pb-1" @click="expand = !expand">
+                <v-spacer />
+                <v-btn icon plain retain-focus-on-click :color="alertColor" @click="expand = !expand">
                     <v-icon>{{ mdiBellOffOutline }}</v-icon>
                 </v-btn>
             </v-col>
         </v-row>
         <v-row v-if="entry.priority !== 'critical'">
             <v-expand-transition>
-                <div v-show="expand" class="pt-1" style="width: 100%">
-                    <v-divider class="pb-1 ml-2"></v-divider>
+                <div v-show="expand" class="pt-1 w-100">
+                    <v-divider class="pb-1 ml-2" />
                     <div class="text-right py-1" style="font-size: 0.875rem">
                         <span class="text--disabled text-caption font-weight-light">
                             {{ $t('App.Notifications.Remind') }}
                         </span>
-                        <template v-if="entryType === 'announcement'">
-                            <v-btn
-                                :color="alertColor"
-                                x-small
-                                plain
-                                text
-                                outlined
-                                class="mx-1"
-                                @click="dismiss('time', 60 * 60)">
-                                1H
-                            </v-btn>
-                            <v-btn
-                                :color="alertColor"
-                                x-small
-                                plain
-                                text
-                                outlined
-                                class="mx-1"
-                                @click="dismiss('time', 60 * 60 * 24)">
-                                1D
-                            </v-btn>
-                            <v-btn
-                                :color="alertColor"
-                                x-small
-                                plain
-                                text
-                                outlined
-                                class="mx-1"
-                                @click="dismiss('time', 60 * 60 * 24 * 7)">
-                                7D
-                            </v-btn>
-                        </template>
-                        <template v-else>
-                            <v-btn
-                                :color="alertColor"
-                                x-small
-                                plain
-                                text
-                                outlined
-                                class="mx-1"
-                                @click="dismiss('reboot', null)">
-                                {{ $t('App.Notifications.NextReboot') }}
-                            </v-btn>
-                            <v-btn :color="alertColor" x-small plain text outlined class="mx-1" @click="close">
-                                {{ $t('App.Notifications.Never') }}
-                            </v-btn>
-                        </template>
+                        <v-btn
+                            v-for="reminder in reminderTimes"
+                            :key="reminder.text"
+                            :color="alertColor"
+                            x-small
+                            plain
+                            text
+                            outlined
+                            class="mx-1"
+                            @click="reminder.clickFunction">
+                            {{ reminder.text }}
+                        </v-btn>
                     </div>
                 </div>
             </v-expand-transition>
         </v-row>
+        <history-list-panel-detail-maintenance
+            v-if="entryType === 'maintenance'"
+            :show="showMaintenanceDetails"
+            :item="maintenanceEntry"
+            @close="showMaintenanceDetails = false" />
     </v-alert>
 </template>
 
 <script lang="ts">
 import BaseMixin from '@/components/mixins/base'
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
-import { mdiClose, mdiLinkVariant, mdiBellOffOutline, mdiCalendarRefreshOutline } from '@mdi/js'
+import { mdiClose, mdiLinkVariant, mdiBellOffOutline } from '@mdi/js'
 import { GuiNotificationStateEntry } from '@/store/gui/notifications/types'
+import { TranslateResult } from 'vue-i18n'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+
+interface ReminderOption {
+    text: string | TranslateResult
+    clickFunction: Function
+}
 
 @Component({
     components: {},
@@ -118,9 +98,9 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
     mdiClose = mdiClose
     mdiLinkVariant = mdiLinkVariant
     mdiBellOffOutline = mdiBellOffOutline
-    mdiCalendarRefreshOutline = mdiCalendarRefreshOutline
 
-    private expand = false
+    expand = false
+    showMaintenanceDetails = false
 
     @Prop({ required: true })
     declare readonly entry: GuiNotificationStateEntry
@@ -149,11 +129,47 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
         return this.entry.id.slice(0, posFirstSlash)
     }
 
-    get showRepeatReminderButton() {
-        if (this.entryType !== 'reminder') return false
-        const reminderId = this.entry.id.replace('reminder/', '')
-        const reminder = this.$store.getters['gui/reminders/getReminder'](reminderId)
-        return reminder?.repeating || false
+    get maintenanceEntry() {
+        if (this.entryType !== 'maintenance') return null
+
+        const id = this.entry.id.replace('maintenance/', '')
+        const entries = this.$store.getters['gui/maintenance/getEntries']
+
+        return entries.find((entry: GuiMaintenanceStateEntry) => entry.id === id)
+    }
+
+    get reminderTimes() {
+        let output: ReminderOption[] = [
+            {
+                text: this.$t('App.Notifications.NextReboot'),
+                clickFunction: () => this.dismiss('reboot', null),
+            },
+            { text: this.$t('App.Notifications.Never'), clickFunction: () => this.close() },
+        ]
+
+        if (['announcement', 'maintenance'].includes(this.entryType)) {
+            output = []
+            output.push({
+                text: this.$t('App.Notifications.OneHourShort'),
+                clickFunction: () => this.dismiss('time', 60 * 60),
+            })
+            output.push({
+                text: this.$t('App.Notifications.OneDayShort'),
+                clickFunction: () => this.dismiss('time', 60 * 60 * 24),
+            })
+            output.push({
+                text: this.$t('App.Notifications.OneWeekShort'),
+                clickFunction: () => this.dismiss('time', 60 * 60 * 24 * 7),
+            })
+        }
+
+        return output
+    }
+
+    xButtonAction() {
+        if (this.entryType === 'announcement') return this.close()
+
+        this.dismiss('reboot', null)
     }
 
     close() {
@@ -164,11 +180,6 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/notifications/dismiss', { id: this.entry.id, type, time })
     }
 
-    repeatReminder() {
-        const reminderId = this.entry.id.replace('reminder/', '')
-        this.$store.dispatch('gui/reminders/repeat', { id: reminderId })
-    }
-
     @Watch('parentState')
     parentStateUpdate(newVal: boolean) {
         if (!newVal) this.expand = false
diff --git a/src/components/notifications/TheNotificationMenu.vue b/src/components/notifications/TheNotificationMenu.vue
index 7db315d79..9e4b950ce 100644
--- a/src/components/notifications/TheNotificationMenu.vue
+++ b/src/components/notifications/TheNotificationMenu.vue
@@ -34,9 +34,9 @@
                     </v-card-text>
                 </overlay-scrollbars>
                 <template v-if="notifications.length > 1">
-                    <v-divider></v-divider>
+                    <v-divider />
                     <v-card-actions>
-                        <v-spacer></v-spacer>
+                        <v-spacer />
                         <v-btn text color="primary" class="mr-2" @click="dismissAll">
                             <v-icon left>{{ mdiCloseBoxMultipleOutline }}</v-icon>
                             {{ $t('App.Notifications.DismissAll') }}
@@ -44,11 +44,9 @@
                     </v-card-actions>
                 </template>
             </template>
-            <template v-else>
-                <v-card-text class="text-center">
-                    <span class="text-disabled">{{ $t('App.Notifications.NoNotification') }}</span>
-                </v-card-text>
-            </template>
+            <v-card-text v-else class="text-center">
+                <span class="text-disabled">{{ $t('App.Notifications.NoNotification') }}</span>
+            </v-card-text>
         </v-card>
     </v-menu>
 </template>
@@ -68,7 +66,7 @@ export default class TheNotificationMenu extends Mixins(BaseMixin) {
     mdiBellOutline = mdiBellOutline
     mdiCloseBoxMultipleOutline = mdiCloseBoxMultipleOutline
 
-    private boolMenu = false
+    boolMenu = false
 
     get notifications() {
         return this.$store.getters['gui/notifications/getNotifications'] ?? []
@@ -97,9 +95,9 @@ export default class TheNotificationMenu extends Mixins(BaseMixin) {
         this.notifications.forEach(async (entry: GuiNotificationStateEntry) => {
             if (entry.id.startsWith('announcement')) {
                 await this.$store.dispatch('gui/notifications/close', { id: entry.id })
-            } else {
-                await this.$store.dispatch('gui/notifications/dismiss', { id: entry.id, type: 'reboot', time: null })
             }
+
+            await this.$store.dispatch('gui/notifications/dismiss', { id: entry.id, type: 'reboot', time: null })
         })
     }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index a8e01ef5e..f707f594b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -15,6 +15,8 @@
                 "DeprecatedValueHeadline": "Deprecated Klipper Value",
                 "KlipperWarning": "Klipper warning"
             },
+            "MaintenanceReminder": "Maintenance Reminder",
+            "MaintenanceReminderText": "Maintenance \"{name}\" is due.",
             "MoonrakerWarnings": {
                 "MoonrakerComponent": "Moonraker: {component}",
                 "MoonrakerFailedComponentDescription": "An error was detected while loading the moonraker component '{component}'. Please check the log file and fix the issue.",
@@ -28,6 +30,9 @@
             "NextReboot": "next reboot",
             "NoNotification": "No Notification available",
             "Notifications": "Notifications",
+            "OneHourShort": "1H",
+            "OneDayShort": "1D",
+            "OneWeekShort": "1W",
             "Remind": "Remind:"
         },
         "NumberInput": {
diff --git a/src/store/gui/maintenance/getters.ts b/src/store/gui/maintenance/getters.ts
index 03f966239..a1b359507 100644
--- a/src/store/gui/maintenance/getters.ts
+++ b/src/store/gui/maintenance/getters.ts
@@ -13,17 +13,35 @@ export const getters: GetterTree<GuiMaintenanceState, any> = {
         return entries
     },
 
-    /*getReminder: (state, getters) => (id: string) => {
-        const reminders = getters['getReminders'] ?? []
+    getOverdueEntries: (state, getters, rootState) => {
+        const currentTotalPrintTime = rootState.server.history.job_totals.total_print_time ?? 0
+        const currentTotalFilamentUsed = rootState.server.history.job_totals.total_filament_used ?? 0
+        const currentDate = new Date().getTime() / 1000
 
-        return reminders.find((reminder: GuiRemindersStateReminder) => reminder.id === id)
-    },
+        const entries: GuiMaintenanceStateEntry[] = getters['getEntries'] ?? []
+
+        return entries.filter((entry) => {
+            if (entry.reminder.type === null && entry.end_time !== null) return false
+
+            if (entry.reminder.filament.bool) {
+                const end = entry.start_filament + (entry.reminder.filament.value ?? 0)
+
+                if (end <= currentTotalFilamentUsed) return true
+            }
+
+            if (entry.reminder.printtime.bool) {
+                const end = entry.start_printtime + (entry.reminder.printtime.value ?? 0)
 
-    getOverdueReminders: (state, getters, rootState) => {
-        const currentTotalPrintTime = rootState.server.history.job_totals.total_print_time
-        const reminders: GuiRemindersStateReminder[] = getters['getReminders'] ?? []
-        return reminders.filter(
-            (reminder) => reminder.time_delta - (currentTotalPrintTime - reminder.start_total_print_time) < 0
-        )
-    },*/
+                if (end <= currentTotalPrintTime) return true
+            }
+
+            if (entry.reminder.date.bool) {
+                const end = entry.start_time + (entry.reminder.date.value ?? 0)
+
+                if (end <= currentDate) return true
+            }
+
+            return false
+        })
+    },
 }
diff --git a/src/store/gui/notifications/getters.ts b/src/store/gui/notifications/getters.ts
index 371220dab..79bf5187d 100644
--- a/src/store/gui/notifications/getters.ts
+++ b/src/store/gui/notifications/getters.ts
@@ -9,6 +9,7 @@ import { GuiRemindersStateReminder } from '../reminders/types'
 import { detect } from 'detect-browser'
 import semver from 'semver'
 import { minBrowserVersions } from '@/store/variables'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
 
 export const getters: GetterTree<GuiNotificationState, any> = {
     getNotifications: (state, getters) => {
@@ -36,7 +37,7 @@ export const getters: GetterTree<GuiNotificationState, any> = {
         notifications = notifications.concat(getters['getNotificationsKlipperWarnings'])
 
         // user-created reminders
-        notifications = notifications.concat(getters['getNotificationsOverdueReminders'])
+        notifications = notifications.concat(getters['getNotificationsOverdueMaintenance'])
 
         // browser warnings
         notifications = notifications.concat(getters['getNotificationsBrowserWarnings'])
@@ -365,37 +366,33 @@ export const getters: GetterTree<GuiNotificationState, any> = {
         return notifications
     },
 
-    getNotificationsOverdueReminders: (state, getters, rootState, rootGetters) => {
+    getNotificationsOverdueMaintenance: (state, getters, rootState, rootGetters) => {
         const notifications: GuiNotificationStateEntry[] = []
-        /*let reminders: GuiRemindersStateReminder[] = rootGetters['gui/reminders/getOverdueReminders']
+        let entries: GuiMaintenanceStateEntry[] = rootGetters['gui/maintenance/getOverdueEntries']
+        if (entries.length == 0) return []
 
         const date = rootState.server.system_boot_at ?? new Date()
 
-        if (reminders.length) {
-            // get all dismissed reminders and convert it to a string[]
-            const remindersDismisses = rootGetters['gui/notifications/getDismissByCategory']('reminder').map(
-                (dismiss: GuiNotificationStateDismissEntry) => {
-                    return dismiss.id
-                }
-            )
+        // get all dismissed reminders and convert it to a string[]
+        const remindersDismisses = rootGetters['gui/notifications/getDismissByCategory']('maintenance').map(
+            (dismiss: GuiNotificationStateDismissEntry) => {
+                return dismiss.id
+            }
+        )
 
-            // filter all dismissed reminders
-            reminders = reminders.filter((reminder) => !remindersDismisses.includes(reminder.id))
+        // filter all dismissed reminders
+        entries = entries.filter((entry) => !remindersDismisses.includes(entry.id))
 
-            reminders.forEach((reminder) => {
-                // TODO: translate
-                const title = 'User Created Reminder'
-                const description = reminder.name
-                notifications.push({
-                    id: `reminder/${reminder.id}`,
-                    priority: 'normal',
-                    title: title,
-                    description: description,
-                    date,
-                    dismissed: false,
-                })
+        entries.forEach((entry) => {
+            notifications.push({
+                id: `maintenance/${entry.id}`,
+                priority: 'high',
+                title: i18n.t('App.Notifications.MaintenanceReminder').toString(),
+                description: i18n.t('App.Notifications.MaintenanceReminderText', { name: entry.name }).toString(),
+                date,
+                dismissed: false,
             })
-        }*/
+        })
 
         return notifications
     },