From d27883494e86ee5b64848660ef63dec5fc87f0d2 Mon Sep 17 00:00:00 2001
From: bergware <ronald.vd.berg62@gmail.com>
Date: Tue, 1 May 2018 22:28:14 +0200
Subject: [PATCH] Make sorting of Docker and VM list draggable

---
 .../DockerContainers.page                     | 42 ++++++++---------
 .../include/DockerContainers.php              |  7 ++-
 plugins/dynamix.vm.manager/VMMachines.page    | 45 +++++++++----------
 .../dynamix.vm.manager/include/VMMachines.php | 14 +++---
 4 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/plugins/dynamix.docker.manager/DockerContainers.page b/plugins/dynamix.docker.manager/DockerContainers.page
index 27f7e586b..421524907 100644
--- a/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/plugins/dynamix.docker.manager/DockerContainers.page
@@ -17,8 +17,8 @@ Markdown="false"
  * all copies or substantial portions of the Software.
  */
 ?>
-<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.ui.css">
-<link type="text/css" rel="stylesheet" href="/webGui/styles/jquery.switchbutton.css">
+<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
+<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
 <style>
 .basic{display:block}
 .advanced{display:none;white-space:nowrap}
@@ -37,14 +37,15 @@ img.stopped{opacity:0.3}
 .switch-button-label.off{color:inherit}
 th.five{width:5%}
 th.eight{width:8%}
+tbody > tr.sortable:hover{cursor:move}
 </style>
 <div id="dialog-confirm" style="display:none;" title="Dialog Title"></div>
 <div id="iframe-popup" style="display:none;-webkit-overflow-scrolling:touch;"></div>
 <span class="status" style="margin-top:-44px"><span><input type="checkbox" class="advancedview"></span></span>
 <div class="spinner fixed"></div>
-<table class="tablesorter shift" id="docker_containers">
-<thead><tr><th></th><th>Application</th><th>Version</th><th>Network</th><th>Port Mappings <small>(App to Host)</small></th><th>Volume Mappings <small>(App to Host)</small></th><th class="eight">Autostart</th><th class="five">Log</th><th class="five" style="text-align:right;padding-right:24px"><a href="#" style="cursor:hand" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-sort"></i></a></th></tr></thead>
-<tbody id="docker_list"><tr><td colspan='8'><div class="spinner"></div></td></tr></tbody>
+<table id="docker_containers" class="tablesorter shift">
+<thead><tr><th><a href="#" style="cursor:hand;margin-left:12px" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-th-list"></i></a></th><th>Application</th><th>Version</th><th>Network</th><th>Port Mappings <small>(App to Host)</small></th><th>Volume Mappings <small>(App to Host)</small></th><th class="eight">Autostart</th><th class="five">Log</th></tr></thead>
+<tbody id="docker_list"><tr><td colspan='7'><div class="spinner"></div></td></tr></tbody>
 </table>
 <input type="button" onclick="addContainer()" value="Add Container" style="display:none">
 <input type="button" onclick="startAll()" value="Start all Containers" style="display:none">
@@ -81,11 +82,22 @@ function listview() {
     $('.docker_readmore').readmore({maxHeight:32,moreLink:"<a href='#' style='text-align:center'><i class='fa fa-chevron-down'></i></a>",lessLink:"<a href='#' style='text-align:center'><i class='fa fa-chevron-up'></i></a>"});
   }
 }
+var sortableHelper = function(e,i){
+  i.children().each(function(){
+    $(this).width($(this).width());
+  });
+  return i;
+};
 function loadlist(update) {
   $.get('/plugins/dynamix.docker.manager/include/DockerContainers.php',function(d) {
     var data = d.split(/\0/);
     $('div.spinner').hide('slow');
-    $('#docker_list').html(data[0]);
+    $('#docker_list').html(data[0]).sortable({helper:sortableHelper,items:'tr.sortable',opacity:0.4,update:function(e,i){
+      var row = $('#docker_list').find('tr:first');
+      var names = ''; var index = '';
+      row.parent().children().find('td.ct-name').each(function(){names+=$(this).text().replace(/Container ID.*$/,'')+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
+      $.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{names:names,index:index});
+    }});
     $('head').append('<script>'+data[1]+'<\/script>');
 <?if ($display['resize']):?>
     resize();
@@ -100,24 +112,6 @@ function loadlist(update) {
     context.init({preventDoubleContext:false});
     $('input[type=button]').prop('disabled',false).show('slow');
     if (!update) $('input#updateAll').hide();
-    $('i.up,i.down').click(function() {
-      var row = $(this).parents('tr:first');
-      var color1 = row.css('background-color');
-      if ($(this).is('.up')) {
-        var color2 = row.prev().css('background-color');
-        row.prev().css('background-color',color1);
-        row.css('background-color',color2);
-        row.insertBefore(row.prev());
-      } else {
-        var color2 = row.next().css('background-color');
-        row.next().css('background-color',color1);
-        row.css('background-color',color2);
-        row.insertAfter(row.next());
-      }
-      var names = ''; var index = '';
-      row.parent().children().find('td.ct-name').each(function(){names+=$(this).text().replace(/Container ID.*$/,'')+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
-      $.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{names:names,index:index});
-    });
   });
 }
 $(function() {
diff --git a/plugins/dynamix.docker.manager/include/DockerContainers.php b/plugins/dynamix.docker.manager/include/DockerContainers.php
index 916a41ff7..f7bab2fd2 100644
--- a/plugins/dynamix.docker.manager/include/DockerContainers.php
+++ b/plugins/dynamix.docker.manager/include/DockerContainers.php
@@ -68,7 +68,7 @@ foreach ($containers as $ct) {
     list($host_path,$container_path,$access_mode) = explode(':',$mount);
     $paths[] = sprintf('%s<i class="fa fa-%s" style="margin:0 6px"></i>%s', htmlspecialchars($container_path), $access_mode=='ro'?'long-arrow-left':'arrows-h', htmlspecialchars($host_path));
   }
-  echo "<tr><td style='width:48px;padding:4px'>";
+  echo "<tr class='sortable'><td style='width:48px;padding:4px'>";
   echo "<div id='$id' style='display:block; cursor:pointer'><div style='position:relative;width:48px;height:48px;margin:0px auto'>";
   echo "<img src='".htmlspecialchars($icon)."' class='$status' style='position:absolute;top:0;bottom:0;left:0;right:0;width:48px;height:48px'>";
   echo "<i class='fa iconstatus fa-$shape $status' title='$status'></i></div></div>";
@@ -102,8 +102,7 @@ foreach ($containers as $ct) {
   echo "<td style='word-break:break-all'><span class='docker_readmore'>".implode('<br>',$paths)."</span></td>";
   echo "<td><input type='checkbox' class='autostart' container='".htmlspecialchars($name)."'".($info['autostart'] ? ' checked':'')."></td>";
   echo "<td><a class='log' onclick=\"containerLogs('".addslashes(htmlspecialchars($name))."','$id',false,false)\"><img class='basic' src='/plugins/dynamix/icons/log.png'><div class='advanced'>";
-  echo htmlspecialchars(str_replace('Up','Uptime',$ct['Status']))."</div><div class='advanced' style='margin-top:4px'>Created ".htmlspecialchars($ct['Created'])."</div></a></td>";
-  echo "<td style='text-align:right;padding-right:12px'><a href='#' title='Move row up'><i class='fa fa-arrow-up up'></i></a>&nbsp;<a href='#' title='Move row down'><i class='fa fa-arrow-down down'></i></a></td></tr>";
+  echo htmlspecialchars(str_replace('Up','Uptime',$ct['Status']))."</div><div class='advanced' style='margin-top:4px'>Created ".htmlspecialchars($ct['Created'])."</div></a></td></tr>";
 }
 foreach ($images as $image) {
   if (count($image['usedBy'])) continue;
@@ -116,7 +115,7 @@ foreach ($images as $image) {
   echo "</div></div></td>";
   echo "<td><i>(orphan image)</i><div style='width:160px;'>Image ID: $id</div>";
   echo "<div style='width:160px'>".implode('<br>',array_map('htmlspecialchars',$image['Tags']))."</div></td>";
-  echo "<td colspan=4'>&nbsp;</td>";
+  echo "<td colspan=3'>&nbsp;</td>";
   echo "<td><div class='advanced' style='width:124px'>Created ".htmlspecialchars($image['Created'])."</div></td></tr>";
 }
 echo "\0".implode($menu).implode($docker);
diff --git a/plugins/dynamix.vm.manager/VMMachines.page b/plugins/dynamix.vm.manager/VMMachines.page
index ba36535c9..32d82b721 100644
--- a/plugins/dynamix.vm.manager/VMMachines.page
+++ b/plugins/dynamix.vm.manager/VMMachines.page
@@ -95,6 +95,7 @@ if (empty($vms)) {
 }
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
+<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.filetree.css')?>">
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
 <style type="text/css">
@@ -109,11 +110,12 @@ div.Panel{float:unset;margin:4px;height:inherit;border:none;}
 div.Panel:hover{background-color:unset;}
 div.PanelText{display:none;}
 th.five{width:5%}
+tbody > tr.sortable:hover{cursor:move}
 </style>
 <div class="spinner fixed"></div>
 <table id="kvm_table" class="tablesorter shift">
-<thead><tr><th><i class="fa fa-th-list"></i></th><th>Name</th><th>Description</th><th>CPUs</th><th>Memory</th><th>vDisks</th><th>Graphics</th><th class="five">Autostart</th><th class="five" style="text-align:right;padding-right:24px"><a href="#" style="cursor:hand" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-sort"></i></a></th></tr></thead>
-<tbody id="kvm_list"><tr><td colspan='9'><div class="spinner"></div></td></tr></tbody>
+<thead><tr><th><a href="#" style="cursor:hand;margin-left:12px" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-th-list"></i></a></th><th>Name</th><th>Description</th><th>CPUs</th><th>Memory</th><th>vDisks</th><th>Graphics</th><th class="five">Autostart</th></tr></thead>
+<tbody id="kvm_list"><tr><td colspan='8'><div class="spinner"></div></td></tr></tbody>
 </table>
 <input type="button" onclick="addVM()" id="btnAddVM" value="Add VM" style="display:none">
 <input type="button" onclick="startAll()" value="Start all VMs" style="display:none">
@@ -141,11 +143,27 @@ function resetSorting() {
   $('input[type=button]').prop('disabled',true);
   $.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{reset:true},function(){loadlist();});
 }
+var sortableHelper = function(e,i){
+  i.children().each(function(){
+    $(this).width($(this).width());
+  });
+  return i;
+};
 function loadlist() {
   $.get('/plugins/dynamix.vm.manager/include/VMMachines.php',{show:$.cookie('vmshow')},function(d) {
     var data = d.split(/\0/);
     $('div.spinner').hide('slow');
-    $('#kvm_list').html(data[0]);
+    $('#kvm_list').html(data[0]).sortable({helper:sortableHelper,items:'tr.sortable',opacity:0.4,update:function(e,i){
+      $('#kvm_list').find('tr.sortable').each(function(){
+        var parent = $(this).attr('parent-id');
+        var child = $('tr[child-id="'+parent+'"]');
+        child.detach().insertAfter($(this));
+      });
+      var row = $('#kvm_list').find('tr:first');
+      var names = ''; var index = '';
+      row.parent().children().find('td.vm-name').each(function(){names+=$(this).text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
+      $.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{names:names,index:index});
+    }});
     $('head').append('<script>'+data[1]+'<\/script>');
 <?if ($display['resize']):?>
     resize();
@@ -175,27 +193,6 @@ function loadlist() {
     $('input[type=button]').prop('disabled',false).show('slow');
     $('.text').click(showInput);
     $('.input').blur(hideInput);
-    $('i.up,i.down').click(function() {
-      var row1 = $(this).parents('tr:first');
-      var row2 = row1.next();
-      var color1 = row1.css('background-color');
-      if ($(this).is('.up')) {
-        var color2 = row1.prev().prev().css('background-color');
-        row1.prev().prev().css('background-color',color1);
-        row1.css('background-color',color2);
-        row1.insertBefore(row1.prev().prev());
-        row2.insertBefore(row2.prev().prev());
-      } else {
-        var color2 = row1.next().next().css('background-color');
-        row1.next().next().css('background-color',color1);
-        row1.css('background-color',color2);
-        row2.insertAfter(row2.next().next());
-        row1.insertAfter(row1.next().next());
-      }
-      var names = ''; var index = '';
-      row1.parent().children().find('td.vm-name').each(function(){names+=$(this).text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
-      $.post('/plugins/dynamix.vm.manager/include/UserPrefs.php',{names:names,index:index});
-    });
   });
 }
 $(function() {
diff --git a/plugins/dynamix.vm.manager/include/VMMachines.php b/plugins/dynamix.vm.manager/include/VMMachines.php
index 4b6511cf6..d4344b3a3 100644
--- a/plugins/dynamix.vm.manager/include/VMMachines.php
+++ b/plugins/dynamix.vm.manager/include/VMMachines.php
@@ -81,21 +81,21 @@ foreach ($vms as $vm) {
   unset($dom);
   $menu[] = sprintf("addVMContext('%s','%s','%s','%s','%s','%s');", addslashes($vm),addslashes($uuid),addslashes($template),$state,addslashes($vnc),addslashes($log));
   $kvm[] = "kvm.push({id:'$uuid',state:'$state'});";
+
   /* VM information */
-  echo "<tr style='background-color:".bcolor($i)."'>";
+  echo "<tr parent-id='$i' class='sortable'>";
   echo "<td style='width:48px;padding:4px'>".renderVMContentIcon($uuid, $vm, $vmicon, $state)."</td>";
-  echo "<td class='vm-name'><a href='#' onclick='return toggle_id(\"name{$i}\")' title='click for more VM info'>$vm</a></td>";
+  echo "<td class='vm-name'><a href='#' onclick='return toggle_id(\"name-$i\")' title='click for more VM info'>$vm</a></td>";
   echo "<td>$desc</td>";
   echo "<td><a class='vcpu-$uuid' style='cursor:pointer'>$vcpu</a></td>";
   echo "<td>$mem</td>";
   echo "<td title='$diskdesc'>$disks</td>";
   echo "<td>$graphics</td>";
-  echo "<td><input class='autostart' type='checkbox' name='auto_{$vm}' title='Toggle VM auostart' uuid='$uuid' $auto></td>";
-  echo "<td style='text-align:right;padding-right:12px'><a href='#' title='Move row up'><i class='fa fa-arrow-up up'></i></a>&nbsp;<a href='#' title='Move row down'><i class='fa fa-arrow-down down'></i></a></td></tr>";
+  echo "<td><input class='autostart' type='checkbox' name='auto_{$vm}' title='Toggle VM auostart' uuid='$uuid' $auto></td></tr>";
 
   /* Disk device information */
-  echo "<tr id='name{$i}".(in_array('name'.$i++,$show) ? "'>" : "' style='display:none'>");
-  echo "<td colspan='7' style='overflow:hidden'>";
+  echo "<tr child-id='$i' id='name-$i".(in_array('name-'.$i++,$show) ? "'>" : "' style='display:none'>");
+  echo "<td colspan='8' style='overflow:hidden'>";
   echo "<table class='tablesorter domdisk' id='domdisk_table'>";
   echo "<thead><tr><th><i class='fa fa-hdd-o'></i><b> Disk devices &nbsp;</b></th><th>Bus</th><th>Capacity</th><th>Allocation</th></tr></thead>";
   echo "<tbody id='domdisk_list'>";
@@ -124,7 +124,6 @@ foreach ($vms as $vm) {
     }
     echo "<td>$allocation</td></tr>";
   }
-  /* end Display VM disks */
 
   /* Display VM cdroms */
   foreach ($lv->get_cdrom_stats($res) as $arrCD) {
@@ -136,7 +135,6 @@ foreach ($vms as $vm) {
     echo "<tr><td>$disk</td><td>$bus</td><td>$capacity</td><td>$allocation</td></tr>";
   }
 
-  /* end Display VM cdroms */
   echo "</tbody></table>";
   echo "</td></tr>";
 }