diff --git a/src/js/app.js b/src/js/app.js index 961ae2c..e296999 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -114,7 +114,7 @@ module.exports = new Vue({ full_version: "", ip: "<>", wifiName: "not connected", - macros:[] + macros:[{},{},{},{},{},{}] }, state: { messages: [], diff --git a/src/js/macros.js b/src/js/macros.js index c06f50e..3f7b3a7 100644 --- a/src/js/macros.js +++ b/src/js/macros.js @@ -28,7 +28,6 @@ module.exports = { return state || ""; }, is_ready: function() { - console.log("is_ready: ",this.mach_state); return this.mach_state == "READY"; }, }, @@ -56,19 +55,23 @@ module.exports = { }, saveMacros: function(){ var macrosName = document.getElementById("macros-name").value; - var macrosColor = document.getElementById("macros-color").value; + var macrosColor = document.getElementById("macros-color").value + console.log(this.state.selected); if(this.config.macros == undefined) { console.log("macros is undefined"); this.config.macros=[]; return; } this.config.macros.push({ - id:Math.random(), + id:Math.round(Math.random()*100000), name:macrosName, color:macrosColor }) console.log("Successfully saved"); console.log(this.config.macros); }, + printConfig: function(){ + console.log(this.config); + } } } \ No newline at end of file diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug index 9446da0..a184ab9 100644 --- a/src/pug/templates/macros.pug +++ b/src/pug/templates/macros.pug @@ -7,13 +7,17 @@ script#macros-template(type="text/x-template") p.title Select Your Macros Color input.input-color(type="color",id="macros-color",value="#ffffff") 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 select(title="Select previously uploaded GCode programs.", v-model="state.selected", @change="load", :disabled="!is_ready", - style="max-width:100%") + style="max-width:100%;height:40px;border-radius:5px") 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") Save Macros + button.pure-button(title="Upload a new GCode program.", @click="open", + :disabled="!is_ready",style="height:40px;width:50px;font-weight:normal;border-radius:5px") + Upload + button.submit-macros(title="Save Macros",@click="saveMacros", + style="height:50px;width:140px;font-weight:normal;background-color:#add1ad;color:#fff;border-color:#add1ad") Save Macros + button.pure-button(title="Print config.", @click="printConfig", + style="height:50px;width:100px;font-weight:normal") + .fa.fa-folder-open gcode-viewer diff --git a/src/stylus/style.styl b/src/stylus/style.styl index be13ee1..7f86ee2 100644 --- a/src/stylus/style.styl +++ b/src/stylus/style.styl @@ -613,6 +613,8 @@ span.unit .macros-buttons padding 40px + margin-left 200px + .path-viewer table @@ -1041,7 +1043,8 @@ tt.save padding 30px .macros-form - padding 50px + padding-left 50px + padding-top 50px input.input-name width 300px @@ -1051,16 +1054,21 @@ tt.save border-color #434242 padding-left 10px + p.title + font-size 20px + padding-top 20px + font-weight 600 + + input.input-color height 40px - width 40px + width 300px border-radius 2px button border-radius 8px border-width 1px border-color #434242 - padding-left 10px .input-field margin-top 10px