message box for buttons

src/js/macros.js

@@ -14,7 +14,9 @@ module.exports = {
       confirmSave: false,
       deleteSelected: false,
       deleteGCode: false,
+      sameName:false,
       edited: false,
+      addMacros:false,
       maxLimitReached: false,
       macrosName: "",
       fileName: "default",
@@ -186,9 +188,14 @@ module.exports = {
       }
     },
     saveMacros: async function () {
+      const macrosList = this.macrosList();
       var macrosName = document.getElementById("macros-name").value;
       console.log("Macros Name: ", this.macrosName);
       var macrosColor = document.getElementById("macros-color").value;
+      if (macrosList.includes(macrosName)) {
+        this.sameName = true;
+        return;
+      }
 
       console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time);
       console.log("selectedValues: ", this.config.macros[this.tab - 1].file_name);
@@ -346,7 +353,7 @@ module.exports = {
       }
     },
     deleteSelectedMacros: async function () {
-      if (tab == 0) {
+      if (this.tab == 0) {
         this.clearMacros();
         return;
       }
@@ -364,16 +371,14 @@ module.exports = {
     loadMacrosSettings: function () {
       if (this.tab == 0) {
         document.getElementById("macros-name").value = "";
-        document.getElementById("macros-color").value = "";
+        document.getElementById("macros-color").value = "#fff";
-        this.newGcode = "";
-        this.filename = "default";
       } else {
         const macros = this.config.macros[this.tab - 1];
         document.getElementById("macros-name").value = macros.name;
         document.getElementById("macros-color").value = macros.color;
+      }
       this.newGcode = "";
       this.filename = "default";
-      }
       this.edited = false;
     },
   },

src/pug/templates/macros.pug

@@ -44,10 +44,24 @@ script#macros-template(type="text/x-template")
         div(slot="footer")
           button.pure-button.button-submit(@click="maxLimitReached = false") OK
     
+    message(:show.sync="sameName")
+        h3(slot="header") A macro with this name already exists.
+        div(slot="body")
+            p Please choose a different name.
+        div(slot="footer")
+          button.pure-button.button-submit(@click="sameName = false") OK
+
+    message(:show.sync="addMacros")
+        div(slot="body")
+            p Do you need to add another macros?
+        div(slot="footer")
+          button.pure-button(@click="addMacros = false") Cancel
+          button.pure-button.button-submit(@click="addNewMacros") Add
+
     h1 Macros Configuration
     .flex-row-container
         button.config-button.button-blue(title="Reset Macros", @click="confirmReset=true") Delete All
-        button.config-button.button-blue(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
+        button.config-button.button-blue(title="Add a Macros", @click="addMacros=true", style="margin-left:5px") New Macros
         button.config-button.button-blue(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
 
     .warning-box
@@ -59,7 +73,7 @@ script#macros-template(type="text/x-template")
         div(style="display:flex;align-items:center;margin-left:30px")
                 h2 Select Macros
                 select(id="macros-select",title="Select a Macros to edit.",selected
-                                                v-model="tab",@change="loadMacrosSettings",
+                                                v-model="tab",@change="clearMacros",
                                                 style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold;margin-left:30px")
                                                 option( selected='' value='0')  Select a Macros
                                                 option(v-for="(index,file) in macrosList", :value="index+1") {{file}}