From 03a12eb4ca3209389053baf53964b00e0990d25c Mon Sep 17 00:00:00 2001 From: Krateng Date: Wed, 6 Mar 2019 17:50:36 +0100 Subject: [PATCH] Implemented search function --- database.py | 12 ++++- server.py | 4 +- website/maloja.css | 127 +++++++++++++++++++++++++++++++++++++++++++-- website/start.html | 91 +++++++++++++++++++++++++++++++- 4 files changed, 227 insertions(+), 7 deletions(-) diff --git a/database.py b/database.py index 04451ba..3353b3d 100644 --- a/database.py +++ b/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 diff --git a/server.py b/server.py index 7e35e6f..918ca70 100755 --- a/server.py +++ b/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" diff --git a/website/maloja.css b/website/maloja.css index 8effa9a..fa117e2 100644 --- a/website/maloja.css +++ b/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%; - background-color:rgba(0.5,0.5,0.5,0.3); + /**width:100%;**/ + 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; + **/ } } diff --git a/website/start.html b/website/start.html index bca8a85..31b2eeb 100644 --- a/website/start.html +++ b/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 = `
+ Artists + ` + + for (var i=0;i + + + ` + } + + html += `
+ ` + name + `
+
+

+ Tracks + ` + + for (var i=0;i "artist=" + encodeURIComponent(x)).join("&"); + uristr = uristr.replace("'","\\'"); + image = "/image?" + uristr; + link = "/track?" + uristr; + + html += ` + + + ` + + } + html += `
+ ` + artists + `
+ ` + title + ` +
+
` + + + document.getElementById("resultwrap").innerHTML = html; + } + } + + function clearresults() { + document.getElementById("resultwrap").innerHTML = ""; + } + + function goto(link) { + window.location = link + } + + + +

Top Artists

@@ -132,8 +209,20 @@ + + + +