Improved search performance

maloja/__init__.py

@@ -17,3 +17,7 @@ resources = [
 	"data_files/*/*",
 	"data_files/.doreah"
 ]
+
+commands = {
+	"maloja":"controller:main"
+}

maloja/controller.py

@@ -9,6 +9,7 @@ from distutils import dir_util
 import stat
 import pathlib
 import pkg_resources
+from doreah.control import mainfunction
 
 from .info import DATA_DIR
 
@@ -153,7 +154,7 @@ def loadlastfm(filename):
 def direct():
 	from . import server
 
-from doreah.control import mainfunction
+
 
 @mainfunction({},shield=True)
 def main(action,*args,**kwargs):

maloja/info.py

@@ -5,7 +5,7 @@ author = {
 	"email":"maloja@krateng.dev",
 	"github": "krateng"
 }
-version = 2,0,1
+version = 2,0,2
 versionstr = ".".join(str(n) for n in version)
 
 

maloja/website/common/footer.html

@@ -9,7 +9,17 @@
 		<span><input id="searchinput" placeholder="Search for an artist or track..." oninput="search(this)" onblur="clearresults()" /></span>
 	</div>
 
-	<span id="resultwrap"></span>
+	<span id="resultwrap" class="hide">
+		<div class="searchresults">
+			<span>Artists</span>
+			<table class="searchresults_artists" id="searchresults_artists">
+			</table>
+			<br/><br/>
+			<span>Tracks</span>
+			<table class="searchresults_tracks" id="searchresults_tracks">
+			</table>
+		</div>
+	</span>
 </div>
 
 <a href="/admin"><div title="Server Administration" id="settingsicon">

maloja/website/css/style.css

@@ -669,3 +669,6 @@ a.hidelink:hover {
 a:hover {
  text-decoration: underline;
 }
+.hide {
+	display:none;
+}

maloja/website/javascript/search.js

@@ -10,34 +10,59 @@ function search(searchfield) {
 		xhttp.send();
 	}
 }
+
+
+function html_to_fragment(html) {
+	var template = document.createElement("template");
+	template.innerHTML = resulthtml;
+	return template.content;
+}
+
+
+const results_artists = document.getElementById("searchresults_artists");
+const results_tracks = document.getElementById("searchresults_tracks");
+const searchresultwrap = document.getElementById("resultwrap");
+
+var resulthtml = `
+<tr>
+	<td class="image"></td>
+	<td>
+		<span></span><br/>
+		<span></span>
+	</td>
+</tr>
+`
+const oneresult = html_to_fragment(resulthtml).firstElementChild;
+
+
+
+
 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);
+		var result = JSON.parse(this.responseText);
-		artists = result["artists"].slice(0,5)
+		var artists = result["artists"].slice(0,5)
-		tracks = result["tracks"].slice(0,5)
+		var tracks = result["tracks"].slice(0,5)
-		html = `<div class="searchresults">
+
-				<span>Artists</span>
+		while (results_artists.firstChild) {
-				<table class="searchresults_artists">`
+			results_artists.removeChild(results_artists.firstChild);
+		}
+		while (results_tracks.firstChild) {
+			results_tracks.removeChild(results_tracks.firstChild);
+		}
 
 		for (var i=0;i<artists.length;i++) {
 			name = artists[i]["name"];
 			link = artists[i]["link"];
 			image = artists[i]["image"];
 
-					html += `<tr onclick="goto('` + link + `')">
+			var node = oneresult.cloneNode(true);
-						<td class="image" style="background-image:url('` + image + `');"></td>
+			node.setAttribute("onclick","goto(" + link + ")");
-						<td>
+			node.children[0].style.backgroundImage = "url('" + image + "')";
-							<span>` + name + `</span><br/>
+			node.children[1].children[0].innerHTML = name;
-						</td>
+
-					</tr>`
+			results_artists.appendChild(node);
 		}
-
-				html += `</table>
-				<br/><br/>
-				<span>Tracks</span>
-				<table class="searchresults_tracks">`
-
 		for (var i=0;i<tracks.length;i++) {
 
 			artists = tracks[i]["artists"].join(", ");
@@ -45,21 +70,16 @@ function searchresult() {
 			link = tracks[i]["link"];
 			image = tracks[i]["image"];
 
-					html += `<tr onclick="goto('` + link + `')">
+			var node = oneresult.cloneNode(true);
-						<td class="image" style="background-image:url('` + image + `');"></td>
+			node.setAttribute("onclick","goto(" + link + ")");
-						<td>
+			node.children[0].style.backgroundImage = "url('" + image + "')";
-							<span>` + artists + `</span><br/>
+			node.children[1].children[0].innerHTML = artists;
-							<span>` + title + `</span>
+			node.children[1].children[2].innerHTML = title;
-						</td>
-					</tr>`
 
+			results_tracks.appendChild(node);
 		}
+		searchresultwrap.classList.remove("hide")
 
-				html += `</table>
-			</div>`
-
-
-			document.getElementById("resultwrap").innerHTML = html;
 	}
 }
 
@@ -67,7 +87,7 @@ function searchresult() {
 	window.setTimeout(reallyclear,500)
 }
 function reallyclear() {
-			document.getElementById("resultwrap").innerHTML = "";
+	searchresultwrap.classList.add("hide")
 }
 
 function goto(link) {

maloja/website/less/grisons.less

@@ -132,3 +132,10 @@ div.grisons_bar:hover>div {
  a:hover {
  	text-decoration:underline;
  }
+
+
+
+
+.hide {
+	display:none;
+}

setup.py

@@ -28,7 +28,8 @@ setuptools.setup(
 	include_package_data=True,
 	entry_points = {
 		"console_scripts":[
-			"maloja = maloja.controller:main"
+			cmd + " = " + module.name + "." + module.commands[cmd]
+			for cmd in module.commands
 		]
 	}
 )