From 2f38ec7ae27ff862156690385a9be70883e956eb Mon Sep 17 00:00:00 2001
From: cinnaboot <cinnaboot@protonmail.com>
Date: Sat, 28 Sep 2019 18:17:44 -0400
Subject: [PATCH] provide feedback when file mapping is successful

---
 video_metadata/static/file_listing.js         | 36 +++++++++++--------
 video_metadata/static/style.css               |  3 +-
 .../file_listing/folder_contents.html         |  6 ++++
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/video_metadata/static/file_listing.js b/video_metadata/static/file_listing.js
index b0c7319..fb2312b 100644
--- a/video_metadata/static/file_listing.js
+++ b/video_metadata/static/file_listing.js
@@ -37,13 +37,13 @@ function addContents(node, json) {
 			if (a.dataset.is_dir == 'true')
 				fetchJSON(FOLDER_CONTENTS_PATH + a.dataset.rel_path, parseResponse, element);
 			else
-				openQueryDialog(a.dataset);
+				openQueryDialog(a.dataset, e.target);
 		}
 	});
 }
 
 // NOTE: create query results dialog from html templates
-function openQueryDialog(dataset) {
+function openQueryDialog(dataset, element) {
 	query_str = QUERY_PATH
 		+ '?query=' + dataset.base_name
 		+ '&rel_path=' + dataset.rel_path;
@@ -76,7 +76,7 @@ function openQueryDialog(dataset) {
 
 				let map_link = qtclone.querySelector('.mapping_link');
 				map_link.addEventListener('click', function(e) {
-					submitFileMapping(e, result.id, dataset.rel_path);
+					submitFileMapping(e, result.id, dataset.rel_path, element);
 				});
 
 				tclone.querySelector('#query_result_container').appendChild(qtclone);
@@ -87,28 +87,36 @@ function openQueryDialog(dataset) {
 	});
 }
 
-async function submitFileMapping(click_event, movie_id, rel_path) {
+async function submitFileMapping(click_event, movie_id, rel_path, element) {
+	// NOTE: remove the query box
+	document.querySelector('body').removeChild(document.querySelector('#query_result_container'));
 	click_event.preventDefault();
-	console.log('movie_id: ' + movie_id);
-	console.log('rel_path: ' + rel_path);
-	// TODO:
-	// 	- display errors
-	// 	- display success
-	// 		- update link class to file_stored
-	// 	- close query box
-
 	query_str = CREATE_MAPPING_PATH;
 	params = new FormData();
 	params.append('movie_id', movie_id);
 	params.append('rel_path', rel_path);
 
+	let json = null;
 	const response = await fetch(CREATE_MAPPING_PATH, { body: params, method: 'POST' });
 	try {
-		const json = await response.json();
-		console.log(json);
+		json = await response.json();
 	} catch (e) {
 		logError('error in submitFileMapping(), ' + e);
 	}
+
+	if (json != null && json.errors.length == 0) {
+		// NOTE: display success dialog
+		let map_temp = document.querySelector('#mapping_success');
+		let clone = document.importNode(map_temp.content, true);
+		clone.querySelector('div > p').appendChild(document.createTextNode(json.message));
+		let body = document.querySelector('body');
+		body.appendChild(clone);
+		window.setTimeout(function() {
+			body.removeChild(document.querySelector('.success_container'));
+		}, 1000);
+		// NOTE: update the displayed link class
+		element.className = 'file_stored';
+	}
 }
 
 function parseResponse(json, node) {
diff --git a/video_metadata/static/style.css b/video_metadata/static/style.css
index 6e1995b..a5569db 100644
--- a/video_metadata/static/style.css
+++ b/video_metadata/static/style.css
@@ -27,7 +27,8 @@ input.danger { color: #cc2f2e; }
 .file { background: orange; }
 .file_stored { background: lightgreen; }
 
-#query_result_container {
+#query_result_container,
+.success_container {
 	position: fixed;
 	top: 25%; left: 25%;
 	width: 50%; height: 50%;
diff --git a/video_metadata/templates/file_listing/folder_contents.html b/video_metadata/templates/file_listing/folder_contents.html
index 620268e..6486867 100644
--- a/video_metadata/templates/file_listing/folder_contents.html
+++ b/video_metadata/templates/file_listing/folder_contents.html
@@ -30,4 +30,10 @@
 			</ul>
 		</div>
 	</template>
+	<template id="mapping_success">
+		<div class="success_container">
+			<h3>File Mapping Success</h3>
+			<p></p>
+		</div>
+	</template>
 {% endblock %}