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/macros.js

@@ -28,7 +28,6 @@ module.exports = {
             return state || "";
         },
         is_ready: function() {
-            console.log("is_ready: ",this.mach_state);
             return this.mach_state == "READY";
         },
     },
@@ -56,19 +55,23 @@ module.exports = {
         },
         saveMacros: function(){
             var macrosName = document.getElementById("macros-name").value;
-            var macrosColor = document.getElementById("macros-color").value;
+            var macrosColor = document.getElementById("macros-color").value
+            console.log(this.state.selected);
             if(this.config.macros == undefined) {
                 console.log("macros is undefined");
                 this.config.macros=[];
                 return;
             }
             this.config.macros.push({
-                id:Math.random(),
+                id:Math.round(Math.random()*100000),
                 name:macrosName,
                 color:macrosColor
             })
             console.log("Successfully saved");
             console.log(this.config.macros);
         },
+        printConfig: function(){
+            console.log(this.config);
+        }
     }
 }

src/pug/templates/macros.pug

@@ -7,13 +7,17 @@ script#macros-template(type="text/x-template")
         p.title Select Your Macros Color
         input.input-color(type="color",id="macros-color",value="#ffffff") 
         p.title Select/Upload G-Code
-        button.pure-button(title="Upload a new GCode program.", @click="open",
-                :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
-                .fa.fa-folder-open
         select(title="Select previously uploaded GCode programs.",
                 v-model="state.selected", @change="load", :disabled="!is_ready",
-                style="max-width:100%")
+                style="max-width:100%;height:40px;border-radius:5px")
                 option(v-for="file in state.files", :value="file") {{file}}
-        button.submit-macros(title="Save Macros",@click="saveMacros",style="height:100px;width:100px;font-weight:normal") Save Macros
+        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
+        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
 
     gcode-viewer

src/stylus/style.styl

@@ -613,6 +613,8 @@ span.unit
 
   .macros-buttons
     padding 40px
+    margin-left 200px
+
 
 .path-viewer
   table
@@ -1041,7 +1043,8 @@ tt.save
   padding 30px
 
   .macros-form
-    padding 50px
+    padding-left 50px
+    padding-top 50px
   
   input.input-name
     width 300px
@@ -1051,16 +1054,21 @@ tt.save
     border-color #434242
     padding-left 10px
   
+  p.title
+    font-size 20px
+    padding-top 20px
+    font-weight 600
+
+
   input.input-color
     height 40px
-    width 40px
+    width 300px
     border-radius 2px
   
   button
     border-radius 8px
     border-width 1px
     border-color #434242
-    padding-left 10px
 
   .input-field
     margin-top 10px