Implemented dialog for light source addition

ggirelli · Jun 13, 2019 · 4a965e0 · 4a965e0
1 parent 5474a80
commit 4a965e0
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 4 deletions.
diff --git a/app/src/index.html b/app/src/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />
 	<script src="./js/startup.js"></script>
 	<link rel="stylesheet" href="./css/vendor/bootstrap.v4.3.1.min.css" rel="stylesheet" />
 	<script src="./js/vendor/popper.v1.14.7.min.js"></script>

diff --git a/app/src/js/main.js b/app/src/js/main.js
@@ -6,3 +6,12 @@ $(document).ready(function() {
       e.preventDefault();
     });
 });
+
+check_spectra = function(path) {
+	// Check if a spectra file is properly formatted
+	return false;
+}
+
+read_spectra = function(path) {
+	// Read and parse (re-sample) a spectra file
+}
diff --git a/app/src/js/settings-sources.js b/app/src/js/settings-sources.js
@@ -1,4 +1,119 @@
 
+add_source = function() {
+	var addSourceForm = $("<form class='needs-validation'>\
+		<div class='mb-2'>\
+			Source name:<input class='form-control' type='text' name='name' required />\
+			<small class='invalid-feedback'>A source with this name is already present. Try a different one!</small>\
+		</div>\
+		Source spectrum peak (nm):<input class='form-control mb-2' type='number' min=250 max=900 name='peak' placeholder='Wavelength of maximum source intensity' required />\
+		<div class='mb-2'>\
+			Color:<input class='form-control' type='text' name='color' value='auto' required />\
+			<small class='invalid-feedback'>The provided color is not valid, try again!</small>\
+			<small>Set to <code>auto</code> to let the script select a color automatically, otherwise provide an hexadec code (e.g., '#FFFFFF')).</small>\
+		</div>\
+		Details:<input class='form-control mb-2' type='text' name='details' />\
+		<div class='mb-2'>\
+			Spectrum file:<input class='form-control' type='text' name='filepath' required />\
+			<small class='invalid-feedback'>Something is wrong with the uploaded file. Check the console for more details.</small>\
+		</div>\
+		<input type='submit' class='btn btn-primary float-right mt-2' />\
+		<input type='button' class='btn btn-secondary float-right mr-2 mt-2' value='Cancel' />\
+	</form>");
+
+	addSourceForm.submit(function(e) {
+		// Check form content and submit if correct
+		e.preventDefault();
+		var selectedTemplate = eset.get("selected-template");
+
+		$(this).find(".is-invalid").removeClass("is-invalid");
+		$(this).find(".is-valid").removeClass("is-valid");
+
+		var nameElem = $(this).find("input[name='name']");
+		var newName = nameElem.val();
+		if ( newName == null || 0 == newName.length ) {
+			nameElem.addClass("is-invalid");
+		} else {
+			if ( eset.has("templates." + selectedTemplate + ".sources." + newName) ) {
+				nameElem.addClass("is-invalid");
+			} else {
+				nameElem.addClass("is-valid");
+			}
+		}
+
+		var peakElem = $(this).find("input[name='peak']");
+		var newPeak = peakElem.val();
+		var re = /[0-9]+/g;
+		if ( re.test(newPeak) ) {
+			newPeak = parseInt(newPeak);
+			if ( newPeak >= 250 & newPeak <= 900 ) {
+				peakElem.addClass("is-valid");
+			} else {
+				peakElem.addClass("is-invalid");
+			}
+		} else {
+			peakElem.addClass("is-invalid");
+		}
+
+		var colorElem = $(this).find("input[name='color']");
+		var newColor = colorElem.val();
+		if ( newColor == "auto" ) {
+			colorElem.addClass("is-valid");
+		} else {
+			var re = /#?[0-9A-Fa-f]{6}/g;
+			if ( re.test(newColor) ) {
+				colorElem.addClass("is-valid");
+				if ( -1 == newColor.indexOf("#") ) {
+					colorElem.val("#" + newColor);
+				}
+			} else {
+				colorElem.addClass("is-invalid");
+			}
+		}
+
+		var spectraElem = $(this).find("input[name='filepath']");
+		var spectrapath = spectraElem.val();
+		if ( check_spectra(spectrapath) ) {
+			spectraElem.addClass("is-valid");
+		} else {
+			spectraElem.addClass("is-invalid");
+		}
+
+		//$(this).addClass("was-validated");
+
+		//bootbox.hideAll();
+	});
+
+	addSourceForm.find("input[type='button']").click(function(e) {
+		// Hide bootbox dialog
+		bootbox.hideAll();
+		toastr.warning("Nothing done.");
+		e.preventDefault();
+	});
+
+	addSourceForm.find("input[name='filepath']").focus(function(e) {
+		// Trigger open file dialog
+		$(this).blur();
+		var filepath = dialog.showOpenDialog(null, {
+			title: "Import spectra file",
+			properties: ["openFile", "showHiddenFiles"],
+			filters: [
+				{ name: "Tabulation-separated spectra", extensions: ['tsv'] }
+			]
+		});
+		if ( typeof filepath !== 'undefined' ) {
+			$(this).val(filepath[0]);
+			$(this).attr('title', filepath[0]);
+		}
+		e.preventDefault();
+	});
+
+	bootbox.dialog({
+		title: 'Add light source',
+		message: addSourceForm,
+		closeButton: false
+	});
+}
+
 $(function() {
-
+	$("#settings-add-source-btn").click(function(e) { add_source(); });
 });
diff --git a/app/src/js/settings-templates.js b/app/src/js/settings-templates.js
@@ -128,8 +128,6 @@ upload_settings_template = function() {
 			toastr.error("Template '" + templateName + "' already exist. Import failed.");
 		} else {
 			data = JSON.parse(data)
-
-
 			eset.set("templates." + templateName, data);
 			load_template_list();
 			toastr.success("Template '" + templateName + "' imported.");