changed to computed

src/js/control-view.js

@@ -202,10 +202,18 @@ module.exports = {
             const p = this.plan_time / this.toolpath.time;
             return Math.min(1, p);
         },
-        gcode_files: function (){
+        gcode_files: async function (){
             const files=this.state.files.filter(item => !this.config.macrosList.some(compareItem => compareItem.gcode_file_name == item));
             console.log(files);
-            console.log(this.config.gcodeList);
+            this.config.gcodeList=files;
+            try {
+                await api.put("config/save", this.config);
+                console.log("Successfully saved");
+                this.$dispatch("update");
+              } catch (error) {
+                console.error("Restore Failed: ", error);
+                alert("Restore failed");
+              }
             return files;
         }
     },
@@ -372,10 +380,9 @@ module.exports = {
                     return;
             }
 
-            console.log(file.name);
             if(this.config.macrosList.some(obj => obj.gcode_file_name == files.name)){
                 console.log("It is a macros, remove it from macrosList")
-                this.config.gcodeList.push(file.name);
+                // this.config.gcodeList.push(file.name);
             }
 
             SvelteComponents.showDialog("Upload", {

src/js/macros.js

@@ -23,7 +23,6 @@ module.exports = {
         "default",
       ],
       newGcode: ["", "", "", "", "", "", "", ""],
-      macrosList: this.config.macrosList.map((el) => el.gcode_file_name),
     };
   },
   computed: {
@@ -40,11 +39,17 @@ module.exports = {
     is_ready: function () {
       return this.mach_state == "READY";
     },
-  },
-  methods: {
-    updateNewGcode(event) {
+    updateNewGcode: function (event) {
       this.newGcode[this.tab - 1] = event.target.value;
     },
+    loadGcode: function (data){
+      this.newGcode[this.tab - 1] = data;
+    },
+    macrosList: function (){
+      return this.config.macrosList.map((el) => el.gcode_file_name);
+    }
+  },
+  methods: {
     open: function () {
       utils.clickFileInput("gcode-file-input");
     },
@@ -56,12 +61,12 @@ module.exports = {
         });
         const text = (await response.text()).split(" ").join("\n");
         if (text.length > 20e6) {
-          this.newGcode[this.tab - 1] = "File is large - gcode view disabled";
+          this.loadGcode("File is large - gcode view disabled");
         } else {
-          this.newGcode[this.tab - 1] = text;
+          this.loadGcode(text);
         }
       } else {
-        this.newGcode[this.tab - 1] = "";
+        this.loadGcode("");
       }
       console.log(this.newGcode[this.tab - 1]);
     },