From bea892ac5205ae3421ad1f47213349b62ae79774 Mon Sep 17 00:00:00 2001 From: sanjayk03-dev Date: Sun, 28 Jan 2024 15:06:35 +0530 Subject: [PATCH] dynamic macros count --- src/js/control-view.js | 2 +- src/js/macros.js | 16 ++++++++++++++ src/pug/templates/control-view.pug | 35 ++++++++++++++++-------------- src/pug/templates/macros.pug | 8 ++++--- src/stylus/style.styl | 8 +++++-- 5 files changed, 47 insertions(+), 22 deletions(-) diff --git a/src/js/control-view.js b/src/js/control-view.js index 4cfc727..341b19f 100644 --- a/src/js/control-view.js +++ b/src/js/control-view.js @@ -209,7 +209,7 @@ module.exports = { console.log("this.config.gcodeList", this.config.gcodeList); const gcodelist = this.config.gcodeList.map(item => item.file_name); const unionSet = new Set([...filesWithNoMacros, ...gcodelist]); - const files = [...unionSet]; + const files = [...unionSet].sort(); console.log("final files: ", files); return files; }, diff --git a/src/js/macros.js b/src/js/macros.js index 239306c..67b9cf7 100644 --- a/src/js/macros.js +++ b/src/js/macros.js @@ -298,5 +298,21 @@ module.exports = { alert("Restore failed"); } }, + addNewMacros: async function () { + const length = this.config.macros.length; + const newMacros = { + name: `Macros ${length + 1}`, + color: "#dedede", + file_name: "", + }; + this.config.macros.push(newMacros); + try { + await api.put("config/save", this.config); + this.$dispatch("update"); + } catch (error) { + console.error("Restore Failed: ", error); + alert("Restore failed"); + } + }, }, }; diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug index bd880c3..f4fcc0f 100644 --- a/src/pug/templates/control-view.pug +++ b/src/pug/templates/control-view.pug @@ -216,22 +216,25 @@ script#control-view-template(type="text/x-template") .bar(:style="'width:' + (progress || 0) * 100 + '%'") .macros-div(class="present") - button.macros-buttons(title="Click to run Macros 1", @click="runMacros(0)", - :disabled="!is_ready",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="!is_ready",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="!is_ready",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="!is_ready",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="!is_ready",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="!is_ready",v-bind:style="{ backgroundColor: config.macros[5].color }") {{config.macros[5].name}} - button.macros-buttons(title="Click to run Macros 7", @click="runMacros(6)", - :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[6].color }") {{config.macros[6].name}} - button.macros-buttons(title="Click to run Macros 8", @click="runMacros(7)", - :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[7].color }") {{config.macros[7].name}} + button.macros-button(title="Click to run Macros",v-for="(macros, index) in config.macros", + @click="runMacros(index)",:key="index",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}} + + //- button.macros-buttons(title="Click to run Macros 1", @click="runMacros(0)", + //- :disabled="!is_ready",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="!is_ready",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="!is_ready",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="!is_ready",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="!is_ready",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="!is_ready",v-bind:style="{ backgroundColor: config.macros[5].color }") {{config.macros[5].name}} + //- button.macros-buttons(title="Click to run Macros 7", @click="runMacros(6)", + //- :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[6].color }") {{config.macros[6].name}} + //- button.macros-buttons(title="Click to run Macros 8", @click="runMacros(7)", + //- :disabled="!is_ready",v-bind:style="{ backgroundColor: config.macros[7].color }") {{config.macros[7].name}} .tabs diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug index 907eab8..37955a8 100644 --- a/src/pug/templates/macros.pug +++ b/src/pug/templates/macros.pug @@ -29,8 +29,10 @@ script#macros-template(type="text/x-template") |  Selected h1 Macros Configuration - button.delete-all-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros + button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros .fa.fa-rotate-right + button.config-button(title="Add a Macros", @click="addNewMacros") Add a Macros + .fa.fa-plus .tabs input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'") @@ -281,8 +283,8 @@ script#macros-template(type="text/x-template") .gcodeContainer textarea.new-gcode( id="gcode-field",:value='newGcode[tab-1]' @input="updateNewGcode") - button.submit-macros.button-secondary(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save - button.submit-macros(title="Cancel Macros",@click="cancelMacros",style="margin-left:5px") Cancel + button.submit-macros.button-submit(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save + button.submit-macros(title="Cancel Macros",@click="cancelMacros",style="margin-left:5px;background-color:#fafafa;") Cancel button.submit-macros(title="Cancel Macros",@click="printState",style="margin-left:5px") Print State button.submit-macros(title="Cancel Macros",@click="printConfig",style="margin-left:5px") Print Config diff --git a/src/stylus/style.styl b/src/stylus/style.styl index 20b170a..9fcf455 100644 --- a/src/stylus/style.styl +++ b/src/stylus/style.styl @@ -24,6 +24,10 @@ tt .button-secondary:not([disabled]) background-color #42b8dd +.button-submit:not([disabled]) + background-color #add1ad + color #fff + .header, .content padding 0 @@ -623,7 +627,7 @@ span.unit margin 10px margin-left 100px - .macros-buttons + .macros-buttons:not([disabled]) height 60px width 140px font-weight normal @@ -645,7 +649,7 @@ span.unit border-color #424242 border-style solid - .delete-all-button + .config-button height 50px margin-bottom 1rem width 190px