add some javascript for async file listing

7 years ago · 019212f999
4 changed files with 94 additions and 18 deletions
--- a/video_metadata/static/file_listing.js
+++ b/video_metadata/static/file_listing.js
@ -0,0 +1,58 @@
+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);
+
+		return response.json();
+	})
+	.then(function(json) {
+		responseFunc(json, event);
+	})
+	.catch(function(error) {
+		logError('fetch error: ' + error);
+		return null;
+	});
+}
+
+function parseResponse(json, event) {
+	if (json.errors.length > 0) {
+		for (let err of json.errors)
+			logError(err);
+	} else {
+		for (let path of json.paths) {
+			console.log(event);
+		}
+	}
+}
+
+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;
+	}
+
+	// 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);
+		});
+	}
+}
--- a/video_metadata/templates/base.html
+++ b/video_metadata/templates/base.html
@ -3,6 +3,7 @@
 <head>
 	<title>{% block title %}{% endblock %} - pvdb</title>
 	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+	{% block extra_js %}{% endblock %}
 </head>
 <body>
 	<nav>
--- a/video_metadata/templates/file_listing/folder_contents.html
+++ b/video_metadata/templates/file_listing/folder_contents.html
@ -1,21 +1,33 @@
 {% extends 'base.html' %}

+{% block extra_js %}
+	<script type="text/javascript" src="{{ url_for('static', filename='file_listing.js') }}"></script>
+{% endblock %}
+
 {% block header %}
-	<h1>{% block title %}File Listing{% endblock %}</h1>
+		<h1>{% block title %}File Listing{% endblock %}</h1>
 {% endblock %}

 {% block content %}
-	<ul>
-	{% for path in paths%}
-		<li>
-			{% if path.is_dir %}
-			<a href="{{ url_for('file_listing.getFolderJSON', subpath=path.rel_path) }}">
-				{{ path.base_name }}</a>
-			{% else %}
-			<a href="{{ url_for('tmdb.query_movie', query=path.base_name, rel_path=path.rel_path) }}">
-				{{ path.base_name }}</a>
-			{% endif %}
-		</li>
-	{% endfor %}
-	</ul>
+		<p id="noscript" class="flash">Javascript needs to be enabled for this page</p>
+		<div id="js_errors" class="flash"></div>
+
+		<ul id="videolist">
+		{% for path in paths%}
+			<li>
+				{% if path.is_dir %}
+				<a class="folder" href="{{ path.rel_path }}">{{ path.base_name }}</a>
+				{% else %}
+				<a  class="file" href="{{
+					url_for('tmdb.query_movie', query=path.base_name, rel_path=path.rel_path) }}">
+					{{ path.base_name }}</a>
+				{% endif %}
+			</li>
+		{% endfor %}
+		</ul>
+
+		<template id="path_info">
+			<li><a href=""></a></li>
+		</template>
 {% endblock %}
+
--- a/video_metadata/views/file_listing.py
+++ b/video_metadata/views/file_listing.py
@ -47,7 +47,7 @@ def getBaseFolderContents():

    # validate input
    if not os.path.exists(full_path):
-        flash('invalid path')
+        flash('path in "MOVIE_DIR" is invalid')
    else:
        for entry in os.scandir(full_path):
            paths.append(getPathInfo(entry, MAX_RECURSE_DEPTH))
@ -65,16 +65,21 @@ def getBaseFolderContents():
 def getFolderJSON(subpath = ''):
    video_path = current_app.config['MOVIE_DIR']
    full_path = os.path.join(video_path, subpath)
+    errors = []
    paths = []

+    current_app.logger.debug('video_path: {}'.format(video_path))
+    current_app.logger.debug('subpath: {}'.format(subpath))
+    current_app.logger.debug('full_path: {}'.format(full_path))
+
    # validate input
    if re.search('\.\.', subpath) or not os.path.exists(full_path):
-        flash('invalid path')
+        errors.append('invalid path?: {}'.format(full_path))
    else:
        for entry in os.scandir(full_path):
            # TODO: remove 'getPathInfo()' when finished with async file listing
            #   make sure to continue to test for '.' and symlinks
-            logger.info(entry)
+            # TODO: add errors to json, 'flash()' won't trigger on this function since it's async
            pe = getPathInfo(entry, MAX_RECURSE_DEPTH)
            if pe:
                paths.append({
@ -84,7 +89,7 @@ def getFolderJSON(subpath = ''):
                        'is_dir': pe.is_dir,
                    })

-    return jsonify(paths)
+    return jsonify(errors=errors, paths=paths)


 def getPathInfo(entry, depth=0):