delete multiple ui and code fix

src/js/control-view.js

@@ -625,7 +625,6 @@ module.exports = {
       }
 
       this.update_config();
-      console.log("files deleted: ", this.selected_items_to_delete);
 
       this.config.non_macros_list = this.config.non_macros_list.filter(
         item => !this.selected_items_to_delete.includes(item.file_name),
@@ -637,10 +636,10 @@ module.exports = {
         item => !this.selected_items_to_delete.includes(item.file_name),
       );
 
-      let files_to_delete = this.selected_items_to_delete.filter(item => !this.state.macros_list.includes(item));
+      const exception_list = this.state.macros_list.map(item => item.file_name);
+      let files_to_delete = this.selected_items_to_delete.filter(item => !exception_list.includes(item));
 
       await api.delete(`file/DINCAIQABiDARixAxiABDIHCAMQABiABDIHCAQQABiABDIH${files_to_delete.toString()}`);
-      console.log(this.config.non_macros_list, this.config.gcode_list);
 
       this.save_config(this.config);
       this.selected_items_to_delete = [];

src/pug/templates/control-view.pug

@@ -321,9 +321,9 @@ script#control-view-template(type="text/x-template")
             img(src="images/delete_gcode.png" style="height: 30px;")
 
           message(:show.sync="deleteGCode")
-            h3(slot="header") Delete G-Code?
+            h3(slot="header") Select files to delete:
             div(slot="body")
-              p Select files to delete:
+              .gcode_container
                 label(v-for="item in gcode_files" :key="item")
                   input(type="checkbox" :value="item" v-model="selected_items_to_delete")
                   | {{ item }}

src/stylus/style.styl

@@ -291,6 +291,12 @@ span.unit
 
   .drop-down-container
     height 50px
+  
+  .gcode_container
+    display grid
+    overflow-y scroll
+    max-height 400px
+    margin-bottom 10px
 
   table
     border-collapse collapse