feat: console command history

Author: cadriel

src/components/inputs/inputConsoleCommand.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+  <v-text-field
+    :value="newValue"
+    @input="emitChange"
+    :items="history"
+    class="ma-4"
+    clearable
+    solo
+    dense
+    hide-details
+    placeholder="Send gcode"
+    append-outer-icon="mdi-send"
+    @click:append-outer="emitSend(newValue)"
+    @keyup.enter="emitSend(newValue)"
+    @keyup.up="historyUp()"
+    @keyup.down="historyDown()">
+  </v-text-field>
+  <!-- {{ originalHistory}}<br />
+  {{ history }} -->
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component({})
+export default class InputConsoleCommand extends Vue {
+  @Prop({ type: String, required: true })
+  public value!: string
+
+  newValue = ''
+  history: string[] = []
+  originalHistory: string[] = []
+  isFirst = true
+
+  mounted () {
+    this.newValue = this.value
+  }
+
+  emitChange (val: string) {
+    this.newValue = val
+    this.$emit('input', val)
+  }
+
+  emitSend (val: string) {
+    if (val && val.length > 0) {
+      this.newValue = ''
+      if (this.history.length >= 5) {
+        this.originalHistory.shift()
+      }
+      this.originalHistory.unshift(val)
+      this.history = Object.assign([], this.originalHistory)
+      this.isFirst = true
+      this.$emit('send', val)
+    }
+  }
+
+  historyUp () {
+    if (this.history.length >= 1) {
+      if (!this.isFirst) {
+        const f = this.history.shift() as string
+        this.history.push(f)
+      }
+      this.newValue = this.history[0]
+      this.isFirst = false
+    }
+  }
+
+  historyDown () {
+    if (this.history.length >= 1) {
+      if (!this.isFirst) {
+        const f = this.history.pop() as string
+        this.history.unshift(f)
+      }
+      this.newValue = this.history[0]
+      this.isFirst = false
+    }
+  }
+}
+</script>

src/components/widgets/ConsoleWidget.vue

@@ -3,7 +3,12 @@
       <v-card outlined color="#1c1c1c" class="console-container mb-3 pa-1" height="300">
         <span v-for="(item, index) in consoleItems" :key="index" v-html="item"></span>
       </v-card>
-      <v-text-field
+      <input-console-command
+        v-model="consoleCommand"
+        @send="sendCommand"
+      >
+      </input-console-command>
+      <!-- <v-text-field
         v-model="consoleCommand"
         :items="consoleHistory"
         class="ma-4"
@@ -14,7 +19,8 @@
         placeholder="Send gcode"
         append-outer-icon="mdi-send"
         @click:append-outer="sendCommand(consoleCommand)"
-        @keyup.enter="sendCommand(consoleCommand)"></v-text-field>
+        @keyup.enter="sendCommand(consoleCommand)">
+      </v-text-field> -->
       <!-- <v-virtual-scroll
         :bench="50"
         :items="consoleItems"
@@ -33,24 +39,22 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import UtilsMixin from '@/mixins/utils'
+import InputConsoleCommand from '@/components/inputs/inputConsoleCommand.vue'
 
-@Component({})
+@Component({
+  components: {
+    InputConsoleCommand
+  }
+})
 export default class ConsoleWidget extends Mixins(UtilsMixin) {
   get consoleItems () {
     return this.$store.state.socket.console
   }
 
   consoleCommand = ''
-  consoleHistory: string[] = []
 
-  sendCommand (command: string) {
-    // keep a history of 5 items.
+  sendCommand (command?: string) {
     if (command && command.length) {
-      this.consoleCommand = ''
-      if (this.consoleHistory.length >= 5) {
-        this.consoleHistory.shift()
-      }
-      this.consoleHistory.unshift(command)
       this.sendGcode(command)
     }
   }

src/components/widgets/TemperatureTargetsWidget.vue

@@ -122,13 +122,5 @@ export default class TemperatureTargetsWidget extends Mixins(UtilsMixin) {
   setFanTargetTemp (item: Fan, target: number) {
     this.sendGcode(`SET_TEMPERATURE_FAN_TARGET TEMPERATURE_FAN=${item.name} TARGET=${target}`)
   }
-
-  mounted () {
-    // setTimeout(() => {}, 3000)
-  }
 }
 </script>
-
-<style type="scss" scoped>
-
-</style>

src/store/helpers.ts

@@ -74,7 +74,7 @@ export const configureChartEntry = (key: string, val: {[key: string]: number },
   if ('target' in val) {
     r.target.y = val.target
   } else {
-    r.target.y = state.printer[key].target // this could be undefined, but i don't think the chart cares?
+    r.target.y = state.printer[key].target || 0 // sensors may not have targets
   }
 
   return r

todo.md

@@ -1,11 +1,14 @@
 # TODO [fluidd]
 
 ## Next Up
-- Config file list / editing
+- add min and max for sensors and probes
 - move to mdi svg icons, and reduce overall size
-- dynamic favicon that looks like the percent finished ring
-- impl quick print button
 - expand current print metadata (with bigger thumb?)
+- file / folder move
+- allow theme change dark / light
+- dynamic favicon that looks like the percent finished ring
+- firmware restart from config page
+- have config page visible on klippy disconnect (socket connect vs klippy connect)
 
 ## Known Bugs:
 - multi line gcodes not having a Send: prefix after the first line
@@ -14,14 +17,12 @@
   - the metadata load fails because the file is no longer there.
 
 ## General Improvements
-- draggable dashboard panels
-- allow contraction and expansion of dashboard panels
-- implement new console history
+- draggable dashboard panels?
+- allow contraction and expansion of dashboard panels?
 - add console.log wrapper for dev vs prod
-- add a throttle to temp updates, print timers, position trackers.
+- add a throttle to (socket notifications) temp updates, print timers, position trackers.
 - Performance / memory heap checks
 - add status of heater_fans (extruder fan and controller fan)
-- allow theme change dark / light
 - stick git version in the footer somewhere for klipper, moonraker and fluidd
 - filter out temp waits from console
 - cancel and pause really need a confirm dialog