feat: add moonraker job queue (#433)

* feat: add moonraker job_queue module and create store module Signed-off-by: Stefan Dej <[email protected]> * feat: add jobqueue panel in gcode files Signed-off-by: Stefan Dej <[email protected]> * fix: remove workaround (pause queue at adding the first element) this function was added in mooonraker Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Nov 27, 2021 · f608112 · f608112
1 parent 47dd6ad
commit f608112
Show file tree

Hide file tree

Showing 12 changed files with 1,433 additions and 1,105 deletions.
diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue
@@ -0,0 +1,173 @@
+<template>
+    <div>
+        <panel
+            icon="mdi-tray-full"
+            :title="$t('JobQueue.JobQueue')"
+            card-class="jobqueue-panel"
+        >
+            <template v-slot:buttons>
+                <v-btn
+                    color="success"
+                    @click="resumeJobqueue"
+                    :loading="loadings.includes('resumeJobqueue')"
+                    icon
+                    tile
+                    v-if="queueState === 'paused'"
+                >
+                    <v-tooltip top>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-icon v-bind="attrs" v-on="on">mdi-play</v-icon>
+                        </template>
+                        <span>{{ $t('JobQueue.Resume') }}</span>
+                    </v-tooltip>
+                </v-btn>
+                <v-btn
+                    color="warning"
+                    @click="pauseJobqueue"
+                    :loading="loadings.includes('pauseJobqueue')"
+                    icon
+                    tile
+                    v-if="['ready', 'loading'].includes(queueState)"
+                >
+                    <v-tooltip top>
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-icon v-bind="attrs" v-on="on">mdi-pause</v-icon>
+                        </template>
+                        <span>{{ $t('JobQueue.Pause') }}</span>
+                    </v-tooltip>
+                </v-btn>
+            </template>
+            <v-data-table
+                :items="jobs"
+                class="jobqueue-table"
+                sort-by="time_added"
+                :items-per-page.sync="countPerPage"
+                :footer-props="{
+                    itemsPerPageText: $t('JobQueue.Jobs'),
+                    itemsPerPageAllText: $t('JobQueue.AllJobs'),
+                    itemsPerPageOptions: [10,25,50,100,-1]
+                }"
+                mobile-breakpoint="0">
+
+                <template #no-data>
+                    <div class="text-center">{{ $t('JobQueue.Empty') }}</div>
+                </template>
+
+                <template #item="{ index, item }">
+                    <tr
+                        :key="item.job_id"
+                        v-longpress:600="(e) => showContextMenu(e, item)"
+                        @contextmenu="showContextMenu($event, item)"
+                        class="file-list-cursor user-select-none"
+                    >
+                        <td class="pr-0 text-center" style="width: 32px;">
+                            <v-icon>mdi-file</v-icon>
+                        </td>
+                        <td class=" ">{{ item.filename }}</td>
+                    </tr>
+                </template>
+            </v-data-table>
+        </panel>
+        <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
+            <v-list>
+                <v-list-item @click="deleteJob(contextMenu.item)">
+                    <v-icon class="mr-1">mdi-delete</v-icon> {{ $t('JobQueue.Delete') }}
+                </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} from '@/plugins/helpers'
+import Panel from '@/components/ui/Panel.vue'
+import {ServerJobQueueStateJob} from '@/store/server/jobQueue/types'
+@Component({
+    components: {Panel}
+})
+export default class JobqueuePanel extends Mixins(BaseMixin) {
+    formatFilesize = formatFilesize
+
+    private contextMenu = {
+        shown: false,
+        touchTimer: undefined,
+        x: 0,
+        y: 0,
+        item: {}
+    }
+
+    get jobs() {
+        return this.$store.state.server.jobQueue.queued_jobs ?? []
+    }
+
+    get queueState() {
+        return this.$store.state.server.jobQueue.queue_state ?? ''
+    }
+
+    get countPerPage() {
+        return this.$store.state.gui.jobqueue.countPerPage
+    }
+
+    set countPerPage(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'jobqueue.countPerPage', value: newVal })
+    }
+
+    refreshHistory() {
+        this.$socket.emit('server.history.list', { start: 0, limit: 50 }, { action: 'server/history/getHistory' })
+    }
+
+    formatPrintTime(totalSeconds: number) {
+        if (totalSeconds) {
+            let output = ''
+
+            const days = Math.floor(totalSeconds / (3600 * 24))
+            if (days) {
+                totalSeconds %= (3600 * 24)
+                output += days+'d'
+            }
+
+            const hours = Math.floor(totalSeconds / 3600)
+            totalSeconds %= 3600
+            if (hours) output += ' '+hours+'h'
+
+            const minutes = Math.floor(totalSeconds / 60)
+            if (minutes) output += ' '+minutes+'m'
+
+            const seconds = totalSeconds % 60
+            if (seconds) output += ' '+seconds.toFixed(0)+'s'
+
+            return output
+        }
+
+        return '--'
+    }
+    
+    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) {
+        this.$store.dispatch('server/jobQueue/deleteFromQueue', [item.job_id])
+    }
+
+    resumeJobqueue() {
+        this.$store.dispatch('server/jobQueue/resume')
+    }
+
+    pauseJobqueue() {
+        this.$store.dispatch('server/jobQueue/pause')
+    }
+}
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -131,6 +131,7 @@
     "Empty": "Empty",
     "DropFilesToAddGcode": "Drag & Drop files to add G-Code.",
     "PrintStart": "Print start",
+    "AddToQueue": "Add to Queue",
     "Preheat": "Preheat",
     "Download": "Download",
     "Rename": "Rename",
@@ -168,6 +169,15 @@
     "SuccessfullyDeleted": "Successfully deleted {filename}.",
     "View3D" : "View 3D"
   },
+  "JobQueue": {
+    "JobQueue": "Job Queue",
+    "Jobs": "Jobs",
+    "AllJobs": "All Jobs",
+    "Empty": "Empty",
+    "Delete": "Delete",
+    "Resume": "Resume",
+    "Pause": "Pause"
+  },
   "Console": {
     "SetupConsole": "Setup Console",
     "SendCode": "Send code...",