trying an textarea to get new input

src/js/macros.js

@@ -12,6 +12,7 @@ module.exports = {
       tab: "1",
       confirmReset: false,
       confirmSave: false,
+      newGcode: "",
     };
   },
   components: {
@@ -33,6 +34,11 @@ module.exports = {
     },
   },
   methods: {
+    updateNewGcode(event) {
+      console.log(event)
+      this.newGcode = event.target.value;
+      console.log(this.newGcode);
+    },
     open: function () {
       utils.clickFileInput("gcode-file-input");
     },
@@ -41,15 +47,20 @@ module.exports = {
       const file = this.state.selected;
       this.$broadcast("gcode-load", file);
       this.$broadcast("gcode-line", this.state.line);
+      this.newGCode = "";
     },
     upload: function (e) {
       const files = e.target.files || e.dataTransfer.files;
+      console.log(e);
+      console.log(files);
       if (!files.length) {
         return;
       }
 
       const file = files[0];
+      console.log(file)
       const extension = file.name.split(".").pop();
+      console.log(extension)
       switch (extension.toLowerCase()) {
         case "nc":
         case "ngc":
@@ -115,7 +126,7 @@ module.exports = {
           gcode_file_time: 0,
         },
         {
-          name: "Park",
+          name: "Perk",
           color: "#e6e6e6",
           gcode_file_name: " ",
           gcode_file_time: 0,

src/pug/templates/macros.pug

@@ -75,7 +75,9 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
-                        gcode-viewer
+                        .gcodeContainer
+                                textarea.new-gcode( v-if="state.selected=='default",:value='newGcode' @input="updateNewGcode")
+                                gcode-viewer(v-if="state.selected !== 'default'")
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
                         button.submit-macros(title="Cancel Macros",@click="cancelMacros",
@@ -103,6 +105,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
@@ -131,6 +134,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
@@ -159,6 +163,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
@@ -187,6 +192,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
@@ -215,6 +221,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
@@ -243,6 +250,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 
@@ -271,6 +279,7 @@ script#macros-template(type="text/x-template")
                                         input(type="file", @change="upload", :disabled="!is_ready",
                                         accept=".nc,.ngc,.gcode,.gc")
                         br
+                        .gcodeContainer
                                 gcode-viewer
                         button.submit-macros(title="Save Macros",@click="confirmSave=true",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border:0;margin-top:30px") Save 

src/stylus/style.styl

@@ -631,10 +631,21 @@ span.unit
     border 0
     color #fff
 
-.macros
+#macros
-  width 90%
+  width 104%
 
-.warning-box
+  .gcodeContainer
+    width 25rem
+    height 15rem
+    border-width 1px
+    border-radius 10px
+    border-color #424242
+    border-style solid
+  
+  .new-gcode
+    display flex
+
+  .warning-box
     display flex
     background-color #F3FF00
     border-radius 5px
@@ -644,13 +655,19 @@ span.unit
     align-items center
     justify-content center
 
-.select-upload-gcode 
+  .select-upload-gcode 
     display flex
     flex-direction row
 
-.tabs
+  .tabs
     margin-top 5px
-  width 51.8rem
+
+  .macros-view
+    padding 30px
+    width 95%
+
+  .macros-form
+    padding-left 30px
 
   .submit-macros
     height 50px
@@ -1085,14 +1102,6 @@ tt.save
 .pure-form-aligned .pure-control-group label.extra
     width 8em
   
-.macros-view
-  padding 30px
-  width 95%
-
-  .macros-form
-    padding 30px
-
-  
   input.input-name
     width 300px
     height 40px