pvdb/video_metadata/static/file_listing.js

// 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'


// 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;
			}
		}
	});
}

function parseResponse(json, event) {
	if (json.errors.length > 0) {
		for (let err of json.errors)
			logError(err);
	} else {
		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);
	}
}

window.onload = function() {
	document.querySelector('#noscript').style.display = 'none';
	let error_box = document.querySelector('#js_errors');
	error_box.style.display = 'none';

	if (!('fetch' in window)) {
		logError('Unsupported Browser, No fetch API');
		return;
	}

	// 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();
			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;
	});
}