Added bar chart to scrobble numbers

website/artist.html

@@ -14,7 +14,7 @@
 					<div style="background-image:url('KEY_IMAGEURL')"></div>
 				</td>
 				<td class="text">
-					<h1>KEY_ARTISTNAME</h1> <span class="stats">KEY_POSITION</span><br/>
+					<h1>KEY_ARTISTNAME</h1> <span class="rank"><a href="/topartists">KEY_POSITION</a></span><br/>
 					<span>KEY_ASSOCIATED</span>
 					<p class="stats"><a href="/scrobbles?artist=KEY_ENC_ARTISTNAME">KEY_SCROBBLES Scrobbles</a></p>
 					

website/artist.py

@@ -38,7 +38,7 @@ def replacedict(keys,dbport):
 		html += "</td><td class='title'>" + e["title"] + "</td>"
 		tracks.append(html)
 	
-	trackshtml = "<table>"	
+	trackshtml = "<table class='list'>"	
 	for t in tracks:
 		trackshtml += "<tr>"
 		trackshtml += t

website/issues.py

@@ -8,7 +8,7 @@ def replacedict(keys,dbport):
 	db_data = json.loads(response.read())
 	i = 0
 	
-	html = "<table>"
+	html = "<table class='list'>"
 	if db_data["inconsistent"]:
 		html += "<tr>"
 		html += "<td>The current database wasn't built with all current rules in effect. Any problem below might be a false alarm and fixing it could create redundant rules.</td>"

website/maloja.css

@@ -39,22 +39,61 @@ table.top_info td.text h1 {
 	display:inline;
 	padding-right:5px;
 }
-
+/*
 table.top_info td.text .stats {
 	color:grey;
 }
+*/
+.stats {
+	color:grey;
+}
+.rank {
+	text-align:right;
+	color:grey;
+}
+
+table.list {
+	border-collapse:collapse;
+}
+
+table.list tr {
+	border-bottom:2px solid;
+	border-color:rgba(0,0,0,0)
+	
+}
 
 table tr:nth-child(even) {
 	background-color:#37373B;
 }
 
+table tr:nth-child(5n) {
+	border-color:rgba(120,120,120,0.2);
+	
+}
+
 table td.time {
 	width:200px;
-	color:lightgray;
+	color:gray;
 }
-table td.artists,td.artist,td.title,td.amount {
+table td.artists,td.artist,td.title {
 	width:350px;
 }
+table td.amount {
+	width:50px;
+	text-align:right;
+}
+table td.bar {
+	width:300px;
+}
+table td.bar div {
+	background-color:beige;
+	height:20px; /* can only do this absolute apparently */
+	position:relative;
+}
+table tr:hover td.bar div {
+	background-color:yellow;
+	cursor:pointer;
+}
 
 table td.button {
 	width:200px;

website/scrobbles.py

@@ -24,7 +24,7 @@ def replacedict(keys,dbport):
 	db_data = json.loads(response.read())
 	scrobbles = db_data["list"]
 	
-	html = "<table>"
+	html = "<table class='list'>"
 	for s in scrobbles:
 		html += "<tr><td class='time'>"
 		timestring = getTimeDesc(s["time"])

website/topartists.html

@@ -14,7 +14,7 @@
 					<div style="background-image:url('KEY_TOPARTIST_IMAGEURL')"></div>
 				</td>
 				<td class="text">
-					<h1>Top Artists</h1> <span class="stats"></span><br/>
+					<h1>Top Artists</h1><br/>
 					<span>in KEY_RANGE</span>
 					<p class="stats">KEY_SCROBBLES Scrobbles</p>
 					

website/topartists.py

@@ -23,13 +23,18 @@ def replacedict(keys,dbport):
 	scrobbles = len(scrobblelist)
 	
 	
+	maxbar = charts[0]["scrobbles"]
 	
-	
-	html = "<table>"
+	i = 1
+	html = "<table class='list'>"
 	for e in charts:
-		html += "<tr><td class='artist'>"
+		html += "<tr>"
+		html += "<td class='rank'>#" + str(i) + "</td><td class='artist'>"
 		html += "<a href=/artist?artist=" + urllib.parse.quote(e["artist"]) + ">" + e["artist"] + "</a>"
-		html += "</td><td class='amount'><a href='/scrobbles?artist=" + urllib.parse.quote(e["artist"]) + "&" + extrakeys + "'>" + str(e["scrobbles"]) + "</a></td></tr>"
+		html += "</td><td class='amount'><a href='/scrobbles?artist=" + urllib.parse.quote(e["artist"]) + "&" + extrakeys + "'>" + str(e["scrobbles"]) + "</a></td>"
+		html += "<td class='bar'><a href='/scrobbles?artist=" + urllib.parse.quote(e["artist"]) + "&" + extrakeys + "'><div style='width:" + str(int(e["scrobbles"]/maxbar * 100)) + "%;'></div></a></td>"
+		html += "</tr>"
+		i += 1
 	html += "</table>"
 
 	return {"KEY_TOPARTIST_IMAGEURL":imgurl,"KEY_SCROBBLES":str(scrobbles),"KEY_ARTISTLIST":html}