add client side logic for submitting admin page changes

admin.html

@@ -10,9 +10,11 @@
 
 <div id="info"><pre></pre></div>
 
-<div id="error_container">
+<div>
 	<h3>errors</h3>
-	<div id="errors" class="debug"></div>
+	<div class="debug">
+		<pre id="errors" />
+	</div>
 </div>
 
 <div class="horizontal_list">

static/admin.js

@@ -16,7 +16,8 @@
  */
 
 
-const SCAN_URL = '/video_metadata/admin.php?action=scan';
+const SCAN_URL = 'admin.php?action=scan';
+const VERIFY_URL = 'admin.php?action=verify';
 
 
 function copyJSONtoDOMData(node, path_info)
@@ -104,8 +105,11 @@ function buildDirectoryTreeWithData(path_info)
 	if (path_info.depth > 0) {
 		sub_list.addEventListener('click', function(e) {
 			e.stopPropagation();
-			for (let div of sub_list.querySelectorAll('div'))
+
-				div.classList.toggle('hidden');
+			if (e.target.nodeName != 'INPUT') {
+				for (let div of sub_list.querySelectorAll('div'))
+					div.classList.toggle('hidden');
+			}
 		});
 	}
 
@@ -115,12 +119,71 @@ function buildDirectoryTreeWithData(path_info)
 	return clone;
 }
 
+function createJSONFromDOM(node)
+{
+	let json = {};
+	json.base_name = node.dataset.baseName;
+	json.content_size = node.dataset.contentSize;
+	json.depth = node.dataset.depth;
+	json.path_extension = node.dataset.fileExtension;
+	json.full_path = node.dataset.fullPath;
+	json.media_type = node.dataset.mediaType;
+	json.path_type = node.dataset.pathType;
+	json.contents = [];
+
+	return json;
+}
+
+function buildJSONFromNode(node)
+{
+	let json = createJSONFromDOM(node);
+
+	if (json.media_type == "unknown" || json.media_type == "") {
+		throw new Error('unknown media type, ' + json.base_name + ', at depth: ' + json.depth + '.\n');
+		return null;
+	}
+
+	if (node.childNodes.length > 1) {
+		for (let child of node.children) {
+			if (child.nodeName == 'DIV')
+				json.contents.push(buildJSONFromNode(child));
+		}
+	}
+
+	return json;
+}
+
 function onScanSubmit(e)
 {
-	// TODO: need to walk the dom tree and build a json object out of the data attributes
+	console.log('onScanSubmit');
-	// TODO: verify there are no 'unkown' media types, or fail with warning
+
-	// TODO: send json back to admin.php for tmdb_queries
+	let errors = document.querySelector('#errors');
-	console.log(e);
+	let error_count = 0;
+	div = document.querySelector('#main_container div');
+	let json = createJSONFromDOM(div);
+
+	for (let node of div.children) {
+		if (node.nodeName == 'DIV') {
+			try {
+				json.contents.push(buildJSONFromNode(node));
+			} catch(e) {
+				console.log(e);
+				errors.appendChild(document.createTextNode(e.message));
+				error_count++;
+			}
+		}
+	}
+
+	if (error_count == 0) {
+		console.log('valid json, uploading');
+		fetchPOSTJSON(VERIFY_URL, json, function() {
+			// ??
+		});
+	} else {
+		console.log('failed upload, errors in json');
+	}
+
+	console.log(json);
 }
 
 function scanFolderResponse(data)
@@ -144,7 +207,6 @@ function scanFolderResponse(data)
 	}
 
 	if (data.path_info) {
-		//console.log(data.path_info);
 		let b = document.createElement('button');
 		b.textContent = 'Upload';
 		b.addEventListener('click', onScanSubmit);
@@ -164,6 +226,7 @@ window.onload = function () {
 
 	scan_button.addEventListener('click', function(e) {
 		let info_container = document.querySelector('#info pre');
+		resetContainers(info_container);
 		info_container.appendChild(document.createTextNode('waiting for response...'));
 		fetchJSON(SCAN_URL, scanFolderResponse);
 	});

static/default.js

@@ -71,6 +71,35 @@ function fetchJSON(url, responseFunc)
 	});
 }
 
+function fetchPOSTJSON(url, json, responseFunc)
+{
+	let init = {
+			headers: {
+				'Accept': 'application/json',
+				'Content-Type': 'application/json'
+			},
+			method: 'POST',
+			body: JSON.stringify(json)
+		};
+
+	let request = new Request(url, init);
+
+	fetch(request)
+	.then(function(response) {
+		if (!response.ok)
+			throw Error(response.statusText);
+
+		return response.json();
+	})
+	.then(function(json) {
+		responseFunc(json);
+	})
+	.catch(function(error) {
+		console.log('fetch error: ', error);
+		return null;
+	});
+}
+
 function resetContainers(...args)
 {
 	args.forEach(function(arg) {