feat(ui): custom stylesheet and background image (#795)

Signed-off-by: Kerim Bilgic <bastelklug@pfusch.eu>
Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>

Author: kerbilg

src/App.vue

@@ -34,7 +34,7 @@
       <v-icon>$estop</v-icon>
     </v-btn>
 
-    <v-main>
+    <v-main :style="customBackgroundImageStyle">
       <!-- <pre>authenticated {{ authenticated }}, socketConnected {{ socketConnected }}, apiConnected {{ apiConnected }}</pre> -->
       <v-container
         fluid
@@ -79,10 +79,11 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
 import { EventBus, FlashMessage } from '@/eventBus'
-import StateMixin from './mixins/state'
-import { Waits } from './globals'
+import StateMixin from '@/mixins/state'
+import FilesMixin from '@/mixins/files'
+import { Waits } from '@/globals'
 import { LinkPropertyHref } from 'vue-meta'
 
 @Component<App>({
@@ -99,10 +100,11 @@ import { LinkPropertyHref } from 'vue-meta'
     }
   }
 })
-export default class App extends Mixins(StateMixin) {
+export default class App extends Mixins(StateMixin, FilesMixin) {
   toolsdrawer: boolean | null = null
   navdrawer: boolean | null = null
   showUpdateUI = false
+  customBackgroundImageStyle: Record<string, string> = {}
 
   flashMessage: FlashMessage = {
     open: false,
@@ -213,6 +215,55 @@ export default class App extends Mixins(StateMixin) {
     return theme.currentTheme.primary
   }
 
+  get customStyleSheet () {
+    return this.$store.getters['config/getCustomThemeFile']('custom', ['.css'])
+  }
+
+  @Watch('customStyleSheet')
+  async onCustomStyleSheet (value: string) {
+    if (!value) {
+      return
+    }
+
+    const url = await this.createFileUrl(value, 'config')
+
+    const oldCustomStylesheet = document.getElementById('customStylesheet')
+
+    if (oldCustomStylesheet) {
+      oldCustomStylesheet.setAttribute('href', url)
+      return
+    }
+
+    const linkElement = document.createElement('link')
+
+    linkElement.rel = 'stylesheet'
+    linkElement.type = 'text/css'
+    linkElement.id = 'customStylesheet'
+    linkElement.href = url
+
+    document.head.appendChild(linkElement)
+  }
+
+  get customBackgroundImage () {
+    return this.$store.getters['config/getCustomThemeFile']('background', ['.png', '.jpg', '.jpeg', '.gif'])
+  }
+
+  @Watch('customBackgroundImage')
+  async onCustomBackgroundImage (value: string) {
+    if (!value) {
+      return
+    }
+
+    const url = await this.createFileUrl(value, 'config')
+
+    this.customBackgroundImageStyle = {
+      backgroundImage: `url(${url})`,
+      backgroundSize: 'cover',
+      backgroundAttachment: 'fixed',
+      backgroundRepeat: 'no-repeat'
+    }
+  }
+
   mounted () {
     // this.onLoadLocale(this.$i18n.locale)
     EventBus.bus.$on('flashMessage', (payload: FlashMessage) => {

src/api/socketActions.ts

@@ -474,6 +474,18 @@ export const SocketActions = {
     )
   },
 
+  async serverFilesListRoot (root: string) {
+    const wait = `${Waits.onFileSystem}${root}`
+    baseEmit(
+      'server.files.list',
+      {
+        dispatch: 'files/onServerFilesListRoot',
+        wait,
+        params: { root }
+      }
+    )
+  },
+
   async serverFilesMove (source: string, dest: string) {
     const wait = Waits.onFileSystem
     baseEmit(

src/mixins/files.ts

@@ -119,35 +119,40 @@ export default class FilesMixin extends Vue {
 
   /**
    * Will download a file by filepath via a standard browser link.
-   * Implements a oneshot.
    * @param filename The filename to retrieve.
    * @param path The path to the file.
    */
-  downloadFile (filename: string, path: string) {
+  async downloadFile (filename: string, path: string) {
     // Grab a oneshot.
-    authApi.getOneShot()
-      .then(response => response.data.result)
-      .then((token) => {
-        // Sort out the filepath and url.
-        const filepath = (path) ? `${path}/${filename}` : `${filename}`
-        const url = encodeURI(
-          this.apiUrl +
-          '/server/files/' + filepath +
-          '?token=' + token +
-          '&date=' + new Date().getTime())
+    try {
+      const url = encodeURI(await this.createFileUrl(filename, path))
 
-        // Create a link, handle its click - and finally remove it again.
-        const link = document.createElement('a')
-        link.href = url
-        link.setAttribute('download', filename)
-        link.setAttribute('target', '_blank')
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-      })
-      .catch(() => {
-        // Likely a 401.
-      })
+      // Create a link, handle its click - and finally remove it again.
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', filename)
+      link.setAttribute('target', '_blank')
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } catch {
+      // Likely a 401.
+    }
+  }
+
+  /**
+   * Creates a url for a file by filepath.
+   * Implements a oneshot.
+   * @param filename The filename.
+   * @param path The path to the file.
+   * @returns The url for the requested file
+   */
+  async createFileUrl (filename: string, path: string) {
+    const token = (await authApi.getOneShot()).data.result
+
+    const filepath = (path) ? `${path}/${filename}` : `${filename}`
+
+    return `${this.apiUrl}/server/files/${filepath}?token=${token}&date=${Date.now()}`
   }
 
   /**

src/store/config/getters.ts

@@ -6,6 +6,7 @@ import { Heater, Fan } from '../printer/types'
 import tinycolor from '@ctrl/tinycolor'
 import { AppTableHeader } from '@/types'
 import { AppTablePartialHeader } from '@/types/tableheaders'
+import { RootFile } from '../files/types'
 
 export const getters: GetterTree<ConfigState, RootState> = {
   getCurrentInstance: (state) => {
@@ -93,6 +94,20 @@ export const getters: GetterTree<ConfigState, RootState> = {
     return r
   },
 
+  getCustomThemeFile: (state, getters, rootState, rootGetters) => (filename: string, extensions: string[]) => {
+    const files = rootGetters['files/getRootFiles']('config') as RootFile[]
+
+    if (files) {
+      for (const extension of extensions) {
+        const path = `.fluidd-theme/${filename}${extension}`
+
+        if (files.some(f => f.path === path)) {
+          return path
+        }
+      }
+    }
+  },
+
   /**
    * Returns a default theme preset for first init / when reset
    */

src/store/files/actions.ts

@@ -74,6 +74,12 @@ export const actions: ActionTree<FilesState, RootState> = {
     commit('setServerFilesGetDirectory', { root, directory: { path, items } })
   },
 
+  async onServerFilesListRoot ({ commit }, payload) {
+    const root = payload.__request__.params.root
+
+    commit('setServerFilesListRoot', { root, files: payload })
+  },
+
   /**
    * If we request the metadata (a file..) then we load and update here.
    */

src/store/files/getters.ts

@@ -16,6 +16,10 @@ export const getters: GetterTree<FilesState, RootState> = {
     }
   },
 
+  getRootFiles: (state) => (root: FileRoot) => {
+    return state.rootFiles[root]
+  },
+
   /**
    * Indicates if a root is available.
    */

src/store/files/index.ts

@@ -15,6 +15,14 @@ export const defaultState = (): FilesState => {
       used: 0,
       free: 0
     },
+    rootFiles: {
+      gcodes: [],
+      config: [],
+      config_examples: [],
+      docs: [],
+      logs: [],
+      timelapse: []
+    },
     gcodes: [],
     config: [],
     config_examples: [],

src/store/files/mutations.ts

@@ -31,6 +31,12 @@ export const mutations: MutationTree<FilesState> = {
     }
   },
 
+  setServerFilesListRoot (state, payload) {
+    const root = payload.root as FileRoot
+
+    state.rootFiles[root] = payload.files
+  },
+
   setFileUpdate (state, payload: FileUpdate) {
     const root = payload.root as FileRoot
     const paths = payload.paths

src/store/files/types.ts

@@ -1,11 +1,11 @@
 import { HistoryItem } from '@/store/history/types'
 
 export interface FilesState {
-  [key: string]: Files[] | FilesUpload[] | FileDownload | string[] | CurrentPaths | DiskUsage | null;
   uploads: FilesUpload[];
   download: FileDownload | null;
   currentPaths: CurrentPaths;
   disk_usage: DiskUsage;
+  rootFiles: RootFiles;
 
   gcodes: Files[];
   config: Files[];
@@ -143,3 +143,19 @@ export interface FilePreviewState {
   type: string;
   appFile?: AppFile;
 }
+
+export interface RootFiles {
+  gcodes: RootFile[];
+  config: RootFile[];
+  config_examples: RootFile[];
+  docs: RootFile[];
+  logs: RootFile[];
+  timelapse: RootFile[];
+}
+
+export interface RootFile {
+  path: string;
+  modified: number;
+  size: number;
+  permissions: string;
+}

src/store/socket/actions.ts

@@ -32,6 +32,7 @@ export const actions: ActionTree<SocketState, RootState> = {
     if (payload === true) {
       SocketActions.serverInfo()
       SocketActions.identify()
+      SocketActions.serverFilesListRoot('config')
     }
   },