Implemented search function

database.py

@@ -633,6 +633,16 @@ def rebuild():
 		build_db()
 
 
+
+
+@dbserver.get("/search")
+def search():
+	keys = FormsDict.decode(request.query)
+	query = keys.get("query")
+	
+	artists = db_search(query,type="ARTIST")
+	tracks = db_search(query,type="TRACK")
+	return {"artists":artists,"tracks":tracks}
 	
 ####
 ## Server operation
@@ -833,7 +843,7 @@ def db_search(query,type=None):
 		results = []
 		for t in TRACKS:
 			if query.lower() in t[1].lower():
-				results.append(t)
+				results.append(getTrackObject(t))
 	
 	return results
 

server.py

@@ -45,7 +45,7 @@ def database_get(pth):
 		keystring += urllib.parse.quote(k) + "=" + urllib.parse.quote(keys[k]) + "&"
 	response.set_header("Access-Control-Allow-Origin","*")
 	try:
-		proxyresponse = urllib.request.urlopen("http://localhost:" + str(DATABASE_PORT) + "/" + pth + keystring)
+		proxyresponse = urllib.request.urlopen("http://[::1]:" + str(DATABASE_PORT) + "/" + pth + keystring)
 		contents = proxyresponse.read()
 		response.status = proxyresponse.getcode()
 		response.content_type = "application/json"
@@ -58,7 +58,7 @@ def database_get(pth):
 def database_post(pth):
 	response.set_header("Access-Control-Allow-Origin","*")
 	try:
-		proxyresponse = urllib.request.urlopen("http://localhost:" + str(DATABASE_PORT) + "/" + pth,request.body)
+		proxyresponse = urllib.request.urlopen("http://[::1]:" + str(DATABASE_PORT) + "/" + pth,request.body)
 		contents = proxyresponse.read()
 		response.status = proxyresponse.getcode()
 		response.content_type = "application/json"

website/maloja.css

@@ -5,6 +5,10 @@ body {
 	color:beige;
 	font-family:"Ubuntu";
 	padding:15px;
+	/**
+	padding-top:45px;
+	padding-bottom:25px;
+	**/
 }
 
 a {
@@ -22,19 +26,65 @@ a:hover {
 
 
 /**
-Github link
+Header
+**/
+
+
+div.header {
+	position:fixed;
+	height:45px;
+	width:100%;
+	background-color:rgba(255,215,0,1);
+	top:0px;
+	left:0px;
+	padding:10px;
+	opacity:1;
+	
+	color:black;
+	
+	z-index:5;
+}
+
+div.header h1 {
+	margin:5px;
+}
+
+
+
+/**
+Footer
 **/
 
 div.footer {
 	position:fixed;
 	height:20px;
-	width:100%;
+	/**width:100%;**/
-	background-color:rgba(0.5,0.5,0.5,0.3);
+	background-color:rgba(10,10,10,0.3);
 	bottom:0px;
 	left:0px;
+	right:0px;
 	padding:10px;
 	opacity:0.8;
 }
+
+div.footer div:nth-child(1) {
+	display:inline-block;
+	width:40%;
+	text-align:left;
+}
+div.footer div:nth-child(2) {
+	display:inline-block;
+	width:19%;
+	text-align:center;
+	color:gold;
+	font-size:17px;
+}
+div.footer div:nth-child(3) {
+	display:inline-block;
+	width:40%;
+	text-align:right;
+}
+
 div.footer span a {
 	padding-left:20px;
 	background-repeat:no-repeat;
@@ -43,6 +93,74 @@ div.footer span a {
 	background-image:url("https://github.com/favicon.ico");
 }
 
+div.footer input {
+	background-color:inherit;
+	border:0px;
+	border-bottom:1px solid beige;
+	color:beige;
+	font-size:15px;
+	width:70%;
+	padding-left:5px;
+	padding-right:5px;
+	padding-top:2px;
+	padding-bottom:2px;
+	font-family:"Ubuntu";
+}
+
+div.footer input:focus {
+	outline:none;
+	/**background-color:rgba(245,245,220,0.05);**/
+	
+}
+
+div.searchresults {
+	position:fixed;
+	bottom:50px;
+	right:20px;
+	width:500px;
+	background-color:rgba(10,10,10,0.99);
+	padding:15px;
+}
+
+div.searchresults>span {
+	font-size:20px;
+	font-weight:bold;
+}
+
+div.searchresults table {
+	width:100%;
+}
+
+div.searchresults tr {
+	background-color:rgba(5,5,5,1);
+	margin-top:5px;
+	margin-bottom:5px;
+	height:50px;
+	cursor:pointer;
+	
+}
+div.searchresults tr:hover {
+	background-color:rgba(35,35,35,1);
+}
+
+div.searchresults tr td.image {
+	height:50px;
+	width:50px;
+	background-size:cover;
+	background-position:center;
+}
+
+div.searchresults tr td.info {
+	height:50px;
+	width:350px;
+}
+
+div.searchresults table.searchresults_tracks td span:nth-child(1) {
+	font-size:12px;
+	color:grey;
+
+}
+
 /*
 **
 **
@@ -351,6 +469,9 @@ div.sidelist {
 	background-color:#444447;
 	padding-left:30px;
 	padding-right:30px;
+	/**
+	padding-top:60px;
+	**/
 }
 }
 

website/start.html

@@ -49,12 +49,89 @@
 				}
 				document.getElementById("selector_toptracks_" + unit).setAttribute("style","opacity:0.5;")
 			}
+			
+			function search(searchfield) {
+				txt = searchfield.value;
+				xhttp = new XMLHttpRequest();
+				xhttp.onreadystatechange = searchresult
+				xhttp.open("GET","/db/search?query=" + txt, true);
+				xhttp.send();
+			}
+			function searchresult() {
+				if (this.readyState == 4 && this.status == 200) {
+     
+      					result = JSON.parse(this.responseText);
+      					artists = result["artists"].slice(0,5)
+      					tracks = result["tracks"].slice(0,5)
+      					
+      					html = `<div class="searchresults">
+			   			<span>Artists</span>
+			   			<table class="searchresults_artists">`
+			   			
+			   			for (var i=0;i<artists.length;i++) {
+			   				name = artists[i];
+			   				uristr = "artist=" + encodeURIComponent(name);
+			   				uristr = uristr.replace("'","\\'");
+			   				image = "/image?" + uristr;
+			   				link = "/artist?" + uristr;
+			   				
+			   				html += `<tr onclick="goto('` + link + `')">
+				   				<td class="image" style="background-image:url('` + image + `');"></td>
+				   				<td>
+				   					<span>` + name + `</span><br/>
+				   				</td>
+				   			</tr>`
+				   		}
+				   		
+			   			html += `</table>
+			   			<br/><br/>
+			   			<span>Tracks</span>
+			   			<table class="searchresults_tracks">`
+			   			
+			   			for (var i=0;i<tracks.length;i++) {
+			   				
+			   				artists = tracks[i]["artists"].join(", ");
+			   				title = tracks[i]["title"];
+			   				uristr = "title=" + encodeURIComponent(title) + "&" + tracks[i]["artists"].map(x => "artist=" + encodeURIComponent(x)).join("&");
+			   				uristr = uristr.replace("'","\\'");
+			   				image = "/image?" + uristr;
+			   				link = "/track?" + uristr;
+			   				
+			   				html += `<tr onclick="goto('` + link + `')">
+				   				<td class="image" style="background-image:url('` + image + `');"></td>
+				   				<td>
+				   					<span>` + artists + `</span><br/>
+				   					<span>` + title + `</span>
+				   				</td>
+				   			</tr>`
+				   			
+				   		}
+			   			html += `</table>
+			   		</div>`
+			   		
+			   		
+			   		document.getElementById("resultwrap").innerHTML = html;
+      				}
+			}
+			
+			function clearresults() {
+				document.getElementById("resultwrap").innerHTML = "";
+			}
+			
+			function goto(link) {
+				window.location = link
+			}
 		</script>
 	</head>
 	
 	
 	
 	<body>
+	
+		<!--<div class="header"><h1>Maloja</h1>
+   		</div>-->
+   		
+   		
 		<h1><a href="/topartists?max=50">Top Artists</a></h1>
 		<!--All Time | This Year | This Month | This Week-->
 		
@@ -132,8 +209,20 @@
    		
    		
    		<div class="footer">
-   			<span>Get your own Maloja scrobble server on <a target="_blank" rel="noopener noreferrer" href="https://github.com/krateng/maloja">GitHub</a></span>
+   			<div>
+   				<span>Get your own Maloja scrobble server on <a target="_blank" rel="noopener noreferrer" href="https://github.com/krateng/maloja">GitHub</a></span>
+   			</div>
+   			<div>
+   				<a href="/"><span style="font-weight:bold;">Maloja</span></a>
+   			</div>
+   			<div>
+   				<span><input placeholder="Search for an artist or track..." oninput="search(this)" onblur="clearresults()" /></span>
+   			</div>
    		</div>
+   		
+   		<span id="resultwrap"></span>
+   	
+   		
 		
 	</body>