From d56ab7863b7b5455428118c7b300cd75dee9e6fd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Jan 2023 14:48:23 +0100
Subject: [PATCH 01/25] feat: add jobs to queue in batches WIP

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

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index f7e5a72cb..bfc3d2ff2 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -319,7 +319,7 @@
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && moonrakerComponents.includes('job_queue')"
                     :disabled="!isGcodeFile(contextMenu.item)"
-                    @click="addToQueue(contextMenu.item)">
+                    @click="openAddToQueueDialog(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
                     {{ $t('Files.AddToQueue') }}
                 </v-list-item>
@@ -495,6 +495,33 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <v-dialog v-model="dialogAddToQueue.show" max-width="400">
+            <panel
+                :title="$t('Files.AddToQueue').toString()"
+                card-class="gcode-files-add-to-queue-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="dialogAddToQueue.show = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+
+                <v-card-text>
+                    <v-text-field
+                        ref="inputFieldAddToQueueCount"
+                        v-model="dialogAddToQueue.count"
+                        :label="$t('Files.Count')"
+                        required
+                        :rules="countInputRules"
+                        @keyup.enter="addToQueueAction"></v-text-field>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="" text @click="dialogAddToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="error" text @click="addToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
     </div>
 </template>
 
@@ -554,6 +581,12 @@ interface dialogPrintFile {
     item: FileStateGcodefile
 }
 
+interface dialogAddToQueue {
+    show: boolean
+    count: number
+    item: FileStateGcodefile
+}
+
 interface dialogRenameObject {
     show: boolean
     newName: string
@@ -648,6 +681,12 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         item: { ...this.contextMenu.item },
     }
 
+    private dialogAddToQueue: dialogAddToQueue = {
+        show: false,
+        count: 1,
+        item: { ...this.contextMenu.item },
+    }
+
     private dialogRenameFile: dialogRenameObject = {
         show: false,
         newName: '',
@@ -673,6 +712,10 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         (value: string) => !!value || this.$t('Files.InvalidNameEmpty'),
         (value: string) => !this.existsFilename(value) || this.$t('Files.InvalidNameAlreadyExists'),
     ]
+    private countInputRules = [
+        (value: string) => !!value || this.$t('Files.InvalidNameEmpty'),
+        (value: string) => !this.existsFilename(value) || this.$t('Files.InvalidNameAlreadyExists'),
+    ]
 
     existsFilename(name: string) {
         return this.files.findIndex((file: FileStateFile) => file.filename === name) >= 0
@@ -1099,7 +1142,13 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
-    addToQueue(item: FileStateGcodefile | FileStateFile) {
+    openAddToQueueDialog(item: FileStateGcodefile) {
+        this.dialogAddToQueue.show = true
+        this.dialogAddToQueue.count = 1
+        this.dialogAddToQueue.item = item
+    }
+
+    addToQueueAction(item: FileStateGcodefile | FileStateFile) {
         let filename = [this.currentPath, item.filename].join('/')
         if (filename.startsWith('/')) filename = filename.slice(1)
 

From adbd8a5bee0b3cd139b55c98a54fc4c02e8fece9 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 4 Feb 2023 12:26:36 +0100
Subject: [PATCH 02/25] feat(gcodefiles): add jobs to queue in batches

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

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index bfc3d2ff2..ed54bcdc6 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -1148,11 +1148,18 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         this.dialogAddToQueue.item = item
     }
 
-    addToQueueAction(item: FileStateGcodefile | FileStateFile) {
-        let filename = [this.currentPath, item.filename].join('/')
+    async addToQueueAction() {
+        let filename = [this.currentPath, this.dialogAddToQueue.item.filename].join('/')
         if (filename.startsWith('/')) filename = filename.slice(1)
 
-        this.$store.dispatch('server/jobQueue/addToQueue', [filename])
+        const array: string[] = []
+        for (let i = 0; i < this.dialogAddToQueue.count; i++) {
+            array.push(filename)
+        }
+
+        await this.$store.dispatch('server/jobQueue/addToQueue', array)
+
+        this.dialogAddToQueue.show = false
     }
 
     changeMetadataVisible(name: string, value: boolean) {
diff --git a/src/locales/en.json b/src/locales/en.json
index 58a43ff0d..9767113b3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -169,6 +169,7 @@
         "BedTemp": "Bed Temp.",
         "Cancel": "Cancel",
         "ChamberTemp": "Chamber Temp.",
+        "Count": "Count",
         "Create": "Create",
         "CreateNewDirectory": "Create new Directory",
         "CurrentPath": "Current path",

From 3d1f7fa96b1af7ef2a618b21e3ceabe31010fbfd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 09:36:58 +0100
Subject: [PATCH 03/25] refactor: add seperate button for "add patch to queue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue | 48 +++++++++++++++--------
 src/locales/en.json                       |  1 +
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index ff6fd83d8..c50fbba10 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -320,10 +320,17 @@
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && moonrakerComponents.includes('job_queue')"
                     :disabled="!isGcodeFile(contextMenu.item)"
-                    @click="openAddToQueueDialog(contextMenu.item)">
+                    @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.isDirectory && moonrakerComponents.includes('job_queue')"
+                    :disabled="!isGcodeFile(contextMenu.item)"
+                    @click="openAddPatchToQueueDialog(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddPatchToQueue') }}
+                </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.preheat_gcode !== null"
                     :disabled="['error', 'printing', 'paused'].includes(printer_state)"
@@ -496,13 +503,13 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <v-dialog v-model="dialogAddToQueue.show" max-width="400">
+        <v-dialog v-model="dialogAddPatchToQueue.show" max-width="400">
             <panel
                 :title="$t('Files.AddToQueue').toString()"
                 card-class="gcode-files-add-to-queue-dialog"
                 :margin-bottom="false">
                 <template #buttons>
-                    <v-btn icon tile @click="dialogAddToQueue.show = false">
+                    <v-btn icon tile @click="dialogAddPatchToQueue.show = false">
                         <v-icon>{{ mdiCloseThick }}</v-icon>
                     </v-btn>
                 </template>
@@ -510,16 +517,16 @@
                 <v-card-text>
                     <v-text-field
                         ref="inputFieldAddToQueueCount"
-                        v-model="dialogAddToQueue.count"
+                        v-model="dialogAddPatchToQueue.count"
                         :label="$t('Files.Count')"
                         required
                         :rules="countInputRules"
-                        @keyup.enter="addToQueueAction"></v-text-field>
+                        @keyup.enter="dialogAddPatchToQueue"></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogAddToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
-                    <v-btn color="error" text @click="addToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
+                    <v-btn color="" text @click="dialogAddPatchToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
+                    <v-btn color="error" text @click="addPatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
                 </v-card-actions>
             </panel>
         </v-dialog>
@@ -579,7 +586,7 @@ interface dialogPrintFile {
     item: FileStateGcodefile
 }
 
-interface dialogAddToQueue {
+interface dialogAddPatchToQueue {
     show: boolean
     count: number
     item: FileStateGcodefile
@@ -679,7 +686,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         item: { ...this.contextMenu.item },
     }
 
-    private dialogAddToQueue: dialogAddToQueue = {
+    private dialogAddPatchToQueue: dialogAddPatchToQueue = {
         show: false,
         count: 1,
         item: { ...this.contextMenu.item },
@@ -1140,24 +1147,31 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         this.currentPath = this.currentPath.slice(0, this.currentPath.lastIndexOf('/'))
     }
 
-    openAddToQueueDialog(item: FileStateGcodefile) {
-        this.dialogAddToQueue.show = true
-        this.dialogAddToQueue.count = 1
-        this.dialogAddToQueue.item = item
+    async addToQueue(item: FileStateGcodefile) {
+        let filename = [this.currentPath, this.dialogAddPatchToQueue.item.filename].join('/')
+        if (filename.startsWith('/')) filename = filename.slice(1)
+
+        await this.$store.dispatch('server/jobQueue/addToQueue', [filename])
+    }
+
+    openAddPatchToQueueDialog(item: FileStateGcodefile) {
+        this.dialogAddPatchToQueue.show = true
+        this.dialogAddPatchToQueue.count = 1
+        this.dialogAddPatchToQueue.item = item
     }
 
-    async addToQueueAction() {
-        let filename = [this.currentPath, this.dialogAddToQueue.item.filename].join('/')
+    async addPatchToQueueAction() {
+        let filename = [this.currentPath, this.dialogAddPatchToQueue.item.filename].join('/')
         if (filename.startsWith('/')) filename = filename.slice(1)
 
         const array: string[] = []
-        for (let i = 0; i < this.dialogAddToQueue.count; i++) {
+        for (let i = 0; i < this.dialogAddPatchToQueue.count; i++) {
             array.push(filename)
         }
 
         await this.$store.dispatch('server/jobQueue/addToQueue', array)
 
-        this.dialogAddToQueue.show = false
+        this.dialogAddPatchToQueue.show = false
     }
 
     changeMetadataVisible(name: string, value: boolean) {
diff --git a/src/locales/en.json b/src/locales/en.json
index 97e9844a8..f81679529 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -164,6 +164,7 @@
         "Yes": "Yes"
     },
     "Files": {
+        "AddPatchToQueue": "Add patch to Queue",
         "AddToQueue": "Add to Queue",
         "AllFiles": "All",
         "BedTemp": "Bed Temp.",

From 676047c64f6363f3536baea453a6c60f921aa6fd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:22:47 +0100
Subject: [PATCH 04/25] fix: add jobs to queue with enter

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

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index c50fbba10..43365fff9 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -521,7 +521,7 @@
                         :label="$t('Files.Count')"
                         required
                         :rules="countInputRules"
-                        @keyup.enter="dialogAddPatchToQueue"></v-text-field>
+                        @keyup.enter="addPatchToQueueAction"></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>

From 1e45c5988995478798fcf61dcacd23c2d8078e00 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:23:09 +0100
Subject: [PATCH 05/25] feat: combine multiple same jobs in job queue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/server/jobQueue/getters.ts | 9 ++++++++-
 src/store/server/jobQueue/types.ts   | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/store/server/jobQueue/getters.ts b/src/store/server/jobQueue/getters.ts
index 62265776f..6508d599d 100644
--- a/src/store/server/jobQueue/getters.ts
+++ b/src/store/server/jobQueue/getters.ts
@@ -10,10 +10,17 @@ export const getters: GetterTree<ServerJobQueueState, any> = {
 
         state.queued_jobs.forEach((queuedJob) => {
             const job = { ...queuedJob }
+
+            if (jobs.length && jobs[jobs.length - 1].filename === job.filename) {
+                jobs[jobs.length - 1].count = (jobs[jobs.length - 1].count ?? 1) + 1
+                return
+            }
+
             const file = rootGetters['files/getFile']('gcodes/' + job.filename)
             if (!file?.metadataPulled)
                 Vue.$socket.emit('server.files.metadata', { filename: job.filename }, { action: 'files/getMetadata' })
-            job['metadata'] = file
+            job.metadata = file
+            job.count = 1
 
             jobs.push(job)
         })
diff --git a/src/store/server/jobQueue/types.ts b/src/store/server/jobQueue/types.ts
index 1b0072566..297f546e5 100644
--- a/src/store/server/jobQueue/types.ts
+++ b/src/store/server/jobQueue/types.ts
@@ -10,4 +10,5 @@ export interface ServerJobQueueStateJob {
     time_in_queue: number
     metadata?: any
     isFirst?: boolean
+    count?: number
 }

From 8cd2eb22b7163f70f7ac680719d15b6e9f4a5d1c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:25:26 +0100
Subject: [PATCH 06/25] refactor: thumbnail vue-load-image slots in status
 panel jobqueue

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

diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 4e8a76f91..fbc66e8f2 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -32,11 +32,12 @@
                                             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>
+                                        <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="getBigThumbnail(item)" width="250" /></span>

From 9f27494548df0d7a081bd936cf2fe2f415ba6055 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:25:58 +0100
Subject: [PATCH 07/25] refactor: thumbnail vue-load-image slots in status
 panel jobqueue

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

diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index fbc66e8f2..e37757506 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -46,11 +46,12 @@
                         <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>
+                                <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>

From 3e15e26c15b3595c4b5f68f8cbc389455d7e8a2f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:27:51 +0100
Subject: [PATCH 08/25] feat: display count of jobqueue on status panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/Status/Jobqueue.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index e37757506..729a5b622 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -64,7 +64,10 @@
                                 <v-icon>{{ mdiPlay }}</v-icon>
                             </v-btn>
                         </template>
-                        <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
+                        <div class="d-block text-truncate" :style="styleContentTdWidth">
+                            <strong v-if="item.count">{{ item.count }}x</strong>
+                            {{ item.filename }}
+                        </div>
                         <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
                     </td>
                 </tr>

From 5c3ece66a498e442666c622cec8a20c46075bb75 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:29:43 +0100
Subject: [PATCH 09/25] feat: display count of jobqueue on status panel

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

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 09c1cd14c..765bf9cc2 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -93,7 +93,10 @@
                             </template>
                         </td>
                         <td class=" ">
-                            <div class="d-block text-truncate" :style="styleContentTdWidth">{{ item.filename }}</div>
+                            <div class="d-block text-truncate" :style="styleContentTdWidth">
+                                <strong v-if="item.count">{{ item.count }}x</strong>
+                                {{ item.filename }}
+                            </div>
                             <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
                         </td>
                     </tr>

From a669db468ab22eaceea16b7e274a6e511b004a56 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 12:29:57 +0100
Subject: [PATCH 10/25] refactor: thumbnail vue-load-image slots in gcode
 jobqueuepanel

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

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 765bf9cc2..9aa066ac8 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -68,11 +68,12 @@
                                                 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>
+                                            <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="getBigThumbnail(item)" width="250" /></span>
@@ -81,11 +82,12 @@
                             <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>
+                                    <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>

From 0aa1e5e6dec49a6bbd27ab88b324e36eedc3f9a8 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 13:11:08 +0100
Subject: [PATCH 11/25] refactor: change count to a array of ids

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/JobqueuePanel.vue   |  7 +++++--
 src/components/panels/Status/Jobqueue.vue | 15 ++++++++++-----
 src/store/server/jobQueue/getters.ts      |  4 ++--
 src/store/server/jobQueue/types.ts        |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 9aa066ac8..55286e586 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -96,7 +96,7 @@
                         </td>
                         <td class=" ">
                             <div class="d-block text-truncate" :style="styleContentTdWidth">
-                                <strong v-if="item.count">{{ item.count }}x</strong>
+                                <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
                                 {{ item.filename }}
                             </div>
                             <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
@@ -184,7 +184,10 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
     }
 
     deleteJob(item: ServerJobQueueStateJob) {
-        this.$store.dispatch('server/jobQueue/deleteFromQueue', [item.job_id])
+        const ids = [...(item.combinedIds ?? [])]
+        ids.push(item.job_id)
+
+        this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
 
     startJobqueue() {
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 729a5b622..0552a2ba0 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -65,7 +65,7 @@
                             </v-btn>
                         </template>
                         <div class="d-block text-truncate" :style="styleContentTdWidth">
-                            <strong v-if="item.count">{{ item.count }}x</strong>
+                            <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
                             {{ item.filename }}
                         </div>
                         <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
@@ -147,9 +147,11 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         let printTime = 0
 
         this.jobsRest.forEach((item: ServerJobQueueStateJob) => {
-            if (item.metadata?.filament_total) filamentLength += item.metadata?.filament_total
-            if (item.metadata?.filament_weight_total) filamentWeight += item.metadata?.filament_weight_total
-            if (item.metadata?.estimated_time) printTime = item.metadata.estimated_time
+            const count = (item.combinedIds?.length ?? 0) + 1
+
+            if (item.metadata?.filament_total) filamentLength += item.metadata?.filament_total * count
+            if (item.metadata?.filament_weight_total) filamentWeight += item.metadata?.filament_weight_total * count
+            if (item.metadata?.estimated_time) printTime = item.metadata.estimated_time * count
         })
 
         let output = ''
@@ -255,7 +257,10 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
     }
 
     removeFromJobqueue(item: ServerJobQueueStateJob) {
-        this.$store.dispatch('server/jobQueue/deleteFromQueue', [item.job_id])
+        const ids = [...(item.combinedIds ?? [])]
+        ids.push(item.job_id)
+
+        this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
 
     mounted() {
diff --git a/src/store/server/jobQueue/getters.ts b/src/store/server/jobQueue/getters.ts
index 6508d599d..23c8d3487 100644
--- a/src/store/server/jobQueue/getters.ts
+++ b/src/store/server/jobQueue/getters.ts
@@ -12,7 +12,7 @@ export const getters: GetterTree<ServerJobQueueState, any> = {
             const job = { ...queuedJob }
 
             if (jobs.length && jobs[jobs.length - 1].filename === job.filename) {
-                jobs[jobs.length - 1].count = (jobs[jobs.length - 1].count ?? 1) + 1
+                jobs[jobs.length - 1].combinedIds?.push(job.job_id)
                 return
             }
 
@@ -20,7 +20,7 @@ export const getters: GetterTree<ServerJobQueueState, any> = {
             if (!file?.metadataPulled)
                 Vue.$socket.emit('server.files.metadata', { filename: job.filename }, { action: 'files/getMetadata' })
             job.metadata = file
-            job.count = 1
+            job.combinedIds = []
 
             jobs.push(job)
         })
diff --git a/src/store/server/jobQueue/types.ts b/src/store/server/jobQueue/types.ts
index 297f546e5..2d162b45d 100644
--- a/src/store/server/jobQueue/types.ts
+++ b/src/store/server/jobQueue/types.ts
@@ -10,5 +10,5 @@ export interface ServerJobQueueStateJob {
     time_in_queue: number
     metadata?: any
     isFirst?: boolean
-    count?: number
+    combinedIds?: string[]
 }

From c6f1727606c03b4763ddc8cc9f3167db1b731858 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 13:18:03 +0100
Subject: [PATCH 12/25] style: fix syntax

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

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 55286e586..2fa8cb59c 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -1,6 +1,10 @@
 <template>
     <div>
-        <panel ref="jobqueuePanel" :icon="mdiTrayFull" :title="$t('JobQueue.JobQueue')" card-class="jobqueue-panel">
+        <panel
+            ref="jobqueuePanel"
+            :icon="mdiTrayFull"
+            :title="$t('JobQueue.JobQueue').toString()"
+            card-class="jobqueue-panel">
             <template #buttons>
                 <v-btn
                     v-if="queueState === 'paused'"
@@ -243,7 +247,7 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
 }
 </script>
 
-<style>
+<style scoped>
 .jobqueue-panel {
     position: relative;
 }

From 0665bbcd3e77311e92d2449121a29041be014ff4 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 13:22:31 +0100
Subject: [PATCH 13/25] fix: addToQueue function

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

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 43365fff9..13ff34f74 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -1148,7 +1148,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
     }
 
     async addToQueue(item: FileStateGcodefile) {
-        let filename = [this.currentPath, this.dialogAddPatchToQueue.item.filename].join('/')
+        let filename = [this.currentPath, item.filename].join('/')
         if (filename.startsWith('/')) filename = filename.slice(1)
 
         await this.$store.dispatch('server/jobQueue/addToQueue', [filename])

From 2b0d1dbbb51d9d486e2594e4d5187c9336583520 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 13:23:27 +0100
Subject: [PATCH 14/25] fix: change color of addToQueue button in
 addPatchToQueue dialog

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

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 13ff34f74..9230082c4 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -526,7 +526,7 @@
                 <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn color="" text @click="dialogAddPatchToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
-                    <v-btn color="error" text @click="addPatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
+                    <v-btn color="primary" text @click="addPatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
                 </v-card-actions>
             </panel>
         </v-dialog>

From b48eb490044b395462b8ce61054631c78d112fcf Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 16:34:26 +0100
Subject: [PATCH 15/25] refactor: rework jobqueue entry and combine gcode and
 dashboard entry

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/JobqueuePanel.vue       | 131 +------------
 src/components/panels/Status/Jobqueue.vue     | 152 ++-------------
 .../panels/Status/JobqueueEntry.vue           | 179 ++++++++++++++++++
 src/components/panels/StatusPanel.vue         |   2 +-
 src/store/server/jobQueue/getters.ts          |   4 +
 5 files changed, 205 insertions(+), 263 deletions(-)
 create mode 100644 src/components/panels/Status/JobqueueEntry.vue

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index 2fa8cb59c..bec226f5e 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -52,103 +52,33 @@
                 </template>
 
                 <template #item="{ item }">
-                    <tr
-                        :key="item.job_id"
-                        v-longpress:600="(e) => showContextMenu(e, item)"
-                        class="file-list-cursor user-select-none"
-                        @contextmenu="showContextMenu($event, item)">
-                        <td class="pr-0 text-center" style="width: 32px">
-                            <template v-if="getSmallThumbnail(item) && getBigThumbnail(item)">
-                                <v-tooltip
-                                    v-if="!item.isDirectory && getSmallThumbnail(item) && getBigThumbnail(item)"
-                                    top
-                                    content-class="tooltip__content-opacity1">
-                                    <template #activator="{ on, attrs }">
-                                        <vue-load-image>
-                                            <img
-                                                slot="image"
-                                                :src="getSmallThumbnail(item)"
-                                                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="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" />
-                                    <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=" ">
-                            <div class="d-block text-truncate" :style="styleContentTdWidth">
-                                <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
-                                {{ item.filename }}
-                            </div>
-                            <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
-                        </td>
-                    </tr>
+                    <jobqueue-entry :key="item.job_id" :item="item" :content-td-width="contentTdWidth" />
                 </template>
             </v-data-table>
             <resize-observer @notify="handleResize" />
         </panel>
-        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
-            <v-list>
-                <v-list-item @click="deleteJob(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
-                    {{ $t('JobQueue.RemoveFromQueue') }}
-                </v-list-item>
-            </v-list>
-        </v-menu>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { formatFilesize, formatPrintTime } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiPlay, mdiPause, mdiFile, mdiPlaylistRemove, mdiTrayFull } from '@mdi/js'
+import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js'
+import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
 @Component({
-    components: { Panel },
+    components: { JobqueueEntry, Panel },
 })
 export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPause = mdiPause
-    mdiFile = mdiFile
-    mdiPlaylistRemove = mdiPlaylistRemove
     mdiTrayFull = mdiTrayFull
 
     formatFilesize = formatFilesize
 
     private contentTdWidth = 100
-    private contextMenu = {
-        shown: false,
-        touchTimer: undefined,
-        x: 0,
-        y: 0,
-        item: {},
-    }
 
     declare $refs: {
         jobqueuePanel: any
@@ -170,30 +100,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.jobqueue.countPerPage', value: newVal })
     }
 
-    get styleContentTdWidth() {
-        return `width: ${this.contentTdWidth}px;`
-    }
-
-    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
-            })
-        }
-    }
-
-    deleteJob(item: ServerJobQueueStateJob) {
-        const ids = [...(item.combinedIds ?? [])]
-        ids.push(item.job_id)
-
-        this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
-    }
-
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
@@ -202,35 +108,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
         this.$store.dispatch('server/jobQueue/pause')
     }
 
-    getSmallThumbnail(item: ServerJobQueueStateJob) {
-        return this.$store.getters['server/jobQueue/getSmallThumbnail'](item)
-    }
-
-    getBigThumbnail(item: ServerJobQueueStateJob) {
-        return this.$store.getters['server/jobQueue/getBigThumbnail'](item)
-    }
-
-    getDescription(item: ServerJobQueueStateJob) {
-        let output = ''
-
-        output += this.$t('Files.Filament') + ': '
-        if (item.metadata?.filament_total || item.metadata.filament_weight_total) {
-            if (item.metadata?.filament_total) output += item.metadata.filament_total.toFixed() + ' mm'
-            if (item.metadata?.filament_total && item.metadata.filament_weight_total) output += ' / '
-            if (item.metadata?.filament_weight_total) output += item.metadata.filament_weight_total.toFixed(2) + ' g'
-        } else output += '--'
-
-        output += ', ' + this.$t('Files.PrintTime') + ': '
-        if (item.metadata?.estimated_time) output += formatPrintTime(item.metadata.estimated_time)
-        else output += '--'
-
-        return output
-    }
-
-    existMetadata(item: ServerJobQueueStateJob) {
-        return item?.metadata?.metadataPulled
-    }
-
     mounted() {
         this.calcContentTdWidth()
     }
diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 0552a2ba0..8f01b5667 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -12,75 +12,17 @@
             </template>
 
             <template #item="{ item }">
-                <tr
-                    :key="item.job_id"
-                    v-longpress:600="(e) => showContextMenu(e, item)"
-                    class="cursor-pointer"
-                    @contextmenu="showContextMenu($event, item)">
-                    <td class="pr-0 text-center" style="width: 32px">
-                        <template v-if="getSmallThumbnail(item) && getBigThumbnail(item)">
-                            <v-tooltip
-                                v-if="!item.isDirectory && getSmallThumbnail(item) && getBigThumbnail(item)"
-                                top
-                                content-class="tooltip__content-opacity1">
-                                <template #activator="{ on, attrs }">
-                                    <vue-load-image>
-                                        <img
-                                            slot="image"
-                                            :src="getSmallThumbnail(item)"
-                                            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="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" />
-                                <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="pr-2">
-                        <template v-if="item.isFirst && !printerIsPrinting">
-                            <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
-                                <v-icon>{{ mdiPlay }}</v-icon>
-                            </v-btn>
-                        </template>
-                        <div class="d-block text-truncate" :style="styleContentTdWidth">
-                            <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
-                            {{ item.filename }}
-                        </div>
-                        <small v-if="existMetadata(item)">{{ getDescription(item) }}</small>
-                    </td>
-                </tr>
+                <jobqueue-entry :key="item.job_id" :item="item" :content-td-width="contentTdWidth" />
             </template>
-            <template v-if="jobs.length > jobsTable.length" #body.append>
+            <template v-if="jobsRest.length" #body.append>
                 <tr>
                     <td class="pr-0 text-center" style="width: 32px">
                         <v-icon>{{ mdiFileMultiple }}</v-icon>
                     </td>
                     <td class="pr-2">
                         {{
-                            $tc('Panels.StatusPanel.JobqueueMoreFiles', jobs.length - jobsTable.length, {
-                                count: jobs.length - jobsTable.length,
+                            $tc('Panels.StatusPanel.JobqueueMoreFiles', restJobsLength, {
+                                count: restJobsLength,
                             })
                         }}
                         <br />
@@ -90,14 +32,6 @@
             </template>
         </v-data-table>
         <resize-observer @notify="handleResize" />
-        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
-            <v-list>
-                <v-list-item @click="removeFromJobqueue(contextMenu.item)">
-                    <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
-                    {{ $t('JobQueue.RemoveFromQueue') }}
-                </v-list-item>
-            </v-list>
-        </v-menu>
     </v-card>
 </template>
 
@@ -106,24 +40,15 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
-import { mdiFile, mdiPlay, mdiFileMultiple, mdiPlaylistRemove } from '@mdi/js'
+import { mdiFileMultiple } from '@mdi/js'
+import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
 @Component({
-    components: {},
+    components: { JobqueueEntry },
 })
 export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
-    mdiFile = mdiFile
-    mdiPlay = mdiPlay
     mdiFileMultiple = mdiFileMultiple
-    mdiPlaylistRemove = mdiPlaylistRemove
 
     private contentTdWidth = 100
-    private contextMenu = {
-        shown: false,
-        touchTimer: undefined,
-        x: 0,
-        y: 0,
-        item: {},
-    }
 
     declare $refs: {
         filesJobqueue: any
@@ -141,6 +66,16 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         return this.jobs.slice(5)
     }
 
+    get restJobsLength() {
+        let count = 0
+
+        this.jobsRest.forEach((item: ServerJobQueueStateJob) => {
+            count += (item.combinedIds?.length ?? 0) + 1
+        })
+
+        return count
+    }
+
     get descriptionRestJobs() {
         let filamentLength = 0
         let filamentWeight = 0
@@ -170,39 +105,6 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         return output
     }
 
-    get styleContentTdWidth() {
-        return `width: ${this.contentTdWidth}px;`
-    }
-
-    getSmallThumbnail(item: ServerJobQueueStateJob) {
-        return this.$store.getters['server/jobQueue/getSmallThumbnail'](item)
-    }
-
-    getBigThumbnail(item: ServerJobQueueStateJob) {
-        return this.$store.getters['server/jobQueue/getBigThumbnail'](item)
-    }
-
-    getDescription(item: ServerJobQueueStateJob) {
-        let output = ''
-
-        output += this.$t('Panels.StatusPanel.Filament') + ': '
-        if (item.metadata?.filament_total || item.metadata.filament_weight_total) {
-            if (item.metadata?.filament_total) output += item.metadata.filament_total.toFixed() + ' mm'
-            if (item.metadata?.filament_total && item.metadata.filament_weight_total) output += ' / '
-            if (item.metadata?.filament_weight_total) output += item.metadata.filament_weight_total.toFixed(2) + ' g'
-        } else output += '--'
-
-        output += ', ' + this.$t('Panels.StatusPanel.PrintTime') + ': '
-        if (item.metadata?.estimated_time) output += this.formatPrintTime(item.metadata.estimated_time)
-        else output += '--'
-
-        return output
-    }
-
-    existMetadata(item: ServerJobQueueStateJob) {
-        return item?.metadata?.metadataPulled
-    }
-
     setFirst(currItems: ServerJobQueueStateJob[]) {
         // first check that actually exists values
         if (currItems.length) {
@@ -239,30 +141,10 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         return '--'
     }
 
-    showContextMenu(e: any, item: ServerJobQueueStateJob) {
-        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
-            })
-        }
-    }
-
     startJobqueue() {
         this.$store.dispatch('server/jobQueue/start')
     }
 
-    removeFromJobqueue(item: ServerJobQueueStateJob) {
-        const ids = [...(item.combinedIds ?? [])]
-        ids.push(item.job_id)
-
-        this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
-    }
-
     mounted() {
         setTimeout(() => {
             this.calcContentTdWidth()
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
new file mode 100644
index 000000000..4ca7993af
--- /dev/null
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -0,0 +1,179 @@
+<template>
+    <tr
+        v-longpress:600="(e) => showContextMenu(e, item)"
+        class="cursor-pointer"
+        @contextmenu="showContextMenu($event, item)">
+        <td class="pr-0 text-center" style="width: 32px">
+            <template v-if="smallThumbnail && bigThumbnail">
+                <v-tooltip v-if="smallThumbnail && bigThumbnail" top content-class="tooltip__content-opacity1">
+                    <template #activator="{ on, attrs }">
+                        <vue-load-image>
+                            <img slot="image" :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>
+                </v-tooltip>
+            </template>
+            <template v-else-if="smallThumbnail">
+                <vue-load-image>
+                    <img slot="image" :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="pr-2">
+            <template v-if="item.isFirst && !printerIsPrinting">
+                <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
+                    <v-icon>{{ mdiPlay }}</v-icon>
+                </v-btn>
+            </template>
+            <div class="d-block text-truncate" :style="styleContentTdWidth">
+                <strong v-if="item.combinedIds.length">{{ item.combinedIds.length + 1 }}x</strong>
+                {{ item.filename }}
+            </div>
+            <small v-if="item?.metadata?.metadataPulled">{{ description }}</small>
+        </td>
+        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
+            <v-list>
+                <v-list-item @click="removeFromJobqueue(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
+                    {{ $t('JobQueue.RemoveFromQueue') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
+    </tr>
+</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'
+import { mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
+@Component({
+    components: {},
+})
+export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
+    mdiFile = mdiFile
+    mdiPlay = mdiPlay
+    mdiPlaylistRemove = mdiPlaylistRemove
+
+    @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
+    @Prop({ type: Number, required: true }) declare contentTdWidth: number
+    private contextMenu: {
+        shown: boolean
+        x: number
+        y: number
+        item: ServerJobQueueStateJob | any
+    } = {
+        shown: false,
+        x: 0,
+        y: 0,
+        item: {},
+    }
+
+    declare $refs: {
+        filesJobqueue: any
+    }
+
+    get styleContentTdWidth() {
+        return `width: ${this.contentTdWidth}px;`
+    }
+
+    get smallThumbnail() {
+        return this.$store.getters['server/jobQueue/getSmallThumbnail'](this.item)
+    }
+
+    get bigThumbnail() {
+        return this.$store.getters['server/jobQueue/getBigThumbnail'](this.item)
+    }
+
+    get description() {
+        let output = ''
+
+        output += this.$t('Panels.StatusPanel.Filament') + ': '
+        if (this.item.metadata?.filament_total || this.item.metadata.filament_weight_total) {
+            if (this.item.metadata?.filament_total) output += this.item.metadata.filament_total.toFixed() + ' mm'
+            if (this.item.metadata?.filament_total && this.item.metadata.filament_weight_total) output += ' / '
+            if (this.item.metadata?.filament_weight_total)
+                output += this.item.metadata.filament_weight_total.toFixed(2) + ' g'
+        } else output += '--'
+
+        output += ', ' + this.$t('Panels.StatusPanel.PrintTime') + ': '
+        if (this.item.metadata?.estimated_time) output += this.formatPrintTime(this.item.metadata.estimated_time)
+        else output += '--'
+
+        return output
+    }
+
+    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 '--'
+    }
+
+    showContextMenu(e: any, item: ServerJobQueueStateJob) {
+        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
+            })
+        }
+    }
+
+    startJobqueue() {
+        this.$store.dispatch('server/jobQueue/start')
+    }
+
+    removeFromJobqueue(item: ServerJobQueueStateJob) {
+        const ids = [...(item.combinedIds ?? [])]
+        ids.push(item.job_id)
+
+        this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.filesJobqueue {
+    position: relative;
+}
+</style>
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 4303996fc..f80c524f8 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -133,7 +133,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     }
 
     get jobsCount() {
-        return this.jobs?.length ?? 0
+        return this.$store.getters['server/jobQueue/getJobsCount'] ?? 0
     }
 
     get current_filename() {
diff --git a/src/store/server/jobQueue/getters.ts b/src/store/server/jobQueue/getters.ts
index 23c8d3487..3bd0b1c86 100644
--- a/src/store/server/jobQueue/getters.ts
+++ b/src/store/server/jobQueue/getters.ts
@@ -28,6 +28,10 @@ export const getters: GetterTree<ServerJobQueueState, any> = {
         return jobs
     },
 
+    getJobsCount: (state) => {
+        return state.queued_jobs.length
+    },
+
     getSmallThumbnail: (state, getters, rootState, rootGetters) => (item: ServerJobQueueStateJob) => {
         if (item?.metadata?.thumbnails?.length) {
             const thumbnail = item?.metadata?.thumbnails.find(

From f2add5cfe0d8ca115c8e6b4261349c15cc0553a3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 17:26:11 +0100
Subject: [PATCH 16/25] feat: add option to change count of job queue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue     |  4 +-
 .../panels/Status/JobqueueEntry.vue           | 66 ++++++++++++++++++-
 src/locales/en.json                           |  5 ++
 src/store/server/jobQueue/actions.ts          | 27 +++++++-
 4 files changed, 98 insertions(+), 4 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 9230082c4..45ba2213d 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -718,8 +718,8 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         (value: string) => !this.existsFilename(value) || this.$t('Files.InvalidNameAlreadyExists'),
     ]
     private countInputRules = [
-        (value: string) => !!value || this.$t('Files.InvalidNameEmpty'),
-        (value: string) => !this.existsFilename(value) || this.$t('Files.InvalidNameAlreadyExists'),
+        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
     ]
 
     existsFilename(name: string) {
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 4ca7993af..03eeac382 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -49,12 +49,44 @@
         </td>
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
+                <v-list-item @click="openChangeCountDialog(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiCounter }}</v-icon>
+                    {{ $t('JobQueue.ChangeCount') }}
+                </v-list-item>
                 <v-list-item @click="removeFromJobqueue(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistRemove }}</v-icon>
                     {{ $t('JobQueue.RemoveFromQueue') }}
                 </v-list-item>
             </v-list>
         </v-menu>
+        <v-dialog v-model="dialogChangeCount.show" max-width="400">
+            <panel
+                :title="$t('JobQueue.ChangeCount').toString()"
+                :icon="mdiCounter"
+                card-class="jobqueue-change-count-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="dialogChangeCount.show = false">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+
+                <v-card-text>
+                    <v-text-field
+                        ref="inputFieldAddToQueueCount"
+                        v-model="dialogChangeCount.count"
+                        :label="$t('JobQueue.Count')"
+                        required
+                        :rules="countInputRules"
+                        @keyup.enter="changeCountAction" />
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn color="" text @click="dialogChangeCount.show = false">{{ $t('JobQueue.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="changeCountAction">{{ $t('JobQueue.ChangeCount') }}</v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
     </tr>
 </template>
 
@@ -63,11 +95,14 @@ 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'
-import { mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
+import { mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
+import { FileStateGcodefile } from '@/store/files/types'
 @Component({
     components: {},
 })
 export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiCounter = mdiCounter
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiPlaylistRemove = mdiPlaylistRemove
@@ -86,6 +121,21 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         item: {},
     }
 
+    private dialogChangeCount: {
+        show: boolean
+        count: number
+        item: ServerJobQueueStateJob | any
+    } = {
+        show: false,
+        count: 1,
+        item: {},
+    }
+
+    private countInputRules = [
+        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
+    ]
+
     declare $refs: {
         filesJobqueue: any
     }
@@ -169,6 +219,20 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 
         this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
+
+    openChangeCountDialog(item: FileStateGcodefile) {
+        this.dialogChangeCount.show = true
+        this.dialogChangeCount.count = 1
+        this.dialogChangeCount.item = item
+    }
+
+    changeCountAction() {
+        this.$store.dispatch('server/jobQueue/changeCount', {
+            job_id: this.dialogChangeCount.item.job_id,
+            count: this.dialogChangeCount.count,
+        })
+        this.dialogChangeCount.show = false
+    }
 }
 </script>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index f81679529..69434c4d7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -371,7 +371,12 @@
     },
     "JobQueue": {
         "AllJobs": "All Jobs",
+        "ChangeCount": "Change count",
+        "Cancel": "Cancel",
+        "Count": "Count",
         "Empty": "Empty",
+        "InvalidCountEmpty": "Input must not be empty!",
+        "InvalidCountGreaterZero": "Input must be greater than 0!",
         "JobQueue": "Job Queue",
         "Jobs": "Jobs",
         "Pause": "Pause",
diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts
index 5902c8490..705eb09c8 100644
--- a/src/store/server/jobQueue/actions.ts
+++ b/src/store/server/jobQueue/actions.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import { RootState } from '@/store/types'
-import { ServerJobQueueState } from '@/store/server/jobQueue/types'
+import { ServerJobQueueState, ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
 
 export const actions: ActionTree<ServerJobQueueState, RootState> = {
     reset({ commit }) {
@@ -28,6 +28,31 @@ export const actions: ActionTree<ServerJobQueueState, RootState> = {
         Vue.$socket.emit('server.job_queue.post_job', { filenames: filenames })
     },
 
+    changeCount({ getters }, payload: { job_id: string; count: number }) {
+        const filenames: string[] = []
+        const jobs = getters['getJobs']
+
+        jobs.forEach((job: ServerJobQueueStateJob) => {
+            if (job.job_id === payload.job_id) {
+                for (let i = 0; i < payload.count; i++) {
+                    filenames.push(job.filename)
+                }
+
+                return
+            }
+
+            const count = (job.combinedIds?.length ?? 0) + 1
+            for (let i = 0; i < count; i++) {
+                filenames.push(job.filename)
+            }
+        })
+
+        Vue.$socket.emit('server.job_queue.post_job', {
+            filenames,
+            reset: true,
+        })
+    },
+
     deleteFromQueue(_, job_ids: string[]) {
         Vue.$socket.emit('server.job_queue.delete_job', { job_ids })
     },

From be206b5e5c92a231e146d2a65bc9a5144ccd2697 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 20:39:53 +0100
Subject: [PATCH 17/25] fix: fix typo addBatch

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue | 36 +++++++++++------------
 src/locales/en.json                       |  2 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 45ba2213d..9dab7e19e 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -327,9 +327,9 @@
                 <v-list-item
                     v-if="!contextMenu.item.isDirectory && moonrakerComponents.includes('job_queue')"
                     :disabled="!isGcodeFile(contextMenu.item)"
-                    @click="openAddPatchToQueueDialog(contextMenu.item)">
+                    @click="openAddBatchToQueueDialog(contextMenu.item)">
                     <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
-                    {{ $t('Files.AddPatchToQueue') }}
+                    {{ $t('Files.AddBatchToQueue') }}
                 </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.preheat_gcode !== null"
@@ -503,13 +503,13 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
-        <v-dialog v-model="dialogAddPatchToQueue.show" max-width="400">
+        <v-dialog v-model="dialogAddBatchToQueue.show" max-width="400">
             <panel
                 :title="$t('Files.AddToQueue').toString()"
                 card-class="gcode-files-add-to-queue-dialog"
                 :margin-bottom="false">
                 <template #buttons>
-                    <v-btn icon tile @click="dialogAddPatchToQueue.show = false">
+                    <v-btn icon tile @click="dialogAddBatchToQueue.show = false">
                         <v-icon>{{ mdiCloseThick }}</v-icon>
                     </v-btn>
                 </template>
@@ -517,16 +517,16 @@
                 <v-card-text>
                     <v-text-field
                         ref="inputFieldAddToQueueCount"
-                        v-model="dialogAddPatchToQueue.count"
+                        v-model="dialogAddBatchToQueue.count"
                         :label="$t('Files.Count')"
                         required
                         :rules="countInputRules"
-                        @keyup.enter="addPatchToQueueAction"></v-text-field>
+                        @keyup.enter="addBatchToQueueAction"></v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialogAddPatchToQueue.show = false">{{ $t('Files.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="addPatchToQueueAction">{{ $t('Files.AddToQueue') }}</v-btn>
+                    <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>
@@ -586,7 +586,7 @@ interface dialogPrintFile {
     item: FileStateGcodefile
 }
 
-interface dialogAddPatchToQueue {
+interface dialogAddBatchToQueue {
     show: boolean
     count: number
     item: FileStateGcodefile
@@ -686,7 +686,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         item: { ...this.contextMenu.item },
     }
 
-    private dialogAddPatchToQueue: dialogAddPatchToQueue = {
+    private dialogAddBatchToQueue: dialogAddBatchToQueue = {
         show: false,
         count: 1,
         item: { ...this.contextMenu.item },
@@ -1154,24 +1154,24 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         await this.$store.dispatch('server/jobQueue/addToQueue', [filename])
     }
 
-    openAddPatchToQueueDialog(item: FileStateGcodefile) {
-        this.dialogAddPatchToQueue.show = true
-        this.dialogAddPatchToQueue.count = 1
-        this.dialogAddPatchToQueue.item = item
+    openAddBatchToQueueDialog(item: FileStateGcodefile) {
+        this.dialogAddBatchToQueue.show = true
+        this.dialogAddBatchToQueue.count = 1
+        this.dialogAddBatchToQueue.item = item
     }
 
-    async addPatchToQueueAction() {
-        let filename = [this.currentPath, this.dialogAddPatchToQueue.item.filename].join('/')
+    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.dialogAddPatchToQueue.count; i++) {
+        for (let i = 0; i < this.dialogAddBatchToQueue.count; i++) {
             array.push(filename)
         }
 
         await this.$store.dispatch('server/jobQueue/addToQueue', array)
 
-        this.dialogAddPatchToQueue.show = false
+        this.dialogAddBatchToQueue.show = false
     }
 
     changeMetadataVisible(name: string, value: boolean) {
diff --git a/src/locales/en.json b/src/locales/en.json
index 69434c4d7..6d25b23bb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -164,7 +164,7 @@
         "Yes": "Yes"
     },
     "Files": {
-        "AddPatchToQueue": "Add patch to Queue",
+        "AddBatchToQueue": "Add batch to Queue",
         "AddToQueue": "Add to Queue",
         "AllFiles": "All",
         "BedTemp": "Bed Temp.",

From 9fdd3869f3b48d9f9b07d544b45ca888bd27831a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 20:40:36 +0100
Subject: [PATCH 18/25] refactor: change type of item in openChangeCountDialog
 function

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

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 03eeac382..b9be2268d 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -220,7 +220,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         this.$store.dispatch('server/jobQueue/deleteFromQueue', ids)
     }
 
-    openChangeCountDialog(item: FileStateGcodefile) {
+    openChangeCountDialog(item: ServerJobQueueStateJob) {
         this.dialogChangeCount.show = true
         this.dialogChangeCount.count = 1
         this.dialogChangeCount.item = item

From 9d1b99d006c68c58b9ec3d763a367c77d42e6b26 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 20:40:54 +0100
Subject: [PATCH 19/25] refactor: use current count as default for
 changeCountDialog

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

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index b9be2268d..3094ae56c 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -222,7 +222,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 
     openChangeCountDialog(item: ServerJobQueueStateJob) {
         this.dialogChangeCount.show = true
-        this.dialogChangeCount.count = 1
+        this.dialogChangeCount.count = (item.combinedIds?.length ?? 0) + 1
         this.dialogChangeCount.item = item
     }
 

From d43d0bc6c1c8e429060e84cbaa6385370e3b2818 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 21:02:28 +0100
Subject: [PATCH 20/25] refactor: input field in changeCountDialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Status/JobqueueEntry.vue           | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index 3094ae56c..c06f9577b 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -78,7 +78,25 @@
                         :label="$t('JobQueue.Count')"
                         required
                         :rules="countInputRules"
-                        @keyup.enter="changeCountAction" />
+                        @keypress="isNumber($event)"
+                        @keyup.enter="changeCountAction">
+                        <template #append-outer>
+                            <div class="_spin_button_group">
+                                <v-btn class="mt-n3" icon plain small @click="dialogChangeCount.count++">
+                                    <v-icon>{{ mdiChevronUp }}</v-icon>
+                                </v-btn>
+                                <v-btn
+                                    :disabled="dialogChangeCount.count <= 1"
+                                    class="mb-n3"
+                                    icon
+                                    plain
+                                    small
+                                    @click="dialogChangeCount.count--">
+                                    <v-icon>{{ mdiChevronDown }}</v-icon>
+                                </v-btn>
+                            </div>
+                        </template>
+                    </v-text-field>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer />
@@ -95,12 +113,14 @@ 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'
-import { mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
-import { FileStateGcodefile } from '@/store/files/types'
+import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
+import NumberInput from '@/components/inputs/NumberInput.vue'
 @Component({
-    components: {},
+    components: { NumberInput },
 })
 export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
+    mdiChevronDown = mdiChevronDown
+    mdiChevronUp = mdiChevronUp
     mdiCloseThick = mdiCloseThick
     mdiCounter = mdiCounter
     mdiFile = mdiFile
@@ -233,6 +253,16 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         })
         this.dialogChangeCount.show = false
     }
+
+    isNumber(evt: KeyboardEvent) {
+        const charCode = evt.which ? evt.which : evt.keyCode
+        if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 46) {
+            evt.preventDefault()
+            return
+        }
+
+        return true
+    }
 }
 </script>
 
@@ -240,4 +270,10 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 .filesJobqueue {
     position: relative;
 }
+._spin_button_group {
+    width: 24px;
+    margin-top: -6px;
+    margin-left: -6px;
+    margin-bottom: -6px;
+}
 </style>

From bcf4f63c639d72184f1217b2a33523878134ce65 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 21:13:31 +0100
Subject: [PATCH 21/25] refactor: remove unused imports

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/JobqueuePanel.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
index bec226f5e..b7391e121 100644
--- a/src/components/panels/JobqueuePanel.vue
+++ b/src/components/panels/JobqueuePanel.vue
@@ -63,9 +63,7 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { formatFilesize, formatPrintTime } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
-import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
 import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js'
 import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue'
 @Component({
@@ -76,8 +74,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) {
     mdiPause = mdiPause
     mdiTrayFull = mdiTrayFull
 
-    formatFilesize = formatFilesize
-
     private contentTdWidth = 100
 
     declare $refs: {

From 9a82203675960c9a4aa0027c1fcfcc68fcdab3ea Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 21:31:48 +0100
Subject: [PATCH 22/25] refactor: use input type=number instead of js only
 number filter

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

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index c06f9577b..f8ee0afd8 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -78,7 +78,8 @@
                         :label="$t('JobQueue.Count')"
                         required
                         :rules="countInputRules"
-                        @keypress="isNumber($event)"
+                        hide-spin-buttons
+                        type="number"
                         @keyup.enter="changeCountAction">
                         <template #append-outer>
                             <div class="_spin_button_group">
@@ -253,16 +254,6 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         })
         this.dialogChangeCount.show = false
     }
-
-    isNumber(evt: KeyboardEvent) {
-        const charCode = evt.which ? evt.which : evt.keyCode
-        if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 46) {
-            evt.preventDefault()
-            return
-        }
-
-        return true
-    }
 }
 </script>
 

From 391317af63121cb6196908fef2fef8b34e6df83b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 21:36:51 +0100
Subject: [PATCH 23/25] refactor: change to input number with spin buttons in
 add to batch count input

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue | 34 ++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 9dab7e19e..4eb00f87f 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -520,8 +520,27 @@
                         v-model="dialogAddBatchToQueue.count"
                         :label="$t('Files.Count')"
                         required
+                        hide-spin-buttons
+                        type="number"
                         :rules="countInputRules"
-                        @keyup.enter="addBatchToQueueAction"></v-text-field>
+                        @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>
@@ -543,6 +562,8 @@ import Panel from '@/components/ui/Panel.vue'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import draggable from 'vuedraggable'
 import {
+    mdiChevronDown,
+    mdiChevronUp,
     mdiDragVertical,
     mdiCheckboxBlankOutline,
     mdiCheckboxMarked,
@@ -612,6 +633,8 @@ interface tableColumnSetting {
     components: { StartPrintDialog, Panel, SettingsRow, draggable },
 })
 export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
+    mdiChevronDown = mdiChevronDown
+    mdiChevronUp = mdiChevronUp
     mdiFile = mdiFile
     mdiFileDocumentMultipleOutline = mdiFileDocumentMultipleOutline
     mdiMagnify = mdiMagnify
@@ -1406,6 +1429,15 @@ 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 {

From a0cc044bc9315143af751414e653b21a6427a51d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 21:48:07 +0100
Subject: [PATCH 24/25] feat: add addBatchToQueue to dashboard gcodefiles

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/GcodefilesPanel.vue   |   1 +
 src/components/panels/Status/Gcodefiles.vue | 104 +++++++++++++++++++-
 2 files changed, 104 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
index 4eb00f87f..aae54289a 100644
--- a/src/components/panels/GcodefilesPanel.vue
+++ b/src/components/panels/GcodefilesPanel.vue
@@ -507,6 +507,7 @@
             <panel
                 :title="$t('Files.AddToQueue').toString()"
                 card-class="gcode-files-add-to-queue-dialog"
+                :icon="mdiPlaylistPlus"
                 :margin-bottom="false">
                 <template #buttons>
                     <v-btn icon tile @click="dialogAddBatchToQueue.show = false">
diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
index 540c9f7db..982366dea 100644
--- a/src/components/panels/Status/Gcodefiles.vue
+++ b/src/components/panels/Status/Gcodefiles.vue
@@ -83,6 +83,12 @@
                     <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
                     {{ $t('Files.AddToQueue') }}
                 </v-list-item>
+                <v-list-item
+                    v-if="moonrakerComponents.includes('job_queue')"
+                    @click="openAddBatchToQueueDialog(contextMenu.item)">
+                    <v-icon class="mr-1">{{ mdiPlaylistPlus }}</v-icon>
+                    {{ $t('Files.AddBatchToQueue') }}
+                </v-list-item>
                 <v-list-item
                     v-if="contextMenu.item.preheat_gcode !== null"
                     :disabled="['error', 'printing', 'paused'].includes(printer_state)"
@@ -137,6 +143,53 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <v-dialog v-model="dialogAddBatchToQueue.show" max-width="400">
+            <panel
+                :title="$t('Files.AddToQueue').toString()"
+                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>
     </v-card>
 </template>
 
@@ -148,6 +201,8 @@ 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,
@@ -166,12 +221,20 @@ interface dialogRenameObject {
     item: FileStateGcodefile
 }
 
+interface dialogAddBatchToQueue {
+    show: boolean
+    count: number
+    item: FileStateGcodefile
+}
+
 @Component({
     components: {
         StartPrintDialog,
     },
 })
 export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixin) {
+    mdiChevronDown = mdiChevronDown
+    mdiChevronUp = mdiChevronUp
     mdiFile = mdiFile
     mdiPlay = mdiPlay
     mdiPlaylistPlus = mdiPlaylistPlus
@@ -199,6 +262,7 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         last_status: null,
         last_start_time: null,
         last_total_duration: null,
+        preheat_gcode: null,
     }
     private currentPath = ''
     private contentTdWidth = 100
@@ -222,6 +286,17 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         item: { ...this.dialogFile },
     }
 
+    private dialogAddBatchToQueue: dialogAddBatchToQueue = {
+        show: false,
+        count: 1,
+        item: { ...this.contextMenu.item },
+    }
+
+    private countInputRules = [
+        (value: string) => !!value || this.$t('JobQueue.InvalidCountEmpty'),
+        (value: string) => parseInt(value) > 0 || this.$t('JobQueue.InvalidCountGreaterZero'),
+    ]
+
     get gcodeFiles() {
         let gcodes = this.$store.getters['files/getAllGcodes'] ?? []
         gcodes = gcodes
@@ -343,6 +418,26 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         this.$store.dispatch('server/jobQueue/addToQueue', [item.filename])
     }
 
+    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('/')
+        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
+    }
+
     view3D(item: FileStateGcodefile) {
         this.$router.push({ path: '/viewer', query: { filename: 'gcodes/' + item.filename } })
     }
@@ -419,8 +514,15 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .filesGcodeCard {
     position: relative;
 }
+
+._spin_button_group {
+    width: 24px;
+    margin-top: -6px;
+    margin-left: -6px;
+    margin-bottom: -6px;
+}
 </style>

From 17c4a8a2f986e14865c009649b51a20394a4a695 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 11 Feb 2023 22:24:07 +0100
Subject: [PATCH 25/25] fix: isFirst in jobqueue data-table

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/Status/Jobqueue.vue     | 21 +++++++------------
 .../panels/Status/JobqueueEntry.vue           |  3 ++-
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue
index 8f01b5667..9c7e92c1d 100644
--- a/src/components/panels/Status/Jobqueue.vue
+++ b/src/components/panels/Status/Jobqueue.vue
@@ -5,14 +5,17 @@
             hide-default-footer
             class="dashboard-jobqueue-table"
             sort-by="time_added"
-            mobile-breakpoint="0"
-            @current-items="setFirst">
+            mobile-breakpoint="0">
             <template #no-data>
                 <div class="text-center">{{ $t('Panels.StatusPanel.EmptyJobqueue') }}</div>
             </template>
 
-            <template #item="{ item }">
-                <jobqueue-entry :key="item.job_id" :item="item" :content-td-width="contentTdWidth" />
+            <template #item="{ item, index }">
+                <jobqueue-entry
+                    :key="item.job_id"
+                    :item="item"
+                    :isFirst="index === 0"
+                    :content-td-width="contentTdWidth" />
             </template>
             <template v-if="jobsRest.length" #body.append>
                 <tr>
@@ -105,16 +108,6 @@ export default class StatusPanelJobqueue extends Mixins(BaseMixin) {
         return output
     }
 
-    setFirst(currItems: ServerJobQueueStateJob[]) {
-        // first check that actually exists values
-        if (currItems.length) {
-            // toggle all to false
-            currItems.forEach((x: ServerJobQueueStateJob) => (x.isFirst = false))
-            // just set first to true
-            currItems[0].isFirst = true
-        }
-    }
-
     formatPrintTime(totalSeconds: number) {
         if (totalSeconds) {
             let output = ''
diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
index f8ee0afd8..4ba7e0ac8 100644
--- a/src/components/panels/Status/JobqueueEntry.vue
+++ b/src/components/panels/Status/JobqueueEntry.vue
@@ -36,7 +36,7 @@
             </template>
         </td>
         <td class="pr-2">
-            <template v-if="item.isFirst && !printerIsPrinting">
+            <template v-if="isFirst && !printerIsPrinting">
                 <v-btn icon color="success" class="float-right minwidth-0 mt-1" @click="startJobqueue">
                     <v-icon>{{ mdiPlay }}</v-icon>
                 </v-btn>
@@ -130,6 +130,7 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
 
     @Prop({ type: Object, required: true }) declare item: ServerJobQueueStateJob
     @Prop({ type: Number, required: true }) declare contentTdWidth: number
+    @Prop({ type: Boolean, default: false }) declare isFirst: boolean
     private contextMenu: {
         shown: boolean
         x: number