test

src/js/app.js

@@ -114,7 +114,7 @@ module.exports = new Vue({
             full_version: "<loading>",
             ip: "<>",
             wifiName: "not connected",
-            macros:[{},{},{},{},{},{}]
+            macros:[]
           },
           state: {
             messages: [],

src/js/control-view.js

@@ -203,12 +203,13 @@ module.exports = {
             return Math.min(1, p);
         },
         isMacrosPresent: function(){
-            if(this.config.macros!=undefined){
-                console.log("isMacrosPresent",this.config.macros!=undefined);
-                console.log(this.config.macros.length!=0);
-                return this.config.macros.length!=0;
-            }
-            return false;
+            return (this.config.macros!=undefined)
+            // if(this.config.macros!=undefined){
+            //     console.log("isMacrosPresent",this.config.macros!=undefined);
+            //     console.log(this.config.macros.length!=0);
+            //     return this.config.macros.length!=0;
+            // }
+            // return false;
         }
     },
 

src/js/macros.js

@@ -55,8 +55,7 @@ module.exports = {
         },
         saveMacros: function(){
             var macrosName = document.getElementById("macros-name").value;
-            var macrosColor = document.getElementById("macros-color").value
-            console.log(this.state.selected);
+            var macrosColor = document.getElementById("macros-color").value;
             if(this.config.macros == undefined) {
                 console.log("macros is undefined");
                 this.config.macros=[];
@@ -65,7 +64,8 @@ module.exports = {
             this.config.macros.push({
                 id:Math.round(Math.random()*100000),
                 name:macrosName,
-                color:macrosColor
+                color:macrosColor,
+                gcode:this.state.selected,
             })
             console.log("Successfully saved");
             console.log(this.config.macros);

src/pug/templates/control-view.pug

@@ -209,7 +209,8 @@ script#control-view-template(type="text/x-template")
 
     .macros-div
       .macros-buttons(v-if="isMacrosPresent")
-        <p> there is a macro
+        .submit-macros
+          a(href="#macros") Edit Macros
 
     .tabs
      

src/pug/templates/macros.pug

@@ -3,21 +3,19 @@ script#macros-template(type="text/x-template")
     h1 Macros Configuration
     .macros-form
         p.title Enter Macros Name
-        input.input-name(type="text",id="macros-name")
-        p.title Select Your Macros Color
         input.input-color(type="color",id="macros-color",value="#ffffff") 
+        input.input-name(type="text",id="macros-name")
         p.title Select/Upload G-Code
         select(title="Select previously uploaded GCode programs.",
                 v-model="state.selected", @change="load", :disabled="!is_ready",
                 style="max-width:100%;height:40px;border-radius:5px")
                 option(v-for="file in state.files", :value="file") {{file}}
         button.pure-button(title="Upload a new GCode program.", @click="open",
-                :disabled="!is_ready",style="height:40px;width:50px;font-weight:normal;border-radius:5px")
-                Upload
+                :disabled="!is_ready",style="height:40px;width:130px;font-weight:normal;border-radius:5px") Upload
+        br
         button.submit-macros(title="Save Macros",@click="saveMacros",
                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border-color:#add1ad") Save Macros
         button.pure-button(title="Print config.", @click="printConfig",
-                style="height:50px;width:100px;font-weight:normal")
-                .fa.fa-folder-open
+                style="height:50px;width:100px;font-weight:normal") print Config
 
     gcode-viewer

src/stylus/style.styl

@@ -611,6 +611,19 @@ span.unit
         margin 0 0.5em
         vertical-align middle
 
+  .macros-div
+    height 500px
+    width 500px
+    margin 100px
+  
+  .submit-macros
+    height 50px
+    width 140px
+    font-weight normal
+    background-color #e6e6e6
+    color #fff
+    border 0
+
   .macros-buttons
     padding 40px
     margin-left 200px
@@ -1062,7 +1075,8 @@ tt.save
 
   input.input-color
     height 40px
-    width 300px
+    width 40px
+    border 1px solid #fdfdfd
     border-radius 2px
   
   button