Added album page, checkboxes to artist page, more interface fixes

This commit is contained in:
Remy
2011-08-06 18:23:58 -07:00
parent 548b606c0d
commit 38e9af762b
8 changed files with 59 additions and 50 deletions

View File

@@ -166,10 +166,12 @@ table.display td.center {
*/
table.display tr.odd.gradeA {
background-color: #ddffdd;
font-weight: bold;
}
table.display tr.even.gradeA {
background-color: #ddffdd;
font-weight: bold;
}
table.display tr.odd.gradeC {

View File

@@ -106,6 +106,10 @@ body { background-color: #EBF4FB; min-width: 907px; }
header { min-height: 68px; width: 100%; min-width: 907px; padding-left: 0px; padding-right: 10px; background-color: #CDC9C9; position: fixed; z-index: 998; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
div#updatebar { text-align: center; min-width: 970px; width: 100%; background-color: light-blue; float: left; }
div#logo { float: left; padding-left: 10px; }
@@ -124,25 +128,29 @@ div#searchbar { margin: 24px 30px auto auto; float: right; }
div#main { margin: 0; padding: 80px 0 0 0; }
.table_wrapper { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; width: 88%; margin: 20px auto 0 auto; padding: 25px; background-color: white; position: relative; min-height: 200px; clear: both; _height: 302px; zoom: 1; }
table#artist_table { background-color: white; width: 100%; padding: 20px; }
table#artist_table th#name { text-align: left; min-width: 200px; }
table#artist_table th#status { text-align: center; }
table#artist_table th#status { text-align: left; min-width: 50px; }
table#artist_table th#album { text-align: center; min-width: 300px; }
table#artist_table th#have { text-align: center; }
table#artist_table td#name { vertical-align: middle; text-align: left; min-width:200px; }
table#artist_table td#status { vertical-align: middle; text-align: center; }
table#artist_table td#status { vertical-align: middle; text-align: left; min-width: 50px; }
table#artist_table td#album { vertical-align: middle; text-align: center; min-width: 300px; }
table#artist_table td#have { vertical-align: middle; }
div#paddingheader { padding-top: 48px; font-size: 24px; font-weight: bold; text-align: center; }
table#album_table { background-color: white; }
table#album_table th#checkbox { text-align: left; min-width: 25px; }
table#album_table th#albumart { text-align: left; min-width: 50px; }
table#album_table th#albumname { text-align: center; min-width: 150px; }
table#album_table th#reldate { width: 175px; text-align: center; min-width: 100px; }
table#album_table th#status { width: 175px; text-align: center; min-width: 100px; }
table#album_table th#type { width: 175px; text-align: center; min-width: 100px; }
table#album_table td#checkbox { vertical-align: middle; text-align: left; }
table#album_table td#albumart { vertical-align: middle; text-align: left; }
table#album_table td#albumname { vertical-align: middle; text-align: center; }
table#album_table td#reldate { vertical-align: middle; text-align: center; }
@@ -150,13 +158,27 @@ 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; }
img.albumArt { float: left; padding-right: 5px; }
div#albumheader { height: 200px; }
div#track_wrapper { padding-top: 20px; text-align: center; font-size: 16px; }
table#track_table th#number { text-align: left; min-width: 50px; }
table#track_table th#name { text-align: center; min-width: 350px; }
table#track_table th#duration { width: 175px; text-align: center; min-width: 100px; }
table#track_table th#have { width: 175px; text-align: center; min-width: 100px; }
table#track_table td#number { vertical-align: middle; text-align: left; }
table#track_table td#name { vertical-align: middle; text-align: center; }
table#track_table td#duration { vertical-align: middle; text-align: center; }
table#track_table td#have { vertical-align: middle; text-align: center; }
table#history_table { background-color: white; width: 100%; }
table#log_table { background-color: white; }
table#log_table th#timestamp { text-align: left; min-width: 100px; }
table#log_table th#level { text-align: left; min-width: 100px; }
table#log_table th#thread { text-align: left; min-width: 100px; }
table#log_table th#timestamp { text-align: left; min-width: 200px; }
table#log_table th#level { text-align: left; min-width: 75px; }
table#log_table th#thread { text-align: left; min-width: 75px; }
table#log_table th#message { text-align: left; min-width: 200px; }
div.progress-container { border: 1px solid #ccc; width: 100px; height: 14px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -22,9 +22,11 @@
<div id="paddingheader">
${artist['ArtistName']}
</div>
<form action="markAlbums" method="post">
<table class="display" id="album_table">
<thead>
<tr>
<th class="checkbox"><input type="checkbox" onClick="toggle(this)" /></th>
<th id="albumart"></th>
<th id="albumname">Album Name</th>
<th id="reldate">Release Date</th>
@@ -59,6 +61,7 @@
%>
<tr class="grade${grade}">
<td id="checkbox"><input type="checkbox" name="mbid" value="${album['AlbumID']}" /></th>
<td id="albumart"><img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" height="50" width="50"></td>
<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
<td id="reldate">${album['ReleaseDate']}</td>
@@ -88,6 +91,7 @@
null,
null,
null,
null,
{ "sType": "title-numeric"}
],
"oLanguage": {

View File

@@ -28,15 +28,21 @@
percent = 0
totaltracks = '?'
if artist['ReleaseDate']:
if artist['ReleaseDate'] and artist['LatestAlbum']:
releasedate = artist['ReleaseDate']
albumdisplay = '%s (%s)' % (artist['LatestAlbum'], artist['ReleaseDate'])
if releasedate > helpers.today():
grade = 'A'
else:
grade = 'Z'
elif artist['LatestAlbum']:
releasedate = ''
grade = 'Z'
albumdisplay = artist['LatestAlbum']
else:
releasedate = ''
grade = 'Z'
albumdisplay = 'None'
if artist['Status'] == 'Paused':
grade = 'X'
@@ -45,7 +51,7 @@
<tr class="grade${grade}">
<td id="name"><span title="${artist['ArtistSortName']}"><span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
<td id="status">${artist['Status']}</td>
<td id="album"><span title="${releasedate}"><span><a href="albumPage?AlbumID=${artist['AlbumID']}">${artist['LatestAlbum']} ${releasedate}</a></td>
<td id="album"><span title="${releasedate}"><span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></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

View File

@@ -19,7 +19,13 @@
out_tuple = helpers.extract_logline(line)
%>
%if out_tuple:
<tr>
<%
if out_tuple[1] == 'WARNING' or out_tuple[1] == 'ERROR':
grade = 'X'
else:
grade = 'Z'
%>
<tr class="grade${grade}">
<td id="timestamp">${out_tuple[0]}</td>
<td id="level">${out_tuple[1]}</td>
<td id="thread">${out_tuple[2]}</td>

View File

@@ -32,4 +32,10 @@ jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
x = parseFloat( x );
y = parseFloat( y );
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
};
function toggle(source) {
checkboxes = document.getElementsByName('mbid');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}

View File

@@ -46,48 +46,11 @@ class WebInterface(object):
def albumPage(self, AlbumID):
page = [templates._header]
page.append(templates._logobar)
page.append(templates._nav)
myDB = db.DBConnection()
results = myDB.select('SELECT ArtistID, ArtistName, AlbumTitle, TrackTitle, TrackDuration, TrackID, AlbumASIN from tracks WHERE AlbumID=?', [AlbumID])
if results[0][6]:
albumart = '''<br /><img src="http://ec1.images-amazon.com/images/P/%s.01.LZZZZZZZ.jpg" height="200" width="200"><br /><br />''' % results[0][6]
else:
albumart = ''
i = 0
page.append('''<div class="table" align="center"><table border="0" cellpadding="3">
<tr><a href="artistPage?ArtistID=%s">%s</a> - %s<br />
<a href="queueAlbum?AlbumID=%s&ArtistID=%s">Download<br />%s</tr>
<br /><tr>
<th align="left" width="100">Track #</th>
<th align="left" width="300">Track Title</th>
<th align="center" width="100">Duration</th>
<th> </th>
</tr>''' % (results[0][0], results[0][1], results[0][2], AlbumID, results[0][0], albumart))
while i < len(results):
trackmatches = myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle like ? AND TrackTitle like ?', [results[i][1], results[i][2], results[i][3]])
if len(trackmatches):
have = '<img src="images/checkmark.png" width="20px">'
else:
have = ''
if results[i][4]:
duration = helpers.convert_milliseconds(int(results[i][4]))
else:
duration = 'n/a'
page.append('''<tr><td align="left" width="120">%s</td>
<td align="left" width="240">%s (<A class="external" href="http://musicbrainz.org/recording/%s.html">link</a>)</td>
<td align="center">%s</td>
<td>%s</td></tr>''' % (i+1, results[i][3], results[i][5], duration, have))
i = i+1
page.append('''</table></div>''')
page.append(templates._footer % headphones.CURRENT_VERSION)
return page
album = myDB.action('SELECT * from albums WHERE AlbumID=?', [AlbumID]).fetchone()
tracks = myDB.select('SELECT * from tracks WHERE AlbumID=?', [AlbumID])
title = album['ArtistName'] + ' - ' + album['AlbumTitle']
return serve_template(templatename="album.html", title=title, album=album, tracks=tracks)
albumPage.exposed = True