diff --git a/src/App.vue b/src/App.vue index 120214d1..ab7bf97d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,7 +23,7 @@ - + @@ -70,8 +70,18 @@ export default class App extends Mixins(BaseMixin) { return this.$store.getters['files/getMainBackground'] } - get customStylesheet(): string | null { - return this.$store.getters['files/getCustomStylesheet'] + get mainStyle() { + let style = '' + + if (this.mainBackground !== null) { + style = 'background-image: url('+this.mainBackground+');' + } + + return style + } + + get customStylesheet () { + return this.$store.getters["files/getCustomStylesheet"] } get customFavicons(): string | null { diff --git a/src/components/mixins/base.ts b/src/components/mixins/base.ts index 458b4e46..e4780afa 100644 --- a/src/components/mixins/base.ts +++ b/src/components/mixins/base.ts @@ -8,6 +8,10 @@ export default class BaseMixin extends Vue { return this.$store.getters['socket/getUrl'] } + get hostUrl(): boolean { + return this.$store.getters['socket/getHostUrl'] + } + get remoteMode() { return this.$store.state.socket.remoteMode } diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue index dc5fd30d..dc66cf80 100644 --- a/src/components/panels/FarmPrinterPanel.vue +++ b/src/components/panels/FarmPrinterPanel.vue @@ -31,7 +31,7 @@ mdi-printer-3d{{ printer_name }} - + @@ -57,6 +57,10 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { return '' } + get fpsOutput() { + return (this.currentFPS < 10) ? '0'+this.currentFPS.toString() : this.currentFPS + } + visibilityChanged(isVisible: boolean) { this.isVisible = isVisible if (isVisible) this.refreshFrame() @@ -95,15 +99,13 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { async setFrame() { const baseUrl = this.camSettings.url - const hostUrl = new URL(this.printerUrl === undefined ? document.URL : this.printerUrl) - - const url = new URL(baseUrl, hostUrl.origin) + const url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl) url.searchParams.append('bypassCache', this.refresh.toString()) url.searchParams.set('action', 'snapshot') this.request_start_time = performance.now() - this.currentFPS = Math.round(1000 / this.time) + this.currentFPS = (this.time > 0) ? Math.round(1000 / this.time) : 0 let canvas = this.$refs.mjpegstreamerAdaptive if (canvas) { diff --git a/src/components/webcams/Uv4lMjpeg.vue b/src/components/webcams/Uv4lMjpeg.vue index 7547e00d..fee07209 100644 --- a/src/components/webcams/Uv4lMjpeg.vue +++ b/src/components/webcams/Uv4lMjpeg.vue @@ -32,9 +32,7 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) { get url() { const baseUrl = this.camSettings.url - const hostUrl = new URL(this.printerUrl === null ? document.URL : this.printerUrl) - - const url = new URL(baseUrl, hostUrl.origin) + const url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl) return decodeURIComponent(url.toString()) } diff --git a/src/locales/en.json b/src/locales/en.json index 78765bdb..ffb90882 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -256,7 +256,8 @@ }, "FarmPrinterPanel": { "WebcamOff": "Off", - "SwitchToPrinter": "Switch to Printer" + "SwitchToPrinter": "Switch to Printer", + "ReconnectToPrinter": "Reconnect" }, "KlippyStatePanel": { "KlippyState": "Klippy-State", diff --git a/src/pages/Files.vue b/src/pages/Files.vue index 257771a6..8e6027e8 100644 --- a/src/pages/Files.vue +++ b/src/pages/Files.vue @@ -496,7 +496,7 @@ export default class PageFiles extends Mixins(BaseMixin) { } private input_rules = [ - (value: string) => value.indexOf(' ') === -1 || 'Name contain spaces!' + (value: string) => value.indexOf(' ') === -1 || 'Name contains spaces!' ] get headers() { @@ -792,11 +792,11 @@ export default class PageFiles extends Mixins(BaseMixin) { } created() { + this.$socket.emit('server.files.get_directory', { path: this.currentPath }, { action: 'files/getDirectory' }) this.loadPath() } loadPath() { - this.$socket.emit('server.files.get_directory', { path: this.currentPath }, { action: 'files/getDirectory' }) let dirArray = this.currentPath.split('/') this.files = findDirectory(this.filetree, dirArray) if (this.files !== null) { @@ -804,46 +804,27 @@ export default class PageFiles extends Mixins(BaseMixin) { this.files = this.files.filter(file => file.filename !== 'thumbs' && file.filename.substr(0, 1) !== '.') } if (!this.showPrintedFiles) { - this.files = this.files.filter(file => this.$store.getters['server/history/getPrintStatus']({ - filename: (this.currentPath+'/'+file.filename).substr(7), - modified: file.modified.getTime() - }) !== 'completed') + this.files = this.files.filter(file => { + if (file.isDirectory) return true + else { + return (this.$store.getters["server/history/getPrintStatusByFilename"]( + (this.currentPath+"/"+file.filename).substr(7), + file.modified.getTime() + ) !== 'completed') + } + }) } } } @Watch('filetree', { deep: true }) - filetreeChanged(newVal: FileStateFile[]) { - let dirArray = this.currentPath.split('/') - this.files = findDirectory(newVal, dirArray) - - if (this.files?.length && !this.showHiddenFiles) { - this.files = this.files.filter(file => file.filename !== 'thumbs' && file.filename.substr(0, 1) !== '.') - } - - if (this.files?.length && !this.showPrintedFiles) { - this.files = this.files.filter(file => this.$store.getters['server/history/getPrintStatus']({ - filename: (this.currentPath+'/'+file.filename).substr(7), - modified: new Date(file.modified).getTime() - }) !== 'completed') - } + filetreeChanged() { + this.loadPath() } @Watch('currentPath') - currentPathChanged(newVal: string) { - let dirArray = newVal.split('/') - this.files = findDirectory(this.filetree, dirArray) - - if (this.files?.length && !this.showHiddenFiles) { - this.files = this.files.filter(file => file.filename !== 'thumbs' && file.filename.substr(0, 1) !== '.') - } - - if (this.files?.length && !this.showPrintedFiles) { - this.files = this.files.filter(file => this.$store.getters['server/history/getPrintStatus']({ - filename: (this.currentPath+'/'+file.filename).substr(7), - modified: new Date(file.modified).getTime() - }) !== 'completed') - } + currentPathChanged() { + this.loadPath() } formatPrintTime(totalSeconds: number) { diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts index 5757b5ba..38328dd5 100644 --- a/src/store/farm/printer/getters.ts +++ b/src/store/farm/printer/getters.ts @@ -1,4 +1,4 @@ -import { themeDir } from '@/store/variables' +import {defaultLogoColor, themeDir} from '@/store/variables' import {convertName} from '@/plugins/helpers' import {GetterTree} from 'vuex' import {FarmPrinterState} from '@/store/farm/printer/types' @@ -37,6 +37,10 @@ export const getters: GetterTree = { return state.socket.port !== 80 ? state.socket.hostname+':'+state.socket.port : state.socket.hostname }, + getLogoColor: (state) => { + return state.data.gui?.theme?.logo ?? defaultLogoColor + }, + getStatus: (state, getters) => { if (!state.socket.isConnected) { return state.socket.isConnecting ? 'Connecting...' : 'Disconnected' @@ -99,9 +103,9 @@ export const getters: GetterTree = { getLogo: (state, getters) => { const acceptName = 'sidebar-logo' - const acceptExtensions = ['gif', 'jpg', 'png', 'gif'] + const acceptExtensions = ['gif', 'jpg', 'png', 'gif', 'svg'] - return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? '/img/logo.svg' + return getters['getThemeFileUrl'](acceptName, acceptExtensions) }, getPosition: state => { diff --git a/src/store/farm/printer/mutations.ts b/src/store/farm/printer/mutations.ts index 26bb1bdd..7d40a791 100644 --- a/src/store/farm/printer/mutations.ts +++ b/src/store/farm/printer/mutations.ts @@ -58,13 +58,11 @@ export const mutations: MutationTree = { setConfigDir(state, payload) { // eslint-disable-next-line Object.values(payload).forEach((file: any) => { - if ('filename' in file) { - if (file.filename.startsWith('.theme/')) { - state.theme_files.push(file.filename) - } - } - }) - }, + if (file.path?.startsWith(".theme/")) { + state.theme_files.push(file.path) + } + }) + }, setDatabases(state, payload) { Vue.set(state, 'databases', payload.namespaces) diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts index af2ecee3..20577253 100644 --- a/src/store/files/getters.ts +++ b/src/store/files/getters.ts @@ -36,8 +36,8 @@ export const getters: GetterTree = { const acceptName = 'main-background' const acceptExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg'] - return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? 'transparent' - }, + return getters['getThemeFileUrl'](acceptName, acceptExtensions) + }, getCustomStylesheet: (state, getters) => { const acceptName = 'custom' diff --git a/src/store/printer/mutations.ts b/src/store/printer/mutations.ts index c51155b6..b3e1edd8 100644 --- a/src/store/printer/mutations.ts +++ b/src/store/printer/mutations.ts @@ -25,7 +25,13 @@ export const mutations: MutationTree = { Object.keys(payload).forEach((key: string) => { const value = payload[key] - if (typeof value === 'object' && !Array.isArray(value) && key in currentState && value !== null) { + if ( + typeof value === 'object' && + !Array.isArray(value) && + key in currentState && + value !== null && + currentState[key] !== null + ) { setDataDeep(currentState[key], value) } else if (key === 'temperature') { const newValue = Math.round(value * 10) / 10 diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts index c57fbb73..7092ce25 100644 --- a/src/store/server/history/getters.ts +++ b/src/store/server/history/getters.ts @@ -183,7 +183,19 @@ export const getters: GetterTree = { return '' }, - getPrintStatusChipColor: () => (status: string) => { + getPrintStatusByFilename: (state) => (filename: string, modified: number) => { + if (state.jobs.length) { + const job = state.jobs.find((job) => { + return job.filename === filename && Math.round(job.metadata?.modified*1000) === modified + }) + + return job?.status ?? "" + } + + return "" + }, + + getPrintStatusChipColor: () => (status: string) => { switch(status) { case 'in_progress': return 'blue accent-3' //'blue-grey darken-1' case 'completed': return 'green' //'green' diff --git a/src/store/socket/getters.ts b/src/store/socket/getters.ts index d69f3485..2db2f6db 100644 --- a/src/store/socket/getters.ts +++ b/src/store/socket/getters.ts @@ -8,7 +8,11 @@ export const getters: GetterTree = { return '//' + state.hostname + (state.port !== 80 ? ':'+state.port : '') }, - getWebsocketUrl: (state, getters) => { + getHostUrl: (state) => { + return (state.protocol === 'wss' ? 'https' : 'http')+"://" + state.hostname + '/' + }, + + getWebsocketUrl: (state, getters) => { return state.protocol + ':' + getters['getUrl'] + '/websocket' }, } \ No newline at end of file