added max limit for macros

src/js/macros.js

@@ -15,6 +15,7 @@ module.exports = {
       deleteSelected: false,
       deleteGCode: false,
       edited: false,
+      maxLimitReached:false,
       newGcode: new Array(this.config.macros.length).fill(""),
     };
   },
@@ -196,7 +197,7 @@ module.exports = {
         console.error("Restore Failed: ", error);
         alert("Restore failed");
       }
-      console.log("tab in saveMacros:",this.tab);
+      console.log("tab in saveMacros:", this.tab);
       this.$set("tab", "1");
     },
     delete_current: async function () {
@@ -218,7 +219,7 @@ module.exports = {
         console.error("Restore Failed: ", error);
         alert("Restore failed");
       }
-      console.log("tab in delete_current:",this.tab);
+      console.log("tab in delete_current:", this.tab);
       this.$set("tab", "1");
       this.deleteGCode = false;
     },
@@ -283,7 +284,7 @@ module.exports = {
       ];
       this.delete_all_macros();
       this.cancelMacros();
-      console.log("tab in delete all:",this.tab);
+      console.log("tab in delete all:", this.tab);
       this.$set("tab", "1");
       this.confirmReset = false;
       try {
@@ -313,6 +314,10 @@ module.exports = {
     },
     addNewMacros: async function () {
       const length = this.config.macros.length;
+      if (length >= 30) {
+        this.maxLimitReached = true;
+        return;
+      }
       const newMacros = {
         name: `Macros ${length + 1}`,
         color: "#dedede",

src/pug/templates/macros.pug

@@ -37,6 +37,12 @@ script#macros-template(type="text/x-template")
             .fa.fa-trash
             |  Yes
 
+    message(:show.sync="maxLimitReached")
+        h3(slot="header") Delete Selected Macros?
+        p(slot="body")
+        div(slot="footer")
+          button.pure-button.button-secondary(@click="maxLimitReached = false") OK
+
     h1 Macros Configuration
     .flex-row-container
         button.blue-button(title="Reset Macros", @click="confirmReset=true") Delete All

src/stylus/style.styl

@@ -689,10 +689,35 @@ span.unit
       display none
       clear both
 
-    > input:checked ~ section
-      display none
-    
-    > input:checked ~ label + label ~ section
+    > #tab1:checked ~ #content1,
+    > #tab2:checked ~ #content2,
+    > #tab3:checked ~ #content3,
+    > #tab4:checked ~ #content4,
+    > #tab5:checked ~ #content5,
+    > #tab6:checked ~ #content6,
+    > #tab7:checked ~ #content7,
+    > #tab8:checked ~ #content8,
+    > #tab9:checked ~ #content9,
+    > #tab10:checked ~ #content10,
+    > #tab11:checked ~ #content11,
+    > #tab12:checked ~ #content12,
+    > #tab13:checked ~ #content13,
+    > #tab14:checked ~ #content14,
+    > #tab15:checked ~ #content15,
+    > #tab16:checked ~ #content16,
+    > #tab17:checked ~ #content17,
+    > #tab18:checked ~ #content18,
+    > #tab19:checked ~ #content19,
+    > #tab21:checked ~ #content21,
+    > #tab22:checked ~ #content22,
+    > #tab23:checked ~ #content23,
+    > #tab24:checked ~ #content24,
+    > #tab25:checked ~ #content25,
+    > #tab26:checked ~ #content26,
+    > #tab27:checked ~ #content27,
+    > #tab28:checked ~ #content28,
+    > #tab29:checked ~ #content29,
+    > #tab30:checked ~ #content30,
       display block
 
     [id^="tab"]:checked + label