feat: adds Upload and Print button to AppBar (#974)

Signed-off-by: Pedro Lamas <[email protected]>

components.d.ts

@@ -35,6 +35,7 @@ declare module 'vue' {
     AppSwitch: typeof import('./src/components/ui/AppSwitch.vue')['default']
     AppTable: typeof import('./src/components/ui/AppTable.vue')['default']
     AppToolsDrawer: typeof import('./src/components/layout/AppToolsDrawer.vue')['default']
+    AppUploadAndPrintBtn: typeof import('./src/components/layout/AppUploadAndPrintBtn.vue')['default']
     AppUserMenu: typeof import('./src/components/layout/AppUserMenu.vue')['default']
     AppWarnings: typeof import('./src/components/common/AppWarnings.vue')['default']
     BedScrewsAdjustDialog: typeof import('./src/components/common/BedScrewsAdjustDialog.vue')['default']

src/components/layout/AppBar.vue

@@ -44,7 +44,7 @@
       >
         <app-save-config-and-restart-btn
           :loading="hasWait($waits.onSaveConfig)"
-          :disabled="printerPrinting"
+          :disabled="printerPrinting || printerPaused"
           @click="saveConfigAndRestart"
         />
       </div>
@@ -69,9 +69,14 @@
         </v-tooltip>
       </div>
 
-      <div
-        v-if="authenticated && socketConnected && topNavPowerToggle"
-      >
+      <div v-if="authenticated && socketConnected && showUploadAndPrint">
+        <app-upload-and-print-btn
+          :disabled="printerPrinting || printerPaused"
+          @upload="handleUploadAndPrint"
+        />
+      </div>
+
+      <div v-if="authenticated && socketConnected && topNavPowerToggle">
         <v-tooltip bottom>
           <template #activator="{ on, attrs }">
             <app-btn
@@ -178,19 +183,22 @@ import { Component, Mixins } from 'vue-property-decorator'
 import UserPasswordDialog from '@/components/settings/auth/UserPasswordDialog.vue'
 import PendingChangesDialog from '@/components/settings/PendingChangesDialog.vue'
 import AppSaveConfigAndRestartBtn from './AppSaveConfigAndRestartBtn.vue'
+import AppUploadAndPrintBtn from './AppUploadAndPrintBtn.vue'
 import { defaultState } from '@/store/layout/state'
 import StateMixin from '@/mixins/state'
 import ServicesMixin from '@/mixins/services'
+import FilesMixin from '@/mixins/files'
 import { SocketActions } from '@/api/socketActions'
 
 @Component({
   components: {
     UserPasswordDialog,
     PendingChangesDialog,
-    AppSaveConfigAndRestartBtn
+    AppSaveConfigAndRestartBtn,
+    AppUploadAndPrintBtn
   }
 })
-export default class AppBar extends Mixins(StateMixin, ServicesMixin) {
+export default class AppBar extends Mixins(StateMixin, ServicesMixin, FilesMixin) {
   menu = false
   userPasswordDialogOpen = false
   pendingChangesDialogOpen = false
@@ -239,6 +247,10 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin) {
     return this.$store.state.config.uiSettings.general.showSaveConfigAndRestart
   }
 
+  get showUploadAndPrint (): boolean {
+    return this.$store.state.config.uiSettings.general.showUploadAndPrint
+  }
+
   get topNavPowerToggle () {
     const topNavPowerToggle = this.$store.state.config.uiSettings.general.topNavPowerToggle as string | null
 
@@ -371,6 +383,10 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin) {
     }
   }
 
+  handleUploadAndPrint (file: File) {
+    this.uploadFile(file, '/', 'gcodes', true)
+  }
+
   saveConfigAndRestart (force = false) {
     if (!force) {
       const confirmOnSaveConfigAndRestart = this.$store.state.config.uiSettings.general.confirmOnSaveConfigAndRestart

src/components/layout/AppUploadAndPrintBtn.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <v-tooltip bottom>
+      <template #activator="{ on, attrs }">
+        <app-btn
+          fab
+          small
+          :elevation="0"
+          class="mr-1 bg-transparent"
+          color="transparent"
+          :disabled="disabled"
+          v-bind="attrs"
+          v-on="on"
+          @click="uploadFile.click()"
+        >
+          <v-icon>
+            $fileUpload
+          </v-icon>
+        </app-btn>
+      </template>
+      <span>{{ $t('app.general.label.upload_and_print') }}</span>
+    </v-tooltip>
+
+    <input
+      ref="uploadFile"
+      type="file"
+      :accept="accepts"
+      style="display: none"
+      @change="fileChanged"
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
+
+@Component({})
+export default class AppUploadAndPrintBtn extends Vue {
+  @Prop({ type: Boolean, default: false })
+  readonly disabled!: boolean
+
+  @Ref('uploadFile')
+  readonly uploadFile!: HTMLInputElement
+
+  get accepts () {
+    return this.$store.getters['files/getRootProperties']('gcodes').accepts.join(',')
+  }
+
+  fileChanged (e: Event) {
+    const target = e.target as HTMLInputElement
+
+    if (target?.files?.length === 1) {
+      this.$emit('upload', target.files[0])
+      target.value = ''
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .v-btn.v-btn--disabled.v-btn--has-bg.bg-transparent {
+    background: none !important;
+  }
+</style>

src/components/settings/GeneralSettings.vue

@@ -79,6 +79,19 @@
 
       <v-divider />
 
+      <app-setting
+        :title="$t('app.setting.label.show_upload_and_print')"
+      >
+        <v-switch
+          v-model="showUploadAndPrint"
+          hide-details
+          class="mb-5"
+          @click.native.stop
+        />
+      </app-setting>
+
+      <v-divider />
+
       <app-setting
         :title="$t('app.setting.label.power_toggle_in_top_nav')"
       >
@@ -303,6 +316,18 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     })
   }
 
+  get showUploadAndPrint () {
+    return this.$store.state.config.uiSettings.general.showUploadAndPrint
+  }
+
+  set showUploadAndPrint (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.showUploadAndPrint',
+      value,
+      server: true
+    })
+  }
+
   get confirmOnSaveConfigAndRestart () {
     return this.$store.state.config.uiSettings.general.confirmOnSaveConfigAndRestart
   }

src/locales/en.yaml

@@ -288,6 +288,7 @@ app:
       uncategorized: Uncategorized
       unretract_extra_length: Unretract Extra Length
       unretract_speed: Unretract Speed
+      upload_and_print: Upload and Print
       used: used
       username: Username
       variance: Variance
@@ -522,6 +523,7 @@ app:
       show_rate_of_change: Show temperature rate of change
       show_relative_humidity: Show relative humidity
       show_save_config_and_restart: Save Config and Restart button in top navigation
+      show_upload_and_print: Show Upload and Print button in top navigation
       solid: Solid
       starts_with: Starts with
       theme_preset: Community preset

src/store/config/state.ts

@@ -43,6 +43,7 @@ export const defaultState = (): ConfigState => {
         showRelativeHumidity: true,
         showBarometricPressure: true,
         showSaveConfigAndRestart: true,
+        showUploadAndPrint: true,
         flipConsoleLayout: false,
         cameraFullscreenAction: 'embed',
         topNavPowerToggle: null,

src/store/config/types.ts

@@ -66,6 +66,7 @@ export interface GeneralConfig {
   showRelativeHumidity: boolean;
   showBarometricPressure: boolean;
   showSaveConfigAndRestart: boolean;
+  showUploadAndPrint: boolean;
   flipConsoleLayout: boolean;
   cameraFullscreenAction: CameraFullscreenAction;
   topNavPowerToggle: null | string;