First working whiteboard

2 files changed, 108 insertions, 57 deletions

diff --git a/html/index.html b/html/index.html
index 780660a..64eae90 100644
--- a/html/index.html
+++ b/html/index.html
@@ -14,12 +14,7 @@
                         <textarea rows="30" cols="80" id="board" name="board"></textarea>
 			<br/>
 			<br/>
-			<h2>Contact</h2>
-			Roland Reichwein<br/>
-			Hauptstr. 101a<br/>
-			82008 Unterhaching<br/>
-			<a href="mailto:mail@reichwein.it">mail@reichwein.it</a><br/>
-			<a href="https://www.reichwein.it">https://www.reichwein.it</a><br/>
+			Reichwein.IT Whiteboard by <a href="https://www.reichwein.it">https://www.reichwein.it</a><br/>
 		</div>
 
 		<a id="download-a" hidden></a>
diff --git a/html/whiteboard.js b/html/whiteboard.js
index dd81ff0..2b35180 100644
--- a/html/whiteboard.js
+++ b/html/whiteboard.js
@@ -1,40 +1,81 @@
 // started on main page load
 function init() {
-
-	// Connect "Enter" in text field with Button click
-	var url = document.getElementById("url");
-	url.addEventListener("keyup", function(event) {
-  		if (event.keyCode === 13) {
-   			event.preventDefault();
-   			on_start();
-  		}
-	});
+	init_board();
 }
 
-function set_status(message) {
-	if (message == "")
-		message = "&nbsp;";
+function init_board() {
+	var xhr = new XMLHttpRequest();
+	
+	// run on data received back
+	xhr.onreadystatechange = function() {
+				if (this.readyState == 3) {
+					//set_status("Please wait while downloading " + filename + " ...");
+					return;
+				}
+                                if (this.readyState != 4) {
+					return;
+				}
+				if (this.status != 200) {
+					//set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
+                                        return;
+                                }
+
+                                var file = new Blob([this.response]);
+				reader = new FileReader();
+				reader.onload = function() {
+					var board = document.getElementById("board");
+					board.innerHTML = reader.result;
+
+					// Initialization done. Now we can start modifying.
+					board.addEventListener("input", function() {on_modify(); });
+
+					setInterval(function() {checkupdate();}, 2000);
+				}
+				
+			        reader.readAsBinaryString(file);
+
+				//set_status(""); // OK
+	}
+
+	var parser = new DOMParser();
+	var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
+	
+	var requestElement = xmlDocument.getElementsByTagName("request")[0];
+
+	var commandElement = xmlDocument.createElement("command");
+	commandElement.appendChild(document.createTextNode("getfile"));
+	requestElement.appendChild(commandElement);
+
+	var idElement = xmlDocument.createElement("id");
+	idElement.appendChild(document.createTextNode("id1"));
+	requestElement.appendChild(idElement);
+
+	xhr.open("POST", "whiteboard.fcgi", true);
+	xhr.setRequestHeader("Content-type", "text/xml");
+	xhr.responseType = 'blob';
+	xhr.send(xmlDocument);
 
-	document.getElementById("status").innerHTML = message;
+	//set_status("Please wait while server prepares " + filename + " ...");
 }
 
-// started on button click: get filename
-function on_start() {
+function on_modify() {
 	var xhr = new XMLHttpRequest();
-
+	
 	// run on data received back
 	xhr.onreadystatechange = function() {
+				if (this.readyState == 3) {
+					//set_status("Please wait while downloading " + filename + " ...");
+					return;
+				}
                                 if (this.readyState != 4) {
 					return;
 				}
 				if (this.status != 200) {
-					set_status("Server Error while retrieving filename, " + filename + ", status: " + this.status + " " + this.statusText);
+					//set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
                                         return;
                                 }
 
-				var filename = this.responseText;
-
-				get_file(filename);
+				//set_status(""); // OK
 	}
 
 	var parser = new DOMParser();
@@ -43,50 +84,65 @@ function on_start() {
 	var requestElement = xmlDocument.getElementsByTagName("request")[0];
 
 	var commandElement = xmlDocument.createElement("command");
-	commandElement.appendChild(document.createTextNode("getfilename"));
+	commandElement.appendChild(document.createTextNode("modify"));
 	requestElement.appendChild(commandElement);
 
-	var urlElement = xmlDocument.createElement("url");
-	urlElement.appendChild(document.createTextNode(document.getElementById("url").value));
-	requestElement.appendChild(urlElement);
+	var idElement = xmlDocument.createElement("id");
+	idElement.appendChild(document.createTextNode("id1"));
+	requestElement.appendChild(idElement);
+
+	var dataElement = xmlDocument.createElement("data");
+	dataElement.appendChild(document.createTextNode(document.getElementById("board").value));
+	requestElement.appendChild(dataElement);
 
-	var formatElement = xmlDocument.createElement("format");
-	formatElement.appendChild(document.createTextNode(document.getElementById("mp3").checked ? "mp3" : "mp4"));
-	requestElement.appendChild(formatElement);
-	
 	xhr.open("POST", "whiteboard.fcgi", true);
 	xhr.setRequestHeader("Content-type", "text/xml");
-	xhr.responseType = 'text';
+	xhr.responseType = 'blob';
 	xhr.send(xmlDocument);
 
-	set_status("Please wait while retrieving filename...");
+	//set_status("Please wait while server prepares " + filename + " ...");
 }
 
-// started on button click: get file
-function get_file(filename) {
-	var xhr = new XMLHttpRequest();
+// checksum of string
+function checksum32(s) {
+	var result = 0;
+	for (var i = 0; i < s.length; i++) {
+		result = ((((result >>> 1) | ((result & 1) << 31)) | 0) ^ (s.charCodeAt(i) & 0xFF)) | 0;
+	}
+	return (result & 0x7FFFFFFF) | 0;
+}
 
+// gets called by regular polling
+function checkupdate() {
+	var xhr = new XMLHttpRequest();
+	
 	// run on data received back
 	xhr.onreadystatechange = function() {
 				if (this.readyState == 3) {
-					set_status("Please wait while downloading " + filename + " ...");
+					//set_status("Please wait while downloading " + filename + " ...");
 					return;
 				}
                                 if (this.readyState != 4) {
 					return;
 				}
 				if (this.status != 200) {
-					set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
+					//set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
                                         return;
                                 }
 
-                                var a = document.getElementById("download-a");
-                                a.setAttribute("download", filename);
-                                var file = new Blob([this.response]);
-                                a.href = window.URL.createObjectURL(file);
-                                a.click();
-				
-				set_status(""); // OK
+				// no change if response is text/plain
+				if (this.getResponseHeader("Content-Type") == "application/octet-stream") {
+					var file = new Blob([this.response]);
+					reader = new FileReader();
+					reader.onload = function() {
+						var board = document.getElementById("board");
+						board.value = reader.result;
+					}
+					
+					reader.readAsBinaryString(file);
+				}
+
+				//set_status(""); // OK
 	}
 
 	var parser = new DOMParser();
@@ -95,22 +151,22 @@ function get_file(filename) {
 	var requestElement = xmlDocument.getElementsByTagName("request")[0];
 
 	var commandElement = xmlDocument.createElement("command");
-	commandElement.appendChild(document.createTextNode("getfile"));
+	commandElement.appendChild(document.createTextNode("checkupdate"));
 	requestElement.appendChild(commandElement);
 
-	var urlElement = xmlDocument.createElement("url");
-	urlElement.appendChild(document.createTextNode(document.getElementById("url").value));
-	requestElement.appendChild(urlElement);
+	var idElement = xmlDocument.createElement("id");
+	idElement.appendChild(document.createTextNode("id1"));
+	requestElement.appendChild(idElement);
+
+	var checksumElement = xmlDocument.createElement("checksum");
+	checksumElement.appendChild(document.createTextNode(checksum32(document.getElementById("board").value)));
+	requestElement.appendChild(checksumElement);
 
-	var formatElement = xmlDocument.createElement("format");
-	formatElement.appendChild(document.createTextNode(document.getElementById("mp3").checked ? "mp3" : "mp4"));
-	requestElement.appendChild(formatElement);
-	
 	xhr.open("POST", "whiteboard.fcgi", true);
 	xhr.setRequestHeader("Content-type", "text/xml");
 	xhr.responseType = 'blob';
 	xhr.send(xmlDocument);
 
-	set_status("Please wait while server prepares " + filename + " ...");
+	//set_status("Please wait while server prepares " + filename + " ...");
 }