adding datatables to download page for sort/filtering, handle part 2 …

…files for delete, clean up render hooks to only work if users are on that page
netbootxyz · Dec 11, 2019 · 2f25183 · 2f25183
1 parent daa7462
commit 2f25183
Show file tree

Hide file tree

Showing 8 changed files with 287 additions and 27 deletions.
diff --git a/app.js b/app.js
@@ -108,21 +108,18 @@ io.on('connection', function(socket){
     });
   });
   // When the endpoints content is requested send it to the client
-  socket.on('getlocal', function(filename){
+  socket.on('getlocal', async function(filename){
     var remotemenuversion = fs.readFileSync('/config/menuversion.txt', 'utf8');
-    request.get('https://raw.githubusercontent.com/netbootxyz/netboot.xyz/' + remotemenuversion + '/endpoints.yml', async function (error, response, body) {
-      if (!error && response.statusCode == 200) {
-        var localfiles = await readdirp.promise('/assets/.');
-        var assets = [];
-        if (localfiles.length != 0){
-          for (var i in localfiles){
-            assets.push('/' + localfiles[i].path);
-          }
-        }
-        var endpoints = yaml.safeLoad(body);
-        io.sockets.in(socket.id).emit('renderlocal',endpoints,assets,remotemenuversion);
+    var endpointsfile = fs.readFileSync('/config/endpoints.yml');
+    var endpoints = yaml.safeLoad(endpointsfile);
+    var localfiles = await readdirp.promise('/assets/.');
+    var assets = [];
+    if (localfiles.length != 0){
+      for (var i in localfiles){
+        assets.push('/' + localfiles[i].path);
       }
-    });
+    }
+    io.sockets.in(socket.id).emit('renderlocal',endpoints,assets,remotemenuversion);
   });
   // When remote downloads are requested make folders and download
   socket.on('dlremote', function(dlfiles){
@@ -136,6 +133,10 @@ io.on('connection', function(socket){
       var file = dlfiles[i];
       fs.unlinkSync('/assets' + file);
       console.log('Deleted /assets' + file);
+      if (fs.existsSync('/assets' + file + '.part2')) {
+        fs.unlinkSync('/assets' + file + '.part2');
+        console.log('Deleted /assets' + file + '.part2');
+      }
     }
     io.sockets.in(socket.id).emit('renderlocalhook');
   });
@@ -176,6 +177,8 @@ async function upgrademenu(version, callback){
     var url = download_endpoint + file;    
     downloads.push({'url':url,'path':remote_folder});
   }
+  // static config for endpoints
+  downloads.push({'url':'https://raw.githubusercontent.com/netbootxyz/netboot.xyz/' + version +'/endpoints.yml','path':'/config/'});
   await downloader(downloads);
   var untarcmd = 'tar xf ' + remote_folder + 'menus.tar.gz -C ' + remote_folder;
   exec(untarcmd, function (err, stdout) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "WebApp",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Configuration and mirroring application for netboot.xyz stack",
   "main": "app.js",
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -28,6 +28,7 @@
     <!-- Stylesheets -->
     <link rel="stylesheet" href="/public/vendor/css/bootstrap.min.css">
     <link rel="stylesheet" href="/public/vendor/css/docs.min.css">
+    <link rel="stylesheet" href="/public/vendor/css/dataTables.bootstrap4.min.css">
   </head>
   <body>
     <!-- Navigation -->
@@ -62,6 +63,8 @@
     <!-- Plugin JavaScript -->
     <script src="/socket.io/socket.io.js"></script>
     <script src="/public/vendor/js/ace.js"></script>
+    <script src="/public/vendor/js/jquery.dataTables.min.js"></script>
+    <script src="/public/vendor/js/dataTables.bootstrap4.min.js"></script>
     <!-- Our JavaScript -->
     <script src="/public/js/netbootxyz-web.js"></script>
   </body>

diff --git a/public/js/netbootxyz-web.js b/public/js/netbootxyz-web.js
@@ -108,7 +108,9 @@ function upgrademenus(version){
 }
 // Re-render dash hook
 socket.on('renderdashhook', function(){
-  renderdash();
+  if($('#upgradebutton').length){
+    renderdash();
+  }
 });
 
 //// Config Page rendering ////
@@ -227,45 +229,100 @@ socket.on('renderlocal', function(endpoints,localfiles,remotemenuversion){
       <div class="card-header">\
         Remote Assets at <a target="_blank" href="https://github.com/netbootxyz/netboot.xyz/releases/' + remotemenuversion + '">' + remotemenuversion + '</a>\
         <span style="float:right;">\
-          <button onclick="remoteselect()" class="btn btn-primary btn-sm mr-2">Select All</button>\
-          <button onclick="remoteclear()" class="btn btn-secondary btn-sm mr-2">Clear Selection</button>\
-          <button onclick="dlremote()" class="btn btn-success btn-sm">Download Selected</button>\
+          <div class="form-row">\
+            <div class="col"><input type="text" class="form-control form-control-sm" id="remotesearch" placeholder="Filter.."></div>\
+            <div class="col"><button onclick="remoteselect()" class="btn btn-primary btn-sm form-control form-control-sm">Select All</button></div>\
+            <div class="col"><button onclick="remoteclear()" class="btn btn-secondary btn-sm form-control form-control-sm">Clear Selection</button></div>\
+            <div class="col"><button onclick="dlremote()" class="btn btn-success btn-sm form-control form-control-sm">Pull Selected</button></div>\
+          </div>\
         </span>\
       </div>\
       <div class="card-body">\
       <table class="table table-sm" id="remoteassets">\
+        <thead>\
+          <tr>\
+            <th>Asset Name</th>\
+            <th>Asset path</th>\
+            <th></th>\
+          </tr>\
+        </thead>\
       </table>\
       </div>\
     </div>\
     <div class="card">\
       <div class="card-header">\
         Local Assets\
         <span style="float:right;">\
-          <button onclick="localselect()" class="btn btn-primary btn-sm mr-2">Select All</button>\
-          <button onclick="localclear()" class="btn btn-secondary btn-sm">Clear Selection</button>\
-          <button onclick="deletelocal()" class="btn btn-danger btn-sm">Delete Selected</button>\
+          <div class="form-row">\
+            <div class="col"><input type="text" class="form-control form-control-sm" id="localsearch" placeholder="Filter.."></div>\
+            <div class="col"><button onclick="localselect()" class="btn btn-primary btn-sm form-control form-control-sm">Select All</button></div>\
+            <div class="col"><button onclick="localclear()" class="btn btn-secondary btn-sm form-control form-control-sm">Clear Selection</button></div>\
+            <div class="col"><button onclick="deletelocal()" class="btn btn-danger btn-sm form-control form-control-sm">Delete Selected</button></div>\
+          </div>\
         </span>\
       </div>\
       <div class="card-body">\
-      <table class="table table-sm" id="localassets">\
+      <table class="table table-sm" id="localassets" style=".dataTables_filter {display:none;}">\
+        <thead>\
+          <tr>\
+            <th>Asset Name</th>\
+            <th>Asset path</th>\
+            <th></th>\
+          </tr>\
+        </thead>\
       </table>\
       </div>\
     </div>\
   </div>');
-  $.each(endpoints.endpoints, function( index, value ) {
+  var tableoptions = {
+    "paging": false,
+    "bInfo" : false,
+    'sDom': 't',
+    "order": [[ 0, "asc" ]]
+  };
+  $("#localassets").dataTable().fnDestroy();
+  $("#remoteassets").dataTable().fnDestroy();
+  var localtable = $('#localassets').DataTable(tableoptions);
+  var remotetable = $('#remoteassets').DataTable(tableoptions);
+  localtable.clear();
+  remotetable.clear();
+  $.each(endpoints.endpoints, function(index,value){
     $.each(value.files, function( arrindex, file ) {
       if (localfiles.includes(value.path + file)){
-        $('#localassets').append('<tr><td><input type="checkbox" class="form-check-input localcheck" value="' + value.path + file + '"></td><td>' + index + '</td><td>' +  value.path.split('download/')[1] + file + '</td></tr>');
+        localtable.row.add( 
+          [
+            index,
+            value.path.split('download/')[1] + file,
+            '<span style="float:right;"><input type="checkbox" class="form-check-input localcheck" value="' + value.path + file + '"></span>'
+
+          ]
+        );
       }
       else{
-        $('#remoteassets').append('<tr><td><input type="checkbox" class="form-check-input remotecheck" value="' + value.path + file + '"></td><td>' + index + '</td><td><a href="https://github.com/netbootxyz' + value.path + file + '" target="_blank">' + value.path.split('download/')[1] + file + '</a></td></tr>');
+        remotetable.row.add( 
+          [
+            index,
+            '<a href="https://github.com/netbootxyz' + value.path + file + '" target="_blank">' + value.path.split('download/')[1] + file + '</a>',
+            '<span style="float:right;"><input type="checkbox" class="form-check-input remotecheck" value="' + value.path + file + '"></span>'
+          ]
+        );
       }
     });
   });
+  remotetable.draw();
+  localtable.draw();
+  $('#localsearch').keyup(function(){
+    localtable.search($(this).val()).draw() ;
+  })
+  $('#remotesearch').keyup(function(){
+    remotetable.search($(this).val()).draw() ;
+  })
 });
 function remoteselect(){   
   $('.remotecheck').each(function() {
-    this.checked = true;                        
+    if (this.style.display != "none"){
+      this.checked = true;
+    }
   });
 };
 function remoteclear(){   
@@ -299,7 +356,9 @@ function dlremote(){
 }
 // Re-render local hook
 socket.on('renderlocalhook', function(){
-  renderlocal();
+  if($('#localassets').length){
+   renderlocal();
+  }
 });
 // Delete local files
 function deletelocal(){

diff --git a/public/vendor/css/dataTables.bootstrap4.min.css b/public/vendor/css/dataTables.bootstrap4.min.css
diff --git a/public/vendor/js/dataTables.bootstrap4.min.js b/public/vendor/js/dataTables.bootstrap4.min.js