Continued work on the UI

public/js/frontend.js

@@ -1,24 +1,17 @@
 // Initialization
 doAjax("/init", "POST");
 
-// From https://gist.github.com/dharmavir/936328
+// Functions to connect to the Flask server
 function getHttpRequestObject(){
-	// Define and initialize as false
 	var xmlHttpRequst = false;
-	// Mozilla/Safari/Non-IE
 	if (window.XMLHttpRequest){
 		xmlHttpRequst = new XMLHttpRequest();
-	}
-	// IE
-	else if (window.ActiveXObject){
+	}else if (window.ActiveXObject){
 		xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
 	}
 	return xmlHttpRequst;
 }
-
-// Does the AJAX call to URL specific with rest of the parameters
 function doAjax(url, method, responseHandler, data){
-	// Set the variables
 	url = url || "";
 	method = method || "GET";
 	async = true;
@@ -30,23 +23,20 @@ function doAjax(url, method, responseHandler, data){
 	}
 	var xmlHttpRequest = getHttpRequestObject();
 
-	// If AJAX supported
 	if(xmlHttpRequest != false){
 		xmlHttpRequest.open(method, url, async);
-		// Set request header (optional if GET method is used)
 		if(method == "POST"){
 				xmlHttpRequest.setRequestHeader("Content-Type", "application/json");
 		}
-		// Assign (or define) response-handler/callback when ReadyState is changed.
-		xmlHttpRequest.onreadystatechange = function(){
-			if(this.readyState === XMLHttpRequest.DONE && this.status === 200) {
-		    responseHandler(JSON.parse(this.responseText))
-		  }
-		};
-		// Send data
+		if (typeof responseHandler === "function"){
+			xmlHttpRequest.onreadystatechange = function(){
+				if(this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+			    responseHandler(JSON.parse(this.responseText))
+			  }
+			}
+		}
 		xmlHttpRequest.send(JSON.stringify(data));
-	}
-	else{
+	}else{
 		alert("Please use a browser with Ajax support!");
 	}
 }
@@ -63,14 +53,37 @@ document.querySelector("#hide_download_tab").onclick = (ev)=>{
 	document.querySelector("#download_tab").style.display = "none";
 }
 
+var mainSearch = new Vue({
+  el: '#main_search',
+  data: {
+		names: {
+			"TOP_RESULT": "Top Result",
+			"TRACK": "Tracks",
+			"ARTIST": "Artists",
+			"ALBUM": "Albums",
+			"PLAYLIST": "Playlists"
+		},
+    results: {
+			ORDER: [],
+			ALBUM: {},
+			ARTIST: {},
+			TRACK: {},
+			TOP_RESULT: [],
+			PLAYLIST: {}
+		}
+  }
+})
+
 // Search section
-$("#searchbar").on('search', function(){
-	term = this.value
-	console.log(term)
-	doAjax("/search", "POST", searchHandler, {term: term});
+$("#searchbar").keyup(function(e){
+  if(e.keyCode == 13){
+		term = this.value
+		console.log(term)
+		doAjax("/search", "POST", searchHandler, {term: term});
+  }
 })
 
 function searchHandler(result){
 	console.log(result)
-	$("#container").text(JSON.stringify(result))
+	mainSearch.results = result
 }