browse through history

src/components/console.vue

@@ -1,10 +1,13 @@
 <template>
   <div @click="focusInput()" class="console" ref="console">
     <div class="content">
-      <div @keypress.enter="displayCommand();" class="group" v-for="(group, index) in history" :key="group">
+      <div class="group" v-for="(group, index) in history" :key="group">
         <pre><span class="host">{{group.host}}</span><span
             v-if="index !== history.length-1">{{group.command}}</span><input
-            v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre>
+            v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"
+            @keydown.enter.exact="displayCommand();"
+            @keydown.up="group.command = getPreviousCommand(index);"
+            @keydown.down="group.command = getNextCommand(index);"></pre>
         <pre v-if="group.output.length"><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
       </div>
     </div>
@@ -23,7 +26,7 @@ export default {
         command: "welcome --help",
         output: []
       }],
-      currentInput: ""
+      currentHistoryPoint: undefined
     }
   },
   methods:{
@@ -45,6 +48,17 @@ export default {
           this.scrollToBottom();
         }, group.delay)
       })
+      this.currentHistoryPoint = undefined;
+    },
+    getPreviousCommand(index){
+      if (this.currentHistoryPoint === undefined) this.currentHistoryPoint = index;
+      if (this.currentHistoryPoint > 0) this.currentHistoryPoint--;
+      return this.history[this.currentHistoryPoint].command;
+    },
+    getNextCommand(index){
+      if (this.currentHistoryPoint === undefined) this.currentHistoryPoint = index;
+      if (this.currentHistoryPoint < this.history.length-1) this.currentHistoryPoint++;
+      return this.history[this.currentHistoryPoint].command;
     },
     focusInput(){
       this.$nextTick(() => this.$refs.consoleInput.focus());