flushing old data and fixing backgdround color,

src/js/macros.js

@@ -100,8 +100,53 @@ module.exports = {
                 alert("Restore failed");
             }
         },
-        printConfig: function(){
+        printConfig: async function(){
-            console.log(this.config);
+            this.config.macros=[
+                {
+                   name:"Macros 1",
+                   color: "#efefef",
+                   gcode_file_name: " ",
+                   gcode_file_time: 0
+                },
+                {
+                    name:"Macros 2",
+                    color: "",
+                    gcode_file_name: " ",
+                    gcode_file_time: 0
+                 },
+                 {
+                    name:"Macros 3",
+                    color: "",
+                    gcode_file_name: " ",
+                    gcode_file_time: 0
+                 },
+                 {
+                    name:"Macros 4",
+                    color: "",
+                    gcode_file_name: " ",
+                    gcode_file_time: 0
+                 },
+                 {
+                    name:"Macros 5",
+                    color: "",
+                    gcode_file_name: " ",
+                    gcode_file_time: 0
+                 },
+                 {
+                    name:"Macros 6",
+                    color: "#efefef",
+                    gcode_file_name: " ",
+                    gcode_file_time: 0
+                 },
+            ]
+            try {
+                await api.put("config/save",this.config);
+                console.log("Successfully saved");
+                this.$dispatch("update");
+            } catch (error) {
+                console.error("Restore Failed: ",error);
+                alert("Restore failed");
+            }
         }
     }
 }

src/pug/templates/control-view.pug

@@ -209,17 +209,17 @@ script#control-view-template(type="text/x-template")
 
     .macros-div(class="present")
        button.macros-buttons(title="Click to run Macros 1", @click="runMacros(0)",
-            :disabled="!true",v-bind:style="background-color:{{config.macros[0].color}};color:#fff") {{config.macros[0].name}}
+            :disabled="!true",v-bind:style="{ backgroundColor: config.macros[0].color }") {{config.macros[0].name}}
        button.macros-buttons(title="Click to run Macros 2", @click="runMacros(1)",
-            :disabled="!true",v-bind:style="background-color:{{config.macros[1].color}};color:#fff") {{config.macros[1].name}}
+            :disabled="!true",v-bind:style="{ backgroundColor: config.macros[1].color }") {{config.macros[1].name}}
        button.macros-buttons(title="Click to run Macros 3", @click="runMacros(2)",
-            :disabled="!true",v-bind:style="background-color:{{config.macros[2].color}};color:#fff") {{config.macros[2].name}}
+            :disabled="!true",v-bind:style="{ backgroundColor: config.macros[2].color }") {{config.macros[2].name}}
        button.macros-buttons(title="Click to run Macros 4", @click="runMacros(3)",
-            :disabled="!true",v-bind:style="background-color:{{config.macros[3].color}};color:#fff") {{config.macros[3].name}}
+            :disabled="!true",v-bind:style="{ backgroundColor: config.macros[3].color }") {{config.macros[3].name}}
        button.macros-buttons(title="Click to run Macros 5", @click="runMacros(4)",
-            :disabled="!true",v-bind:style="background-color:{{config.macros[4].color}};color:#fff") {{config.macros[4].name}}
+            :disabled="!true",v-bind:style="{ backgroundColor: config.macros[4].color }") {{config.macros[4].name}}
        button.macros-buttons(title="Click to run Macros 6", @click="runMacros(5)",
-            :disabled="!true",v-bind:style="background-color:{{config.macros[5].color}};color:#fff") {{config.macros[5].name}}
+            :disabled="!true",v-bind:style="{ backgroundColor: config.macros[5].color }") {{config.macros[5].name}}
 
 
     .tabs

src/resources/config-template.json

@@ -628,7 +628,7 @@
     "template": {
       "name": {
         "type": "text",
-        "default": "Default Message"
+        "default": "Default Name"
       },
       "color": {
         "type": "text",
@@ -636,7 +636,7 @@
       },
       "gcode_file_name": {
         "type": "text",
-        "default": "Default G-Code"
+        "default": ""
       },
       "gcode_file_time": {
         "type": "int",

src/stylus/style.styl

@@ -625,8 +625,9 @@ span.unit
     height 60px
     width 100px
     font-weight normal
-    border radius 10px
+    border-radius 10px
     border 0
+    color #fff
 
   .macros
     width 90%