feat: allow input values for sliders

fluidd-core · Jan 14, 2021 · 7a1c63d · 7a1c63d
1 parent 5a2d4df
commit 7a1c63d
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 50 deletions.
diff --git a/src/components/cards/dashboard/OutputsCard.vue b/src/components/cards/dashboard/OutputsCard.vue
@@ -0,0 +1,46 @@
+<template>
+  <collapsable-card
+    title="Fans / Outputs"
+    icon="$printer3dNozzle"
+    :draggable="true"
+    :inLayout="inLayout"
+    :enabled="enabled"
+    menu-breakpoint="lg"
+    @enabled="$emit('enabled', $event)">
+
+    <v-card-text>
+      <v-row justify="space-between">
+        <v-col cols="6">
+          <fans-widget></fans-widget>
+        </v-col>
+
+        <v-col cols="6">
+          <output-pins-widget></output-pins-widget>
+        </v-col>
+      </v-row>
+    </v-card-text>
+
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import UtilsMixin from '@/mixins/utils'
+import FansWidget from '@/components/widgets/FansWidget.vue'
+import OutputPinsWidget from '@/components/widgets/OutputPinsWidget.vue'
+
+@Component({
+  components: {
+    FansWidget,
+    OutputPinsWidget
+  }
+})
+export default class OutputsCard extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, default: true })
+  enabled!: boolean
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
+}
+</script>
diff --git a/src/components/inputs/InputTemperature.vue b/src/components/inputs/InputTemperature.vue
@@ -1,9 +1,9 @@
 <template>
   <v-text-field
-    solo
+    outlined
+    single-line
     dense
     hide-details="auto"
-    :height="36"
     :value="value"
     :loading="loading"
     :rules="[rules.max, rules.min]"
@@ -80,5 +80,13 @@ export default class InputTemperature extends Mixins(UtilsMixin) {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+  ::v-deep input {
+    // text-align: right;
+    padding: 0;
+  }
+
+  ::v-deep .v-input__slot {
+    min-height: 36px !important;
+  }
 </style>
diff --git a/src/components/inputs/inputConsoleCommand.vue b/src/components/inputs/inputConsoleCommand.vue
@@ -6,7 +6,8 @@
     :items="history"
     class="ma-4"
     clearable
-    solo
+    outlined
+    single-line
     dense
     hide-details
     placeholder="type 'help' for available commands"
@@ -32,7 +33,7 @@ export default class InputConsoleCommand extends Vue {
   @Watch('value')
   onValueChange (val: string) {
     if (val) {
-      this.newValue = val.toUpperCase()
+      this.newValue = val
       const input = this.$refs.input as HTMLElement
       input.focus()
     } else {

diff --git a/src/components/widgets/ExtruderMovesWidget.vue b/src/components/widgets/ExtruderMovesWidget.vue
@@ -27,21 +27,23 @@
         v-model="extrudeLength"
         :disabled="!klippyConnected"
         @focus="$event.target.select()"
-        solo
+        outlined
         dense
         hide-details
+        single-line
         label="Extrude Length"
         type="number"
         suffix="mm"
-        class="mb-1">
+        class="mb-2">
       </v-text-field>
       <v-text-field
         v-model="extrudeSpeed"
         :disabled="!klippyConnected"
         @focus="$event.target.select()"
-        solo
+        outlined
         dense
         hide-details
+        single-line
         label="Extrude Speed"
         suffix="mm/s"
         class="">
@@ -88,5 +90,13 @@ export default class ToolheadMovesWidget extends Mixins(UtilsMixin) {
 }
 </script>
 
-<style type="scss" scoped>
+<style scoped lang="scss">
+  ::v-deep input {
+    // text-align: right;
+    padding: 0;
+  }
+
+  ::v-deep .v-input__slot {
+    min-height: 36px !important;
+  }
 </style>
diff --git a/src/components/widgets/FansWidget.vue b/src/components/widgets/FansWidget.vue
@@ -1,11 +1,12 @@
 <template>
   <!-- Fans -->
-  <v-row no-gutters class="mb-4">
+  <div>
+  <v-row>
     <v-col class="">
       <div v-for="(fan, i) in fans" :key="i">
         <input-slider
-          :label="fan.prettyName"
           value-suffix="%"
+          :label="fan.prettyName"
           :value="fan.speed * 100"
           :rules="rules"
           :disabled="!klippyConnected"
@@ -16,6 +17,7 @@
       </div>
     </v-col>
   </v-row>
+  </div>
 </template>
 
 <script lang="ts">
@@ -32,7 +34,7 @@ import { Fan } from '@/store/socket/types'
 })
 export default class FansWidget extends Mixins(UtilsMixin) {
   get fans () {
-    return this.$store.getters['socket/getFans']()
+    return this.$store.getters['socket/getToolHeadFans']
   }
 
   get partFanSpeed () {

diff --git a/src/components/widgets/SpeedAndFlowAdjustWidget.vue b/src/components/widgets/SpeedAndFlowAdjustWidget.vue
@@ -1,30 +1,31 @@
 <template>
-  <div>
-    <!-- Speed and Flow Adjust -->
-    <input-slider
-      label="Speed"
-      value-suffix="%"
-      :value="speed"
-      :disabled="!klippyConnected"
-      :loading="hasWait(waits.onSetSpeed)"
-      :min="0"
-      :max="200"
-      @input="setSpeed($event, waits.onSetSpeed)">
-    </input-slider>
-
-    <v-divider class="my-2"></v-divider>
-
-    <input-slider
-      label="Flow"
-      value-suffix="%"
-      :value="flow"
-      :disabled="!klippyConnected"
-      :loading="hasWait(waits.onSetFlow)"
-      :min="0"
-      :max="200"
-      @input="setFlow($event, waits.onSetFlow)">
-    </input-slider>
-  </div>
+  <v-row>
+    <v-col cols="12" sm="6">
+      <!-- Speed and Flow Adjust -->
+      <input-slider
+        label="Speed"
+        value-suffix="%"
+        :value="speed"
+        :disabled="!klippyConnected"
+        :loading="hasWait(waits.onSetSpeed)"
+        :min="0"
+        :max="200"
+        @input="setSpeed($event, waits.onSetSpeed)">
+      </input-slider>
+    </v-col>
+    <v-col cols="12" sm="6">
+      <input-slider
+        label="Flow"
+        value-suffix="%"
+        :value="flow"
+        :disabled="!klippyConnected"
+        :loading="hasWait(waits.onSetFlow)"
+        :min="0"
+        :max="200"
+        @input="setFlow($event, waits.onSetFlow)">
+      </input-slider>
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="ts">

diff --git a/src/components/widgets/TemperatureTargetsWidget.vue b/src/components/widgets/TemperatureTargetsWidget.vue
@@ -142,7 +142,7 @@ export default class TemperatureTargetsWidget extends Mixins(UtilsMixin) {
   }
 
   get fans () {
-    return this.$store.getters['socket/getFans']()
+    return this.$store.getters['socket/getFans']
   }
 
   get sensors () {

diff --git a/src/components/widgets/ToolheadWidget.vue b/src/components/widgets/ToolheadWidget.vue
@@ -13,16 +13,8 @@
       </v-col>
     </v-row>
 
-    <v-row>
-      <v-col cols="12" sm="6">
-        <!-- Part cooling -->
-        <fans-widget></fans-widget>
-      </v-col>
-      <v-col cols="12" sm="6">
-        <!-- Speed and Flow Adjustments  -->
-        <speed-and-flow-adjust-widget></speed-and-flow-adjust-widget>
-      </v-col>
-    </v-row>
+    <!-- Speed and Flow Adjustments  -->
+    <speed-and-flow-adjust-widget></speed-and-flow-adjust-widget>
   </v-card-text>
 </template>
 
@@ -35,6 +27,7 @@ import ToolheadPositionWidget from '@/components/widgets/ToolheadPositionWidget.
 import ZHeightAdjustWidget from '@/components/widgets/ZHeightAdjustWidget.vue'
 import SpeedAndFlowAdjustWidget from '@/components/widgets/SpeedAndFlowAdjustWidget.vue'
 import FansWidget from '@/components/widgets/FansWidget.vue'
+// import OutputPinsWidget from '@/components/widgets/OutputPinsWidget.vue'
 
 @Component({
   components: {
@@ -44,6 +37,7 @@ import FansWidget from '@/components/widgets/FansWidget.vue'
     ZHeightAdjustWidget,
     SpeedAndFlowAdjustWidget,
     FansWidget
+    // OutputPinsWidget
   }
 })
 export default class ToolheadWidget extends Mixins(UtilsMixin) {}

diff --git a/src/store/config/index.ts b/src/store/config/index.ts
@@ -16,6 +16,7 @@ export const defaultState = (): ConfigState => {
     cardLayout: {
       dashboard1: [
         { name: 'toolhead-card', enabled: true },
+        { name: 'outputs-card', enabled: true },
         { name: 'camera-card', enabled: true },
         { name: 'printer-limits-card', enabled: true }
       ],

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -44,6 +44,7 @@ import TemperatureGraphCard from '@/components/cards/dashboard/TemperatureGraphC
 import CameraCard from '@/components/cards/dashboard/CameraCard.vue'
 import MacrosCard from '@/components/cards/dashboard/MacrosCard.vue'
 import ConsoleCard from '@/components/cards/dashboard/ConsoleCard.vue'
+import OutputsCard from '@/components/cards/dashboard/OutputsCard.vue'
 import PrinterLimitsCard from '@/components/cards/dashboard/PrinterLimitsCard.vue'
 import KlippyDisconnectedCard from '@/components/cards/KlippyDisconnectedCard.vue'
 import UtilsMixin from '@/mixins/utils'
@@ -62,7 +63,8 @@ import { cloneDeep } from 'lodash-es'
     CameraCard,
     PrinterLimitsCard,
     KlippyDisconnectedCard,
-    ConsoleCard
+    ConsoleCard,
+    OutputsCard
   }
 })
 export default class Dashboard extends Mixins(UtilsMixin) {