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_json/';
const QUERY_PATH = '/pvdb/tmdb/query_movie_json'


// 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
		if (json.in_db)
			a.classList.add('file_stored');
		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, element);
			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');
		return;
	}

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

		node.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;
	}

	if ((!'content' in document.createElement('template'))) {
		logError('Unsupported Browser, No template support');
		return;
	}

	fetchJSON(FOLDER_CONTENTS_PATH, parseResponse, document.querySelector('.content'));
}


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, node=null) {
	fetch(url)
	.then(function(response) {
		if (!response.ok)
			throw Error(response.statusText);

		return response.json();
	})
	.then(function(json) {
		(node == null) ? responseFunc(json) : responseFunc(json, node);
	})
	.catch(function(error) {
		logError('fetch error: ' + error);
		return null;
	});
}