sortable disk utilisation page. Better pie chart click handling

git-svn-id: file:///root/webif/svn/humax/pkg/src/webif/trunk@2075 2a923420-c742-0410-a762-8d5b09965624

CONTROL/control

@@ -1,10 +1,10 @@
 Package: webif
 Priority: optional
 Section: web
-Version: 1.0.17-10
+Version: 1.0.18
 Architecture: mipsel
 Maintainer: af123@hummypkg.org.uk
-Depends: webif-channelicons(>=1.1.13),lighttpd(>=1.4.35-2),jim(>=0.75-1),jim-oo,jim-sqlite3(>=0.75),jim-cgi(>=0.7),jim-binary(>=0.75),service-control(>=1.2),busybox(>=1.20.2-1),lsof(>=4.87),epg(>=1.0.14),hmt(>=1.1.21),ssmtp,anacron,trm(>=1.1),openssl-command,nicesplice,id3v2,file,rsvsync(>=1.0.2),webif-charts(>=1.2-1),stripts(>=1.2.5-3),smartmontools,tmenu(>=1.08),ffmpeg,id3v2,multienv(>=1.6),tcpping(>=1.1),mongoose
+Depends: webif-channelicons(>=1.1.14),lighttpd(>=1.4.35-2),jim(>=0.75-1),jim-oo,jim-sqlite3(>=0.75),jim-cgi(>=0.7),jim-binary(>=0.75),service-control(>=1.2),busybox(>=1.20.2-1),lsof(>=4.87),epg(>=1.0.14),hmt(>=1.1.21),ssmtp,anacron,trm(>=1.1),openssl-command,nicesplice,id3v2,file,rsvsync(>=1.0.2),webif-charts(>=1.2-1),stripts(>=1.2.5-3),smartmontools,tmenu(>=1.08),ffmpeg,id3v2,multienv(>=1.6),tcpping(>=1.1),mongoose
 Suggests:
 Description: An evolving web interface for the Humax.
 Tags: http://hummy.tv/forum/threads/5031/

webif/html/browse/index.jim

@@ -17,7 +17,7 @@ set nicesplice [system pkginst nicesplice]
 set flatten [system pkginst flatten]
 
 set ignore {.nts .thm .hmi}
-set include {.ts .avi .mpg .mpeg .wmv .mkv .mp3 .mp4 .mov .hmt}
+set include {.ts .avi .mpg .mpeg .wmv .mkv .mp3 .mp4 .mov .hmt .m4v}
 
 if {![dict exists $env SCRIPT_NAME]} {
 	set env(SCRIPT_NAME) ""

webif/html/diag/dspace/index.jim

@@ -4,7 +4,7 @@ package require cgi
 source /mod/webif/lib/setup
 require system.class pretty_size
 
-jqplugin easy-pie-chart
+jqplugin easy-pie-chart sortelements
 jscss script.js style.css
 header
 
@@ -26,7 +26,7 @@ proc hasnew {dir} {
 
 set rsize 0
 
-proc gen {dir ddir {depth 0} {expand 0}} {
+proc gen {dir ddir {depth 0} {expand 0}} {{i 0}} {
 	global root lroot rsize
 
 	if {[catch {set dsize [exec /mod/bin/busybox/du -s "$dir/"]} msg]} {
@@ -56,10 +56,12 @@ proc gen {dir ddir {depth 0} {expand 0}} {
 	set perc $($dsize * 100 / $rsize)
 
 	puts -nonewline "
-	    <div class=\"va $class\" style=\"padding-left: ${depth}em\">
+	    <div class=\"va $class dir\" size=$dsize sind=$i
+	      style=\"padding-left: ${depth}em\">
 		<img border=0 class=\"va tlink\" src=/img/tree/$timg.png>
 		<span class=\"va fileperc\" data-percent=$perc>
-		    <img border=0 class=va src=\"$img\"></span>
+		    <img border=0 class=va src=\"$img\">
+		</span>
 		<span class=filesize>
 		    ([pretty_size $($dsize * 1024)] - $perc%)
 		</span>
@@ -71,6 +73,7 @@ proc gen {dir ddir {depth 0} {expand 0}} {
 
 	incr depth 2
 	incr expand -1
+	incr i
 
 	foreach subd $dlist { gen "$dir/$subd" $subd $depth $expand }
 
@@ -78,7 +81,7 @@ proc gen {dir ddir {depth 0} {expand 0}} {
 }
 
 puts {
-<fieldset style="display: inline">
+<fieldset class=cleft style="display: inline">
 <legend> Disk Utilisation </legend>
 }
 
@@ -86,6 +89,11 @@ gen $root "/" 0 2
 
 puts {
 </fieldset>
+<div class=left>
+	<button id=sorta>Sort Alphabetically</button>
+	<br style="padding-top: 0.5em">
+	<button id=sorts>Sort by Size</button>
+</div>
 }
 
 footer

webif/html/diag/dspace/script.js

@@ -36,5 +36,36 @@ $('span.fileperc').easyPieChart({
 	lineCap: 'butt'
 });
 
+$('button').button();
+
+String.prototype.toNum = function() {
+	return parseInt(this, 10);
+}
+
+function alphasort(a, b)
+{
+	return $(a).attr('sind').toNum() > $(b).attr('sind').toNum() ? 1 : -1;
+}
+
+function sizesort(a, b)
+{
+	return $(a).attr('size').toNum() < $(b).attr('size').toNum() ? 1 : -1;
+}
+
+function dosort(el, fn)
+{
+	if ($(el).sortElements(fn).size())
+		dosort(el + ' > div.dir', fn);
+}
+
+$('#sorts').on('click', function() {
+	dosort('fieldset > div.dir', sizesort);
+});
+
+$('#sorta').on('click', function() {
+	dosort('fieldset > div.dir', alphasort);
+});
+
+
 });
 

webif/html/diskspace/diskspace.js

@@ -40,7 +40,12 @@ $('#tbdiskpie')
                 },
 		shadow: false,
 		borderWidth: 0,
-		states: { hover: false }
+		states: { hover: false },
+		events: {
+			click: function(e) {
+				window.location = '/diag/dspace/index.jim';
+			}
+		}
             }
         },
 	tooltip: {

webif/html/lib/jquery.plugin/sortelements/sortelements.js

@@ -0,0 +1,65 @@
+/**
+ * jQuery.fn.sortElements
+ * --------------
+ * @param Function comparator:
+ *   Exactly the same behaviour as [1,2,3].sort(comparator)
+ *   
+ * @param Function getSortable
+ *   A function that should return the element that is
+ *   to be sorted. The comparator will run on the
+ *   current collection, but you may want the actual
+ *   resulting sort to occur on a parent or another
+ *   associated element.
+ *   
+ *   E.g. $('td').sortElements(comparator, function(){
+ *      return this.parentNode; 
+ *   })
+ *   
+ *   The <td>'s parent (<tr>) will be sorted instead
+ *   of the <td> itself.
+ */
+jQuery.fn.sortElements = (function(){
+ 
+    var sort = [].sort;
+ 
+    return function(comparator, getSortable) {
+ 
+	getSortable = getSortable || function(){return this;};
+ 
+	var placements = this.map(function(){
+ 
+	    var sortElement = getSortable.call(this),
+		parentNode = sortElement.parentNode,
+ 
+		// Since the element itself will change position, we have
+		// to have some way of storing its original position in
+		// the DOM. The easiest way is to have a 'flag' node:
+		nextSibling = parentNode.insertBefore(
+		    document.createTextNode(''),
+		    sortElement.nextSibling
+		);
+ 
+	    return function() {
+ 
+		if (parentNode === this) {
+		    throw new Error(
+			"You can't sort elements if any one is a descendant of another."
+		    );
+		}
+ 
+		// Insert before flag:
+		parentNode.insertBefore(this, nextSibling);
+		// Remove flag:
+		parentNode.removeChild(nextSibling);
+ 
+	    };
+ 
+	});
+ 
+	return sort.call(this, comparator).each(function(i){
+	    placements[i].call(getSortable.call(this));
+	});
+ 
+    };
+ 
+})();