Multi delete files

firmware_mod/www/index.html

@@ -4,7 +4,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Third part lib css and js-->
 <!-- W3 School css-->
-<link rel="stylesheet" href="lib/w3css/w3.css" />
+<link rel="stylesheet" href="lib/w3css/w3.css" type="text/css" />
 <!-- jQuery  -->
 <script type="text/javascript" src="lib/jquerry/jquery.min.js"></script>
 <!-- fontawesome -->
@@ -13,14 +13,13 @@
 <link rel="stylesheet" href="lib/selectareas/jquery.selectareas.css" media="screen"  type="text/css" />
 <script src="lib/selectareas/jquery.selectareas.min.js" type="text/javascript"></script>
 <!-- datatable -->
-<script type="text/javascript" src="lib/datatable/datatables.min.css"></script>
+<link rel="stylesheet" href="lib/datatable/datatables.min.css" type="text/css" />
 <script type="text/javascript" src="lib/datatable/datatables.min.js"></script>
 <!-- smoothie-->
 <script type="text/javascript" src="lib/smoothie/smoothie.js"></script>
 <!-- Dafang hack CSS-->
-<link rel="stylesheet" href="css/w3-toggle.css" />
+<link rel="stylesheet" href="css/w3-toggle.css" type="text/css" />
-<link rel="stylesheet" href="css/w3-accordion.css" />
+<link rel="stylesheet" href="css/w3-accordion.css" type="text/css" />
-<link rel="stylesheet" href="css/datatables.min.css" type="text/css"/>
 
 <script type="text/javascript">
 //Check if theme configured

firmware_mod/www/js/sdcard.js

@@ -1,7 +1,12 @@
 //Function to delete a file
-function deleteFile(fileName,dir) {
+function deleteFile(fileName,dir,confirm) {
-    var del = confirm("Confirm delete file: "+fileName);
+    if (confirm)
-    if ( del ) { 
+        var del = confirm("Confirm delete file: "+fileName);
+        if ( del ) { 
+            $.get("cgi-bin/ui_sdcard.cgi", {cmd: "del_file",file: fileName});
+            getFiles(dir);
+        }
+    else {
         $.get("cgi-bin/ui_sdcard.cgi", {cmd: "del_file",file: fileName});
         getFiles(dir);
     }
@@ -17,7 +22,7 @@ function openPicture(img) {
 function getFiles(dir) {
     // Get files from dir
     $.get("cgi-bin/ui_sdcard.cgi", {cmd: "getFiles", dir: dir}, function(config){             
-        $('#'+dir).html(" <p></p>\
+        $('#'+dir).html(" <p><button id='del_"+dir+"' class='w3-btn w3-theme'>Delete selected</button></p>\
         <table class='w3-table-all' id='result_"+dir+"'>\
         <thead>\
           <tr class='w3-theme'>\
@@ -43,19 +48,25 @@ function getFiles(dir) {
          <td>"+config_info[2]+"</td> \
          <td> \
              <a href=\""+config_info[3]+"\" download><i class='fas fa-download' title='Download file'></i></a> \
-            <span onclick=\"deleteFile('"+config_info[3]+"','"+dir+"')\"><i class='fas fa-trash' title='Delete file'></i></span>\
+            <span onclick=\"deleteFile('"+config_info[3]+"','"+dir+",true')\"><i class='fas fa-trash' title='Delete file'></i></span>\
             "+html_photo+"\
             </td></tr>");
         }
         $('#'+dir).append("</tbody></table><p></p>");
 
         var table = $('#result_'+dir).DataTable();
-        $('#result'+dir).on( 'click', 'tr', function () {
+        $('#result_'+dir+' tbody').on( 'click', 'tr', function () {
-            //$(this).toggleClass('selected');
+            $(this).toggleClass('selected');
         } );
      
-        $('#result'+dir).click( function () {
+        $('#del_'+dir).click( function () {
-            //alert( table.rows('.selected').data().length +' row(s) selected' );
+            var del = confirm("Confirm delete of "+ table.rows('.selected').data().length +" files");
+            if(del) {
+                table.rows('.selected').data().each( function ( value, index ) {   
+                    filename = value[3].split("\"");                 
+                    deleteFile(filename[1],dir,false);
+                } );
+            }
         } );
 
     });
@@ -67,8 +78,6 @@ function onLoad() {
     accordion();
     //Get configuration
     getFiles('motion');
-
-   
 }
 
 onLoad();