add query results box to file listing page

video_metadata/static/file_listing.js

@@ -1,7 +1,7 @@
 
 // TODO: could get path constants from DOM in jinja template
 const FOLDER_CONTENTS_PATH = '/pvdb/file_listing/folder_contents_json/';
-const QUERY_PATH = '/pvdb/tmdb/query_movie'
+const QUERY_PATH = '/pvdb/tmdb/query_movie_json'
 
 
 // NOTE: create links for folder contents
@@ -10,8 +10,7 @@ function addContents(node, json) {
 	let a = document.createElement('a');
 	a.href = window.location;
 	a.dataset.base_name = json.base_name;
-	a.dataset.file_extension = json.file_extension;
-	a.dataset.is_dir = json.is_dir;
+	a.dataset.file_extension = json.file_extension; a.dataset.is_dir = json.is_dir;
 	a.dataset.rel_path = json.rel_path;
 
 	if (json.is_dir)
@@ -33,19 +32,49 @@ function addContents(node, json) {
 		if (element.querySelector('ul')) {
 			element.removeChild(element.querySelector('ul'));
 		} else {
-			if (a.dataset.is_dir == 'true') {
+			if (a.dataset.is_dir == 'true')
 				fetchJSON(FOLDER_CONTENTS_PATH + a.dataset.rel_path, parseResponse, element);
-			} else {
-				// TODO: would be nice to have a modal here to select the metadata
-				// TODO: also need a way to display file paths that are already stored
-				window.location = QUERY_PATH
-					+ '?query=' + a.dataset.base_name
-					+ '&rel_path=' + a.dataset.rel_path;
-			}
+			else
+				openQueryDialog(a.dataset);
 		}
 	});
 }
 
+// NOTE: create query results dialog from html templates
+function openQueryDialog(dataset) {
+	query_str = QUERY_PATH
+		+ '?query=' + dataset.base_name
+		+ '&rel_path=' + dataset.rel_path;
+	fetchJSON(query_str, function(json) {
+		let tcontainer = document.querySelector('#query_results');
+		let tclone = document.importNode(tcontainer.content, true);
+		let close = tclone.querySelector('#query_close');
+		close.addEventListener('click', function(e) {
+			e.preventDefault();
+			document.querySelector('body').removeChild(e.target.parentNode);
+		});
+
+		for (let result of json) {
+			let qt = document.querySelector('#query_result');
+			let qtclone = document.importNode(qt.content, true);
+
+			let title_link = qtclone.querySelector('h3 > a');
+			title_link.href = result.tmdb_link;
+			title_link.appendChild(document.createTextNode(result.title));
+
+			let date = qtclone.querySelector('.query_release_date');
+			date.appendChild(document.createTextNode(result.release_date));
+
+			let description = qtclone.querySelector('.query_description');
+			description.appendChild(document.createTextNode(result.overview));
+
+			tclone.querySelector('#query_result_container').appendChild(qtclone);
+		}
+
+		document.querySelector('body').appendChild(tclone);
+	});
+}
+
 function parseResponse(json, node) {
 	if (node == null) {
 		logError('parent node cannot be null');
@@ -77,6 +106,11 @@ window.onload = function() {
 		return;
 	}
 
+	if ((!'content' in document.createElement('template'))) {
+		logError('Unsupported Browser, No template support');
+		return;
+	}
+
 	fetchJSON(FOLDER_CONTENTS_PATH, parseResponse, document.querySelector('.content'));
 }
 
@@ -95,7 +129,7 @@ function removeAllChildren(node) {
 		node.removeChild(node.lastChild);
 }
 
-function fetchJSON(url, responseFunc, node) {
+function fetchJSON(url, responseFunc, node=null) {
 	fetch(url)
 	.then(function(response) {
 		if (!response.ok)
@@ -104,7 +138,7 @@ function fetchJSON(url, responseFunc, node) {
 		return response.json();
 	})
 	.then(function(json) {
-		responseFunc(json, node);
+		(node == null) ? responseFunc(json) : responseFunc(json, node);
 	})
 	.catch(function(error) {
 		logError('fetch error: ' + error);

video_metadata/static/style.css

@@ -26,3 +26,15 @@ input.danger { color: #cc2f2e; }
 .folder { background: lightblue; }
 .file { background: orange; }
 .file_stored { background: lightgreen; }
+
+#query_result_container {
+	position: fixed;
+	top: 25%; left: 25%;
+	width: 50%; height: 50%;
+	padding 2em;
+	background-color: darkgrey;
+	overflow: auto;
+}
+
+.query_description { border: 0; padding: 0; margin: 0; }
+#query_close { float: right; margin-right: 1em; margin-top: 1em; }

video_metadata/templates/file_listing/folder_contents.html

@@ -15,16 +15,17 @@
 
 {% block templates %}
 	<template id="query_results">
-		<h1>Query Results</h1>
-		<div id="query_result_container"></div>
+		<div id="query_result_container">
+			<a id="query_close" href="">Close</a>
+			<h1>Query Results</h1>
+		</div>
 	</template>
 	<template id="query_result">
 		<div class="search_result">
 			<h3><a href=""></a></h3>
 			<ul>
-				<li><a href="">Click here to select</a></li>
-				<li>Release Date: </li>
-				<li>Description: <p></p></li>
+				<li>Release Date: <span class="query_release_date"></span></li>
+				<li>Description: <p class="query_description"></p></li>
 			</ul>
 		</div>
 	</template>