trying index

src/js/control-view.js

@@ -280,10 +280,6 @@ module.exports = {
       this.$dispatch("send", msg);
     },
 
-    getMacros: function(){
-      return this.config.macros;
-    },
-
     load: function () {
       const file_time = this.state.selected_time;
       const file = this.state.selected;

src/js/macros.js

@@ -9,7 +9,7 @@ module.exports = {
 
   data: function () {
     return {
-      tab: "0",
+      tab: "1",
       confirmReset: false,
       confirmSave: false,
       deleteGCode: false,
@@ -40,9 +40,6 @@ module.exports = {
     macrosList: function () {
       return this.config.macrosList.map(el => el.file_name);
     },
-    getMacros: function(){
-      return this.config.macros;
-    },
     getMacrosColor: function () {
       return this.config.macros[this.tab]["color"];
     },
@@ -64,9 +61,9 @@ module.exports = {
         const response = await fetch(`/api/file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${file}`, {
           cache: "no-cache",
         });
-        console.log('response: ',response);
+        console.log("response status: ", response.status);
         const text = (await response.text()).split(" ").join("\n");
-        console.log('text: ',text);
+        console.log("text: ", text);
         this.$set("newGcode[this.tab]", text);
       } else {
         this.$set("newGcode[this.tab]", "");
@@ -171,8 +168,7 @@ module.exports = {
       console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time);
       console.log("selectedValues: ", this.selectedValues[this.tab]);
 
-      var file_name =
-        this.selectedValues[this.tab] == "default" ? macrosName + ".ngc" : this.selectedValues[this.tab];
+      var file_name = this.selectedValues[this.tab] == "default" ? macrosName + ".ngc" : this.selectedValues[this.tab];
       var file = this.newGcode[this.tab];
 
       this.uploadGCode(file_name, file);
@@ -310,6 +306,8 @@ module.exports = {
         color: "#dedede",
         file_name: "",
       };
+      this.newGcode.push("");
+      this.selectedValues.push("default");
       this.config.macros.push(newMacros);
       try {
         await api.put("config/save", this.config);

src/pug/templates/control-view.pug

@@ -216,7 +216,7 @@ script#control-view-template(type="text/x-template")
                       .bar(:style="'width:' + (progress || 0) * 100 + '%'")
 
     .macros-div(class="present")
-       button.macros-button(title="Click to run Macros",v-for="(index,macros) in getMacros",
+       button.macros-button(title="Click to run Macros",v-for="(index,macros) in config.macros",
           @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
 
     .tabs

src/pug/templates/macros.pug

@@ -30,17 +30,15 @@ script#macros-template(type="text/x-template")
 
     h1 Macros Configuration
     .flex-row-container
-        button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros
-                .fa.fa-rotate-right
-        button.config-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") Add a Macros
-                .fa.fa-plus
+        button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All
+        button.config-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
 
     .tabs
-        template(v-for="(index,macros) in getMacros",:key="index")
-                input(type="radio",:id="'tab'+index", name="tabs",@click="tab = index.toString()")
-                label(:for="'tab'+index",style="height:50px;width:100px") Macros {{index+1}}
+        template(v-for="(index,macros) in config.macros",:key="index+1")
+                input(type="radio",:id="'tab'+(index+1)", name="tabs",@click="tab = (index+1).toString()")
+                label(:for="'tab'+(index+1)",style="height:50px;width:100px") Macros {{index+1}}
 
-        section.tab-content(v-for="(index,macros) in config.macros",:id="'content'+index")
+        section.tab-content(v-for="(index,macros) in config.macros",:id="'content'+(index+1)")
                 .macros-form
                         p.title Name
                         .input-container

src/stylus/style.styl

@@ -652,9 +652,9 @@ span.unit
     border-style solid
 
   .config-button
-    height 50px
+    height 45px
     margin-bottom 1rem
-    width 190px 
+    width 120px 
     border-radius 2px
     border 0
     font-weight normal