test

src/js/macros.js

@@ -13,20 +13,20 @@ module.exports = {
         }
     },
     components: {
+        "axis-control": require("./axis-control"),
+        "path-viewer": require("./path-viewer"),
         "gcode-viewer": require("./gcode-viewer")
     },
     computed:{
         is_ready: function() {
-            console.log("is_ready: ",this);
+            console.log("is_ready: ",this.mach_state);
             return this.mach_state == "READY";
         },
     },
     methods:{
-        print: function(){
-            console.log(this.template);
-        },
         open: function() {
             utils.clickFileInput("gcode-file-input");
+            console.log("utils done");
         },
         getMacrosList : function (){
             return no_of_macros;

src/pug/templates/macros.pug

@@ -1,23 +1,16 @@
 script#macros-template(type="text/x-template")
   #macros
     h1 Macros Configuration
-    input(type="text",id="inputField")
-    button.printVariable(title="print Varibale", @click='print',
-              style="height:100px;width:100px;font-weight:normal") PrintVariable
-    h3 {{no_of_macros}}
-    //- 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%")
-    //-           option(v-for="file in state.files", :value="file") {{file}}
-
-    //- .progress(v-if="toolpath_progress && toolpath_progress < 1",
-    //-   title="Simulating GCode to check for errors, calculate ETA and " +
-    //-     "generate 3D view.  You can run GCode before the simulation " +
-    //-     "finishes.")
-    //-   div(:style="'width:' + (toolpath_progress || 0) * 100 + '%'")
-    //-     label Simulating {{(toolpath_progress || 0) | percent}}
-    gcode-viewer
+        .macros-form
+          h3 Name
+          input.input-name(type="text",id="macros-name",value="e.g Macros 1 ")
+        .macros-form
+          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")
+                    .fa.fa-folder-open
+          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}}
+          gcode-viewer

src/stylus/style.styl

@@ -1033,3 +1033,24 @@ tt.save
 
 .pure-form-aligned .pure-control-group label.extra
     width 8em
+
+.macros
+  padding 30px
+
+  .macros-form
+    padding 10px
+  
+  .input-name
+    width 300px
+    height 40px
+    border-radius 8px
+    border-width 1px
+    border-color #434242
+    padding-left 10px
+  
+  button
+    border-radius 8px
+    border-width 1px
+    border-color #434242
+    padding-left 10px
+