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'


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

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

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

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