From bb4e65c3fdaa03da20eae67bcd64189759008276 Mon Sep 17 00:00:00 2001
From: "T. Lohmar" <smarttv640@gmail.com>
Date: Sat, 7 Feb 2015 09:35:20 +0100
Subject: Adding Sort-by-Date option to web page.

---
 web/Data.js    | 109 +++++++----------------------
 web/index.html | 218 ++++++++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 205 insertions(+), 122 deletions(-)

diff --git a/web/Data.js b/web/Data.js
index 0c45b7c..e5c82d4 100755
--- a/web/Data.js
+++ b/web/Data.js
@@ -1,14 +1,6 @@
 //Diff: 
 // getNumString
 // createJQMDomTree
-var Main = {};
-Main.log = function (msg) {
-    console.log(msg);
-};
-
-var Config = {};
-Config.sortType = 0;
-
 
 var Data =
 {
@@ -17,7 +9,7 @@ var Data =
 	createAccessMap : false,
 	directAccessMap : {},
 	sortType : 0,
-	maxSort : 3
+	maxSort : 4
 };
 
 Array.prototype.remove = function(from, to) {
@@ -39,7 +31,7 @@ Data.reset = function() {
 
 Data.completed= function(sort) {
 	if (sort == true) {
-		this.assets.sortPayload(Data.sortType);
+		Data.assets.sortPayload(Data.sortType);
 		if (this.createAccessMap == true) {
 			Main.log("ERROR: access map does not match anymore");
 		}
@@ -58,18 +50,18 @@ Data.nextSortType = function () {
 
 Data.selectFolder = function (idx, first_idx) {
 	this.folderList.push({item : this.getCurrentItem().childs[idx], id: idx, first:first_idx});
-//	Main.log("Data.selectFolder: folderList.push. this.folderList.length= " + this.folderList.length);
+	Main.log("Data.selectFolder: folderList.push. this.folderList.length= " + this.folderList.length);
 };
 
 Data.folderUp = function () {
 	itm = this.folderList.pop();
-//	Main.log("Data.folderUp: folderList.pop. this.folderList.length= " + this.folderList.length);
+	Main.log("Data.folderUp: folderList.pop. this.folderList.length= " + this.folderList.length);
 	return itm;
 //	return itm.id;
 };
 
 Data.isRootFolder = function() {
-//	Main.log("Data.isRootFolder: this.folderList.length= " + this.folderList.length);
+	Main.log("Data.isRootFolder: this.folderList.length= " + this.folderList.length);
 	if (this.folderList.length == 1)
 		return true;
 	else
@@ -89,12 +81,21 @@ Data.dumpFolderStruct = function(){
     Main.log("---------- dumpFolderStruct Done -------");    
 };
 
-Data.createJQMDomTree = function () {
-    return this.assets.createJQMDomTree(0);
+Data.dumpDirectAccessMap = function(){
+    Main.log("---------- dumpDirectAccessMap ------------");    
+	for(var prop in this.directAccessMap) {
+		var s = "";
+		for (var i = 0; i < this.directAccessMap[prop].length; i++)
+			s = s + "i= " + i + " = " + this.directAccessMap[prop][i] + " ";
+		Main.log(prop + ": " + s);
+	} 
+	Main.log("---------- dumpDirectAccessMap Done -------");    
+
 };
 
 Data.findEpgUpdateTime = function() {
-	return this.assets.findEpgUpdateTime(Display.GetEpochTime() + 10000, "", 0);
+	return this.assets.findEpgUpdateTime(Display.GetUtcTime() + 10000, "", 0);
+//	return this.assets.findEpgUpdateTime((new MyDate()).getTimeSec() + 10000, "", 0);
 	// min, guid, level
 };
 
@@ -193,6 +194,7 @@ RecCmds.getCurrentItem = function () {
 RecCmds.getVideoCount = function() {
 	return this.folderList[this.folderList.length-1].item.childs.length;
 };
+
 //-----------------------------------------
 function Item() {
     this.title = "root";
@@ -232,13 +234,11 @@ Item.prototype.addChild = function (key, pyld, level) {
 		//	this.titles.push({title: pyld.startstr + " - " + key , pyld : pyld});
 		}
 		var folder = new Item;
-//		folder.title = pyld.startstr + " - " + key;
 		folder.title = key[0];
 		folder.payload = pyld;
 		folder.isFolder = false;
 		this.childs.push(folder);
-//	this.titles.push({title: pyld.startstr + " - " + key , pyld : pyld});
-    }
+	}
     else {
     	if (level > 20) {
     		Main.log(" too many levels");
@@ -337,14 +337,9 @@ Item.prototype.print = function(level) {
 };
 
 Item.prototype.sortPayload = function(sel) {
-	for (var i = 0; i < this.childs.length; i++) {
-		if (this.childs[i].isFolder == true) {
-			this.childs[i].sortPayload(sel);
-		}
-	}
 
 	switch (sel) {
-	case 1:
+	case 2:
 		// Dy Date
 		this.childs.sort(function(a,b) { 
 			if (a.payload.start == b.payload.start) {
@@ -355,7 +350,7 @@ Item.prototype.sortPayload = function(sel) {
 			}
 		});
 		break;
-	case 2:
+	case 3:
 		// Dy Date
 		this.childs.sort(function(a,b) { 
 			if (a.payload.start == b.payload.start) {
@@ -366,7 +361,7 @@ Item.prototype.sortPayload = function(sel) {
 			}
 		});
 		break;
-	case 3:
+	case 1:
 	    this.childs.sort(function(a,b) { 
 	    	if (a.title == b.title) {
 	    		return (b.payload.start -a.payload.start);
@@ -391,61 +386,11 @@ Item.prototype.sortPayload = function(sel) {
 
 		break;
 	}
-};
-
-Item.prototype.createJQMDomTree = function(level) {
-	var mydiv = $('<ul />');
-//	if (level == 0) {
-		mydiv.attr('data-role', 'listview');
-		mydiv.attr('data-inset', 'true');
-//	};
-//, id:'dyncreated'
-    for (var i = 0; i < this.childs.length; i++) {
-    	if (this.childs[i].isFolder == true) {
-			var myh = $('<div>', {text: this.childs[i].title});
-			var myli = $('<li>');
-			myli.append(myh);
-			var mycount = $('<p>', {class: 'ui-li-count', text: this.childs[i].childs.length});
-			myli.append(mycount);
-            myli.append(this.childs[i].createJQMDomTree(level+1));
-			mydiv.append(myli);
-    	}
-	else {
-		// Links
-		var digi = new Date(this.childs[i].payload['start'] *1000);
-		var mon = Data.getNumString ((digi.getMonth()+1), 2);
-        var day = Data.getNumString (digi.getDate(), 2);
-        var hour = Data.getNumString (digi.getHours(), 2);
-        var min = Data.getNumString (digi.getMinutes(), 2);
-		
-		var d_str = mon + "/" + day + " " + hour + ":" + min;
- 		var mya = $('<a>', { text: d_str +  " - " + this.childs[i].title, 
-							 href: this.childs[i].payload['link'], 
-							 rel: 'external'}  );
-		var myli = $('<li class="item"/>');
-		myli.attr('data-icon', 'false');
-		myli.attr('data-theme', 'c');
-		
-		myli.append(mya);
-		mydiv.append(myli);
+	
+	for (var i = 0; i < this.childs.length; i++) {
+		if (this.childs[i].isFolder == true) {
+			this.childs[i].sortPayload(sel);
 		}
-    }  
-    return mydiv;
-};
+	}
 
-Item.prototype.sortPayload = function() {
-    for (var i = 0; i < this.childs.length; i++) {
-    	if (this.childs[i].isFolder == true) {
-        	this.childs[i].sortPayload();
-    	}
-    }
-    this.childs.sort(function(a,b) { 
-    	if (a.title == b.title) {
-    		return (b.payload.start - a.payload.start);
-    	}
-    	else {
-    		return ((a.title < b.title) ? -1 : 1);
-    	}		
-    });
 };
-
diff --git a/web/index.html b/web/index.html
index f396ed4..f877907 100755
--- a/web/index.html
+++ b/web/index.html
@@ -1,72 +1,196 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
-<script language="javascript" type="text/javascript" src="Server.js"></script>
-<script language="javascript" type="text/javascript" src="Data.js"></script>
-<script>
-$(document).ready(function(){
-	var state = 'rec'; // Rec
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
+    <script language="javascript" type="text/javascript" src="Server.js"></script>
+    <script language="javascript" type="text/javascript" src="Data.js"></script>
+    <script>
 	
-	Server.init();
+	var Main = {};
+
+	Main.log = function (msg) {
+		console.log(msg);
+	};
+
+	Main.state = 'rec';
+	Main.sortType = 'name';
+	
+ 	var Config = {};
+	Config.sortType = 0;
+
+
+	Data.createJQMDomTree = function () {
+		console.log("Data.createJQMDomTree ");
+		return this.assets.createJQMDomTree(0);
+	};
+
+	Item.prototype.createJQMDomTree = function(level) {
+		var mydiv = $('<ul />');
+		mydiv.attr('data-role', 'listview');
+		mydiv.attr('data-inset', 'true');
+		for (var i = 0; i < this.childs.length; i++) {
+			if (this.childs[i].isFolder == true) {
+				var myh = $('<div>', {text: this.childs[i].title});
+				var myli = $('<li>');
+				myli.append(myh);
+				var mycount = $('<p>', {class: 'ui-li-count', text: this.childs[i].childs.length});
+				myli.append(mycount);
+				myli.append(this.childs[i].createJQMDomTree(level+1));
+				mydiv.append(myli);
+			}
+			else {
+				// Links
+				var digi = new Date(this.childs[i].payload['start'] *1000);
+				var mon = Data.getNumString ((digi.getMonth()+1), 2);
+				var day = Data.getNumString (digi.getDate(), 2);
+				var hour = Data.getNumString (digi.getHours(), 2);
+				var min = Data.getNumString (digi.getMinutes(), 2);
+	    
+				var d_str = mon + "/" + day + " " + hour + ":" + min;
+				var mya = $('<a>', { text: d_str +  " - " + this.childs[i].title, 
+						href: this.childs[i].payload['link'], 
+						rel: 'external'}  );
+				var myd = $('<div>', {text: this.childs[i].desc});
+
+				var myinner = $('<div>');
+				myinner.append(mya);
+				myinner.append(myd);
+
+				var myli = $('<li class="item"/>');
+				myli.attr('data-icon', 'false');
+				myli.attr('data-theme', 'c');
+	    
+				myli.append(mya);
+				mydiv.append(myli);
+			}
+		}  
+		return mydiv;
+	};
 
+
+	$(document).ready(function(){
+	
+	Server.init();
+	
 	Server.dataReceivedCallback = function() {
 		console.log("Loaded");
-		$("#anchor").append(Data.createJQMDomTree()).trigger('create');
-		$.mobile.loading('hide');
-		//http://jquerymobile.com/
-		
-		// end of dataReceivedCallBack
-		};
-	Server.errorCallback = function (msg) {
-		alert (msg);
-                buttonHandler('rec');
+		createDomTree();
 	};
 
-	$.mobile.loading('show');
+    Server.errorCallback = function (msg) {
+	alert (msg);
+        buttonHandler('rec');
+    };
+
+    gRecordingsUrl= "/recordings.xml?mode=nodesc";
+//    gRecordingsUrl= "/recordings.xml";
+    gMediaUrl= "/media.xml";
+    gLiveUrl= "/channels.xml?channels=300";
+
+    $.mobile.loading('show');
 	Server.setSort(true);
-	Server.fetchVideoList("/recordings.xml?mode=nodesc");
+	Server.fetchVideoList(gRecordingsUrl);
+
+	createDomTree = function () {
+		console.log("createDomTree sortType= " + Data.sortType);
+		$("#anchor").append(Data.createJQMDomTree()).trigger('create');
+		$.mobile.loading('hide');
+        //http://jquerymobile.com/
+      
+        // end of dataReceivedCallBack
+		console.log("createDomTree - done");
+	};
 
 	removeDomTree = function () {
 	// parent should not be deleted.
 		$("#anchor").children().remove();
 	};
 		
-	buttonHandler = function(btn) {
+    buttonHandler = function(btn) {
 		console.log("Click: " + btn);
-		if (state == btn) {
+		if (Main.state == btn) {
 			console.log("No Change");
 		};
 		$.mobile.loading('show');
 		Data.reset();
 		removeDomTree();
+		if (Main.state == 'chn') {
+			resetSortBtn();
+		}
+		
 		switch (btn) {
 		case 'rec':
-			state = 'rec';
+			Main.state = 'rec';
 			$('#recbtn').addClass('ui-btn-active');
 			$('#medbtn').removeClass('ui-btn-active');
 			$('#chnbtn').removeClass('ui-btn-active');
 			Server.setSort(true);
-			Server.fetchVideoList("/recordings.xml?mode=nodesc");
+			Server.fetchVideoList(gRecordingsUrl);
 			break;
 		case 'med':
-			state = 'med';
+			Main.state = 'med';
 			$('#medbtn').addClass('ui-btn-active');
 			$('#recbtn').removeClass('ui-btn-active');
 			$('#chnbtn').removeClass('ui-btn-active');
 			Server.setSort(true);
-			Server.fetchVideoList("/media.xml");
+			Server.fetchVideoList(gMediaUrl);
 			break;
 		case 'chn':
-			state = 'chn';
+			resetSortBtn();
+			disableSortBtn();
+			Data.sortType = 0;
+			Main.state = 'chn';
 			$('#chnbtn').addClass('ui-btn-active');
 			$('#medbtn').removeClass('ui-btn-active');
 			$('#recbtn').removeClass('ui-btn-active');
 			Server.setSort(false);
-			Server.fetchVideoList("/channels.xml?mode=nodesc");
+			Server.fetchVideoList(gLiveUrl);
+			break;
+		};
+	};
+
+	resetSortBtn = function() {
+		Main.state = 'rec';
+		Main.sortType = 'name';
+		$('#namesortbtn').addClass('ui-btn-active');
+		$('#datesortbtn').removeClass('ui-btn-active');
+	};
+
+	disableSortBtn = function() {
+		$('#namesortbtn').removeClass('ui-btn-active');
+		$('#datesortbtn').removeClass('ui-btn-active');
+	};
+
+	
+    sortBtnHandler = function(btn) {
+		console.log("Click: " + btn);
+		if (Main.sortType == btn) {
+			console.log("No Change");
+		};
+		if (Main.state == 'chn')
+			return;
+		$.mobile.loading('show');
+//		Data.reset();
+		removeDomTree();
+		switch (btn) {
+		case 'name':
+			Main.sortType = 'name';
+			Data.sortType = 0;
+			$('#namesortbtn').addClass('ui-btn-active');
+			$('#datesortbtn').removeClass('ui-btn-active');
+			Data.assets.sortPayload(Data.sortType);
+			createDomTree ();
+			break;
+		case 'date':
+			Main.sortType = 'date';
+			Data.sortType = 3;
+			$('#datesortbtn').addClass('ui-btn-active');
+			$('#namesortbtn').removeClass('ui-btn-active');
+			Data.assets.sortPayload(Data.sortType);
+			createDomTree ();
 			break;
 		};
 	};
@@ -88,17 +212,31 @@ h2 { margin:1.2em 0 .4em 0; }
 
 		<div data-role="content">
 			<div class="content-primary" >	
-
-			<div data-role="controlgroup" data-type="horizontal" data-mini="true">
-				<a href="#" id="recbtn" data-role="button" data-transition="fade" class="ui-btn-active" onclick="return buttonHandler('rec')">Recordings</a>
-				<a href="#" id="medbtn" data-role="button" data-transition="fade" onclick="return buttonHandler('med')">Media</a>
-				<a href="#" id="chnbtn" data-role="button" data-transition="fade" onclick="return buttonHandler('chn')">Channels</a>
-			</div>	
-
-			<div id="anchor"/>
+				<table>
+				<tr>
+				<td>
+				
+				<div data-role="controlgroup" data-type="horizontal" data-mini="true">
+					<a href="#" id="recbtn" data-role="button" data-transition="fade" class="ui-btn-active" onclick="return buttonHandler('rec')">Recordings</a>
+					<a href="#" id="medbtn" data-role="button" data-transition="fade" onclick="return buttonHandler('med')">Media</a>
+					<a href="#" id="chnbtn" data-role="button" data-transition="fade" onclick="return buttonHandler('chn')">Channels</a>
+				</div>
+				</td>
+				<td>
+				Sorting:
+				</td>
+				<td>
+					 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
+					<a href="#" id="namesortbtn" data-role="button" data-transition="fade" class="ui-btn-active" onclick="return sortBtnHandler('name')">Name</a>
+					<a href="#" id="datesortbtn" data-role="button" data-transition="fade" onclick="return sortBtnHandler('date')">Date</a>
+				</div>
+				</td>
+				</tr>
+				</table>
+				<div id="anchor"/>
 			</div> 
-	</div> 
-</div>
+		</div> 
+	</div>
 	</body>
 </html>
 
-- 
cgit v1.2.3