Adding Sort-by-Date option to web page.

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>