testing macros state

src/js/app.js

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

src/js/control-view.js

@@ -201,6 +201,12 @@ module.exports = {
 
             const p = this.plan_time / this.toolpath.time;
             return Math.min(1, p);
+        },
+        isMacrosPresent: function(){
+            if(this.config.macros!=undefined){
+                return this.config.macros.length!=0;
+            }
+            return false;
         }
     },
 
@@ -493,6 +499,24 @@ module.exports = {
 
         showProbeDialog: function(probeType) {
             SvelteComponents.showDialog("Probe", { probeType });
+        },
+        
+        runMacros: function(id){
+            if(id==null || id == undefined ){
+                console.log("id null/undefined");
+                return;
+            }
+            if(this.config.macros!=undefined && this.config.macros.length!=0){
+                this.config.macros.find(el=>{
+                    if(el.id==id){
+                        console.log(el);
+                    }else{
+                        console.log("error in finding macros");
+                    }
+                })
+            }else{
+                console.log("No macros found");
+            }
         }
     },
 

src/js/macros.js

@@ -58,5 +58,15 @@ module.exports = {
             this.toolpath_progress = 0;
             this.load_toolpath(file, file_time);
         },
+        saveMacros: function(){
+            var macrosName = document.getElementById("macros-name").value;
+            var macrosColor = document.getElementById("macros-color").value;
+            if(this.config.macros == undefined) return;
+            this.config.macros.push({
+                id:Math.random(),
+                name:macrosName,
+                color:macrosColor
+            })
+        },
     }
 }

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,14 +2,11 @@ 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
+        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
@@ -17,4 +14,6 @@ script#macros-template(type="text/x-template")
                 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

src/stylus/style.styl

@@ -611,6 +611,9 @@ span.unit
         margin 0 0.5em
         vertical-align middle
 
+  .macros-buttons
+    padding 40px
+
 .path-viewer
   table
     margin 0.25em