adding forms

This commit is contained in:
sanjayk03-dev
2024-01-29 15:42:38 +05:30
parent 3107500ff7
commit cf7908ff41
2 changed files with 60 additions and 35 deletions

View File

@@ -16,7 +16,9 @@ module.exports = {
deleteGCode: false, deleteGCode: false,
edited: false, edited: false,
maxLimitReached: false, maxLimitReached: false,
newGcode: new Array(this.config.macros.length).fill(""), newGcode: "",
fileName: "default",
macrosName:"",
}; };
}, },
events: { events: {
@@ -59,12 +61,12 @@ 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 = event.target.value;
this.$dispatch("macros-edited"); this.$dispatch("macros-edited");
}, },
loadMacrosGcode: async function () { loadMacrosGcode: async function () {
const file = this.config.macros[this.tab - 1].file_name; const file = this.fileName;
if (this.config.macros[this.tab - 1].file_name != "default") { if (file != "default") {
const response = await fetch(`/api/file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${file}`, { const response = await fetch(`/api/file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${file}`, {
cache: "no-cache", cache: "no-cache",
}); });
@@ -72,15 +74,15 @@ module.exports = {
if (response.status == 200) { if (response.status == 200) {
const text = (await response.text()).split(" ").join("\n"); const text = (await response.text()).split(" ").join("\n");
console.log("text: ", text); console.log("text: ", text);
this.$set("newGcode[this.tab-1]", text); this.$set("newGcode", text);
} else { } else {
console.log("error loading"); console.log("error loading");
} }
} else { } else {
this.$set("newGcode[this.tab-1]", ""); this.$set("newGcode", "");
} }
this.$dispatch("macros-edited"); this.$dispatch("macros-edited");
console.log("loaded GCode: ", this.newGcode[this.tab - 1]); console.log("loaded GCode: ", this.newGcode);
}, },
uploadMacrosGcode: async function (e) { uploadMacrosGcode: async function (e) {
const files = e.target.files || e.dataTransfer.files; const files = e.target.files || e.dataTransfer.files;
@@ -107,7 +109,7 @@ module.exports = {
}; };
if (!this.config.macrosList.some(item => item.file_name == file.name)) { if (!this.config.macrosList.some(item => item.file_name == file.name)) {
console.log("new gcode file for macros"); console.log("new gcode file for macros");
this.config.macros[this.tab - 1].file_name = file.name; this.fileName = file.name;
this.config.macrosList.push(gcodeData); this.config.macrosList.push(gcodeData);
try { try {
await api.put("config/save", this.config); await api.put("config/save", this.config);
@@ -170,17 +172,15 @@ module.exports = {
} }
}, },
saveMacros: async function () { saveMacros: async function () {
var macrosName = document.getElementById(`macros-name-${this.tab - 1}`).value; var macrosName = document.getElementById(`macros-name`).value;
var macrosColor = document.getElementById(`macros-color-${this.tab - 1}`).value; console.log("Macros Name: ",this.macrosName)
var macrosColor = document.getElementById(`macros-color`).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.config.macros[this.tab - 1].file_name); console.log("selectedValues: ", this.config.macros[this.tab - 1].file_name);
var file_name = var file_name = this.fileName == "default" ? macrosName + ".ngc" : this.fileName;
this.config.macros[this.tab - 1].file_name == "default" var file = this.newGcode;
? macrosName + ".ngc"
: this.config.macros[this.tab - 1].file_name;
var file = this.newGcode[this.tab - 1];
this.uploadGCode(file_name, file); this.uploadGCode(file_name, file);
@@ -199,17 +199,16 @@ module.exports = {
alert("Restore failed"); alert("Restore failed");
} }
console.log("tab in saveMacros:", this.tab); console.log("tab in saveMacros:", this.tab);
this.$set("tab", "1");
}, },
delete_current: async function () { delete_current: async function () {
const filename = this.config.macros[this.tab - 1].file_name; const filename = this.fileName;
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.config.macros[this.tab - 1].file_name = "default"; this.fileName="default";
} else { } else {
api.delete(`file/${filename}`); api.delete(`file/${filename}`);
this.$set("newGcode[this.tab-1]", ""); this.$set("newGcode", "");
this.config.macros[this.tab - 1].file_name = "default"; this.config.macros[this.tab - 1].file_name = "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);
} }
@@ -221,7 +220,6 @@ module.exports = {
alert("Restore failed"); alert("Restore failed");
} }
console.log("tab in delete_current:", this.tab); console.log("tab in delete_current:", this.tab);
this.$set("tab", "1");
this.deleteGCode = false; this.deleteGCode = false;
}, },
delete_all_macros: async function () { delete_all_macros: async function () {
@@ -229,16 +227,16 @@ module.exports = {
api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${macrosList}`); api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${macrosList}`);
this.config.macrosList = []; this.config.macrosList = [];
}, },
cancelMacros: async function () { clearMacros: async function () {
console.log("this.tab", this.tab - 1); console.log("this.tab", this.tab - 1);
console.log(document.getElementById(`macros-name-${this.tab - 1}`).value); console.log(document.getElementById(`macros-name`).value);
const defaultValue = this.config.macros[this.tab - 1]; const defaultValue = this.config.macros[this.tab - 1];
console.log(defaultValue); console.log(defaultValue);
document.getElementById(`macros-name-${this.tab - 1}`).value = defaultValue.name; document.getElementById(`macros-name`).value = defaultValue.name;
document.getElementById(`macros-color-${this.tab - 1}`).value = defaultValue.color; document.getElementById(`macros-color`).value = defaultValue.color;
document.getElementById("gcode-field").value = ""; document.getElementById("gcode-field").value = "";
this.$set("newGcode[this.tab-1]", ""); this.$set("newGcode", "");
this.config.macros[this.tab - 1].file_name = "default"; this.fileName = "default";
}, },
deleteAllMacros: async function () { deleteAllMacros: async function () {
this.config.macros = [ this.config.macros = [
@@ -284,9 +282,8 @@ module.exports = {
}, },
]; ];
this.delete_all_macros(); this.delete_all_macros();
this.cancelMacros(); this.clearMacros();
console.log("tab in delete all:", this.tab); console.log("tab in delete all:", this.tab);
this.$set("tab", "1");
this.confirmReset = false; this.confirmReset = false;
try { try {
await api.put("config/save", this.config); await api.put("config/save", this.config);
@@ -336,6 +333,7 @@ module.exports = {
}, },
deleteSelectedMacros: async function () { deleteSelectedMacros: async function () {
this.config.macros.splice(this.tab - 1, 1); this.config.macros.splice(this.tab - 1, 1);
this.clearMacros();
try { try {
await api.put("config/save", this.config); await api.put("config/save", this.config);
this.$dispatch("update"); this.$dispatch("update");
@@ -347,6 +345,7 @@ module.exports = {
}, },
loadMacrosSettings: function () { loadMacrosSettings: function () {
console.log("selected : ", this.tab); console.log("selected : ", this.tab);
this.$set("fileName", this.config.macros[this.tab-1].name);
}, },
}, },
}; };

View File

@@ -48,7 +48,7 @@ script#macros-template(type="text/x-template")
.flex-row-container .flex-row-container
button.blue-button(title="Reset Macros", @click="confirmReset=true") Delete All button.blue-button(title="Reset Macros", @click="confirmReset=true") Delete All
button.blue-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros button.blue-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
// button.blue-button(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected button.blue-button(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
.warning-box .warning-box
p p
@@ -56,14 +56,40 @@ script#macros-template(type="text/x-template")
| Select a Macros to edit its settings. | Select a Macros to edit its settings.
.tabs .tabs
select(:id="macros-select",title="Select a Macros to edit.",selected select(id="macros-select",title="Select a Macros to edit.",selected
v-model="tab",@change="loadMacrosSettings", v-model="tab",@change="loadMacrosSettings",
style="width:500px;height:50px;border-radius:10px") style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold")
option( selected='' value='0') Select a Macros option( selected='' value='0') Select a Macros
option(v-for="(index,file) in macrosList", :value="index+1") Macros {{index+1}} option(v-for="(index,file) in macrosList", :value="index+1") Macros {{index+1}}
.macros-form
p.title Name
.input-container
input.input-color(type="color",id="'macros-color",value="#ffffff")
input.input-name(type="text",minlength='1',maxlength='15',id="macros-name" ,v-model="macrosName")
p.title G-Code
.flex-row-container
select(id="gcode-select",title="Select previously uploaded GCode programs.",selected
v-model="fileName",@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 macrosGCodeList", :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="!fileName =='default'") Delete
.fa.fa-trash
br
.gcodeContainer
textarea.new-gcode(id="gcode-field", :value="newGcode" @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="clearMacros",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="printState",style="margin-left:5px") Print State
button.submit-macros(title="Cancel Macros",@click="printConfig",style="margin-left:5px") Print Config button.submit-macros(title="Cancel Macros",@click="printConfig",style="margin-left:5px") Print Config