'close' top level directories by default, toggle children onClick

admin.html

@@ -10,6 +10,11 @@
 
 <div id="info"><pre></pre></div>
 
+<div id="error_container">
+	<h3>errors</h3>
+	<div id="errors" class="debug"></div>
+</div>
+
 <div class="horizontal_list">
 	<ul>
 		<li><a id="scan_button" href="#">scan folders</a></li>
@@ -31,8 +36,5 @@
 	</div>
 </template>
 
-<h3>errors</h3>
-<div id="error_container" class="debug"></div>
-
 </body>
 </html>

static/admin.js

@@ -61,10 +61,13 @@ function updateMediaType(node, media_type)
 
 function updateRadioButtons(node, media_type)
 {
-	if (media_type == 'movie')
+	if (media_type == 'movie') {
+		node.querySelector('input[value^="tv_show"]').setAttribute('checked', false);
 		node.querySelector('input[value^="movie"]').setAttribute('checked', true);
-	else if (media_type == 'tv_show')
+	} else if (media_type == 'tv_show') {
+		node.querySelector('input[value^="movie"]').setAttribute('checked', false);
 		node.querySelector('input[value^="tv_show"]').setAttribute('checked', true);
+	}
 }
 
 // NOTE: recursively build DOM tree with attached data attributes and callbacks
@@ -94,22 +97,42 @@ function buildDirectoryTreeWithData(path_info)
 		});
 	}
 
+	// NOTE: hide nested folders by default and add listener to open/close children
+	if (path_info.depth > 1)
+		sub_list.classList.add('hidden');
+
+	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');
+		});
+	}
+
 	for (let node of path_info.contents)
 		sub_list.appendChild(buildDirectoryTreeWithData(node));
 
 	return clone;
 }
 
+function onScanSubmit(e)
+{
+	// TODO: need to walk the dom tree and build a json object out of the data attributes
+	// TODO: verify there are no 'unkown' media types, or fail with warning
+	// TODO: send json back to admin.php for tmdb_queries
+	console.log(e);
+}
+
 function scanFolderResponse(data)
 {
-	let error_container = document.querySelector('#error_container');
+	let errors = document.querySelector('#errors');
 	let info_container = document.querySelector('#info pre');
 	let main_container = document.querySelector('#main_container');
-	resetContainers(error_container, info_container, main_container);
+	resetContainers(errors, info_container, main_container);
 
 	if (data.errors) {
 		for (let err of data.errors) {
-			error_container.appendChild(document.createTextNode(err));
+			errors.appendChild(document.createTextNode(err));
 			console.log(err);
 		}
 	}
@@ -121,7 +144,12 @@ function scanFolderResponse(data)
 	}
 
 	if (data.path_info) {
-		console.log(data.path_info);
+		//console.log(data.path_info);
+		let b = document.createElement('button');
+		b.textContent = 'Upload';
+		b.addEventListener('click', onScanSubmit);
+		main_container.appendChild(b);
+
 		main_container.appendChild(buildDirectoryTreeWithData(data.path_info));
 	}
 }

static/default.css

@@ -70,6 +70,7 @@ ul {
 .depth_4 { margin-left: 80px; }
 .depth_5 { margin-left: 100px; }
 .horizontal_list li { display: inline; }
+.hidden { display: none; }
 
 #query_container {
 	width: 100%;
@@ -92,6 +93,6 @@ ul {
 
 #main_container {
 	width: 100%;
-	margin-top: 200px;
+	margin-top: 20px;
 	background-color: #aaa;
 }