fixing radio button, writing css for check

src/js/macros.js

@@ -38,7 +38,7 @@ module.exports = {
       return this.mach_state == "READY";
     },
     macrosLength: function () {
-      return this.config.macros.length > 1;
+      return this.config.macros.length > 8;
     },
     macrosList: function () {
       return this.config.macrosList.map(el => el.file_name);
@@ -196,6 +196,8 @@ module.exports = {
         console.error("Restore Failed: ", error);
         alert("Restore failed");
       }
+      console.log("tab in saveMacros:",this.tab);
+      this.$set("tab", "1");
     },
     delete_current: async function () {
       const filename = this.config.macros[this.tab - 1].file_name;
@@ -216,7 +218,8 @@ module.exports = {
         console.error("Restore Failed: ", error);
         alert("Restore failed");
       }
-      this.tab = "1";
+      console.log("tab in delete_current:",this.tab);
+      this.$set("tab", "1");
       this.deleteGCode = false;
     },
     delete_all_macros: async function () {
@@ -280,7 +283,8 @@ module.exports = {
       ];
       this.delete_all_macros();
       this.cancelMacros();
-      this.tab = "1";
+      console.log("tab in delete all:",this.tab);
+      this.$set("tab", "1");
       this.confirmReset = false;
       try {
         await api.put("config/save", this.config);

src/pug/templates/macros.pug

@@ -43,8 +43,8 @@ script#macros-template(type="text/x-template")
         button.blue-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
         // button.blue-button(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
 
-    .tabs
+    .macros-tabs
-        input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'")
+        input#tab1(type="radio", name="tabs",checked="", @click="tab = '1'")
         label(for="tab1",style="height:50px;width:100px") Macros 1
 
         template(v-for="(index,macros) in config.macros.slice(1)",:key="index+2")

src/stylus/style.styl

@@ -538,8 +538,6 @@ span.unit
           white-space nowrap
 
   .tabs
-    //  padding-top 10px
-
     section
       min-height 500px
       overflow-x hidden
@@ -626,11 +624,12 @@ span.unit
     justify-content flex-start
     margin 10px
     margin-left 50px
+    margin-right 50px
     margin-bottom 30px
 
   .macros-button
     height 60px
-    width 90px
+    width 115px
     font-weight normal
     border-radius 10px
     margin-left 1rem
@@ -666,6 +665,42 @@ span.unit
   .tabs
     margin-top 5px
     width 850px
+    clear both
+
+    > input
+      display none
+
+    > label
+      display block
+      float left
+      width 6em
+      font-weight bold
+      cursor pointer
+      text-decoration none
+      text-align center
+      background #f6f6f6
+      border-top-left-radius 5px
+      border-top-right-radius 5px
+      border-top 2px solid #f6f6f6
+      border-left 1px solid #f6f6f6
+      border-right 1px solid #f6f6f6
+      margin-right 2px
+
+    > section
+      display none
+      clear both
+
+    > input:checked ~ section
+      display block
+
+    [id^="tab"]:checked + label
+      background #fff
+      border-top 2px solid #ddd
+      border-left 1px solid #ddd
+      border-right 1px solid #ddd
+      border-bottom 1px solid #fff
+      margin-bottom -1px
+
 
 
   .macros-view