From fba7f8efffc9b1250902b3d5cf5ba5cd5945112f Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Sat, 3 Feb 2024 19:14:16 +0100 Subject: [PATCH] refactor: refactor jobqueue entry and add draggable sort function Signed-off-by: Stefan Dej --- .../JobqueueEntryChangeCountDialog.vue | 88 ++++ src/components/panels/JobqueuePanel.vue | 91 ++-- src/components/panels/Status/Jobqueue.vue | 156 ++----- .../panels/Status/JobqueueEntry.vue | 398 ++++++------------ .../panels/Status/JobqueueEntryRest.vue | 120 ++++++ src/store/server/jobQueue/actions.ts | 70 ++- 6 files changed, 425 insertions(+), 498 deletions(-) create mode 100644 src/components/dialogs/JobqueueEntryChangeCountDialog.vue create mode 100644 src/components/panels/Status/JobqueueEntryRest.vue diff --git a/src/components/dialogs/JobqueueEntryChangeCountDialog.vue b/src/components/dialogs/JobqueueEntryChangeCountDialog.vue new file mode 100644 index 000000000..0cd1d88c6 --- /dev/null +++ b/src/components/dialogs/JobqueueEntryChangeCountDialog.vue @@ -0,0 +1,88 @@ + + diff --git a/src/components/panels/JobqueuePanel.vue b/src/components/panels/JobqueuePanel.vue index faf98b800..1c14d5d56 100644 --- a/src/components/panels/JobqueuePanel.vue +++ b/src/components/panels/JobqueuePanel.vue @@ -1,5 +1,5 @@ @@ -66,19 +61,16 @@ import BaseMixin from '@/components/mixins/base' import Panel from '@/components/ui/Panel.vue' import { mdiPlay, mdiPause, mdiTrayFull } from '@mdi/js' import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue' +import draggable from 'vuedraggable' @Component({ - components: { JobqueueEntry, Panel }, + components: { draggable, JobqueueEntry, Panel }, }) export default class JobqueuePanel extends Mixins(BaseMixin) { mdiPlay = mdiPlay mdiPause = mdiPause mdiTrayFull = mdiTrayFull - contentTdWidth = 100 - - declare $refs: { - jobqueuePanel: any - } + joblist = [] get jobs() { return this.$store.getters['server/jobQueue/getJobs'] @@ -88,14 +80,6 @@ export default class JobqueuePanel extends Mixins(BaseMixin) { return this.$store.state.server.jobQueue.queue_state ?? '' } - get countPerPage() { - return this.$store.state.gui.view.jobqueue.countPerPage - } - - set countPerPage(newVal) { - this.$store.dispatch('gui/saveSetting', { name: 'view.jobqueue.countPerPage', value: newVal }) - } - startJobqueue() { this.$store.dispatch('server/jobQueue/start') } @@ -104,24 +88,21 @@ export default class JobqueuePanel extends Mixins(BaseMixin) { this.$store.dispatch('server/jobQueue/pause') } - mounted() { - this.calcContentTdWidth() - } - - calcContentTdWidth() { - this.contentTdWidth = this.$refs.jobqueuePanel?.$el?.clientWidth - 48 - 32 - } - - handleResize() { - this.$nextTick(() => { - this.calcContentTdWidth() + updateOrder(event: { oldIndex: number; newIndex: number }) { + this.$store.dispatch('server/jobQueue/changePosition', { + newIndex: event.newIndex, + oldIndex: event.oldIndex, }) } } - diff --git a/src/components/panels/Status/Jobqueue.vue b/src/components/panels/Status/Jobqueue.vue index c6ebe7612..d1c80bbaa 100644 --- a/src/components/panels/Status/Jobqueue.vue +++ b/src/components/panels/Status/Jobqueue.vue @@ -1,42 +1,19 @@ @@ -44,122 +21,37 @@ 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 { mdiFileMultiple } from '@mdi/js' import JobqueueEntry from '@/components/panels/Status/JobqueueEntry.vue' @Component({ components: { JobqueueEntry }, }) export default class StatusPanelJobqueue extends Mixins(BaseMixin) { - mdiFileMultiple = mdiFileMultiple - - private contentTdWidth = 100 - - declare $refs: { - filesJobqueue: any - } - get jobs() { return this.$store.getters['server/jobQueue/getJobs'] ?? [] } - get jobsTable() { - return this.jobs.slice(0, 5) - } - - get jobsRest() { - return this.jobs.slice(5) - } - - get restJobsLength() { - let count = 0 - - this.jobsRest.forEach((item: ServerJobQueueStateJob) => { - count += (item.combinedIds?.length ?? 0) + 1 - }) + get maxLength() { + if (this.jobs.length > 5) return 4 - return count + return 5 } - get descriptionRestJobs() { - let filamentLength = 0 - let filamentWeight = 0 - let printTime = 0 - - this.jobsRest.forEach((item: ServerJobQueueStateJob) => { - 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 = '' - - output += this.$t('Files.Filament') + ': ' - if (filamentLength || filamentWeight) { - if (filamentLength) output += filamentLength.toFixed() + ' mm' - if (filamentLength && filamentWeight) output += ' / ' - if (filamentWeight) output += filamentWeight.toFixed(2) + ' g' - } else output += '--' - - output += ', ' + this.$t('Files.PrintTime') + ': ' - if (printTime) output += this.formatPrintTime(printTime) - else output += '--' - - return output + get jobsTable() { + return this.jobs.slice(0, this.maxLength) } - 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 '--' + get jobsRest() { + return this.jobs.slice(this.maxLength) } startJobqueue() { this.$store.dispatch('server/jobQueue/start') } - - mounted() { - setTimeout(() => { - this.calcContentTdWidth() - }, 200) - } - - calcContentTdWidth() { - this.contentTdWidth = this.$refs.filesJobqueue?.$el?.clientWidth - 48 - 48 - 32 - } - - handleResize() { - this.$nextTick(() => { - this.calcContentTdWidth() - }) - } } diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue index 4ab0aa450..9d5b6da39 100644 --- a/src/components/panels/Status/JobqueueEntry.vue +++ b/src/components/panels/Status/JobqueueEntry.vue @@ -1,136 +1,71 @@ diff --git a/src/components/panels/Status/JobqueueEntryRest.vue b/src/components/panels/Status/JobqueueEntryRest.vue new file mode 100644 index 000000000..02d413d8f --- /dev/null +++ b/src/components/panels/Status/JobqueueEntryRest.vue @@ -0,0 +1,120 @@ + + + diff --git a/src/store/server/jobQueue/actions.ts b/src/store/server/jobQueue/actions.ts index 9c8630b39..509d94f42 100644 --- a/src/store/server/jobQueue/actions.ts +++ b/src/store/server/jobQueue/actions.ts @@ -3,17 +3,6 @@ import { ActionTree } from 'vuex' import { RootState } from '@/store/types' import { ServerJobQueueState, ServerJobQueueStateJob } from '@/store/server/jobQueue/types' -const convertJobToFilenames = (job: ServerJobQueueStateJob) => { - const filenames: string[] = [] - - const count = (job.combinedIds?.length ?? 0) + 1 - for (let i = 0; i < count; i++) { - filenames.push(job.filename) - } - - return filenames -} - export const actions: ActionTree = { reset({ commit }) { commit('reset') @@ -29,8 +18,8 @@ export const actions: ActionTree = { }, async getStatus({ commit, dispatch }, payload) { - if ('queued_jobs' in payload) await commit('setQueuedJobs', payload.queued_jobs) - if ('queue_state' in payload) await commit('setQueueState', payload.queue_state) + if ('queued_jobs' in payload) commit('setQueuedJobs', payload.queued_jobs) + if ('queue_state' in payload) commit('setQueueState', payload.queue_state) await dispatch('socket/removeInitModule', 'server/jobQueue/init', { root: true }) }, @@ -39,46 +28,37 @@ export const actions: ActionTree = { 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) - } + changeCount({ dispatch, getters }, payload: { job_id: string; count: number }) { + const jobs: ServerJobQueueStateJob[] = getters['getJobs'] - return - } + const index = jobs.findIndex((job) => job.job_id === payload.job_id) + if (index === -1) return - filenames.push(...convertJobToFilenames(job)) - }) + jobs[index].combinedIds = Array(payload.count - 1).fill(payload.job_id) - Vue.$socket.emit('server.job_queue.post_job', { - filenames, - reset: true, - }) + dispatch('sendNewQueueList', jobs) }, - changePosition({ getters }, payload: { job_id: string; positionIndex: number }) { - const filenames: string[] = [] - const jobs = getters['getJobs'] as ServerJobQueueStateJob[] - - const jobToMoveIndex = jobs.findIndex((job) => job.job_id === payload.job_id) + changePosition({ dispatch, getters }, payload: { oldIndex: number; newIndex: number }) { + const jobs: ServerJobQueueStateJob[] = getters['getJobs'] - if (jobToMoveIndex === -1) { - return - } + const job = jobs.splice(payload.oldIndex, 1)[0] + jobs.splice(payload.newIndex, 0, job) - const jobToMove = jobs[jobToMoveIndex] - - jobs.splice(jobToMoveIndex, 1) - jobs.splice(payload.positionIndex, 0, jobToMove) + dispatch('sendNewQueueList', jobs) + }, - jobs.forEach((job) => { - filenames.push(...convertJobToFilenames(job)) - }) + sendNewQueueList(_, jobs: ServerJobQueueStateJob[]) { + const filenames = jobs + .map((job) => { + const numJobs = (job.combinedIds?.length ?? 0) + 1 + // return job.filename if the job will be only printed one time + if (numJobs === 1) return job.filename + + // return an array of job.filename if the job will be printed multiple times + return Array(numJobs).fill(job.filename) + }) + .flat() Vue.$socket.emit('server.job_queue.post_job', { filenames,