From 8b0904e58974c206f47f88a1a2a3ef00db60cc7f Mon Sep 17 00:00:00 2001
From: Krateng <git.noreply@krateng.ch>
Date: Tue, 14 May 2019 12:50:31 +0200
Subject: [PATCH] Added page to manually scrobble

---
 website/css/maloja.css        |  12 ++
 website/javascript/cookies.js |   4 +
 website/manual.html           | 214 ++++++++++++++++++++++++++++++++++
 3 files changed, 230 insertions(+)
 create mode 100644 website/manual.html
diff --git a/website/css/maloja.css b/website/css/maloja.css
index b68d8f4..08dd926 100644
--- a/website/css/maloja.css
+++ b/website/css/maloja.css
@@ -290,6 +290,18 @@ input#apikey {
 	padding:2px;
 }
 
+input.simpleinput {
+	font-family:'Ubuntu';
+	color:beige;
+	outline:none;
+	border-top: 0px solid;
+	border-left: 0px solid;
+	border-right: 0px solid;
+	padding:2px;
+	background-color:inherit;
+	border-bottom: 1px solid beige;
+}
+
 
 a {
 	cursor:pointer;
diff --git a/website/javascript/cookies.js b/website/javascript/cookies.js
index 5bb9e50..6d92425 100644
--- a/website/javascript/cookies.js
+++ b/website/javascript/cookies.js
@@ -42,3 +42,7 @@ function checkAPIkey() {
 		apikeycorrect = false
 	}
 }
+
+function APIkey() {
+	return document.getElementById("apikey").value;
+}
diff --git a/website/manual.html b/website/manual.html
new file mode 100644
index 0000000..a064f38
--- /dev/null
+++ b/website/manual.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Maloja</title>
+		<script src="javascript/cookies.js"></script>
+
+		<script>
+			function keyDetect(event) {
+				if (event.key === "Enter" || event.key === "Tab") { addArtist() }
+				if (event.key === "Backspace" && document.getElementById("artists").value == "") { removeArtist() }
+			}
+
+			function addArtist() {
+				element = document.getElementById("artists");
+				newartist = element.value.trim();
+				element.value = "";
+				if (newartist != "") {
+					artist = document.createElement("span");
+					artist.innerHTML = newartist;
+					artist.style = "padding:5px;";
+					document.getElementById("artists_td").insertBefore(artist,element);
+
+					element.placeholder = "Backspace to remove last"
+				}
+			}
+			function removeArtist() {
+				artists = document.getElementById("artists_td").getElementsByTagName("span")
+				lastartist = artists[artists.length-1]
+				document.getElementById("artists_td").removeChild(lastartist);
+				if (artists.length < 1) {
+					document.getElementById("artists").placeholder = "Separate with Enter"
+				}
+			}
+
+
+			function scrobbleIfEnter(event) {
+				if (event.key === "Enter") {
+					scrobbleNew()
+				}
+			}
+
+			function scrobbleNew() {
+				artistnodes = document.getElementById("artists_td").getElementsByTagName("span");
+				artists = [];
+				for (let node of artistnodes) {
+					artists.push(node.innerHTML);
+				}
+				title = document.getElementById("title").value;
+				scrobble(artists,title);
+			}
+
+			function scrobble(artists,title) {
+
+
+				artist = artists.join(";");
+				key = APIkey();
+
+				if (title != "" && artists.length > 0) {
+					xhttp = new XMLHttpRequest();
+					xhttp.onreadystatechange = scrobbledone
+					xhttp.open("GET","/api/newscrobble?artist=" + encodeURIComponent(artist) +
+						"&title=" + encodeURIComponent(title) +
+						"&key=" + encodeURIComponent(key), true);
+					xhttp.send();
+				}
+
+				document.getElementById("title").value = "";
+				document.getElementById("artists").value = "";
+				parent = document.getElementById("artists_td");
+				artists = document.getElementById("artists_td").getElementsByTagName("span")
+				while (artists.length > 0) {
+    					removeArtist();
+				}
+			}
+
+			function scrobbledone() {
+				if (this.readyState == 4 && this.status == 200) {
+					result = JSON.parse(this.responseText);
+					txt = result["track"]["title"] + " by " + result["track"]["artists"][0];
+					if (result["track"]["artists"].length > 1) {
+						txt += " et al.";
+					}
+					document.getElementById("scrobbleresult").innerHTML = "Scrobbled " + txt + "!";
+				}
+
+			}
+
+
+
+
+			///
+			// SEARCH
+			///
+
+			function search_manualscrobbling(searchfield) {
+				txt = searchfield.value;
+				if (txt == "") {
+
+				}
+				else {
+					xhttp = new XMLHttpRequest();
+					xhttp.onreadystatechange = searchresult_manualscrobbling;
+					xhttp.open("GET","/api/search?max=5&query=" + encodeURIComponent(txt), true);
+					xhttp.send();
+				}
+			}
+			function searchresult_manualscrobbling() {
+				if (this.readyState == 4 && this.status == 200) {
+					document.getElementById("searchresults").innerHTML = "";
+					result = JSON.parse(this.responseText);
+					tracks = result["tracks"].slice(0,10);
+					console.log(tracks);
+					for (let t of tracks) {
+						track = document.createElement("span");
+						trackstr = t["artists"].join(", ") + " - " + t["title"];
+						tracklink = t["link"];
+						track.innerHTML = "<a href='" + tracklink + "'>" +  trackstr + "</a>";
+						row = document.createElement("tr")
+						col1 = document.createElement("td")
+						col1.className = "scrobblebutton"
+						col1.innerHTML = "Scrobble!"
+						col1.onclick = function(){ scrobble(t["artists"],t["title"])};
+						col2 = document.createElement("td")
+						row.appendChild(col1)
+						row.appendChild(col2)
+						col2.appendChild(track)
+						document.getElementById("searchresults").appendChild(row);
+					}
+
+
+				}
+			}
+		</script>
+
+		<style>
+			.scrobblebutton {
+				padding:3px;
+				padding-right:6px;
+				padding-left:6px;
+				background-color:beige;
+				color:black;
+				cursor:pointer;
+			}
+			.scrobblebutton:hover {
+				background-color:gold;
+			}
+			.scrobblebutton:active {
+				background-color:orange;
+			}
+		</style>
+	</head>
+
+
+
+	<body onload="insertAPIKeyFromCookie()">
+
+		<table class="top_info">
+			<tr>
+				<td class="image">
+					<div style="background-image:url('/favicon.png')"></div>
+				</td>
+				<td class="text">
+					<h1>Manual Scrobbling</h1><br/>
+					<br/><br/>
+					API Key: <input id='apikey' onchange='checkAPIkey()' style='width:300px;'/><br/><br/>
+					<span id="scrobbleresult"></span>
+
+				</td>
+			</tr>
+		</table>
+
+		<h1>Scrobble new discovery</h1>
+
+		<table>
+			<tr>
+				<td style="padding-right:7px;">
+					Artists:
+				</td><td id="artists_td">
+					<input placeholder='Separate with Enter' class='simpleinput' id='artists' onKeydown='keyDetect(event)' />
+				</td>
+			</tr>
+			<tr>
+				<td style="padding-right:7px;">
+					Title:
+				</td><td>
+					<input placeholder='Enter to scrobble' class='simpleinput' id='title' onKeydown='scrobbleIfEnter(event)' />
+				</td>
+			</tr>
+		</table>
+
+		<br/>
+
+		<span class="scrobblebutton" onclick="scrobbleNew(event)">Scrobble!</span>
+
+		<br/>
+
+
+
+		<h1>Search</h1>
+
+		<input class="simpleinput" placeholder='Search for a track' oninput='search_manualscrobbling(this)' />
+		<br/><br/>
+		<table id="searchresults"></table>
+
+
+
+
+
+
+	</body>
+
+</html>
