From 08060611154a3251be02f237a037862c196f865e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 28 Nov 2024 22:51:10 +0100
Subject: [PATCH] feat(StatusPanel): add option to show history in StatusPanel
 (#2055)

Co-authored-by: rackrick <45207681+rackrick@users.noreply.github.com>
---
 src/components/panels/Status/History.vue      |  77 +++++
 src/components/panels/Status/HistoryEntry.vue | 264 ++++++++++++++++++
 src/components/panels/StatusPanel.vue         |  19 +-
 .../settings/SettingsUiSettingsTab.vue        |  22 ++
 src/locales/en.json                           |   5 +
 src/store/gui/index.ts                        |   1 +
 src/store/gui/types.ts                        |   1 +
 src/store/server/history/types.ts             |   4 +
 8 files changed, 392 insertions(+), 1 deletion(-)
 create mode 100644 src/components/panels/Status/History.vue
 create mode 100644 src/components/panels/Status/HistoryEntry.vue

diff --git a/src/components/panels/Status/History.vue b/src/components/panels/Status/History.vue
new file mode 100644
index 000000000..2ad17df2c
--- /dev/null
+++ b/src/components/panels/Status/History.vue
@@ -0,0 +1,77 @@
+<template>
+    <v-card class="history" flat>
+        <template v-if="jobsCombined.length">
+            <v-row class="mx-0 mt-0 pb-3">
+                <v-col class="history-list">
+                    <status-panel-history-entry v-for="job in jobsCombined" :key="job.job_id" :job="job" />
+                </v-col>
+            </v-row>
+        </template>
+        <div v-else>
+            <p class="body-2 my-3 text-center text--disabled">{{ $t('Panels.StatusPanel.EmptyHistory') }}</p>
+        </div>
+    </v-card>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import StatusPanelHistoryEntry from '@/components/panels/Status/HistoryEntry.vue'
+import { ServerHistoryStateJob, ServerHistoryStateJobWithCount } from '@/store/server/history/types'
+
+@Component({
+    components: { StatusPanelHistoryEntry },
+})
+export default class StatusPanelHistory extends Mixins(BaseMixin) {
+    get jobs(): ServerHistoryStateJob[] {
+        return this.$store.state.server.history.jobs ?? []
+    }
+
+    get maxLength() {
+        return this.$store.state.gui.uiSettings.dashboardHistoryLimit ?? 5
+    }
+
+    get jobsCombined() {
+        const jobs: ServerHistoryStateJobWithCount[] = []
+
+        for (const job of this.jobs) {
+            if (jobs.length === 0) {
+                jobs.push({ ...job, count: 1 })
+                continue
+            }
+
+            const lastJob = jobs[jobs.length - 1]
+            const lastJobUuid = lastJob.metadata.uuid ?? null
+            const jobUuid = job.metadata.uuid ?? null
+            if (lastJobUuid === jobUuid && lastJob.status === job.status) {
+                lastJob.filament_used += job.filament_used
+                lastJob.print_duration += job.print_duration
+                lastJob.total_duration += job.total_duration
+                lastJob.count += 1
+                continue
+            }
+
+            if (jobs.length >= this.maxLength) break
+
+            jobs.push({ ...job, count: 1 })
+        }
+
+        return jobs
+    }
+
+    startJobqueue() {
+        this.$store.dispatch('server/jobQueue/start')
+    }
+}
+</script>
+
+<style scoped>
+.history-list .history-list-entry + .history-list-entry {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.theme--light .history-list > .history-list-entry + .history-list-entry {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+</style>
diff --git a/src/components/panels/Status/HistoryEntry.vue b/src/components/panels/Status/HistoryEntry.vue
new file mode 100644
index 000000000..7d5af2cb7
--- /dev/null
+++ b/src/components/panels/Status/HistoryEntry.vue
@@ -0,0 +1,264 @@
+<template>
+    <v-row
+        v-longpress:600="(e) => openContextMenu(e)"
+        class="history-list-entry d-flex flex-row flex-nowrap cursor-pointer"
+        @contextmenu="openContextMenu($event)">
+        <v-col class="col-auto d-flex flex-column justify-center pr-0 py-0">
+            <v-tooltip
+                v-if="smallThumbnail"
+                top
+                :disabled="!bigThumbnail"
+                content-class="tooltip__content-opacity1"
+                :color="bigThumbnailTooltipColor">
+                <template #activator="{ on, attrs }">
+                    <vue-load-image class="text-center width-32">
+                        <img
+                            slot="image"
+                            :src="smallThumbnail"
+                            :width="32"
+                            :height="32"
+                            :alt="job.filename"
+                            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" :alt="job.filename" /></span>
+            </v-tooltip>
+            <v-icon v-else>{{ mdiFile }}</v-icon>
+        </v-col>
+        <v-col class="py-1" style="min-width: 0; font-size: 0.875em">
+            <div class="text-truncate">
+                <strong v-if="job.count > 1">{{ job.count }}x</strong>
+                {{ job.filename }}
+            </div>
+            <small v-if="description" class="text-truncate">{{ description }}</small>
+        </v-col>
+        <v-col class="col-auto d-flex flex-column justify-center pa-0 pr-3">
+            <v-tooltip top>
+                <template #activator="{ on, attrs }">
+                    <span v-bind="attrs" v-on="on">
+                        <v-icon small :color="statusColor" :disabled="!job.exists">
+                            {{ statusIcon }}
+                        </v-icon>
+                    </span>
+                </template>
+                <span>{{ statusName }}</span>
+            </v-tooltip>
+        </v-col>
+        <v-menu v-model="showContextMenu" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
+            <v-list>
+                <v-list-item v-if="job.exists" :disabled="printerIsPrinting || !klipperReadyForGui" @click="startPrint">
+                    <v-icon class="mr-1">{{ mdiPrinter }}</v-icon>
+                    {{ $t('History.Reprint') }}
+                </v-list-item>
+                <v-list-item v-if="job.exists && isJobQueueAvailable" @click="addToQueue">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddToQueue') }}
+                </v-list-item>
+                <v-list-item v-if="job.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') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
+        <add-batch-to-queue-dialog
+            :is-visible="addBatchToQueueDialogBool"
+            :show-toast="true"
+            :filename="job.filename"
+            @close="addBatchToQueueDialogBool = false" />
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick, mdiDelete, mdiFile, mdiPlaylistPlus, mdiPrinter } from '@mdi/js'
+import { defaultBigThumbnailBackground, thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
+import { ServerHistoryStateJobWithCount } from '@/store/server/history/types'
+import { FileStateFileThumbnail } from '@/store/files/types'
+import { formatPrintTime } from '@/plugins/helpers'
+@Component
+export default class StatusPanelHistoryEntry extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiDelete = mdiDelete
+    mdiFile = mdiFile
+    mdiPlaylistPlus = mdiPlaylistPlus
+    mdiPrinter = mdiPrinter
+
+    @Prop({ type: Object, required: true }) job!: ServerHistoryStateJobWithCount
+
+    showContextMenu = false
+    contextMenuX = 0
+    contextMenuY = 0
+
+    addBatchToQueueDialogBool = false
+
+    get smallThumbnail() {
+        if ((this.job.metadata?.thumbnails?.length ?? 0) < 1) return false
+
+        const thumbnail = this.job.metadata?.thumbnails?.find(
+            (thumb) =>
+                thumb.width >= thumbnailSmallMin &&
+                thumb.width <= thumbnailSmallMax &&
+                thumb.height >= thumbnailSmallMin &&
+                thumb.height <= thumbnailSmallMax
+        )
+
+        return thumbnail ? this.createThumbnailUrl(thumbnail) : false
+    }
+
+    get bigThumbnail() {
+        if ((this.job.metadata?.thumbnails?.length ?? 0) < 1) return false
+
+        const thumbnail = this.job.metadata?.thumbnails?.find((thumb) => thumb.width >= thumbnailBigMin)
+
+        return thumbnail ? this.createThumbnailUrl(thumbnail) : false
+    }
+
+    get statusIcon() {
+        return this.$store.getters['server/history/getPrintStatusIcon'](this.job.status)
+    }
+
+    get statusColor() {
+        return this.$store.getters['server/history/getPrintStatusIconColor'](this.job.status)
+    }
+
+    get statusName() {
+        // check if translation exists
+        if (!this.$t(`History.StatusValues.${this.job.status}`, 'en')) return this.job.status.replace(/_/g, ' ')
+
+        return this.$t(`History.StatusValues.${this.job.status}`)
+    }
+
+    get description() {
+        const outputArray = []
+
+        const filamentArray = []
+        let filament = '--'
+        if (this.filamentLength) filamentArray.push(this.filamentLength)
+        if (this.filamentWeight) filamentArray.push(this.filamentWeight)
+        if (filamentArray.length) filament = filamentArray.join(' / ')
+        outputArray.push(`${this.$t('Panels.StatusPanel.Filament')}: ${filament}`)
+
+        if (this.estimatedTime !== '--')
+            outputArray.push(`${this.$t('Panels.StatusPanel.PrintTime')}: ${this.estimatedTime}`)
+        else if (this.totalTime) outputArray.push(`${this.$t('Panels.StatusPanel.TotalTime')}: ${this.totalTime}`)
+
+        return outputArray.join(', ')
+    }
+
+    get filamentLength() {
+        const length = this.job.filament_used
+        if (length === 0) return null
+
+        if (length >= 1000) return (length / 1000).toFixed(1) + ' m'
+
+        return length.toFixed(0) + ' mm'
+    }
+
+    get filamentWeight() {
+        const metadataFilamentLength = this.job.metadata?.filament_total ?? 0
+        const metadataFilamentWeight = this.job.metadata?.filament_weight_total ?? 0
+        if (metadataFilamentLength === 0 || metadataFilamentWeight === 0) return null
+
+        const specificWeight = metadataFilamentWeight / metadataFilamentLength
+
+        const weight = this.job.filament_used * specificWeight
+        if (weight === 0) return null
+
+        if (weight >= 1000) return (length / 1000).toFixed(1) + ' kg'
+
+        return weight.toFixed(0) + ' g'
+    }
+
+    get estimatedTime() {
+        let totalSeconds = this.job.print_duration ?? 0
+        if (totalSeconds == 0) return '--'
+
+        return formatPrintTime(totalSeconds)
+    }
+
+    get totalTime() {
+        let totalSeconds: number = this.job.total_duration ?? 0
+        if (totalSeconds === 0) return null
+
+        return formatPrintTime(totalSeconds)
+    }
+
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get bigThumbnailTooltipColor() {
+        if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) {
+            return undefined
+        }
+
+        return this.bigThumbnailBackground
+    }
+
+    get isJobQueueAvailable() {
+        return this.moonrakerComponents.includes('job_queue')
+    }
+
+    openContextMenu(e: any) {
+        e?.preventDefault()
+
+        if (this.showContextMenu) {
+            this.showContextMenu = false
+            return
+        }
+
+        this.showContextMenu = true
+        this.contextMenuX = e?.clientX || e?.pageX || window.screenX / 2
+        this.contextMenuY = e?.clientY || e?.pageY || window.screenY / 2
+    }
+
+    startPrint() {
+        if (!this.job.exists) return
+
+        this.$socket.emit('printer.print.start', { filename: this.job.filename })
+    }
+
+    addToQueue() {
+        this.$store.dispatch('server/jobQueue/addToQueue', [this.job.filename])
+        this.$toast.info(this.$t('History.AddToQueueSuccessful', { filename: this.job.filename }).toString())
+    }
+
+    deleteJob() {
+        this.$socket.emit(
+            'server.history.delete_job',
+            { uid: this.job.job_id },
+            { action: 'server/history/getDeletedJobs' }
+        )
+    }
+
+    createThumbnailUrl(thumbnail: FileStateFileThumbnail) {
+        let relative_url = ''
+        if (this.job.filename.lastIndexOf('/') !== -1) {
+            relative_url = this.job.filename.substring(0, this.job.filename.lastIndexOf('/') + 1)
+        }
+
+        return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail.relative_path)}?timestamp=${
+            this.job.metadata.modified
+        }`
+    }
+}
+</script>
+
+<style scoped>
+.width-32 {
+    width: 32px;
+}
+</style>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 07b61d81d..6334d6eef 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -95,6 +95,9 @@
                 <v-tab v-if="displayFilesTab" href="#files">
                     <v-icon>{{ mdiFileDocumentMultipleOutline }}</v-icon>
                 </v-tab>
+                <v-tab v-if="displayHistoryTab" href="#history">
+                    <v-icon>{{ mdiHistory }}</v-icon>
+                </v-tab>
                 <v-tab href="#jobqueue">
                     <v-badge :color="jobQueueBadgeColor" :content="jobsCount.toString()" :inline="true">
                         <v-icon color="disabled">{{ mdiTrayFull }}</v-icon>
@@ -109,6 +112,9 @@
                 <v-tab-item v-if="displayFilesTab" value="files">
                     <status-panel-gcodefiles />
                 </v-tab-item>
+                <v-tab-item v-if="displayHistoryTab" value="history">
+                    <status-panel-history />
+                </v-tab-item>
                 <v-tab-item value="jobqueue">
                     <status-panel-jobqueue />
                 </v-tab-item>
@@ -129,6 +135,7 @@ import MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
 import StatusPanelPrintstatus from '@/components/panels/Status/Printstatus.vue'
 import StatusPanelGcodefiles from '@/components/panels/Status/Gcodefiles.vue'
+import StatusPanelHistory from '@/components/panels/Status/History.vue'
 import StatusPanelJobqueue from '@/components/panels/Status/Jobqueue.vue'
 import StatusPanelExcludeObject from '@/components/panels/Status/ExcludeObject.vue'
 import StatusPanelPrintstatusThumbnail from '@/components/panels/Status/PrintstatusThumbnail.vue'
@@ -140,6 +147,7 @@ import {
     mdiCloseCircle,
     mdiDotsVertical,
     mdiFileDocumentMultipleOutline,
+    mdiHistory,
     mdiInformation,
     mdiLayersPlus,
     mdiMessageProcessingOutline,
@@ -162,6 +170,7 @@ import CancelJobDialog from '@/components/dialogs/CancelJobDialog.vue'
         Panel,
         StatusPanelExcludeObject,
         StatusPanelGcodefiles,
+        StatusPanelHistory,
         StatusPanelJobqueue,
         StatusPanelPrintstatus,
         StatusPanelPrintstatusThumbnail,
@@ -174,6 +183,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     mdiDotsVertical = mdiDotsVertical
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiInformation = mdiInformation
+    mdiHistory = mdiHistory
     mdiMessageProcessingOutline = mdiMessageProcessingOutline
     mdiSpeedometer = mdiSpeedometer
     mdiTrayFull = mdiTrayFull
@@ -378,9 +388,16 @@ export default class StatusPanel extends Mixins(BaseMixin) {
         return count > 0
     }
 
+    get displayHistoryTab() {
+        const count = this.$store.state.gui.uiSettings.dashboardHistoryLimit ?? 5
+
+        return count > 0
+    }
+
     mounted() {
         if (this.current_filename !== '') this.activeTab = 'status'
-        if (!this.displayFilesTab) this.activeTab = 'jobqueue'
+        if (!this.displayFilesTab) this.activeTab = 'history'
+        if (!this.displayHistoryTab) this.activeTab = 'jobqueue'
     }
 
     @Watch('current_filename')
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index 0d420a506..a05410af7 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -308,6 +308,20 @@
                         dense
                         outlined />
                 </settings-row>
+                <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.DashboardHistoryLimit')"
+                    :sub-title="$t('Settings.UiSettingsTab.DashboardHistoryLimitDescription')">
+                    <v-slider
+                        v-model.lazy="dashboardHistoryLimit"
+                        hide-details
+                        :min="0"
+                        :max="10"
+                        :step="1"
+                        :label="
+                            $t('Settings.UiSettingsTab.DashboardHistoryLimitLabel', { count: dashboardHistoryLimit })
+                        " />
+                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -674,6 +688,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin, ThemeMixin)
         ]
     }
 
+    get dashboardHistoryLimit() {
+        return this.$store.state.gui.uiSettings.dashboardHistoryLimit ?? 5
+    }
+
+    set dashboardHistoryLimit(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.dashboardHistoryLimit', value: newVal })
+    }
+
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color) color = color.hex
         if (color.length > 7) color = color.substr(0, 7)
diff --git a/src/locales/en.json b/src/locales/en.json
index 1108500a1..f65256eb8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -736,6 +736,7 @@
             "ClearPrintStats": "Clear print stats",
             "Difference": "Difference",
             "EmptyGcodes": "No G-Code available.",
+            "EmptyHistory": "There is no job in the history.",
             "EmptyJobqueue": "There is currently no file in the job queue.",
             "Estimate": "Estimate",
             "ETA": "ETA",
@@ -775,6 +776,7 @@
             "Slicer": "Slicer",
             "Speed": "Speed",
             "Total": "Total",
+            "TotalTime": "Total Time",
             "Unknown": "Unknown"
         },
         "TemperaturePanel": {
@@ -1234,6 +1236,9 @@
             "DashboardFilesLimit": "Dashboard Files Limit",
             "DashboardFilesLimitDescription": "Select the maximum number of files to display on the dashboard Status Panel. (0 hides the files tab)",
             "DashboardFilesLimitLabel": "{count} files",
+            "DashboardHistoryLimit": "Dashboard History Limit",
+            "DashboardHistoryLimitDescription": "Select the maximum number of jobs to display on the dashboard in the Status Panel. (0 hides the history tab)",
+            "DashboardHistoryLimitLabel": "{count} jobs",
             "DefaultNavigationState": "Navigation default state",
             "DefaultNavigationStateAlwaysClosed": "always closed",
             "DefaultNavigationStateAlwaysOpen": "always open",
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index a9ffed150..a7f011147 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -185,6 +185,7 @@ export const getDefaultState = (): GuiState => {
             printstatusThumbnailZoom: true,
             dashboardFilesLimit: 5,
             dashboardFilesFilter: ['new', 'failed', 'completed'],
+            dashboardHistoryLimit: 5,
         },
         view: {
             blockFileUpload: false,
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index e7f871344..ed8f0dcda 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -127,6 +127,7 @@ export interface GuiState {
         printstatusThumbnailZoom: boolean
         dashboardFilesLimit: number
         dashboardFilesFilter: GuiStateUiSettingsDashboardFilesFilter[]
+        dashboardHistoryLimit: number
     }
     view: {
         blockFileUpload: boolean
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index 9cc07f8cd..090ae9649 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -91,3 +91,7 @@ export interface ServerHistoryStateAllPrintStatusEntry {
 }
 
 export type HistoryStatsValueNames = 'jobs' | 'filament' | 'time'
+
+export interface ServerHistoryStateJobWithCount extends ServerHistoryStateJob {
+    count: number
+}