enable console input

.eslintrc.js

@@ -30,10 +30,6 @@ module.exports = {
         "quotes": [
             "error",
             "double"
-        ],
-        "semi": [
-            "error",
-            "never"
         ]
     }
 }

src/components/console.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="console">
-    <div class="group" v-for="group in history" :key="group">
+    <div @keypress.enter="execCommand()" class="group" v-for="(group, index) in history" :key="group">
-      <pre><span class="host">{{group.host}}</span><span>{{group.command}}</span></pre>
+      <pre><span class="host">{{group.host}}</span><span
+          v-if="index !== history.length-1">{{group.command}}</span><input v-else v-model="group.command" type="text"></pre>
       <pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
     </div>
   </div>
@@ -9,25 +10,17 @@
 
 <script>
 import commands from "@/render-commands.js"
-
+commands.methods.renderCommand()
 export default {
   name: "console",
   data(){
     return{
-      console:{
+      history:commands.data().history
-      },
+    }
-      history:[
+  },
-        {
+  methods:{
-          host: "[cybre.town]$ > ",
+    execCommand(){
-          command: "welcome --help",
+      commands.methods.renderCommand()
-          output: commands.data().commands.welcome.output
-        },
-        {
-          host: "[cybre.town]$ > ",
-          command: "_",
-          output: []
-        }
-      ]
     }
   }
 }
@@ -45,6 +38,14 @@ export default {
       .white{color: #fff}
       .green{color: #44dd88;}
       .blue{color: #0081b1;}
+      input{
+        background-color: #0000;
+        border: 0;
+        margin: 0;
+        padding: 0;
+        color: #fff;
+        font: inherit;
+      }
     }
   }
 </style>

src/render-commands.js

@@ -1,5 +1,6 @@
-let commands = {
+let commands = [
-  welcome:{
+  {
+    name: "welcome",
     output:[
       {
         color: "white",
@@ -15,10 +16,10 @@ let commands = {
           " / ___\\/\\ \\/\\ \\\\ \\  __ \\/\\  __\\/ __ \\   \\ \\ \\/  / __ \\/\\ \\/\\ \\/\\ \\/\\  __ \\\n" +
           "/\\ \\__/\\ \\ \\_\\ \\\\ \\ \\_\\ \\ \\ \\_/\\  __/  __\\ \\ \\_/\\ \\_\\ \\ \\ \\_\\ \\_\\ \\ \\ \\/\\ \\\n" +
           "\\ \\____\\\\ \\____ \\\\ \\____/\\ \\_\\\\ \\____\\/\\_\\\\ \\__\\ \\____/\\ \\________/\\ \\_\\ \\_\\\n" +
-          " \\/____/ \\/___/  \\\\/___/  \\/_/ \\/____/\\/_/ \\/__/\\/___/  \\/_______/  \\/_/\\/_/\n" +
+          " \\/____/ \\/___/\\ \\\\/___/  \\/_/ \\/____/\\/_/ \\/__/\\/___/  \\/_______/  \\/_/\\/_/\n" +
           "            /\\___/\n" +
           "            \\/__/                                                   @adb.sh\n\n",
-        delay: 100
+        delay: 200
       },
       {
         color: "white",
@@ -31,16 +32,43 @@ let commands = {
           "    - Etherpad   > ether\n" +
           "    - short url  > surl\n" +
           "    - Jitsi      > meet\n",
-        delay: 100
+        delay: 300
       },
     ]
   }
-}
+]
+
+let history = [{
+  host: "[cybre.town]$ ",
+  command: "welcome --help",
+  output: []
+}]
 
 export default {
   data(){
     return {
-      commands:commands
+      commands,
+      history
+    }
+  },
+  methods:{
+    renderCommand(input){
+      if (input === undefined) input = history[history.length-1].command;
+      input = input.split(" ");
+      let command = commands.find((command) => command.name === input[0]);
+      command.output.forEach(group => {
+        /*setTimeout(() => {
+          history[history.length-1].output.push(group);
+        }, group.delay)*/
+        history[history.length-1].output.push(group);
+      })
+      history.push({
+        host: "[cybre.town]$ ",
+        command: "",
+        output: []
+      })
     }
   }
-}
+}
+
+//this.methods.renderCommand("welcome --help")