trying to check initial macros and cannote delete it

src/js/macros.js

@@ -15,7 +15,7 @@ module.exports = {
       deleteSelected: false,
       deleteGCode: false,
       edited: false,
-      newGcode: ["", "", "", "", "", "", "", ""],
+      newGcode: new Array(this.config.macros.length).fill(""),
     };
   },
   events: {
@@ -38,7 +38,7 @@ module.exports = {
       return this.mach_state == "READY";
     },
     macrosLength: function () {
-      return this.config.macros.length > 0;
+      return this.config.macros.length > 1;
     },
     macrosList: function () {
       return this.config.macrosList.map(el => el.file_name);
@@ -168,8 +168,8 @@ module.exports = {
       }
     },
     saveMacros: async function () {
-      var macrosName = document.getElementById(`macros-name-${this.tab}`).value;
+      var macrosName = document.getElementById(`macros-name-${this.tab - 1}`).value;
-      var macrosColor = document.getElementById(`macros-color-${this.tab}`).value;
+      var macrosColor = document.getElementById(`macros-color-${this.tab - 1}`).value;
 
       console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time);
       console.log("selectedValues: ", this.config.macros[this.tab - 1].file_name);
@@ -293,6 +293,7 @@ module.exports = {
     },
     printConfig: function () {
       console.log(this.config);
+      console.log(this.newGcode);
     },
     resetMacrosList: async function () {
       this.config.macrosList = [];
@@ -330,6 +331,7 @@ module.exports = {
         console.error("Restore Failed: ", error);
         alert("Restore failed");
       }
+      this.deleteSelected = false;
     },
   },
 };

src/pug/templates/macros.pug

@@ -39,14 +39,17 @@ script#macros-template(type="text/x-template")
 
     h1 Macros Configuration
     .flex-row-container
-        button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All
+        button.blue-button(title="Reset Macros", @click="confirmReset=true") Delete All
-        button.config-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
+        button.blue-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
-        button.config-button(title="Add a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
+        button.blue-button(title="Add a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
 
     .tabs
-        template(v-for="(index,macros) in config.macros",:key="index+1")
+        input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'")
-                input(type="radio",:id="'tab'+(index+1)", name="tabs",@click="tab = (index+1).toString()")
+        label(for="tab1",style="height:50px;width:100px") Macros 1
-                label(:for="'tab'+(index+1)",style="height:50px;width:100px") Macros {{index+1}}
+
+        template(v-for="(index,macros) in config.macros.slice(1)",:key="index+2")
+                input(type="radio",:id="'tab'+(index+2)", name="tabs",@click="tab = (index+2).toString()")
+                label(:for="'tab'+(index+2)",style="height:50px;width:100px") Macros {{index+2}}
 
         section.tab-content(v-for="(index,macros) in config.macros",:id="'content'+(index+1)")
                 .macros-form

src/stylus/style.styl

@@ -651,19 +651,6 @@ span.unit
     border-color #424242
     border-style solid
     
-  .config-button
-    height 45px
-    margin-bottom 1rem
-    width 135px 
-    border-radius 2px
-    border 0
-    font-weight normal
-    color #fff 
-    background-color #0078e7
-    display flex 
-    align-items center 
-    justify-content space-around
-  
   .new-gcode
     height 13rem
     width 23rem
@@ -673,6 +660,7 @@ span.unit
   .flex-row-container
     display flex
     flex-direction row
+    margin-bottom 1rem
 
   .tabs
     margin-top 5px
@@ -686,9 +674,9 @@ span.unit
   
   .blue-button
     height 40px 
-    width 130px
+    width 135px
     font-weight normal
-    border-radius 5px 
+    border-radius 3px 
     border 0
     margin-left 1rem
     background-color #0078e7