From 3a636f84567dc2fed479e0232e26b16346da448d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 21 Mar 2024 18:32:17 +0100
Subject: [PATCH] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../HistoryListPanelDetailMaintenance.vue     |  54 ++++-
 ...ListPanelDetailMaintenanceHistoryEntry.vue | 189 ++++++++++++++++++
 ...oryListPanelDetailMaintenanceHistoryTr.vue | 168 ++++++++++++++++
 .../History/HistoryListEntryMaintenance.vue   |   1 -
 src/store/gui/maintenance/actions.ts          |   1 +
 src/store/gui/maintenance/types.ts            |   1 +
 6 files changed, 411 insertions(+), 3 deletions(-)
 create mode 100644 src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryEntry.vue
 create mode 100644 src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryTr.vue

diff --git a/src/components/dialogs/HistoryListPanelDetailMaintenance.vue b/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
index c1035523d..c1008575c 100644
--- a/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
+++ b/src/components/dialogs/HistoryListPanelDetailMaintenance.vue
@@ -46,8 +46,36 @@
                         </v-row>
                     </template>
                 </v-card-text>
+                <v-divider class="mt-3 mb-0" />
+                <v-card-text class="pt-0 mb-0 pb-0">
+                    <v-timeline align-top dense>
+                        <history-list-panel-detail-maintenance-history-entry
+                            v-for="entry in history"
+                            :key="entry.id"
+                            :item="entry" />
+                    </v-timeline>
+                </v-card-text>
+                <v-divider class="mt-3 mb-0" />
+                <v-card-text class="pt-0 mb-0 pb-0">
+                    <v-simple-table>
+                        <thead>
+                            <tr>
+                                <th class="text-left">Date</th>
+                                <th v-if="restFilamentText" class="text-center">{{ restFilamentText }}</th>
+                                <th v-if="restPrinttimeText" class="text-center">{{ restPrinttimeText }}</th>
+                                <th v-if="restDaysText" class="text-center">{{ restDaysText }}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <history-list-panel-detail-maintenance-history-tr
+                                v-for="entry in history"
+                                :key="entry.id"
+                                :item="entry" />
+                        </tbody>
+                    </v-simple-table>
+                </v-card-text>
             </overlay-scrollbars>
-            <v-divider class="mt-n3" />
+            <v-divider class="mt-0" />
             <v-card-actions>
                 <v-spacer />
                 <v-btn text @click="closeDialog">{{ $t('History.Cancel') }}</v-btn>
@@ -63,9 +91,11 @@ 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'
+import HistoryListPanelDetailMaintenanceHistoryEntry from '@/components/dialogs/HistoryListPanelDetailMaintenanceHistoryEntry.vue'
+import HistoryListPanelDetailMaintenanceHistoryTr from '@/components/dialogs/HistoryListPanelDetailMaintenanceHistoryTr.vue'
 
 @Component({
-    components: { Panel },
+    components: { Panel, HistoryListPanelDetailMaintenanceHistoryEntry, HistoryListPanelDetailMaintenanceHistoryTr },
 })
 export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
@@ -199,6 +229,26 @@ export default class HistoryListPanelDetailMaintenance extends Mixins(BaseMixin)
         return this.$t('History.Performed')
     }
 
+    get allEntries() {
+        return this.$store.getters['gui/maintenance/getEntries'] ?? []
+    }
+
+    get history() {
+        const array = []
+
+        let latest_entry_id = this.item.id
+        while (latest_entry_id) {
+            const entry = this.allEntries.find((entry: GuiMaintenanceStateEntry) => entry.id === latest_entry_id)
+            if (!entry) break
+            array.push(entry)
+            latest_entry_id = entry.last_entry
+        }
+
+        window.console.log(array)
+
+        return array
+    }
+
     closeDialog() {
         this.$emit('close')
     }
diff --git a/src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryEntry.vue b/src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryEntry.vue
new file mode 100644
index 000000000..a781b5757
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryEntry.vue
@@ -0,0 +1,189 @@
+<template>
+    <v-timeline-item small>
+        <v-row class="pt-1">
+            <v-col>
+                <strong>{{ date }}</strong>
+                <div>
+                    <span v-if="restFilamentText" class="mr-3">
+                        <v-icon small>{{ mdiAdjust }}</v-icon>
+                        {{ restFilamentText }}
+                    </span>
+                    <span v-if="restPrinttimeText" class="mr-3">
+                        <v-icon small left>{{ mdiAlarm }}</v-icon>
+                        {{ restPrinttimeText }}
+                    </span>
+                    <span v-if="restDaysText" class="mr-3">
+                        <v-icon small left>{{ mdiCalendar }}</v-icon>
+                        {{ restDaysText }}
+                    </span>
+                </div>
+            </v-col>
+        </v-row>
+    </v-timeline-item>
+</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 } from '@mdi/js'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+
+@Component({
+    components: { Panel },
+})
+export default class HistoryListPanelDetailMaintenanceHistoryEntry extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
+    mdiAlarm = mdiAlarm
+    mdiCalendar = mdiCalendar
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Object, default: false }) readonly item!: GuiMaintenanceStateEntry
+
+    get date() {
+        return this.formatDate(this.item.start_time * 1000, false)
+    }
+
+    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 restFilamentText() {
+        if (!this.item.reminder.filament.bool) return false
+
+        const value = this.item.reminder.filament?.value ?? 0
+
+        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
+        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 restPrinttimeText() {
+        if (!this.item.reminder.printtime.bool) return false
+
+        const value = this.item.reminder.printtime?.value ?? 0
+
+        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
+        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 restDaysText() {
+        if (!this.item.reminder.date.bool) return false
+
+        const value = this.item.reminder.date?.value ?? 0
+
+        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
+    }
+
+    get showPerformButton() {
+        if (this.item.end_time) return false
+
+        return this.item.reminder?.type ?? false
+    }
+
+    get performButtonText() {
+        if (this.item.reminder?.type === 'repeat') return this.$t('History.PerformedAndReschedule')
+
+        return this.$t('History.Performed')
+    }
+
+    get allEntries() {
+        return this.$store.getters['gui/maintenance/getEntries'] ?? []
+    }
+
+    get history() {
+        const array = []
+
+        let latest_entry_id = this.item.id
+        while (latest_entry_id) {
+            const entry = this.allEntries.find((entry: GuiMaintenanceStateEntry) => entry.id === latest_entry_id)
+            if (!entry) break
+            array.push(entry)
+            latest_entry_id = entry.last_entry
+        }
+
+        window.console.log(array)
+
+        return array
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    perform() {
+        this.$store.dispatch('gui/maintenance/perform', { id: this.item.id })
+    }
+}
+</script>
diff --git a/src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryTr.vue b/src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryTr.vue
new file mode 100644
index 000000000..377f96ce2
--- /dev/null
+++ b/src/components/dialogs/HistoryListPanelDetailMaintenanceHistoryTr.vue
@@ -0,0 +1,168 @@
+<template>
+    <tr>
+        <td>{{ date }}</td>
+        <td v-if="restFilamentText">{{ restFilamentText }}</td>
+        <td v-if="restPrinttimeText">{{ restPrinttimeText }}</td>
+        <td v-if="restDaysText">{{ restDaysText }}</td>
+    </tr>
+</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 } from '@mdi/js'
+import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
+
+@Component({
+    components: { Panel },
+})
+export default class HistoryListPanelDetailMaintenanceHistoryTr extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
+    mdiAlarm = mdiAlarm
+    mdiCalendar = mdiCalendar
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Object, default: false }) readonly item!: GuiMaintenanceStateEntry
+
+    get date() {
+        return this.formatDate(this.item.start_time * 1000)
+    }
+
+    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 restFilamentText() {
+        if (!this.item.reminder.filament.bool) return false
+
+        return `${this.restFilament.toFixed(0)} 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
+        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 restPrinttimeText() {
+        if (!this.item.reminder.printtime.bool) return false
+
+        return `${this.restPrinttime.toFixed(1)} 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
+        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 restDaysText() {
+        if (!this.item.reminder.date.bool) return false
+
+        return `${this.restDays.toFixed(0)} 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
+    }
+
+    get showPerformButton() {
+        if (this.item.end_time) return false
+
+        return this.item.reminder?.type ?? false
+    }
+
+    get performButtonText() {
+        if (this.item.reminder?.type === 'repeat') return this.$t('History.PerformedAndReschedule')
+
+        return this.$t('History.Performed')
+    }
+
+    get allEntries() {
+        return this.$store.getters['gui/maintenance/getEntries'] ?? []
+    }
+
+    get history() {
+        const array = []
+
+        let latest_entry_id = this.item.id
+        while (latest_entry_id) {
+            const entry = this.allEntries.find((entry: GuiMaintenanceStateEntry) => entry.id === latest_entry_id)
+            if (!entry) break
+            array.push(entry)
+            latest_entry_id = entry.last_entry
+        }
+
+        window.console.log(array)
+
+        return array
+    }
+
+    closeDialog() {
+        this.$emit('close')
+    }
+
+    perform() {
+        this.$store.dispatch('gui/maintenance/perform', { id: this.item.id })
+    }
+}
+</script>
diff --git a/src/components/panels/History/HistoryListEntryMaintenance.vue b/src/components/panels/History/HistoryListEntryMaintenance.vue
index 8d5037f98..df98df537 100644
--- a/src/components/panels/History/HistoryListEntryMaintenance.vue
+++ b/src/components/panels/History/HistoryListEntryMaintenance.vue
@@ -83,7 +83,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
     mdiAlarm = mdiAlarm
     mdiCalendar = mdiCalendar
     mdiDelete = mdiDelete
-    mdiNotebook = mdiNotebook
     mdiTextBoxSearch = mdiTextBoxSearch
 
     detailsDialogBool = false
diff --git a/src/store/gui/maintenance/actions.ts b/src/store/gui/maintenance/actions.ts
index 269599638..7b741a123 100644
--- a/src/store/gui/maintenance/actions.ts
+++ b/src/store/gui/maintenance/actions.ts
@@ -88,6 +88,7 @@ export const actions: ActionTree<GuiMaintenanceState, RootState> = {
                     end_filament: null,
                     start_printtime: totalPrintTime,
                     end_printtime: null,
+                    last_entry: payload.id,
 
                     reminder: { ...entry.reminder },
                 },
diff --git a/src/store/gui/maintenance/types.ts b/src/store/gui/maintenance/types.ts
index 9977a0c02..f2144a48e 100644
--- a/src/store/gui/maintenance/types.ts
+++ b/src/store/gui/maintenance/types.ts
@@ -14,6 +14,7 @@ export interface GuiMaintenanceStateEntry {
     end_filament: number | null
     start_printtime: number
     end_printtime: number | null
+    last_entry: string | null
 
     reminder: {
         type: null | 'one-time' | 'repeat'