add more javascript for file_listing

video_metadata/static/file_listing.js

@@ -1,27 +1,43 @@
-function logError(s) {
-	console.log(s);
-	let error_box = document.querySelector('#js_errors');
-	let p = document.createElement('p');
-	p.appendChild(document.createTextNode(s));
-	error_box.appendChild(p);
-	error_box.style.display = 'block';
-}
 
-function fetchJSON(url, responseFunc, event) {
-	fetch(url)
-	.then(function(response) {
-		console.log('Response.url: ', response.url)
-		if (!response.ok)
-			throw Error(response.statusText);
+// TODO: could get path constants from DOM in jinja template
+const FOLDER_CONTENTS_PATH = '/pvdb/file_listing/folder_contents';
+const QUERY_PATH = '/pvdb/tmdb/query_movie'
 
-		return response.json();
-	})
-	.then(function(json) {
-		responseFunc(json, event);
-	})
-	.catch(function(error) {
-		logError('fetch error: ' + error);
-		return null;
+
+// NOTE: create links for folder contents
+function addContents(node, json) {
+	let li = document.createElement('li');
+	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.rel_path = json.rel_path;
+
+	if (json.is_dir)
+		a.classList.add('folder');
+	else
+		a.classList.add('file');
+
+	a.appendChild(document.createTextNode(json.base_name));
+	li.appendChild(a);
+	node.appendChild(li);
+
+	a.addEventListener('click', function(e) {
+		e.preventDefault();
+		let element = a.parentNode
+
+		if (element.querySelector('ul')) {
+			element.removeChild(element.querySelector('ul'));
+		} else {
+			if (a.dataset.is_dir == 'true') {
+				fetchJSON(FOLDER_CONTENTS_PATH + a.dataset.rel_path, parseResponse, e);
+			} else {
+				window.location = QUERY_PATH
+					+ '?query=' + a.dataset.base_name
+					+ '&rel_path=' + a.dataset.rel_path;
+			}
+		}
 	});
 }
 
@@ -30,9 +46,14 @@ function parseResponse(json, event) {
 		for (let err of json.errors)
 			logError(err);
 	} else {
-		for (let path of json.paths) {
-			console.log(event);
-		}
+		let frag = document.createDocumentFragment();
+		let ul = document.createElement('ul');
+		frag.appendChild(ul);
+
+		for (let path of json.paths)
+			addContents(ul, path);
+
+		event.target.parentNode.appendChild(frag);
 	}
 }
 
@@ -46,13 +67,55 @@ window.onload = function() {
 		return;
 	}
 
-	// replace top level links with event listeners that fetch json directory listings
+	// TODO: remove the top level links from jinja template, and just load as JSON
+	// 	to avoid duplicate code.
+	// TODO: should probably look at flask routes as well
+	// TODO: will need to update the addContents function
+	// NOTE: replace top level links with event listeners that fetch json directory listings
 	for (let link of document.querySelectorAll('#videolist > li > a')) {
 		let href = link.getAttribute('href')
 
 		link.addEventListener('click', function(e) {
 			e.preventDefault();
-			fetchJSON(window.location + href, parseResponse, e);
+			let element = e.target.parentNode
+
+			if (element.querySelector('ul'))
+				element.removeChild(element.querySelector('ul'));
+			else
+				fetchJSON(FOLDER_CONTENTS_PATH + href, parseResponse, e);
 		});
 	}
 }
+
+
+function logError(s) {
+	console.log(s);
+	let error_box = document.querySelector('#js_errors');
+	let p = document.createElement('p');
+	p.appendChild(document.createTextNode(s));
+	error_box.appendChild(p);
+	error_box.style.display = 'block';
+}
+
+function removeAllChildren(node) {
+	while(node.hasChildNodes())
+		node.removeChild(node.lastChild);
+}
+
+function fetchJSON(url, responseFunc, event) {
+	fetch(url)
+	.then(function(response) {
+		if (!response.ok)
+			throw Error(response.statusText);
+
+		return response.json();
+	})
+	.then(function(json) {
+		responseFunc(json, event);
+	})
+	.catch(function(error) {
+		logError('fetch error: ' + error);
+		return null;
+	});
+}
+

video_metadata/static/style.css

@@ -21,3 +21,5 @@ input.danger { color: #cc2f2e; }
 .search_result { max-width: 400px; margin-bottom: 1em; padding: 1em; background: lightblue; border: 1px solid blue }
 .arrow_submit { width: 3em; font-weight: bold; }
 .content li { list-style: ' - '; }
+.folder { background: lightblue; }
+.file { background: orange; }

video_metadata/templates/file_listing/folder_contents.html

@@ -25,9 +25,5 @@
 			</li>
 		{% endfor %}
 		</ul>
-
-		<template id="path_info">
-			<li><a href=""></a></li>
-		</template>
 {% endblock %}