muehe/onefinity-firmware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dynamic tab

Browse Source
This commit is contained in:
sanjayk03-dev
2024-01-28 15:49:07 +05:30
parent a23b2d16d3
commit 2acd714870
5 changed files with 49 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/control-view.js
View File

@@ -545,6 +545,7 @@ module.exports = {
SvelteComponents.showDialog("Probe", { probeType }); SvelteComponents.showDialog("Probe", { probeType });
}, },
runMacros: function (id) { runMacros: function (id) {
console.lof("runMAcros",id);
if (this.config.macros[id].file_name == "") { if (this.config.macros[id].file_name == "") {
this.showNoGcodeMessage = true; this.showNoGcodeMessage = true;
} else { } else {

58
src/js/macros.js
View File

@@ -9,7 +9,7 @@ module.exports = {
data: function () { data: function () {
return { return {
tab: "1", tab: "0",
confirmReset: false, confirmReset: false,
confirmSave: false, confirmSave: false,
deleteGCode: false, deleteGCode: false,
@@ -41,10 +41,10 @@ module.exports = {
return this.config.macrosList.map(el => el.file_name); return this.config.macrosList.map(el => el.file_name);
}, },
getMacrosColor: function () { getMacrosColor: function () {
return this.config.macros[this.tab - 1]["color"]; return this.config.macros[this.tab]["color"];
}, },
getMacrosName: function () { getMacrosName: function () {
return this.config.macros[this.tab - 1]["name"]; return this.config.macros[this.tab]["name"];
}, },
}, },
methods: { methods: {
@@ -52,22 +52,22 @@ module.exports = {
utils.clickFileInput("gcode-file-input"); utils.clickFileInput("gcode-file-input");
}, },
updateNewGcode: function (event) { updateNewGcode: function (event) {
this.newGcode[this.tab - 1] = event.target.value; this.newGcode[this.tab] = event.target.value;
this.$dispatch("macros-edited"); this.$dispatch("macros-edited");
}, },
loadMacrosGcode: async function () { loadMacrosGcode: async function () {
const file = this.selectedValues[this.tab - 1]; const file = this.selectedValues[this.tab];
if (this.selectedValues[this.tab - 1] != "default") { if (this.selectedValues[this.tab] != "default") {
const response = await fetch(`/api/file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${file}`, { const response = await fetch(`/api/file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${file}`, {
cache: "no-cache", cache: "no-cache",
}); });
const text = (await response.text()).split(" ").join("\n"); const text = (await response.text()).split(" ").join("\n");
this.$set("newGcode[this.tab-1]", text); this.$set("newGcode[this.tab]", text);
} else { } else {
this.$set("newGcode[this.tab-1]", ""); this.$set("newGcode[this.tab]", "");
} }
this.$dispatch("macros-edited"); this.$dispatch("macros-edited");
console.log("loaded GCode: ", this.newGcode[this.tab - 1]); console.log("loaded GCode: ", this.newGcode[this.tab]);
}, },
uploadMacrosGcode: async function (e) { uploadMacrosGcode: async function (e) {
const files = e.target.files || e.dataTransfer.files; const files = e.target.files || e.dataTransfer.files;
@@ -106,7 +106,7 @@ module.exports = {
console.log("Already exists"); console.log("Already exists");
} }
this.$set("selectedValues[this.tab - 1]", file.name); this.$set("selectedValues[this.tab]", file.name);
this.$dispatch("macros-edited"); this.$dispatch("macros-edited");
console.log("file.name", file.name); console.log("file.name", file.name);
console.log("file.name type: ", typeof file.name); console.log("file.name type: ", typeof file.name);
@@ -160,22 +160,22 @@ module.exports = {
} }
}, },
saveMacros: async function () { saveMacros: async function () {
var macrosName = document.getElementById(`macros-name-${this.tab - 1}`).value; var macrosName = document.getElementById(`macros-name-${this.tab}`).value;
var macrosColor = document.getElementById(`macros-color-${this.tab - 1}`).value; var macrosColor = document.getElementById(`macros-color-${this.tab}`).value;
console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time); console.log(" this.state.selected && time: ", this.state.selected, this.state.selected_time);
console.log("selectedValues: ", this.selectedValues[this.tab - 1]); console.log("selectedValues: ", this.selectedValues[this.tab]);
var file_name = var file_name =
this.selectedValues[this.tab - 1] == "default" ? macrosName + ".ngc" : this.selectedValues[this.tab - 1]; this.selectedValues[this.tab] == "default" ? macrosName + ".ngc" : this.selectedValues[this.tab];
var file = this.newGcode[this.tab - 1]; var file = this.newGcode[this.tab];
this.uploadGCode(file_name, file); this.uploadGCode(file_name, file);
this.config.macros[this.tab - 1].name = macrosName; this.config.macros[this.tab].name = macrosName;
this.config.macros[this.tab - 1].color = macrosColor; this.config.macros[this.tab].color = macrosColor;
this.config.macros[this.tab - 1].file_name = file_name; this.config.macros[this.tab].file_name = file_name;
console.log("config.macros[this.tab - 1].file_name", this.config.macros[this.tab - 1].file_name); console.log("config.macros[this.tab - 1].file_name", this.config.macros[this.tab].file_name);
this.confirmSave = false; this.confirmSave = false;
try { try {
await api.put("config/save", this.config); await api.put("config/save", this.config);
@@ -188,15 +188,15 @@ module.exports = {
} }
}, },
delete_current: async function () { delete_current: async function () {
const filename = this.selectedValues[this.tab - 1]; const filename = this.selectedValues[this.tab];
console.log("delete a gcode"); console.log("delete a gcode");
if (filename == "default") { if (filename == "default") {
this.$set("newGcode[this.tab - 1]", ""); this.$set("newGcode[this.tab]", "");
this.$set("selectedValues[this.tab - 1]", "default"); this.$set("selectedValues[this.tab]", "default");
} else { } else {
api.delete(`file/${filename}`); api.delete(`file/${filename}`);
this.$set("newGcode[this.tab - 1]", ""); this.$set("newGcode[this.tab]", "");
this.$set("selectedValues[this.tab - 1]", "default"); this.$set("selectedValues[this.tab]", "default");
this.config.macrosList = this.config.macrosList.filter(item => item.file_name !== filename); this.config.macrosList = this.config.macrosList.filter(item => item.file_name !== filename);
try { try {
await api.put("config/save", this.config); await api.put("config/save", this.config);
@@ -221,12 +221,12 @@ module.exports = {
} }
}, },
cancelMacros: function () { cancelMacros: function () {
const defaultValue = this.config.macros[this.tab - 1]; const defaultValue = this.config.macros[this.tab];
document.getElementById(`macros-name-${this.tab - 1}`).value = defaultValue.name; document.getElementById(`macros-name-${this.tab}`).value = defaultValue.name;
document.getElementById(`macros-color-${this.tab - 1}`).value = defaultValue.color; document.getElementById(`macros-color-${this.tab}`).value = defaultValue.color;
document.getElementById("gcode-field").value = ""; document.getElementById("gcode-field").value = "";
this.$set("newGcode[this.tab - 1]", ""); this.$set("newGcode[this.tab]", "");
this.$set("selectedValues[this.tab - 1]", "default"); this.$set("selectedValues[this.tab]", "default");
}, },
deleteAllMacros: async function () { deleteAllMacros: async function () {
this.config.macros = [ this.config.macros = [

2
src/pug/templates/control-view.pug
View File

@@ -217,7 +217,7 @@ script#control-view-template(type="text/x-template")
.macros-div(class="present") .macros-div(class="present")
button.macros-button(title="Click to run Macros",v-for="(macros, index) in config.macros", 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}} @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
.tabs .tabs

247
src/pug/templates/macros.pug
View File

@@ -29,46 +29,27 @@ script#macros-template(type="text/x-template")
|  Selected |  Selected
h1 Macros Configuration h1 Macros Configuration
button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros .flex-row-container
.fa.fa-rotate-right button.config-button(title="Reset Macros", @click="confirmReset=true") Delete All Macros
button.config-button(title="Add a Macros", @click="addNewMacros") Add a Macros .fa.fa-rotate-right
.fa.fa-plus button.config-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") Add a Macros
.fa.fa-plus
.tabs .tabs
input#tab1(type="radio", name="tabs",checked="" @click="tab = '1'") input(type="radio",v-for="(macros,index) in config.macros",:id="tab{{index}}",:key="index",
label(for="tab1",style="height:50px;width:100px") Macros 1 :name="tabs",:checked="index == 0", @click="tab=index",:key="index")
label(:for="tab{{index}}",style="height:50px;width:100px",:key="index") Macros {{index+1}}
input#tab2(type="radio", name="tabs", @click="tab = '2'") section.tab-content(v-for="(macros,index) in config.macros",id="content{index}}",:key="index")
label(for="tab2",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
input#tab5(type="radio", name="tabs", @click="tab = '5'")
label(for="tab5",style="height:50px;width:100px") Macros 5
input#tab6(type="radio", name="tabs", @click="tab = '6'")
label(for="tab6",style="height:50px;width:100px") Macros 6
input#tab7(type="radio", name="tabs", @click="tab = '7'")
label(for="tab7",style="height:50px;width:100px") Macros 7
input#tab8(type="radio", name="tabs", @click="tab = '8'")
label(for="tab8",style="height:50px;width:100px") Macros 8
section#content1.tab-content
.macros-form .macros-form
p.title Name p.title Name
.input-container .input-container
input.input-color(type="color",id="macros-color-0",value="#ffffff") input.input-color(type="color",:id="macros-color-{{index}}",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-0" ,v-model="getMacrosName") input.input-name(type="text",minlength='1',maxlength='15',:id="macros-name-{{index}}" ,v-model="getMacrosName")
p.title G-Code p.title G-Code
.select-upload-gcode .flex-row-container
select#gcodeSelect-0(title="Select previously uploaded GCode programs.",selected select(:id="gcodeSelect-{{index}},title="Select previously uploaded GCode programs.",selected
v-model="selectedValues[tab - 1]",@change="loadMacrosGcode", :disabled="!is_ready", v-model="selectedValues[{{index}}]",@change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px") style="max-width:100%;height:40px;border-radius:5px")
option( selected='' value='default') Create G-Code option( selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}} option(v-for="file in macrosList", :value="file") {{file}}
@@ -81,207 +62,11 @@ script#macros-template(type="text/x-template")
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready", input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc") accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true", button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete :disabled="!selectedValues[{{index}}]=='default'") Delete
.fa.fa-trash .fa.fa-trash
br br
.gcodeContainer .gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode") textarea.new-gcode(id="gcode-field", :value="newGcode[{{index}}]" @input="updateNewGcode")
section#content2.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-1",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-1",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-1(title="Select previously uploaded GCode programs.",
v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")
section#content3.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-2",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-2",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-2(title="Select previously uploaded GCode programs.",
v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")
section#content4.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-3",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-3",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-3(title="Select previously uploaded GCode programs.",
v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")
section#content5.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-4",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-4",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-4(title="Select previously uploaded GCode programs.",
v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")
section#content6.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-5",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-5",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-5(title="Select previously uploaded GCode programs.",
v-model="selectedValues[tab - 1]", @change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")
section#content7.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-6",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-6",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-6(title="Select previously uploaded GCode programs.",selected
v-model="selectedValues[tab - 1]",@change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value='newGcode[tab-1]' @input="updateNewGcode")
section#content8.tab-content
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="macros-color-7",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name-7",v-model="getMacrosName")
p.title G-Code
.select-upload-gcode
select#gcodeSelect-7(title="Select previously uploaded GCode programs.",selected
v-model="selectedValues[tab - 1]",@change="loadMacrosGcode", :disabled="!is_ready",
style="max-width:100%;height:40px;border-radius:5px")
option(selected='' value='default') Create G-Code
option(v-for="file in macrosList", :value="file") {{file}}
button.blue-button(title="Upload a new GCode program.", @click="open",
:disabled="!is_ready") Upload
.fa.fa-upload
form.gcode-file-input.file-upload
input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready",
accept=".nc,.ngc,.gcode,.gc")
button.blue-button(title="Delete Macros GCode",@click="deleteGCode = true",
:disabled="!selectedValues[tab-1]=='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode( id="gcode-field",:value='newGcode[tab-1]' @input="updateNewGcode")
button.submit-macros.button-submit(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save 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="cancelMacros",style="margin-left:5px;background-color:#fafafa;") Cancel

5
src/stylus/style.styl
View File

@@ -623,11 +623,10 @@ span.unit
.macros-div .macros-div
display flex display flex
justify-content space-around justify-content space-around
height 60px
margin 10px margin 10px
margin-left 100px margin-left 100px
.macros-buttons:not([disabled]) .macros-buttons
height 60px height 60px
width 140px width 140px
font-weight normal font-weight normal
@@ -666,7 +665,7 @@ span.unit
border-radius 10px border-radius 10px
padding 20px padding 20px
.select-upload-gcode .flex-row-container
display flex display flex
flex-direction row flex-direction row