Added log, history templates, changed some css, included updatebar, subheadings

data/css/style.css

@@ -1,6 +1,3 @@
-
-/* ==== Scroll down to find where to put your styles :) ==== */
-
 /*  HTML5 ✰ Boilerplate  */
 
 html, body, div, span, object, iframe,
@@ -68,20 +65,17 @@ input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5
 
 ::-moz-selection{ background: grey; color:#fff; text-shadow: none; }
 ::selection { background: grey; color:#fff; text-shadow: none; }
-a:link { -webkit-tap-highlight-color: #FF5E99; }
 
 button {  width: auto; overflow: visible; }
 .ie7 img { -ms-interpolation-mode: bicubic; }
 
 body, select, input, textarea {  color: #444; }
 h1, h2, h3, h4, h5, h6 { font-weight: bold; }
-a, a:active, a:visited { color: #607890; }
-a:hover { color: #036; }
 
 /*
     // ========================================== \\
    ||                                              ||
-   ||               Your styles !                  ||
+   ||               Custom Styles                  ||
    ||                                              ||
     \\ ========================================== //
 */
@@ -102,19 +96,25 @@ a:active {/*colour in NN4.xx is red*/
   	color: #5E2612; 
   	text-decoration: underline; 
 	}
+a.blue {
+	color: blue;
+	}
 
 container {  }
 
 body { background-color: #EBF4FB; min-width: 907px; }
-header { height: 68px; width: 100%; min-width: 907px; padding: 0 10px 0 10px; background-color: #CDC9C9; position: fixed; top: 0; z-index: 999; }
-div#logo { float: left; }
 
-ul#nav { margin-top: 25px; float: left; list-style-type: none; }
+header { min-height: 68px; width: 100%; min-width: 907px; padding-left: 0px; padding-right: 10px; background-color: #CDC9C9; position: fixed; z-index: 998; }
+
+div#updatebar { text-align: center; min-width: 970px; width: 100%; background-color: light-blue; float: left; }
+div#logo { float: left; padding-left: 10px; }
+
+ul#nav { margin: 25px 0 0 0; float: left; list-style-type: none; }
 ul#nav li { margin: 40px 0px auto 10px;  display: inline; }
 ul#nav li a { padding: 5px; font-size: 16px; font-weight: bold; color: #330000; text-decoration: none; }
 ul#nav li a:hover { background-color: #a3e532; }
 
-div#subhead_container { margin-top: 68px; height: 30px; width:100%; min-width: 907px; background-color:#330000; position: fixed; float: left; list-style-type: none; top: 0; z-index: 999; overflow: hidden; }
+div#subhead_container { height: 30px; width:100%; min-width: 907px; background-color:#330000; float: left; list-style-type: none; z-index: 998; overflow: hidden; }
 ul#subhead_menu { margin-top: 5px; }
 ul#subhead_menu li { width: 100%; height: 100%; display: inline; }
 ul#subhead_menu li a { padding: 5px 15px 10px 15px; vertical-align: middle; color: white; font-size: 16px; text-decoration: none; }
@@ -124,7 +124,7 @@ div#searchbar { margin: 24px 30px auto auto; float: right; }
 
 div#main { margin: 0; padding: 80px 0 0 0; }
 
-table#artist_table { background-color: white; }
+table#artist_table { background-color: white; width: 88%; padding: 20px; }
 
 table#artist_table th#name { text-align: left; min-width: 200px; }
 table#artist_table th#album { text-align: center; min-width: 300px; }
@@ -135,7 +135,7 @@ table#artist_table td#album { vertical-align: middle; text-align: center; min-wi
 table#artist_table td#reldate { vertical-align: middle; text-align: center; min-width: 100px; }
 table#artist_table td#have { vertical-align: middle; }
 
-div#artistheader { padding-top: 48px; font-size: 24px; font-weight: bold; text-align: center; }
+div#paddingheader { padding-top: 48px; font-size: 24px; font-weight: bold; text-align: center; }
 table#album_table { background-color: white; }
 
 table#album_table th#albumart { text-align: left; min-width: 50px; }
@@ -150,6 +150,8 @@ table#album_table td#status { vertical-align: middle; text-align: center; }
 table#album_table td#type { vertical-align: middle; text-align: center; }
 table#album_table td#have { vertical-align: middle; }
 
+table#history_table { background-color: white; width: 88%;  }
+
 table#log_table { background-color: white; }
 
 table#log_table th#timestamp { text-align: left; min-width: 100px; }

data/interfaces/default/artist.html

@@ -1,6 +1,6 @@
 <%inherit file="base.html"/>
 
-<%def name="subhead()">
+<%def name="headerIncludes()">
 	<div id="subhead_container">
 		<ul id="subhead_menu">
 			<li><a href="refresh?ArtistID=${artist['ArtistID']}">Refresh Artist</a></li>
@@ -11,7 +11,7 @@
 </%def>
 
 <%def name="body()">
-	<div id="artistheader">
+	<div id="paddingheader">
 		${artist['ArtistName']}
 	</div>
 	<table class="display" id="album_table">
@@ -40,7 +40,7 @@
 	</table>
 </%def>
 
-<%def name="headerIncludes()">
+<%def name="headIncludes()">
 	<link rel="stylesheet" href="css/data_table.css">
 </%def>
 

data/interfaces/default/base.html

@@ -20,13 +20,22 @@
 	<link rel="shortcut icon" href="images/favicon.ico">
 	<link rel="apple-touch-icon" href="images/headphoneslogo.png">
 	<link rel="stylesheet" href="css/style.css?v=2">
-	${next.headerIncludes()}
+	${next.headIncludes()}
 	
 	<script src="js/libs/modernizr-1.7.min.js"></script>
 </head>
 <body>
 	<div id="container">
 		<header>
+			% if not headphones.CURRENT_VERSION:
+            <div id="updatebar">
+                You're running an unknown version of Headphones. <a class="blue" href="update">Click here to update</a>
+            </div>
+            % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
+            <div id="updatebar">
+                A <a class="blue" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a class="blue" href="update">Click here to update</a>
+            </div>
+			% endif
 			<div id="logo">
 				<img src="images/headphoneslogo.png" alt="headphones">
 			</div>
@@ -45,10 +54,11 @@
                     <input type="submit" value="Add Artist"/>
                 </form>
             </div>
+            <div id="subhead">
+				${next.headerIncludes()}
+			</div>
 		</header>
-		<div id="subhead">
-			${next.subhead()}
-		</div>
+
 		<div id="main" class="main">
 			${next.body()}
 		</div>
@@ -83,5 +93,5 @@
 </html>
 
 <%def name="javascriptIncludes()"></%def>
-<%def name="headerIncludes()"></%def>
-<%def name="subhead()"></%def>
+<%def name="headIncludes()"></%def>
+<%def name="headerIncludes()"></%def>

data/interfaces/default/history.html

@@ -0,0 +1,64 @@
+<%inherit file="base.html"/>
+
+<%def name="headerIncludes()">
+	<div id="subhead_container">
+		<ul id="subhead_menu">
+			<li><a href="clearhistory?type=all">Clear All History</a></li>
+			<li><a href="clearhistory?type=processed">Clear Processed</a></li>
+			<li><a href="clearhistory?type=unprocessed">Clear Unprocessed</a></li>
+			<li><a href="clearhistory?type=snatched">Clear Snatched</a></li>
+		</ul>
+	</div>	
+</%def>
+
+<%def name="body()">
+	<div id="paddingheader">
+		History
+	</div>
+	<table class="display" id="history_table">
+		<thead>
+			<tr>
+				<th id="dateadded">Date Added</th>
+				<th id="filename">File Name</th>
+				<th id="size">Size</th>
+				<th id="status">Status</th>
+			</tr>
+		</thead>
+		<tbody>
+		%for item in history:
+			<tr>
+				<td id="dateadded">${item['DateAdded']}</td>
+				<td id="filename"><a href="${item['URL']}">${item['Title']}</a></td>
+				<td id="size">${item['Size']}</td>
+				<td id="status">${item['Status']}</td>
+			</tr>
+		%endfor
+		</tbody>
+	</table>
+</%def>
+
+<%def name="headIncludes()">
+	<link rel="stylesheet" href="css/data_table.css">
+</%def>
+
+<%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.dataTables.min.js"></script>
+	<script>
+	$(document).ready(function()
+	{
+		$('#history_table').dataTable(
+			{
+				"oLanguage": {
+					"sLengthMenu":"Show _MENU_ items per page",
+					"sEmptyTable": "No History to Display",
+					"sInfo":"Showing _START_ to _END_ of _TOTAL_ items",
+					"sInfoEmpty":"Showing 0 to 0 of 0 items",
+					"sInfoFiltered":"(filtered from _MAX_ total items)"},
+				"bStateSave": true,
+				"iDisplayLength": 25,
+				"sPaginationType": "full_numbers"
+
+			});
+	});
+	</script>
+</%def>

data/interfaces/default/index.html

@@ -38,14 +38,14 @@
 				<td id="name"><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
 				<td id="album"><a href="albumPage?AlbumID=${artist['AlbumID']}">${artist['LatestAlbum']}</a></td>
 				<td id="reldate">${releasedate}</td>
-				<td id="have"><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
+				<td id="have"><span title="${percent}"><span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
 			</tr>
 		%endfor
 		</tbody>
 	</table>
 </%def>
 
-<%def name="headerIncludes()">
+<%def name="headIncludes()">
 	<link rel="stylesheet" href="css/data_table.css">
 </%def>
 
@@ -56,8 +56,12 @@
 	{
 		$('#artist_table').dataTable(
 			{
-				"aoColumnDefs": [
-					{ "bSOtrable": false, "aTargets": [ 1 ] } ],
+				"aoColumns": [
+					{ "sType": "anti-the" },
+					null,
+					null,
+					{ "sType": "title-numeric"}
+				],
 				"bStateSave": true,
 				"iDisplayLength": 50,
 				"sPaginationType": "full_numbers",

data/interfaces/default/logs.html

@@ -14,7 +14,9 @@
 		%for line in lineList:
 			<%
 				from headphones import helpers
-				timestamp, level, thread, message = helpers.extract_logline(line)
+				out_tuple = helpers.extract_logline(line)
+				if out_tuple:
+					timestamp, level, thread, message = out_tuple
 			%>
 			%if timestamp and level and thread and message:
 				<tr>
@@ -29,7 +31,7 @@
 	</table>
 </%def>
 
-<%def name="headerIncludes()">
+<%def name="headIncludes()">
 	<link rel="stylesheet" href="css/data_table.css">
 </%def>
 

data/interfaces/default/restart.html

@@ -0,0 +1,9 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+	<meta http-equiv="refresh" content="30;url=index">
+</%def>
+
+<%def name="body()">
+	Headphones is restarting
+</%def>

data/interfaces/default/shutdown.html

@@ -0,0 +1,9 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+	<meta http-equiv="refresh" content="15;url=index">
+</%def>
+
+<%def name="body()">
+	Headphones is shutting down
+</%def>

data/interfaces/default/update.html

@@ -0,0 +1,9 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+	<meta http-equiv="refresh" content="120;url=index">
+</%def>
+
+<%def name="body()">
+	Headphones is updating
+</%def>

data/js/plugins.js

@@ -6,4 +6,18 @@ window.log = function(){
 };
 (function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});
 
+jQuery.fn.dataTableExt.oSort['title-numeric-asc']  = function(a,b) {
+	var x = a.match(/title="*(-?[0-9]+)/)[1];
+	var y = b.match(/title="*(-?[0-9]+)/)[1];
+	x = parseFloat( x );
+	y = parseFloat( y );
+	return ((x < y) ? -1 : ((x > y) ?  1 : 0));
+};
 
+jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
+	var x = a.match(/title="*(-?[0-9]+)/)[1];
+	var y = b.match(/title="*(-?[0-9]+)/)[1];
+	x = parseFloat( x );
+	y = parseFloat( y );
+	return ((x < y) ?  1 : ((x > y) ? -1 : 0));
+};

headphones/webserve.py

@@ -390,37 +390,9 @@ class WebInterface(object):
 	checkGithub.exposed = True
 	
 	def history(self):
-		page = [templates._header]
-		page.append(templates._logobar)
-		page.append(templates._nav)
 		myDB = db.DBConnection()
-		snatched = myDB.select('''SELECT AlbumID, Title TEXT, Size INTEGER, URL TEXT, DateAdded TEXT, Status TEXT from snatched order by DateAdded DESC''')
-
-		page.append('''<div class="table"><table border="0" cellpadding="3">
-						<tr><p align="center">History <a class="external" href="clearhistory">clear all</a><br /><br /></p></tr>
-						<tr>
-						<th align="center" width="150"></th>
-						<th align="center" width="300"></th>
-						<th align="center" width="200"></th>
-						<th align="right" width="200"></th>
-						</tr>''')
-		if len(snatched) == 0:
-			page.append("""</table><div class="center"></div><table>""")
-
-		i = 0
-		while i < len(snatched):
-			mb = snatched[i][2] / 1048576
-			size = '%.2fM' % mb
-			page.append('''<tr><td align="center" width="150">%s</td>
-								<td align="center" width="300">%s</td>
-								<td align="center" width="200">%s</td>
-								<td align="center" width="200">%s</td>
-								</tr>
-								''' % (snatched[i][5], snatched[i][1], size, snatched[i][4]))
-			i += 1
-		page.append('''</table></div>''')
-		if len(snatched):
-			page.append(templates._footer % headphones.CURRENT_VERSION)
+		history = myDB.select('''SELECT * from snatched order by DateAdded DESC''')
+		return serve_template(templatename="history.html", title="History", history=history)
 		return page
 	history.exposed = True
 	
@@ -554,11 +526,7 @@ class WebInterface(object):
 	def shutdown(self):
 		logger.info(u"Headphones is shutting down...")
 		threading.Timer(2, headphones.shutdown).start()
-		page = [templates._shutdownheader % 15]
-		page.append(templates._logobar)
-		page.append(templates._nav)
-		page.append('<div class="table"><div class="configtable">Shutting down Headphones...</div></div>')
-		page.append(templates._footer % headphones.CURRENT_VERSION)
+		return serve_template(templatename="shutdown.html", title="Shutting Down")
 		return page
 
 	shutdown.exposed = True
@@ -566,23 +534,13 @@ class WebInterface(object):
 	def restart(self):
 		logger.info(u"Headphones is restarting...")
 		threading.Timer(2, headphones.shutdown, [True]).start()
-		page = [templates._shutdownheader % 30]
-		page.append(templates._logobar)
-		page.append(templates._nav)
-		page.append('<div class="table"><div class="configtable">Restarting Headphones...</div></div>')
-		page.append(templates._footer % headphones.CURRENT_VERSION)
-		return page
-	 
+		return serve_template(templatename="restart.html", title="Restarting")
 	restart.exposed = True
 	
 	def update(self):
 		logger.info('Headphones is updating...')
 		threading.Timer(2, headphones.shutdown, [True, True]).start()
-		page = [templates._shutdownheader % 120]
-		page.append(templates._logobar)
-		page.append(templates._nav)
-		page.append('<div class="table"><div class="configtable">Updating Headphones...</div></div>')
-		page.append(templates._footer % headphones.CURRENT_VERSION)
+		return serve_template(templatename="update.html", title="Updating")
 		return page
 		
 	update.exposed = True
@@ -590,18 +548,7 @@ class WebInterface(object):
 	def extras(self):
 		myDB = db.DBConnection()
 		cloudlist = myDB.select('SELECT * from lastfmcloud')
-		page = [templates._header]
-		page.append(templates._logobar)
-		page.append(templates._nav)
-		if len(cloudlist):
-			page.append('''
-			<div class="table"><div class="config"><h1>Artists You Might Like:</h1><br /><br />
-			<div class="cloud">
-				<ul id="cloud">''')
-			for item in cloudlist:
-				page.append('<li><a href="addArtist?artistid=%s" class="tag%i">%s</a></li>' % (item['ArtistID'], item['Count'], item['ArtistName']))
-			page.append('</ul><br /><br /></div></div>')	
-			page.append(templates._footer % headphones.CURRENT_VERSION)
+		return serve_template(templatename="extras.html", title="Extras", cloudlist=cloudlist)
 		return page
 	extras.exposed = True