feat: add sum + eta in jobqueue panel

src/components/panels/JobqueuePanel.vue

@@ -36,12 +36,13 @@
                 <draggable
                     v-model="joblist"
                     handle=".handle"
-                    class="jobqueue-list"
+                    class="jobqueue-list mb-3"
                     ghost-class="ghost"
                     group="jobs"
                     @end="updateOrder">
                     <jobqueue-entry v-for="job in jobs" :key="job.job_id" :job="job" :show-handle="true" />
                 </draggable>
+                <jobqueue-entry-sum :jobs="jobs" />
             </v-col>
         </v-row>
         <v-card-text v-else>
@@ -57,8 +58,9 @@ import Panel from '@/components/ui/Panel.vue'
 import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js'
 import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
 import draggable from 'vuedraggable'
+import JobqueueEntrySum from '@/components/panels/Status/JobqueueEntrySum.vue'
 @Component({
-    components: { draggable, JobqueueEntry, Panel },
+    components: { JobqueueEntrySum, draggable, JobqueueEntry, Panel },
 })
 export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
@@ -93,11 +95,15 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
 </script>
 
 <style lang="scss">
-.jobqueue-list > div + div {
+.jobqueue-list > .jobqueue-list-entry + .jobqueue-list-entry {
     border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .jobqueue-list > div.ghost {
     background-color: rgba(255, 255, 255, 0.12);
 }
+
+.theme--light .jobqueue-list > .jobqueue-list-entry + .jobqueue-list-entry {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
 </style>

src/components/panels/Status/Jobqueue.vue

@@ -51,7 +51,11 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
 </script>
 
 <style scoped>
-.jobqueue-list > div + div {
+.jobqueue-list .jobqueue-list-entry + .jobqueue-list-entry {
     border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
+
+.theme--light .jobqueue-list > .jobqueue-list-entry + .jobqueue-list-entry {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
 </style>

src/components/panels/Status/JobqueueEntry.vue

@@ -1,7 +1,7 @@
 <template>
     <v-row
         v-longpress:600="(e) => openContextMenu(e)"
-        class="d-flex flex-row flex-nowrap cursor-pointer"
+        class="jobqueue-list-entry d-flex flex-row flex-nowrap cursor-pointer"
         @contextmenu="openContextMenu($event)">
         <v-col v-if="showHandle" class="col-auto d-flex flex-column justify-center pr-0 py-0">
             <v-icon class="handle">{{ mdiDragVertical }}</v-icon>

src/components/panels/Status/JobqueueEntryRest.vue

@@ -17,7 +17,7 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
 import { mdiFileMultiple } from '@mdi/js'
 @Component
-export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
+export default class StatusPanelJobqueueEntryRest extends Mixins(BaseMixin) {
     mdiFileMultiple = mdiFileMultiple
 
     @Prop({ type: Array, required: true }) jobs!: ServerJobQueueStateJob[]
@@ -84,7 +84,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         const weight = this.sums.filamentWeight
         if (weight === 0) return null
 
-        if (weight >= 1000) return (length / 1000).toFixed(1) + ' kg'
+        if (weight >= 1000) return (weight / 1000).toFixed(1) + ' kg'
 
         return weight.toFixed(0) + ' g'
     }

src/components/panels/Status/JobqueueEntrySum.vue

@@ -0,0 +1,146 @@
+<template>
+    <v-row class="jobqueue-entry-sum">
+        <v-col class="py-2" style="font-size: 0.875em">
+            <small>
+                <span class="text-no-wrap mr-1">{{ $t('Panels.StatusPanel.Filament') }}: {{ filamentOutput }},</span>
+                <span class="text-no-wrap mr-1">{{ $t('Panels.StatusPanel.PrintTime') }}: {{ estimatedTime }},</span>
+                <span class="text-no-wrap mr-1">{{ $t('Panels.StatusPanel.ETA') }}: {{ eta }}</span>
+            </small>
+        </v-col>
+    </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 { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
+@Component
+export default class StatusPanelJobqueueEntrySum extends Mixins(BaseMixin) {
+    @Prop({ type: Array, required: true }) jobs!: ServerJobQueueStateJob[]
+
+    get sums() {
+        const sums = {
+            filamentLength: 0,
+            filamentWeight: 0,
+            estimatedTime: 0,
+        }
+
+        this.jobs.forEach((job: ServerJobQueueStateJob) => {
+            const count = (job.combinedIds?.length ?? 0) + 1
+
+            sums.filamentLength += (job.metadata?.filament_total ?? 0) * count
+            sums.filamentWeight += (job.metadata?.filament_weight_total ?? 0) * count
+            sums.estimatedTime += (job.metadata?.estimated_time ?? 0) * count
+        })
+
+        return sums
+    }
+
+    get count() {
+        let count = 0
+
+        this.jobs.forEach((item: ServerJobQueueStateJob) => {
+            count += (item.combinedIds?.length ?? 0) + 1
+        })
+
+        return count
+    }
+
+    get filamentLength() {
+        const length = this.sums.filamentLength
+        if (length === 0) return null
+
+        if (length >= 1000) return (length / 1000).toFixed(1) + ' m'
+
+        return length.toFixed(0) + ' mm'
+    }
+
+    get filamentWeight() {
+        const weight = this.sums.filamentWeight
+        if (weight === 0) return null
+
+        if (weight >= 1000) return (weight / 1000).toFixed(1) + ' kg'
+
+        return weight.toFixed(0) + ' g'
+    }
+
+    get filamentOutput() {
+        const filamentArray = []
+        if (this.filamentLength) filamentArray.push(this.filamentLength)
+        if (this.filamentWeight) filamentArray.push(this.filamentWeight)
+        if (filamentArray.length) return filamentArray.join(' / ')
+
+        return '--'
+    }
+
+    get estimatedTime() {
+        let totalSeconds = this.sums.estimatedTime
+        if (totalSeconds == 0) return '--'
+
+        const output = []
+
+        const days = Math.floor(totalSeconds / (3600 * 24))
+        if (days) {
+            totalSeconds %= 3600 * 24
+            output.push(days + 'd')
+        }
+
+        const hours = Math.floor(totalSeconds / 3600)
+        totalSeconds %= 3600
+        if (hours) output.push(hours + 'h')
+
+        const minutes = Math.floor(totalSeconds / 60)
+        if (minutes) output.push(minutes + 'm')
+
+        // skip seconds if there are hours
+        if (hours > 0) return output.join(' ')
+
+        const seconds = totalSeconds % 60
+        if (seconds) output.push(seconds.toFixed(0) + 's')
+
+        return output.join(' ')
+    }
+
+    get currentPrintEta() {
+        const eta = this.$store.getters['printer/getEstimatedTimeETA']
+        if (eta === 0) return Date.now()
+
+        return eta
+    }
+
+    get eta() {
+        if (this.sums.estimatedTime === 0) return '--'
+
+        let eta = this.currentPrintEta + this.sums.estimatedTime * 1000
+        const hours12Format = this.$store.getters['gui/getHours12Format'] ?? false
+        const date = new Date(eta)
+        let am = true
+        let h: string | number = date.getHours()
+
+        if (hours12Format && h > 11) am = false
+        if (hours12Format && h > 12) h -= 12
+        if (hours12Format && h == 0) h += 12
+        if (h < 10) h = '0' + h
+
+        const m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
+
+        const diff = eta - new Date().getTime()
+        let output = h + ':' + m
+        if (hours12Format) output += ` ${am ? 'AM' : 'PM'}`
+        if (diff > 60 * 60 * 24 * 1000) output += `+${Math.trunc(diff / (60 * 60 * 24 * 1000))}`
+
+        return output
+    }
+}
+</script>
+
+<style scoped>
+.jobqueue-entry-sum {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.theme--light .jobqueue-entry-sum {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+</style>

src/locales/de.json

@@ -198,7 +198,6 @@
         "EditFile": "Datei bearbeiten",
         "Empty": "Leer",
         "ExtruderTemp": "Extruder Temp.",
-        "Filament": "Filament",
         "FilamentName": "Filament Name",
         "FilamentType": "Filament Typ",
         "FilamentUsage": "Filamentverbrauch",
@@ -390,18 +389,17 @@
         "TotalTime": "Gesamtzeit"
     },
     "JobQueue": {
-        "AllJobs": "Alle Aufträge",
         "Cancel": "abbrechen",
         "ChangeCount": "Anzahl ändern",
         "Count": "Anzahl",
         "Empty": "Leer",
         "InvalidCountEmpty": "Die Eingabe darf nicht leer sein!",
         "InvalidCountGreaterZero": "Die Eingabe muss größer als 0 sein!",
         "JobQueue": "Auftragswarteschlange",
-        "Jobs": "Aufträge",
         "Pause": "Pause",
         "RemoveFromQueue": "Von Auftragswarteschlange entfernen",
-        "Start": "Start"
+        "Start": "Start",
+        "StartPrint": "Auftrag starten"
     },
     "Machine": {
         "ConfigFilesPanel": {