From d445ebe0b5ae07d5a58ee8893c6c508c0c449f05 Mon Sep 17 00:00:00 2001 From: sanjayk03-dev Date: Thu, 28 Mar 2024 15:58:36 +0530 Subject: [PATCH] folder management, macros to macro --- src/js/control-view.js | 89 ++++++++++++++++++++++-------- src/js/macros.js | 19 ++++--- src/pug/templates/control-view.pug | 61 +++++++++++--------- src/pug/templates/macros.pug | 24 ++++---- src/resources/config-template.json | 16 +++--- 5 files changed, 132 insertions(+), 77 deletions(-) diff --git a/src/js/control-view.js b/src/js/control-view.js index 3cc18fb..fecdc9f 100644 --- a/src/js/control-view.js +++ b/src/js/control-view.js @@ -41,6 +41,9 @@ module.exports = { deleteGCode: false, tab: "auto", ask_home: true, + folder_name: "", + edited: false, + create_folder: false, showGcodeMessage: false, showNoGcodeMessage: false, macrosLoading: false, @@ -214,14 +217,15 @@ module.exports = { return item.name; } }); + console.log("217", files); return files; } files = this.config.gcode_list.find(item => item.name == this.state.folder).files.map(item => item.file_name); - console.log(files); + console.log("221", files); return files; }, gcode_folders: function () { - let folders = ["Unorganized files"]; + let folders = []; for (let item of this.config.gcode_list) { if (item.type == "folder") { folders.push(item.name); @@ -250,6 +254,9 @@ module.exports = { M72 `); }, + folder_name_edited: function () { + this.edited = true; + }, }, ready: function () { @@ -433,6 +440,45 @@ module.exports = { }); }, + edited_folder_name: function (event) { + if (event.target.value.trim() != "") { + this.$dispatch("folder_name_edited"); + } + }, + + modify_files: function (fileList) { + const fileArray = Array.from(fileList); + fileArray.shift(); + + const newFileList = new DataTransfer().files; + fileArray.forEach(file => newFileList.add(file)); + + return newFileList; + }, + + create_new_folder: async function () { + console.log(this.folder_name); + if ( + this.folder_name.trim() != "" && + !this.config.gcode_list.find(item => item.type == "folder" && item.name == this.folder_name) + ) { + this.config.gcode_list.push({ + name: this.folder_name, + type: "folder", + files: [], + }); + this.edited = false; + try { + await api.put("config/save", this.config); + this.state.folder = this.folder_name; + this.$dispatch("update"); + } catch (error) { + console.error("Restore Failed: ", error); + alert("Restore failed"); + } + } + }, + upload_folder: async function (e) { const files = e.target.files || e.dataTransfer.files; if (!files.length) { @@ -479,10 +525,16 @@ module.exports = { onComplete: () => { this.last_file_time = undefined; // Force reload this.$broadcast("gcode-reload", file.name); - files.shift(); - const remaining_files = { ...e }; - remaining_files.target.files = new DataTransfer(files).files; - this.upload_folder(remaining_files); + const remaining_files = this.modify_files(files); + const updated_event = { ...e }; + if (updated_event.target) { + updated_event.target.files = remaining_files; + } else if (updated_event.dataTransfer) { + updated_event.dataTransfer.files = remaining_files; + } else { + updated_event["target"] = { files: remaining_files }; + } + this.upload_folder(updated_event); }, }); } @@ -497,20 +549,14 @@ module.exports = { }, delete_current: async function () { - if (!this.config.macros_list.find(item => item.file_name == this.state.selected)) { - if (this.state.selected && !this.state.folder) { - this.config.non_macros_list = this.config.non_macros_list.filter( - item => item.file_name != this.state.selected, - ); - if (this.state.folder == "Unorganized files" || !this.state.folder) { - this.config.gcode_list.filter(item => item.type == "file" && item.name == this.state.selected); - } else { - this.config.gcode_list[this.state.folder].files.filter(item => item.file_name == this.state.selected); - } - api.delete(`file/${this.state.selected}`); - } + this.config.non_macros_list = this.config.non_macros_list.filter(item => item.file_name != this.state.selected); + if (this.state.selected && (this.state.folder == "Unorganized files" || !this.state.folder)) { + this.config.gcode_list.filter(item => item.type == "file" && item.name == this.state.selected); } else { - this.config.non_macros_list = this.config.non_macros_list.filter(item => item.file_name != this.state.selected); + this.config.gcode_list[this.state.folder].files.filter(item => item.file_name == this.state.selected); + } + if (!this.config.macros_list.find(item => item.file_name == this.state.selected)) { + api.delete(`file/${this.state.selected}`); } try { await api.put("config/save", this.config); @@ -519,7 +565,6 @@ module.exports = { console.error("Restore Failed: ", error); alert("Restore failed"); } - this.deleteGCode = false; }, @@ -532,7 +577,7 @@ module.exports = { const macrosList = this.config.macros_list.map(item => item.file_name).toString(); api.delete(`file/EgZjaHJvbWUqCggBEAAYsQMYgAQyBggAEEUYOTIKCAE${macrosList}`); this.config.non_macros_list = []; - this.state.folder = ""; + this.state.folder = "Unorganized files"; this.config.gcode_list = []; try { await api.put("config/save", this.config); @@ -653,7 +698,7 @@ module.exports = { showProbeDialog: function (probeType) { SvelteComponents.showDialog("Probe", { probeType }); }, - runMacros: function (id) { + run_macro: function (id) { if (this.config.macros[id].file_name == "default") { this.showNoGcodeMessage = true; } else { diff --git a/src/js/macros.js b/src/js/macros.js index 49f8a16..06e5414 100644 --- a/src/js/macros.js +++ b/src/js/macros.js @@ -199,6 +199,7 @@ module.exports = { const macros = [...this.config.macros]; macros.splice(this.tab - 1, 1); const macros_list = macros.map(item => item.name); + console.log(this.macrosName); var macrosName = document.getElementById("macros-name").value; var macrosColor = document.getElementById("macros-color").value; var macrosAlert = this.isChecked; @@ -277,49 +278,49 @@ module.exports = { delete_all_macros: async function () { this.config.macros = [ { - name: "Macros 1", + name: "Macro 1", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 2", + name: "Macro 2", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 3", + name: "Macro 3", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 4", + name: "Macro 4", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 5", + name: "Macro 5", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 6", + name: "Macro 6", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 7", + name: "Macro 7", color: "#dedede", file_name: "default", alert: true, }, { - name: "Macros 8", + name: "Macro 8", color: "#dedede", file_name: "default", alert: true, @@ -346,7 +347,7 @@ module.exports = { return; } const newMacros = { - name: `Macros ${length + 1}`, + name: `Macro ${length + 1}`, color: "#dedede", file_name: "default", alert: true, diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug index a4f3cff..9ed564c 100644 --- a/src/pug/templates/control-view.pug +++ b/src/pug/templates/control-view.pug @@ -13,7 +13,7 @@ script#control-view-template(type="text/x-template") message(:show.sync="showNoGcodeMessage") h3(slot="header") GCode Not Set div(slot="body") - p Configure the GCode for the selected macros to use it + p Configure the GCode for the selected macro to use it div(slot="footer") button.pure-button(@click="showNoGcodeMessage=false") OK @@ -232,7 +232,7 @@ script#control-view-template(type="text/x-template") .macros-div(class="present") button.macros-button(title="Click to run Macros",v-for="(index,macros) in config.macros", - @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}} + @click="run_macro(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}} .tabs @@ -271,35 +271,17 @@ script#control-view-template(type="text/x-template") v-if="false", style="height:100px;width:100px;font-weight:normal") .fa.fa-step-forward - //- message(:show.sync="show_gcodes") - //- h3(slot="header") Select G-Code - //- div(slot="body") - //- details - //- summary - //- | folder name - //- ul.folder-list - //- li one - //- li two - - //- div(slot="footer") - //- button.pure-button(@click="show_gcodes=false") Cancel - //- button.pure-button.pure-button-primary(@click="show_gcodes=false") Select - - //- button.pure-button(title="Open Title", @click="show_gcodes=true", + //- button.pure-button(title="Upload a new GCode program.", @click="open_file", //- :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal") - //- .fa.fa-folder - - button.pure-button(title="Upload a new GCode program.", @click="open_file", - :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal") - .fa.fa-folder-open + //- .fa.fa-folder-open form.gcode-file-input.file-upload input(type="file", @change="upload_file", :disabled="!is_ready", accept=".nc,.ngc,.gcode,.gc") - button.pure-button(title="Upload a new GCode folder.", @click="open_folder", - :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal") - .fa.fa-folder + //- button.pure-button(title="Upload a new GCode folder.", @click="open_folder", + //- :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal") + //- .fa.fa-folder form.gcode-folder-input.file-upload input#folderInput(type="file", @change="upload_folder", :disabled="!is_ready", @@ -317,7 +299,7 @@ script#control-view-template(type="text/x-template") .fa.fa-trash message(:show.sync="deleteGCode") - h3(slot="header") Delete GCode? + h3(slot="header") Delete G-Code? p(slot="body") div(slot="footer") button.pure-button(@click="deleteGCode = false") Cancel @@ -329,15 +311,42 @@ script#control-view-template(type="text/x-template") |  Selected .drop-down-container + message(:show.sync="create_folder") + h3(slot="header") Enter folder name: + div(slot="body") + input.input-name(type="text",minlength='1',maxlength='15', + id="folder-name" ,v-model="folder_name",@keypress="edited_folder_name") + + div(slot="footer") + button.pure-button(@click="create_folder=false") Cancel + button.pure-button.button-error(@click="create_new_folder",:disabled="!edited") + | Create + select(title="Select previously uploaded GCode folder.", v-model="state.folder", :disabled="!is_ready", style="max-width:100%") + option( selected='' value='Unorganized files') Unorganized files option(v-for="file in gcode_folders", :value="file") {{file}} + + button.config-button.button-blue(title="Create a new folder.", @click="create_folder=true", + :disabled="!is_ready") + .fa.fa-plus + | Create Folder + + button.config-button.button-blue(title="Upload a new folder.", @click="open_folder", + :disabled="!is_ready") + .fa.fa-plus + | Upload Folder select(title="Select previously uploaded GCode programs.", v-model="state.selected", @change="load", :disabled="!is_ready", style="max-width:100%") option(v-for="file in gcode_files", :value="file") {{file}} + + button.config-button.button-blue(title="Upload a new GCode program.", @click="open_file", + :disabled="!is_ready") + .fa.fa-plus + | Upload File .progress(v-if="toolpath_progress && toolpath_progress < 1", title="Simulating GCode to check for errors, calculate ETA and " + diff --git a/src/pug/templates/macros.pug b/src/pug/templates/macros.pug index 487f377..9ee6a86 100644 --- a/src/pug/templates/macros.pug +++ b/src/pug/templates/macros.pug @@ -29,7 +29,7 @@ script#macros-template(type="text/x-template") |  Selected message(:show.sync="deleteSelected") - h3(slot="header") Delete Selected Macros? + h3(slot="header") Delete Selected Macro? p(slot="body") div(slot="footer") button.pure-button(@click="deleteSelected = false") Cancel @@ -52,7 +52,7 @@ script#macros-template(type="text/x-template") button.pure-button.button-submit(@click="sameName = false") OK message(:show.sync="addMacros") - h3(slot="header") Do you need to add another macros? + h3(slot="header") Do you need to add another macro? p(slot="body") div(slot="footer") button.pure-button(@click="addMacros = false") Cancel @@ -61,31 +61,31 @@ script#macros-template(type="text/x-template") h1 Macros Configuration .flex-row-container button.config-button.button-blue(title="Reset Macros", @click="confirmReset=true") Delete All - button.config-button.button-blue(title="Add a Macros", @click="addMacros=true", style="margin-left:5px") New Macros + button.config-button.button-blue(title="Add a Macros", @click="addMacros=true", style="margin-left:5px") New Macro button.config-button.button-blue(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected .warning-box p u Note: - | Select a Macros to edit its settings. + | Select a Macro to edit its settings. .tabs div(style="display:flex;align-items:center;margin-left:30px") - h2 Select Macros - select(id="macros-select",title="Select a Macros to edit.",selected + h2 Select Macro + select(id="macros-select",title="Select a Macro to edit.",selected v-model="tab",@change="clear_macro", style="width:250px;height:50px;border-radius:10px;padding-left:15px;font-weight:bold;margin-left:30px") - option( selected='' value='0') Select a Macros + option( selected='' value='0') Select a Macro option(v-for="(index,file) in macros_list", :value="index+1") {{file}} .macros-form - p.title Macros Name + p.title Macro Name .input-container input.input-color(type="color",id="macros-color",value="#ffffff",@change="editedColor") input.input-name(type="text",minlength='1',maxlength='15',id="macros-name" ,v-model="macrosName",@keypress="editedName") div input.input-alert(type="checkbox",id="macros-alert" v-model="isChecked",@change="editedAlert") label Would you like an alert when running this macro? - p.title Macros G-Code + p.title Macro G-Code .flex-row-container select(id="gcode-select",title="Select previously uploaded GCode programs.",selected v-model="fileName",@change="loadMacrosGcode", :disabled="!is_ready", @@ -100,15 +100,15 @@ script#macros-template(type="text/x-template") form.gcode-file-input.file-upload input(type="file", @change="uploadMacrosGcode", :disabled="!is_ready", accept=".nc,.ngc,.gcode,.gc") - button.config-button.button-blue(title="Delete Macros GCode",@click="deleteGCode = true", + button.config-button.button-blue(title="Delete Macro GCode",@click="deleteGCode = true", :disabled="!fileName =='default'") Delete .fa.fa-trash br .gcodeContainer textarea.new-gcode(id="gcode-field", v-model="newGcode" ,@keypress="updateNewGcode") - button.submit-macros.button-success(title="Save Macros",@click="confirmSave=true",:disabled="!edited") Save - button.submit-macros(title="Cancel Macros",@click="clear_macro",style="margin-left:5px;background-color:#fafafa;",:disabled="initial_tab") Cancel + button.submit-macros.button-success(title="Save Macro",@click="confirmSave=true",:disabled="!edited") Save + button.submit-macros(title="Cancel Macro",@click="clear_macro",style="margin-left:5px;background-color:#fafafa;",:disabled="initial_tab") Cancel button.submit-macros(title="Cancel Macros",@click="print_config",style="margin-left:5px;background-color:#fafafa;") CONFIG button.submit-macros(title="Cancel Macros",@click="print_state",style="margin-left:5px;background-color:#fafafa;") STATE diff --git a/src/resources/config-template.json b/src/resources/config-template.json index b186c2a..9d56bc5 100644 --- a/src/resources/config-template.json +++ b/src/resources/config-template.json @@ -537,49 +537,49 @@ "type": "list", "default": [ { - "name": "Macros 1", + "name": "Macro 1", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 2", + "name": "Macro 2", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 3", + "name": "Macro 3", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 4", + "name": "Macro 4", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 5", + "name": "Macro 5", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 6", + "name": "Macro 6", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 7", + "name": "Macro 7", "color": "#dedede", "file_name": "default", "alert": true }, { - "name": "Macros 8", + "name": "Macro 8", "color": "#dedede", "file_name": "default", "alert": true