mirror of https://github.com/krateng/maloja.git
Implemented search function
This commit is contained in:
Krateng
parent
b6f3791eac
commit
03a12eb4ca
12
database.py
12
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
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
**/
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue