test

src/js/macros.js

@@ -18,6 +18,16 @@ module.exports = {
         "gcode-viewer": require("./gcode-viewer")
     },
     computed:{
+        mach_state: function() {
+            const cycle = this.state.cycle;
+            const state = this.state.xx;
+
+            if (state != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
+                return cycle.toUpperCase();
+            }
+
+            return state || "";
+        },
         is_ready: function() {
             console.log("is_ready: ",this.mach_state);
             return this.mach_state == "READY";

src/pug/templates/macros.pug

@@ -2,9 +2,13 @@ script#macros-template(type="text/x-template")
   #macros
     h1 Macros Configuration
     .macros-form
-          h3 Name
+      .input-field
+        h4 Enter Macros Name
         input.input-name(type="text",id="macros-name",value="e.g Macros 1 ")
-        .macros-form
+      .input-field
+        h4 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",
                 :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")

src/stylus/style.styl

@@ -1034,13 +1034,13 @@ tt.save
 .pure-form-aligned .pure-control-group label.extra
     width 8em
 
-.macros
+#macros
   padding 30px
 
   .macros-form
-    padding 10px
+    padding 50px
   
-  .input-name
+  input.input-name
     width 300px
     height 40px
     border-radius 8px
@@ -1048,9 +1048,17 @@ tt.save
     border-color #434242
     padding-left 10px
   
+  input.input-color
+    height 40px
+    width 40px
+    border-radius 2px
+  
   button
     border-radius 8px
     border-width 1px
     border-color #434242
     padding-left 10px
 
+  .input-field
+    margin-top 10px
+