created tabs for macros and buttons in control-view

src/js/control-view.js

@@ -202,8 +202,8 @@ module.exports = {
             const p = this.plan_time / this.toolpath.time;
             return Math.min(1, p);
         },
-        isMacrosPresent: function(){
+        isMacrosPresent: function(val){
-            return this.config.macros!=undefined;
+            return this.config.macros[val].name=null;
         },
     },
 

src/js/macros.js

@@ -9,7 +9,7 @@ module.exports = {
 
     data: function (){
         return {
-            toolpath_progress: 0,
+            tab: "1",
         }
     },
     components: {
@@ -81,16 +81,16 @@ module.exports = {
                 }
             });
         },
-        saveMacros: async function(){
+        saveMacros: async function(id){
             var macrosName = document.getElementById("macros-name").value;
             var macrosColor = document.getElementById("macros-color").value;
             if(this.config.macros == undefined) {
                 console.log("macros is undefined");
                 this.config.macros=[];
             }else{
-                this.config.macros[0].name=macrosName;
+                this.config.macros[id].name=macrosName;
-                this.config.macros[0].color=macrosColor;
+                this.config.macros[id].color=macrosColor;
-                this.config.macros[0].gcode=this.state.selected;
+                this.config.macros[id].gcode=this.state.selected;
             }
             console.log(this.config.macros);
             try {

src/pug/templates/control-view.pug

@@ -207,11 +207,19 @@ script#control-view-template(type="text/x-template")
                       label {{(progress || 0) | percent}}
                       .bar(:style="'width:' + (progress || 0) * 100 + '%'")
 
-    .macros-div
+    .macros-div(class="present")
-      .macros-buttons(class="present",v-if="isMacrosPresent")
+       button.macros-buttons(title="Edit Macros 1", @click="open",
-        p there is a active macro
+            :disabled="!isMacrosPresent(0)",style="height:100px;width:100px;font-weight:normal") Macros 1
-      .macros-buttons(class ="absent",v-if="!isMacrosPresent")
+       button.macros-buttons(title="Edit Macros 1", @click="open",
-        p there is No macro
+            :disabled="!isMacrosPresent(1)",style="height:100px;width:100px;font-weight:normal") Macros 2
+       button.macros-buttons(title="Edit Macros 1", @click="open",
+            :disabled="!isMacrosPresent(2)",style="height:100px;width:100px;font-weight:normal") Macros 3
+       button.macros-buttons(title="Edit Macros 1", @click="open",
+            :disabled="!isMacrosPresent(3)",style="height:100px;width:100px;font-weight:normal") Macros 4
+       button.macros-buttons(title="Edit Macros 1", @click="open",
+            :disabled="!isMacrosPresent(4)",style="height:100px;width:100px;font-weight:normal") Macros 5
+       button.macros-buttons(title="Edit Macros 1", @click="open",
+            :disabled="!isMacrosPresent(5)",style="height:100px;width:100px;font-weight:normal") Macros 6
 
 
     .tabs

src/pug/templates/macros.pug

@@ -1,8 +1,22 @@
 script#macros-template(type="text/x-template")
   #macros
     h1 Macros Configuration
+    .tabs
+        input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'")
+        label(for="tab1", title="Run GCode programs",style="height:50px;width:100px") Macros 1
+
+        input#tab2(type="radio", name="tabs", @click="tab = '2'")
+        label(for="tab2", title="Manual GCode entry",style="height:50px;width:100px") Macros 2
+
+        input#tab3(type="radio", name="tabs", @click="tab = '3'")
+        label(for="tab3",style="height:50px;width:100px") Macros 3
+
+        input#tab4(type="radio", name="tabs", @click="tab = '4'")
+        label(for="tab4",style="height:50px;width:100px") Macros 4
+
+        section#content1.tab-content
                 .macros-form
-        p.title Enter Macros Name
+                        p.title Enter Macros 1 Name
                         .input-container
                                 input.input-color(type="color",id="macros-color",value="#ffffff") 
                                 input.input-name(type="text",id="macros-name")
@@ -19,9 +33,75 @@ script#macros-template(type="text/x-template")
                         input(type="file", @change="upload", :disabled="!is_ready",
                         accept=".nc,.ngc,.gcode,.gc")
                         br
-        button.submit-macros(title="Save Macros",@click="saveMacros",
+                        button.submit-macros(title="Save Macros",@click="saveMacros(0)",
                                 style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border-color:#add1ad;margin-top:30px") Save Macros
+
+        section#content2.tab-content
+                .macros-form
+                        p.title Enter Macros 2 Name
+                        .input-container
+                                input.input-color(type="color",id="macros-color",value="#ffffff") 
+                                input.input-name(type="text",id="macros-name")
+                        p.title Select/Upload G-Code
+                        select(title="Select previously uploaded GCode programs.",
+                                v-model="state.selected", @change="load", :disabled="!is_ready",
+                                style="max-width:100%;height:40px;border-radius:5px")
+                                option(v-for="file in state.files", :value="file") {{file}}
+
+                        button.pure-button(title="Upload a new GCode program.", @click="open",
+                                :disabled="!is_ready",style="height:40px;width:130px;font-weight:normal;border-radius:5px;margin-left:4px") Upload
+
+                        form.gcode-file-input.file-upload
+                        input(type="file", @change="upload", :disabled="!is_ready",
+                        accept=".nc,.ngc,.gcode,.gc")
+                        br
+                        button.submit-macros(title="Save Macros",@click="saveMacros(1)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border-color:#add1ad;margin-top:30px") Save Macros
+
+        section#content3.tab-content
+                .macros-form
+                        p.title Enter Macros 3 Name
+                        .input-container
+                                input.input-color(type="color",id="macros-color",value="#ffffff") 
+                                input.input-name(type="text",id="macros-name")
+                        p.title Select/Upload G-Code
+                        select(title="Select previously uploaded GCode programs.",
+                                v-model="state.selected", @change="load", :disabled="!is_ready",
+                                style="max-width:100%;height:40px;border-radius:5px")
+                                option(v-for="file in state.files", :value="file") {{file}}
+
+                        button.pure-button(title="Upload a new GCode program.", @click="open",
+                                :disabled="!is_ready",style="height:40px;width:130px;font-weight:normal;border-radius:5px;margin-left:4px") Upload
+
+                        form.gcode-file-input.file-upload
+                        input(type="file", @change="upload", :disabled="!is_ready",
+                        accept=".nc,.ngc,.gcode,.gc")
+                        br
+                        button.submit-macros(title="Save Macros",@click="saveMacros(2)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border-color:#add1ad;margin-top:30px") Save Macros
+
+        section#content4.tab-content
+                .macros-form
+                        p.title Enter Macros 4 Name
+                        .input-container
+                                input.input-color(type="color",id="macros-color",value="#ffffff") 
+                                input.input-name(type="text",id="macros-name")
+                        p.title Select/Upload G-Code
+                        select(title="Select previously uploaded GCode programs.",
+                                v-model="state.selected", @change="load", :disabled="!is_ready",
+                                style="max-width:100%;height:40px;border-radius:5px")
+                                option(v-for="file in state.files", :value="file") {{file}}
+
+                        button.pure-button(title="Upload a new GCode program.", @click="open",
+                                :disabled="!is_ready",style="height:40px;width:130px;font-weight:normal;border-radius:5px;margin-left:4px") Upload
+
+                        form.gcode-file-input.file-upload
+                        input(type="file", @change="upload", :disabled="!is_ready",
+                        accept=".nc,.ngc,.gcode,.gc")
+                        br
+                        button.submit-macros(title="Save Macros",@click="saveMacros(3)",
+                                style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border-color:#add1ad;margin-top:30px") Save Macros
+        
         button.pure-button(title="Print config.", @click="printConfig",
                                 style="height:50px;width:120px;font-weight:normal;padding-top:5px") print Config
 
-    gcode-viewer

src/resources/config-template.json

@@ -586,28 +586,49 @@
 
   "macros": {
     "type":"list",
-    "index":"123",
+    "index":"123456",
     "default":[
       { 
-        "id" : "1",
+        "id" : 1,
         "name" : null,
         "color":null,
         "gcode":null
       },
       { 
-        "id" : "1",
+        "id" : 2,
         "name" : null,
         "color":null,
         "gcode":null
       },
       { 
-        "id" : "1",
+        "id" : 3,
+        "name" : null,
+        "color":null,
+        "gcode":null
+      },
+      { 
+        "id" : 4,
+        "name" : null,
+        "color":null,
+        "gcode":null
+      },
+      { 
+        "id" : 5,
+        "name" : null,
+        "color":null,
+        "gcode":null
+      },
+      { 
+        "id" : 6,
         "name" : null,
         "color":null,
         "gcode":null
       }
     ],
     "template": {
+      "id": {
+        "type": "int"
+      },
       "name": {
         "type": "text",
         "default": null

src/stylus/style.styl

@@ -614,6 +614,8 @@ span.unit
         vertical-align middle
 
   .macros-div
+    display flex
+    justify-content space-around
     height 50px
     width 85%
     margin 10px
@@ -628,10 +630,6 @@ span.unit
     color #fff
     border 0  
 
-  .macros-buttons
-    // padding 40px
-    margin-left 200px
-
 
 .path-viewer
   table