try out html template for admin.html scan list

admin.html

@@ -21,6 +21,18 @@
 	<ul></ul>
 </div>
 
+<template id="path_info_template">
+	<li>
+		<form>
+			<input id="movie" type="radio" name="media_type" value="movie" />
+			<label for="movie">movie</label>
+			<input id="tv_show" type="radio" name="media_type" value="tv_show" />
+			<label for="tv_show">tv_show</label>
+			<span />
+		</form>
+	</li>
+</template>
+
 <h3>errors</h3>
 <div id="error_container" class="debug"></div>
 

static/admin.js

@@ -23,10 +23,11 @@ function displayPathInfo(path_info)
 {
 	const DEPTH_NAMES = ['depth_0', 'depth_1', 'depth_2', 'depth_3', 'depth_4', 'depth_5'];
 
-	let frag = document.createDocumentFragment();
+	let t = document.querySelector("#path_info_template");
-	let line_item = document.createElement('li');
+	let clone = document.importNode(t.content, true);
-	let sub_list = document.createElement('ul');
+	let sub_list = clone.querySelector('li');
-	frag.appendChild(line_item.appendChild(sub_list));
+	sub_list.querySelector('form span').textContent = path_info.base_name;
+	sub_list.classList.add(DEPTH_NAMES[path_info.depth]);
 
 	if (path_info.path_type == 'directory') {
 		sub_list.classList.add('directory');
@@ -37,20 +38,22 @@ function displayPathInfo(path_info)
 	if (path_info.media_type == 'unknown')
 		sub_list.classList.add('unknown');
 
-	sub_list.classList.add(DEPTH_NAMES[path_info.depth]);
+	if (path_info.media_type == 'movie')
-
+		sub_list.querySelector('#movie').setAttribute('checked', true);
-	let bn = document.createElement('li');
+	else if (path_info.media_type == 'tv_show')
-	bn.textContent = 'base_name: ' + path_info.base_name;
+		sub_list.querySelector('#tv_show').setAttribute('checked', true);
-	sub_list.appendChild(bn);
 
-	let mt = document.createElement('li');
+	// NOTE: don't display the radio buttons on top level directory
-	mt.textContent = 'media_type: ' + ((path_info.media_type == '') ? 'none' : path_info.media_type);
+	if (path_info.depth == 0) {
-	sub_list.appendChild(mt);
+		let s = sub_list.querySelector('form span');
+		sub_list.appendChild(s);
+		sub_list.removeChild(sub_list.querySelector('form'));
+	}
 
 	for (let node of path_info.contents)
 		sub_list.appendChild(displayPathInfo(node));
 
-	return frag;
+	return clone;
 }
 
 function scanFolderResponse(data)
@@ -88,6 +91,8 @@ window.onload = function () {
 	let scan_button = document.querySelector('#scan_button');
 
 	scan_button.addEventListener('click', function(e) {
+		let info_container = document.querySelector('#info pre');
+		info_container.appendChild(document.createTextNode('waiting for response...'));
 		fetchJSON(SCAN_URL, scanFolderResponse);
 	});
 }