refactor: cleanup sliders

src/components/inputs/InputSlider.vue

@@ -120,7 +120,14 @@ export default class InputSlider extends Mixins(UtilsMixin) {
     this.newValue = val
   }
 
-  newValue = 0
+  // TODO: Figure out a better solution here.
+  // Vuetify sets the field invalid for a split second
+  // until this is updated on mount. So, until we can
+  // figure out a better workaround - setting this value
+  // to something we think will pass validation initially
+  // for most use cases will avoid the flashing of this
+  // control from invalid to valid.
+  newValue = 50
   valid = true
 
   get form (): VForm {
@@ -143,16 +150,16 @@ export default class InputSlider extends Mixins(UtilsMixin) {
     this.newValue = val
     this.$nextTick(() => {
       if (this.form.validate()) {
-        this.$emit('input', val)
+        if (val !== this.value) this.$emit('input', val)
       } else {
         this.newValue = this.value
       }
     })
   }
 
-  emitChange (val: number, old: number) {
+  emitChange (val: number) {
     if (this.valid) {
-      if (val !== old) this.$emit('input', val)
+      if (val !== this.value) this.$emit('input', val)
     } else {
       this.newValue = this.value
     }

src/components/widgets/FanWidget.vue

@@ -50,14 +50,13 @@ export default class FanWidget extends Mixins(UtilsMixin) {
 
   get offBelow () {
     const config = this.$store.getters['socket/getPrinterSettings'](this.fan.name) || {}
-    const offBelow = config.off_below || 0
-    return offBelow * 100
+    return config.off_below * 100 || 0
   }
 
   rules = [
-    (v: string) => {
+    (v: number) => {
       if (this.offBelow <= 0) return true
-      return (parseInt(v) >= this.offBelow || parseInt(v) === 0) || 'min error'
+      return (v >= this.offBelow || v === 0) || 'min error'
     }
   ]
 }

src/components/widgets/SpeedAndFlowAdjustWidget.vue

@@ -6,27 +6,23 @@
         label="Speed"
         value-suffix="%"
         input-xs
-        :value="speed"
-        :disabled="!klippyConnected"
-        :loading="hasWait(waits.onSetSpeed)"
+        v-model.number="speed"
+        :disabled="!klippyConnected || hasWait(waits.onSetSpeed)"
         :min="1"
         :max="200"
-        :rules="rules"
-        @input="setSpeed($event, waits.onSetSpeed)">
+        :rules="rules">
       </input-slider>
     </v-col>
     <v-col cols="12" sm="6">
       <input-slider
         label="Flow"
         value-suffix="%"
         input-xs
-        :value="flow"
-        :disabled="!klippyConnected"
-        :loading="hasWait(waits.onSetFlow)"
+        v-model.number="flow"
+        :disabled="!klippyConnected || hasWait(waits.onSetFlow)"
         :min="1"
         :max="200"
-        :rules="rules"
-        @input="setFlow($event, waits.onSetFlow)">
+        :rules="rules">
       </input-slider>
     </v-col>
   </v-row>
@@ -47,28 +43,24 @@ export default class SpeedAndFlowAdjustWidget extends Mixins(UtilsMixin) {
   waits = Waits
 
   rules = [
-    (v: string) => {
-      return (parseInt(v) >= 1) || 'min 1'
-    },
-    (v: string) => {
-      return (parseInt(v) <= 200) || 'max 200'
-    }
+    (v: number) => (v >= 1) || 'min 1',
+    (v: number) => (v <= 200) || 'max 200'
   ]
 
   get flow () {
-    return this.$store.state.socket.printer.gcode_move.extrude_factor * 100
+    return this.$store.state.socket.printer.gcode_move.extrude_factor * 100 || 100
   }
 
-  get speed () {
-    return this.$store.state.socket.printer.gcode_move.speed_factor * 100
+  set flow (val: number) {
+    this.sendGcode('M221 S' + val, this.waits.onSetFlow)
   }
 
-  setSpeed (speed: number, wait?: string) {
-    this.sendGcode('M220 S' + speed, wait)
+  get speed () {
+    return this.$store.state.socket.printer.gcode_move.speed_factor * 100 || 100
   }
 
-  setFlow (flow: number, wait?: string) {
-    this.sendGcode('M221 S' + flow, wait)
+  set speed (val: number) {
+    this.sendGcode('M220 S' + val, this.waits.onSetSpeed)
   }
 }
 </script>

src/store/socket/getters.ts

@@ -3,7 +3,7 @@ import { GetterTree } from 'vuex'
 import { Heater, Fan, OutputPin, SocketState, TimeEstimates, Sensor, Chart, ChartDataSet, RunoutSensor, BedMesh, Endstops } from './types'
 import { Thumbnail } from '@/store/files/types'
 import { RootState } from '../types'
-import { Globals, chartConfiguration } from '@/globals'
+import { chartConfiguration } from '@/globals'
 import { TinyColor } from '@ctrl/tinycolor'
 import { get, isFinite } from 'lodash-es'
 import { getThumb } from '../helpers'