Added global footer and head elements

This commit is contained in:
Krateng 2019-03-08 13:36:26 +01:00
parent 4f48daa4f8
commit b6af12e751
13 changed files with 123 additions and 126 deletions

View File

@ -131,6 +131,16 @@ def static_html(name):
linkheaders = ["</maloja.css>; rel=preload; as=style"]
keys = removeIdentical(FormsDict.decode(request.query))
with open("website/" + name + ".html") as htmlfile:
html = htmlfile.read()
# apply global substitutions
with open("website/common/footer.html") as footerfile:
footerhtml = footerfile.read()
with open("website/common/header.html") as headerfile:
headerhtml = headerfile.read()
html = html.replace("</body>",footerhtml + "</body>").replace("</head>",headerhtml + "</head>")
# If a python file exists, it provides the replacement dict for the html file
if os.path.exists("website/" + name + ".py"):
#txt_keys = SourceFileLoader(name,"website/" + name + ".py").load_module().replacedict(keys,DATABASE_PORT)
@ -141,23 +151,20 @@ def static_html(name):
linkheaders.append("<" + resource["file"] + ">; rel=preload; as=" + resource["type"])
# apply key substitutions
with open("website/" + name + ".html") as htmlfile:
html = htmlfile.read()
for k in txt_keys:
if isinstance(txt_keys[k],list):
# if list, we replace each occurence with the next item
for element in txt_keys[k]:
html = html.replace(k,element,1)
else:
html = html.replace(k,txt_keys[k])
response.set_header("Link",",".join(linkheaders))
return html
for k in txt_keys:
if isinstance(txt_keys[k],list):
# if list, we replace each occurence with the next item
for element in txt_keys[k]:
html = html.replace(k,element,1)
else:
html = html.replace(k,txt_keys[k])
# Otherwise, we just serve the html file
response.set_header("Link",",".join(linkheaders))
return static_file("website/" + name + ".html",root="")
return html
#return static_file("website/" + name + ".html",root="")
#set graceful shutdown
signal.signal(signal.SIGINT, graceful_exit)

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - KEY_ARTISTNAME</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -0,0 +1,13 @@
<div class="footer">
<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 id="searchinput" placeholder="Search for an artist or track..." oninput="search(this)" onblur="clearresults()" /></span>
</div>
<span id="resultwrap"></span>
</div>

View File

@ -0,0 +1,86 @@
<meta name="description" content='Maloja is a self-hosted music scrobble server.' />
<link rel="stylesheet" href="maloja.css" />
<script>
function search(searchfield) {
txt = searchfield.value;
if (txt == "") {
reallyclear()
}
else {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = searchresult
xhttp.open("GET","/db/search?max=5&query=" + encodeURIComponent(txt), true);
xhttp.send();
}
}
function searchresult() {
if (this.readyState == 4 && this.status == 200 && document.getElementById("searchinput").value != "") {
// checking if field is empty in case we get an old result coming in that would overwrite our cleared result window
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() {
window.setTimeout(reallyclear,500)
}
function reallyclear() {
document.getElementById("resultwrap").innerHTML = "";
}
function goto(link) {
window.location = link
}
</script>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - Issues</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - KEY_PULSEDETAILS Pulse</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - Scrobbles</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - Setup</title>
<link rel="stylesheet" href="maloja.css" />
<script>
function replaceurls() {

View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<title>Maloja</title>
<link rel="stylesheet" href="maloja.css" />
<script>
@ -49,86 +49,6 @@
}
document.getElementById("selector_toptracks_" + unit).setAttribute("style","opacity:0.5;")
}
function search(searchfield) {
txt = searchfield.value;
if (txt == "") {
reallyclear()
}
else {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = searchresult
xhttp.open("GET","/db/search?max=5&query=" + encodeURIComponent(txt), true);
xhttp.send();
}
}
function searchresult() {
if (this.readyState == 4 && this.status == 200 && document.getElementById("searchinput").value != "") {
// checking if field is empty in case we get an old result coming in that would overwrite our cleared result window
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() {
window.setTimeout(reallyclear,500)
}
function reallyclear() {
document.getElementById("resultwrap").innerHTML = "";
}
function goto(link) {
window.location = link
}
</script>
</head>
@ -215,28 +135,8 @@
<span class="stat_module_pulse" id="pulse_weeks" style="display:none;">KEY_PULSE_WEEKS</span>
</div>
<div class="footer">
<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 id="searchinput" placeholder="Search for an artist or track..." oninput="search(this)" onblur="clearresults()" /></span>
</div>
<span id="resultwrap"></span>
</div>
</body>
</html>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - Top Artists KEY_RANGE</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - Top Tracks in KEY_RANGE</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - KEY_TRACKTITLE</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>

View File

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8" />
<title>Maloja - Please wait</title>
<link rel="stylesheet" href="maloja.css" />
</head>
<body>