testing macros state

src/pug/templates/control-view.pug

@@ -207,6 +207,11 @@ script#control-view-template(type="text/x-template")
                       label {{(progress || 0) | percent}}
                       .bar(:style="'width:' + (progress || 0) * 100 + '%'")
 
+    .macros-buttons(v-if="isMacrosPresent")
+      each macros in this.config.macros
+        button.macros-button(title="{{macros.id}}",@click="runMacros(macros.id)",
+            style="height:30px;width:40px;background-color:macros.color")macros.name
+
     .tabs
      
       input#tab1(type="radio", name="tabs",checked="" @click="tab = 'auto'")

src/pug/templates/macros.pug

@@ -2,19 +2,18 @@ script#macros-template(type="text/x-template")
   #macros
     h1 Macros Configuration
     .macros-form
-      .input-field
-        h4 Enter Macros Name
-        input.input-name(type="text",id="macros-name",value="e.g Macros 1 ")
-      .input-field
-        h4 Select Your Macros Color
+        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-field
-      h3 Select/Upload G-Code
-      button.pure-button(title="Upload a new GCode program.", @click="open",
+        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.",
+        select(title="Select previously uploaded GCode programs.",
                 v-model="state.selected", @change="load", :disabled="!is_ready",
                 style="max-width:100%")
                 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")
+
     gcode-viewer