From 16adfe470f8d39b8b22f3a743efe117e243916f9 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Fri, 15 Nov 2024 19:10:25 +0100 Subject: [PATCH] refactor: refactor files list in StatusPanel Signed-off-by: Stefan Dej --- src/components/panels/Status/Gcodefiles.vue | 443 +----------------- .../panels/Status/GcodefilesEntry.vue | 350 ++++++++++++++ 2 files changed, 358 insertions(+), 435 deletions(-) create mode 100644 src/components/panels/Status/GcodefilesEntry.vue diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue index d2a38e6fa..f8d5488c0 100644 --- a/src/components/panels/Status/Gcodefiles.vue +++ b/src/components/panels/Status/Gcodefiles.vue @@ -5,178 +5,16 @@ hide-default-footer class="dashboard-gcodes-table" sort-by="time_added" - mobile-breakpoint="0" - @current-items="setFirst"> + mobile-breakpoint="0"> - - - - - {{ mdiPlay }} - {{ $t('Files.PrintStart') }} - - - {{ mdiPlaylistPlus }} - {{ $t('Files.AddToQueue') }} - - - {{ mdiPlaylistPlus }} - {{ $t('Files.AddBatchToQueue') }} - - - {{ mdiFire }} - {{ $t('Files.Preheat') }} - - - {{ mdiVideo3d }} - {{ $t('Files.View3D') }} - - - {{ mdiCloudDownload }} - {{ $t('Files.Download') }} - - - {{ mdiFileDocumentEditOutline }} - {{ $t('Files.EditFile') }} - - - {{ mdiRenameBox }} - {{ $t('Files.Rename') }} - - - {{ mdiDelete }} - {{ $t('Files.Delete') }} - - - - - - - - - - - - {{ $t('Files.Cancel') }} - {{ $t('Files.Rename') }} - - - - - - - - - -

- {{ $t('Files.DeleteSingleFileQuestion', { name: filename }) }} -

- - - - - {{ $t('Files.Cancel') }} - - - {{ $t('Files.Delete') }} - - - - - - @@ -186,99 +24,20 @@ import { Mixins } from 'vue-property-decorator' import BaseMixin from '@/components/mixins/base' import ControlMixin from '@/components/mixins/control' import { FileStateGcodefile } from '@/store/files/types' -import StartPrintDialog from '@/components/dialogs/StartPrintDialog.vue' -import { - mdiFile, - mdiPlay, - mdiPlaylistPlus, - mdiFire, - mdiVideo3d, - mdiCloudDownload, - mdiFileDocumentEditOutline, - mdiRenameBox, - mdiDelete, - mdiCloseThick, -} from '@mdi/js' import Panel from '@/components/ui/Panel.vue' -import { defaultBigThumbnailBackground } from '@/store/variables' -import AddBatchToQueueDialog from '@/components/dialogs/AddBatchToQueueDialog.vue' - -interface dialogRenameObject { - show: boolean - newName: string - item: FileStateGcodefile -} +import StatusPanelGcodefilesEntry from '@/components/panels/Status/GcodefilesEntry.vue' +import Vue from 'vue' @Component({ - components: { - Panel, - StartPrintDialog, - AddBatchToQueueDialog, - }, + components: { Panel, StatusPanelGcodefilesEntry }, }) export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixin) { - mdiFile = mdiFile - mdiPlay = mdiPlay - mdiPlaylistPlus = mdiPlaylistPlus - mdiFire = mdiFire - mdiVideo3d = mdiVideo3d - mdiCloudDownload = mdiCloudDownload - mdiFileDocumentEditOutline = mdiFileDocumentEditOutline - mdiRenameBox = mdiRenameBox - mdiDelete = mdiDelete - mdiCloseThick = mdiCloseThick - - private deleteDialog = false - private showDialogBool = false - private dialogFile: FileStateGcodefile = { - isDirectory: false, - filename: '', - modified: new Date(), - permissions: '', - small_thumbnail: null, - big_thumbnail: null, - big_thumbnail_width: null, - count_printed: 0, - last_end_time: null, - last_filament_used: null, - last_print_duration: null, - last_status: null, - last_start_time: null, - last_total_duration: null, - preheat_gcode: null, - } - private currentPath = '' - private contentTdWidth = 100 + contentTdWidth = 100 declare $refs: { - filesGcodeCard: any - inputFieldRenameFile: HTMLInputElement - } - - private contextMenu = { - shown: false, - touchTimer: undefined, - x: 0, - y: 0, - item: { ...this.dialogFile }, - } - - private dialogRenameFile: dialogRenameObject = { - show: false, - newName: '', - item: { ...this.dialogFile }, + filesGcodeCard: Vue } - dialogAddBatchToQueue: { isVisible: boolean; filename: string } = { - isVisible: false, - filename: '', - } - - 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 @@ -300,192 +59,6 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi return gcodes } - get filename() { - const filename = this.contextMenu.item.filename.split('/') - return filename[filename.length - 1] - } - - get styleContentTdWidth() { - return `width: ${this.contentTdWidth}px;` - } - - get bigThumbnailBackground() { - return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground - } - - get bigThumbnailTooltipColor() { - if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) { - return undefined - } - - return this.bigThumbnailBackground - } - - showContextMenu(e: any, item: FileStateGcodefile) { - 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 - }) - } - } - - getDescription(item: FileStateGcodefile) { - let output = '' - - output += this.$t('Panels.StatusPanel.Filament') + ': ' - if (item.filament_total || item.filament_weight_total) { - if (item.filament_total) output += item.filament_total.toFixed() + ' mm' - if (item.filament_total && item.filament_weight_total) output += ' / ' - if (item.filament_weight_total) output += item.filament_weight_total.toFixed(2) + ' g' - } else output += '--' - - output += ', ' + this.$t('Panels.StatusPanel.PrintTime') + ': ' - if (item.estimated_time) output += this.formatPrintTime(item.estimated_time) - else output += '--' - - return output - } - - existMetadata(item: FileStateGcodefile) { - return item?.metadataPulled - } - - setFirst(currItems: any) { - // first check that actually exists values - if (currItems.length) { - // toggle all to false - currItems.forEach((x: any) => (x.isFirst = false)) - // just set first to true - currItems[0].isFirst = true - } - } - - 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 '--' - } - - getStatusIcon(status: string) { - return this.$store.getters['server/history/getPrintStatusIcon'](status) - } - - getStatusColor(status: string) { - return this.$store.getters['server/history/getPrintStatusIconColor'](status) - } - - showDialog(file: FileStateGcodefile) { - this.currentPath = - file.filename.lastIndexOf('/') >= 0 ? '/' + file.filename.slice(0, file.filename.lastIndexOf('/')) : '' - this.dialogFile = { ...file } - if (file.filename.lastIndexOf('/') >= 0) { - this.dialogFile.filename = file.filename.slice(file.filename.lastIndexOf('/') + 1) - } - this.showDialogBool = true - } - - closeDialog() { - this.showDialogBool = false - } - - addToQueue(item: FileStateGcodefile) { - this.$store.dispatch('server/jobQueue/addToQueue', [item.filename]) - } - - openAddBatchToQueueDialog(item: FileStateGcodefile) { - this.dialogAddBatchToQueue.isVisible = true - this.dialogAddBatchToQueue.filename = item.filename - } - - closeAddBatchToQueueDialog() { - this.dialogAddBatchToQueue.isVisible = false - } - - view3D(item: FileStateGcodefile) { - this.$router.push({ path: '/viewer', query: { filename: 'gcodes/' + item.filename } }) - } - - downloadFile(item: FileStateGcodefile) { - const href = this.apiUrl + '/server/files/gcodes/' + encodeURI(item.filename) - - window.open(href) - } - - editFile(item: FileStateGcodefile) { - const pos = item.filename.lastIndexOf('/') - const path = pos > 0 ? item.filename.slice(0, pos + 1) : '' - const filename = pos > 0 ? item.filename.slice(pos + 1) : item.filename - - this.$store.dispatch('editor/openFile', { - root: 'gcodes', - path, - filename, - size: item.size, - permissions: item.permissions, - }) - } - - renameFile(item: FileStateGcodefile) { - this.dialogRenameFile.item = item - const pos = item.filename.lastIndexOf('/') - this.dialogRenameFile.newName = pos > 0 ? item.filename.slice(pos + 1) : item.filename - this.dialogRenameFile.show = true - - setTimeout(() => { - this.$refs.inputFieldRenameFile?.focus() - }, 200) - } - - renameFileAction() { - this.dialogRenameFile.show = false - const pos = this.dialogRenameFile.item.filename.lastIndexOf('/') - const path = pos > 0 ? this.dialogRenameFile.item.filename.slice(0, pos + 1) : '' - - this.$socket.emit( - 'server.files.move', - { - source: 'gcodes/' + this.dialogRenameFile.item.filename, - dest: 'gcodes/' + path + this.dialogRenameFile.newName, - }, - { action: 'files/getMove' } - ) - } - - removeFile() { - this.$socket.emit( - 'server.files.delete_file', - { path: 'gcodes/' + this.contextMenu.item.filename }, - { action: 'files/getDeleteFile' } - ) - - this.deleteDialog = false - } - mounted() { setTimeout(() => { this.calcContentTdWidth() @@ -493,7 +66,7 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi } calcContentTdWidth() { - this.contentTdWidth = this.$refs.filesGcodeCard?.$el?.clientWidth - 48 - 48 - 32 + this.contentTdWidth = this.$refs.filesGcodeCard.$el.clientWidth - 48 - 48 - 32 } handleResize() { diff --git a/src/components/panels/Status/GcodefilesEntry.vue b/src/components/panels/Status/GcodefilesEntry.vue new file mode 100644 index 000000000..40ec4837a --- /dev/null +++ b/src/components/panels/Status/GcodefilesEntry.vue @@ -0,0 +1,350 @@ + + + + +