Modularized Javascript

website/javascript/cookies.js

@@ -0,0 +1,44 @@
+apikeycorrect = false;
+
+function insertAPIKeyFromCookie() {
+	cookies = decodeURIComponent(document.cookie).split(';');
+	for(var i = 0; i <cookies.length; i++) {
+		cookies[i] = cookies[i].trim()
+		if (cookies[i].startsWith("apikey=")) {
+			document.getElementById("apikey").value = cookies[i].replace("apikey=","")
+			checkAPIkey()
+		}
+	}
+}
+
+
+function saveAPIkey() {
+	key = document.getElementById("apikey").value
+	document.cookie = "apikey=" + encodeURIComponent(key)
+}
+
+
+
+function checkAPIkey() {
+	saveAPIkey()
+	url = "/db/test?key=" + document.getElementById("apikey").value
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (this.readyState == 4 && (this.status == 204 || this.status == 205)) {
+			document.getElementById("apikey").style.backgroundColor = "lawngreen"
+			apikeycorrect = true
+		}
+		else {
+			document.getElementById("apikey").style.backgroundColor = "red"
+			apikeycorrect = false
+		}
+	};
+	try {
+		xhttp.open("GET",url,true);
+		xhttp.send();
+	}
+	catch (e) {
+		document.getElementById("apikey").style.backgroundColor = "red"
+		apikeycorrect = false
+	}
+}

website/javascript/search.js

@@ -0,0 +1,79 @@
+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
+}