Make some changes to form

6 files changed, 95 insertions, 148 deletions

diff --git a/public/cam.html b/public/cam.html
index 3196c52..3c78ff2 100644
--- a/public/cam.html
+++ b/public/cam.html
@@ -10,22 +10,19 @@
 		<img src="img/testbild.gif" id="camImage">
 	</div>
 	<div id="form">
-                <img src="about:blank" id="formImage">
-                <p>
-                </p>
-                <p>Personalkennzeichnung</p>
-                <input id="formName"><br>
-                <p>Zeitpunkt</p>
-                <input id="formDate" readonly><br>
-                <p>Analyse der Aufnahme</p>
-                <textarea id="formAnalysis1"></textarea>
-                <p>Bemerkungen zum Untersuchungsverlauf</p>
-                <textarea id="formAnalysis2"></textarea>
-                <p>Pers&ouml;nliche Bemerkungen</p>
-                <textarea id="formAnalysis3"></textarea>
-                <p>
-                <a href="#" id='printButton' onclick='hideForm()'>&nbsp</a>
+                <div id="controlBox">
+                    <img src="about:blank" id="formImage"><br>
+                    <span id="errorBox">&nbsp;</span><br>
+                    <a href="#" id='printButton'>&nbsp;</a>
+                </div>
+                <p>Personalkennzeichnung:&nbsp;<input id="formName"> &nbsp;&nbsp;Zeitpunkt:<input id="formDate" readonly>
                 </p>
+                <p>Analyse der Aufnahme:<br>
+                <textarea id="formAnalysis1"></textarea><br>
+                Bemerkungen zum Untersuchungsverlauf:<br>
+                <textarea id="formAnalysis2"></textarea><br>
+                Pers&ouml;nliche Bemerkungen:<br>
+                <textarea id="formAnalysis3"></textarea></p>
         </div>
 
 </body>
diff --git a/public/css/cam.css b/public/css/cam.css
index d1d28f4..1302288 100644
--- a/public/css/cam.css
+++ b/public/css/cam.css
@@ -45,9 +45,9 @@ body	{
 
 #form 	{
         /*visibility: hidden;*/
-	width: 800px;
+	width: 1000px;
         height: 100%;
-        background-color: rgba(127, 192, 255, 0.9);
+        background-color: rgba(170, 170, 170, 0.9);
         margin: 0 auto;
         position: relative;
 	top: 0px;
@@ -57,13 +57,31 @@ body	{
 	z-index: 200;
 }
 
-#formImage      {
+#controlBox {
 	margin-right: 0px;
 	margin-left: auto;
 	float: right;
         position: relative;
         width: 400px;
+	padding: 0px;
+}
+
+#formImage {
+	width: 400px;
+}
+
+#formDate {
+	background-color: #ccc;
+}
+
+#formAnalysis1, #formAnalysis2, #formAnalysis3 {
+	width: 550px;
+	height: 150px;
+}
 
+#errorBox {
+	margin: 10px auto;
+	font-size: 1.1em;
 }
 
 #printButton    {
diff --git a/public/css/print.css b/public/css/print.css
deleted file mode 100644
index e71a0ae..0000000
--- a/public/css/print.css
+++ /dev/null
@@ -1,24 +0,0 @@
-#page	{
-	width:		800px;
-
-
-}
-
-#camImage	{
-	position: 	absolute;
-	top:		0px;
-	left:		0px;
-}
-
-#metaContainer	{
-	position: 	absolute;
-	top:		0px;
-	left: 		700px;
-}
-
-#textContainer	{
-	position: 	absolute;
-	top:		500px;
-	left: 		0px;
-
-}
diff --git a/public/js/cctv-control.js b/public/js/cctv-control.js
index 6db2932..ddbdbb4 100644
--- a/public/js/cctv-control.js
+++ b/public/js/cctv-control.js
@@ -14,6 +14,7 @@
 var cam = 0;
 var camHost = "192.168.1.20:8080";
 var controlHost = "192.168.1.20:8080";
+var submitHost = "192.168.1.20:8080";
 var formActive = 0; //crazy errors if boolean is used here...
 
 //create event which is triggered when DOM is ready 
@@ -161,28 +162,79 @@ function showForm()	{
 
 	//make form visible
 	document.getElementById("form").style.visibility = 'visible';
+	document.getElementById("printButton").onclick = completeForm;
 	formActive = 1;
 	localStorage.setItem("formActive", formActive);
 }
 
+var errorTimeout = null;
+function setError(message) {
+	var error_box = document.getElementById('errorBox');
+	error_box.innerText = message;
+	if (errorTimeout !== null)
+		window.clearTimeout(errorTimeout);
+	errorTimeout = window.setTimeout(function() {
+		error_box.innerHTML = '&nbsp;';
+		errorTimeout = null;
+	}, 5000);
+	return false;
+}
 
-function hideForm()	{
-	
-	//save form data in local storage for later use
-	localStorage.setItem("formName", document.getElementById('formName').value);
-	localStorage.setItem("formDate", document.getElementById('formDate').value);
-	localStorage.setItem("formAnalysis1", document.getElementById('formAnalysis1').value);
-	localStorage.setItem("formAnalysis2", document.getElementById('formAnalysis2').value);
-	localStorage.setItem("formAnalysis3", document.getElementById('formAnalysis3').value);
 
-	//hide form and unfocus button
+function completeForm()	{
+	var formName = document.getElementById('formName');
+	var formDate = document.getElementById('formDate');
+	var formAnalysis1 = document.getElementById('formAnalysis1');
+	var formAnalysis2 = document.getElementById('formAnalysis2');
+	var formAnalysis3 = document.getElementById('formAnalysis3');
+
+	if (formName.value.length < 3)
+		return setError("Personalkennzeichung unzureichend!");
+	if (formAnalysis1.value.length < 3)
+		return setError("Analyse der Aufnahme unzureichend!");
+	if (formAnalysis2.value.length < 3)
+		return setError("Bemerkungen zum Untersuchungsverlauf unzureichend!");
+/*	if (formAnalysis3.value.length < 3)
+		return setError("Analyse der Aufnahme unzureichend!");*/
+
+	// unfocus and disable button
 	//otherwise next enter press will trigger print-function
 	document.getElementById('printButton').blur();
-	window.open('print.html', 'Printlayout');
+	document.getElementById('printButton').onclick = function() {
+		return false;
+	};
+
+	var request = new XMLHttpRequest();
+	request.open("post", "http://" + submitHost + "/submit", false);
+
+	var post_object = {
+		'formName': formName.value,
+		'formDate': formDate.value,
+		'formAnalysis1': formAnalysis1.value,
+		'formAnalysis2': formAnalysis2.value,
+		'formAnalysis3': formAnalysis3.value,
+		'formImage': localStorage.getItem("snapShot")
+	};
+
+	var post_data = JSON.stringify(post_object);
+	request.setRequestHeader('Content-Type', 'application/json');
+	request.send(post_data);
+
+	// clear the input fields so they are not
+	// visible during next usage of the form.
+	// XXX: Leave the name in?
+	document.getElementById('formName').value = '';
+	document.getElementById('formAnalysis1').value = '';
+	document.getElementById('formAnalysis2').value = '';
+	document.getElementById('formAnalysis3').value = '';
+
+	//hide form and unfocus button
+	//otherwise next enter press will trigger print-function
 	document.getElementById("form").style.visibility = 'hidden';
 	formActive = 0;
 	localStorage.setItem("formActive", formActive);
 	changeCam();
+	return false;
 }
 
 
diff --git a/public/js/print.js b/public/js/print.js
deleted file mode 100644
index 7375047..0000000
--- a/public/js/print.js
+++ /dev/null
@@ -1,72 +0,0 @@
-// CCTV Control 
-// 
-// Author: 	Florian Raemisch
-// Email: 	olf@subsignal.org
-//
-// cctv-control is a webinterface to control and view 
-// mjpeg encoded videos by cctv cameras which are
-// proxied by mjpegplexer. camera control is possible
-// with arrow-keys, if mjpegplexer is configured 
-// properly.
-//
-// This Software is licensed under the GPL Version 3, 29 June 2007
-
-var popen = '<p id="text">',
-    pclose = '</p>';
-
-//create event which is triggered when DOM is ready 
-window.onDomReady = initReady;
-
-//change from testbild to default cam when DOM is ready
-window.onDomReady(initViewer);
-
-
-function initReady(fn)	{
-	if(document.addEventListener) {
-		document.addEventListener("DOMContentLoaded", fn, false);
-	}
-}
-
-function initViewer()	{
-
-	//load contents from localStorage
-	var display = document.getElementById("camImage"),
-	    meta = document.getElementById("metaContainer"),
-	    text = document.getElementById("textContainer"),
-            formName = localStorage.getItem("formName"),
-	    formDate = localStorage.getItem("formDate"),
-	    formAnalysis1 = localStorage.getItem("formAnalysis1"),
-	    formAnalysis2 = localStorage.getItem("formAnalysis2"),
-            formAnalysis3 = localStorage.getItem("formAnalysis3"),
-	    camera = localStorage.getItem("cam");
-	    stor = localStorage.getItem("snapShot");
-
-	//cameraname is cameraID + 1
-	camera = parseInt(camera) + 1;
-
-	//display loaded data
-        if (stor)       {
-                display.setAttribute("src", stor);
-        	meta.innerHTML += popen + formName + pclose;
-        	meta.innerHTML += popen + formDate + pclose;
-        	meta.innerHTML += popen + 'Kamera ' + camera + pclose;
-        	text.innerHTML += popen + formAnalysis1 + pclose;
-        	text.innerHTML += popen + formAnalysis2 + pclose;
-        	text.innerHTML += popen + formAnalysis3 + pclose;
-        }
-
-	//commented out for debugging and layouting purposes
-	print();
-
-	//reset localStorage to default values
-	//localStorage.setItem("formName", "Untersucher");
-	//localStorage.setItem("formDate", "Datum");
-	//localStorage.setItem("formAnalysis1", "Dein Bericht 1");
-	//localStorage.setItem("formAnalysis2", "Dein Bericht 2");
-	//localStorage.setItem("formAnalysis3", "Dein Bericht 3"):
-
-	//commented out for debugging and layouting purposes
-	window.close();
-
-}
-
diff --git a/public/print.html b/public/print.html
deleted file mode 100644
index daaa37e..0000000
--- a/public/print.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<html>
-
-<head>
-	<script src="js/print.js" type="text/javascript"></script>
-	<link rel="stylesheet" type="text/css" href="css/print.css">
-</head>
-
-<body>
-
-<div id="page">
-	<div id="imageContainer">
-		<img src="about:blank" id="camImage">
-	</div>
-	<div id="metaContainer">
-
-	</div>
-	<div id="textContainer">
-
-	</div>
-</div>
-
-
-</body>
-</html>