diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue index 45c6879d..60bf6677 100644 --- a/src/components/gcodeviewer/Viewer.vue +++ b/src/components/gcodeviewer/Viewer.vue @@ -88,13 +88,19 @@ + + +
+ {{ $t('GCodeViewer.Downloading') }} - {{ Math.round(downloadSnackbar.percent) }} % @ {{ formatFilesize(Math.round(downloadSnackbar.speed)) }}/s
+ {{ downloadSnackbar.filename }} +
+ + @@ -108,11 +114,27 @@ import BaseMixin from '../mixins/base' // @ts-ignore import GCodeViewer from '@sindarius/gcodeviewer' import {Debounce} from 'vue-debounce-decorator' +import axios from 'axios' +import {formatFilesize} from '@/plugins/helpers' + +interface downloadSnackbar { + status: boolean + filename: string + percent: number + speed: number + total: number + cancelTokenSource: any + lastProgress: { + time: number + loaded: number + } +} let viewer: any = null @Component export default class Viewer extends Mixins(BaseMixin) { + formatFilesize = formatFilesize private isBusy = false private loading = false private loadingPercent = 0 @@ -127,6 +149,19 @@ export default class Viewer extends Mixins(BaseMixin) { private zSlicerHeight = 100 private renderQuality = this.renderQualities[2] + private downloadSnackbar: downloadSnackbar = { + status: false, + filename: '', + percent: 0, + speed: 0, + total: 0, + cancelTokenSource: {}, + lastProgress: { + time: 0, + loaded: 0 + } + } + @Prop({type: String, default: '', required: false}) filename!: string @Ref('fileInput') fileInput!: HTMLInputElement //@Ref('viewerCanvasContainer') viewerCanvasContainer!: HTMLElement @@ -194,7 +229,7 @@ export default class Viewer extends Mixins(BaseMixin) { if (this.$route.query?.filename && this.loadedFile !== this.$route.query?.filename?.toString()) { //TODO: test without sleep - await this.sleep(2000) //Give the store a chance to initializ before loading the file. + await this.sleep(1000) //Give the store a chance to initializ before loading the file. await this.loadFile(this.$route.query.filename.toString()) } @@ -284,14 +319,45 @@ export default class Viewer extends Mixins(BaseMixin) { } async loadFile(filename: string) { - let response = await fetch(this.apiUrl + '/server/files/' + encodeURI(filename)) - let text = await response.text() + this.downloadSnackbar.status = true + this.downloadSnackbar.speed = 0 + this.downloadSnackbar.lastProgress.time = 0 + this.downloadSnackbar.filename = filename.startsWith('gcodes/') ? filename.slice(7) : filename + const CancelToken = axios.CancelToken + this.downloadSnackbar.cancelTokenSource = CancelToken.source() + const text = await axios.get(this.apiUrl + '/server/files/' + encodeURI(filename), { + cancelToken: this.downloadSnackbar.cancelTokenSource.token, + responseType: 'blob', + onDownloadProgress: (progressEvent) => { + this.downloadSnackbar.percent = (progressEvent.loaded * 100) / progressEvent.total + if (this.downloadSnackbar.lastProgress.time) { + const time = progressEvent.timeStamp - this.downloadSnackbar.lastProgress.time + const data = progressEvent.loaded - this.downloadSnackbar.lastProgress.loaded + + if (time > 1000 || this.downloadSnackbar.speed === 0) { + this.downloadSnackbar.speed = data / (time / 1000) + this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp + this.downloadSnackbar.lastProgress.loaded = progressEvent.loaded + } + } else this.downloadSnackbar.lastProgress.time = progressEvent.timeStamp + + this.downloadSnackbar.total = progressEvent.total + } + }).then(res => res.data.text()).catch((e) => { + window.console.error(e.message) + }) + this.downloadSnackbar.status = false + viewer.updateRenderQuality(this.renderQuality.value) await viewer.processFile(text) this.loadingPercent = 100 this.finishLoad() } + cancelDownload() { + this.downloadSnackbar.cancelTokenSource.cancel('User canceled download gcode file') + } + async sleep(ms: number) { await new Promise((resolve) => setTimeout(resolve, ms)) } diff --git a/src/locales/en.json b/src/locales/en.json index e2f65575..baf99487 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -614,6 +614,7 @@ "ReloadRequired" : "Reload required", "TrackPrint": "Track Print", "ZClip" : "Z Clipping", - "Rendering" : "Rendering" + "Rendering" : "Rendering", + "Downloading" : "Downloading" } } \ No newline at end of file