logging

src/js/macros.js

@@ -16,9 +16,9 @@ module.exports = {
       deleteGCode: false,
       edited: false,
       maxLimitReached: false,
-      newGcode: "",
+      macrosName: "",
       fileName: "default",
-      macrosName:"",
+      newGcode: "",
     };
   },
   events: {
@@ -173,7 +173,7 @@ module.exports = {
     },
     saveMacros: async function () {
       var macrosName = document.getElementById("macros-name").value;
-      console.log("Macros Name: ",this.macrosName)
+      console.log("Macros Name: ", this.macrosName);
       var macrosColor = document.getElementById("macros-color").value;
 
       console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time);
@@ -205,7 +205,6 @@ module.exports = {
       console.log("delete a gcode");
       if (filename == "default") {
         this.$set("newGcode", "");
-        this.fileName="default";
       } else {
         api.delete(`file/${filename}`);
         this.$set("newGcode", "");
@@ -219,7 +218,7 @@ module.exports = {
         console.error("Restore Failed: ", error);
         alert("Restore failed");
       }
-      console.log("tab in delete_current:", this.tab);
+      this.fileName = "default";
       this.deleteGCode = false;
     },
     delete_all_macros: async function () {
@@ -229,12 +228,12 @@ module.exports = {
     },
     clearMacros: async function () {
       console.log("this.tab", this.tab - 1);
-      console.log(document.getElementById("macros-name").value);
+      console.log("macros-name: ", document.getElementById("macros-name").value);
+      console.log("macros-color: ", document.getElementById("macros-color").value);
       const defaultValue = this.config.macros[this.tab - 1];
-      console.log("DefaultValue: ",defaultValue);
+      console.log("DefaultValue: ", defaultValue);
       document.getElementById("macros-name").value = defaultValue.name;
       document.getElementById("macros-color").value = defaultValue.color;
-      document.getElementById("gcode-field").value = "";
       this.$set("newGcode", "");
       this.fileName = "default";
     },
@@ -345,10 +344,13 @@ module.exports = {
     },
     loadMacrosSettings: function () {
       console.log("selected : ", this.tab);
-      const macros = this.config.macros[this.tab-1];
+      const macros = this.config.macros[this.tab - 1];
+      console.log("macros-name: ", document.getElementById("macros-name").value);
+      console.log("macros-color: ", document.getElementById("macros-color").value);
       document.getElementById("macros-name").value = macros.name;
       document.getElementById("macros-color").value = macros.color;
-      document.getElementById("gcode-field").value = "";
+      // document.getElementById("gcode-field").value = "";
+      this.$set("newGCode", "");
       this.$set("fileName", macros.name);
     },
   },

src/pug/templates/macros.pug

@@ -56,9 +56,10 @@ script#macros-template(type="text/x-template")
                 |  Select a Macros to edit its settings.
 
     .tabs
+        p.title Select Macros
         select(id="macros-select",title="Select a Macros to edit.",selected
                                         v-model="tab",@change="loadMacrosSettings",
-                                        style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold")
+                                        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") Macros {{index+1}}
         .macros-form

src/stylus/style.styl

@@ -659,7 +659,7 @@ span.unit
     margin-top 10px
     align-items center
     justify-content center
-    
+
 
   .new-gcode
     height 13rem
@@ -676,6 +676,7 @@ span.unit
   .tabs
     margin-top 5px
     width 850px
+    padding 20px
 
   .macros-view
     padding 30px