From 06cd368cd111a4ef61786bc70f1e95eaa3540b5d Mon Sep 17 00:00:00 2001
From: Roland Stigge <stigge@antcom.de>
Date: Sat, 20 Jan 2018 13:41:20 +0100
Subject: Progress indicator

---
 html/webbox.js | 99 ++++++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 83 insertions(+), 16 deletions(-)

(limited to 'html/webbox.js')

diff --git a/html/webbox.js b/html/webbox.js
index fa24e29..5a55010 100644
--- a/html/webbox.js
+++ b/html/webbox.js
@@ -296,8 +296,15 @@ function initMainpage() {
 		if (this.status == 401) { // login error: goto login page
 			var authheader = this.getResponseHeader("WWW-Authenticate");
 			var title = "Webbox";
+			// For web servers with standard AUTH BASIC, triggering problems in
+			// client browsers, popping up the browser's "Authenticate" window
+			// but we want our own
 			if (authheader.startsWith("Basic realm=\"") && authheader.endsWith("\"")) {
 				title = authheader.substr(13, authheader.length - 14);
+			} else
+			// Fixed up Apache server
+			if (authheader.startsWith("SR_Basic realm=\"") && authheader.endsWith("\"")) {
+				title = authheader.substr(16, authheader.length - 17);
 			}
 			login(title);
 			return;
@@ -322,22 +329,6 @@ function initMainpage() {
 	xhrTitle.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrTitle.send();
 
-	// default action for "Cancel" button: hide dialog window
-	document.getElementById("cancelbutton").onclick = hideDialog;
-
-	// on click outside of menu, close menu
-	document.getElementById("greyout").onclick = function() {
-		hideDialog();
-		hideMenu();
-	}
-	
-	// on Escape, globally hide dialog and menu window
-	document.onkeydown = function(evt) {
-		if (evt.key == "Escape") {
-			hideDialog();
-			hideMenu();
-		}
-	}
 }
 
 // deferred initialization after successful login
@@ -358,6 +349,23 @@ function initMainpage2() {
 	xhrFooter.open("GET", "/bin/query?command=version", true);
 	xhrFooter.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrFooter.send();
+	
+	// default action for "Cancel" button: hide dialog window
+	document.getElementById("cancelbutton").onclick = hideDialog;
+
+	// on click outside of menu, close menu
+	document.getElementById("greyout").onclick = function() {
+		hideDialog();
+		hideMenu();
+	}
+	
+	// on Escape, globally hide dialog and menu window
+	document.onkeydown = function(evt) {
+		if (evt.key == "Escape") {
+			hideDialog();
+			hideMenu();
+		}
+	}
 }
 
 function setCurrentDir(newDir) {
@@ -404,8 +412,10 @@ function download(filename) {
 				var file = new Blob([this.response]);
 				a.href = window.URL.createObjectURL(file);
 				a.click();
+				progressOff();
 			}
 
+			progressOn();
 			var files = getSelectedFiles();
 			var parser = new DOMParser();
 			var xmlDocument = parser.parseFromString("<files></files>", "text/xml");
@@ -436,12 +446,14 @@ function download(filename) {
 			var file = new Blob([this.response]);
 			a.href = window.URL.createObjectURL(file);
 			a.click();
+			progressOff();
 		}
 
 		var dir = currentDir;
 		if (dir != "/") {
 			dir += "/"
 		}
+		progressOn();
 		xhr.open("GET", "/bin/query" + dir + filename, true);
 		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.responseType = 'blob';
@@ -529,12 +541,15 @@ function onUploadFile() {
 			document.getElementById("cancelbutton").style.display = "block";
 		}
 		document.getElementById("okbutton").focus();
+		progressOff();
 	}
 
         var uploadfile = document.getElementById("uploadfile");
         var formData = new FormData();
         formData.append("uploadfile", uploadfile.files[0]);
 
+	progressOn();
+
         xhr.open("POST", "/bin/query" + currentDir + "?command=upload", true);
 	xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
         xhr.send(formData);
@@ -815,3 +830,55 @@ function logout() {
 	document.getElementById("dialog").innerHTML = document.getElementById("logout-dialog").innerHTML;
 }
 
+// Progress indication
+
+function drawDot(c, offsetx, offsety, radius, distance, phase) {
+        c.beginPath();
+        c.arc(distance * Math.sin(phase) + offsetx,
+                - distance * Math.cos(phase) + offsety, radius, 0, 2 * Math.PI);
+        c.fill();
+}
+
+function drawLogo(canvasid, rotation) {
+        var canvas = document.getElementById(canvasid);
+
+        var height = canvas.height;
+        var width = canvas.width;
+        var radius = height * 0.1;
+        var distance = height * 0.1 * 4 / 3;
+        
+        var c = canvas.getContext("2d");
+
+        c.clearRect(0, 0, width, height);
+        c.fillStyle = "#AAAADD";
+        drawDot(c, width / 2, height / 2, radius, distance, rotation);
+        drawDot(c, width / 2, height / 2, radius, distance, rotation + 2 * Math.PI / 3);
+        drawDot(c, width / 2, height / 2, radius, distance, rotation + 2 * Math.PI / 3 * 2);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI + 2 * Math.PI / 3);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI + 2 * Math.PI / 3 * 2);
+}
+
+var progressState = 0;
+
+function drawAni(timeStamp) {
+        var rotation = timeStamp / 1000 * 6;
+
+        drawLogo("progresscanvas", rotation);
+
+	if (progressState == 1) {
+	        requestAnimationFrame(drawAni);
+	}
+}
+
+function progressOn() {
+	progressState = 1;
+	document.getElementById("progresswindow").style.display = "block";
+        requestAnimationFrame(drawAni);
+}
+
+function progressOff() {
+	progressState = 0;
+	document.getElementById("progresswindow").style.display = "none";
+}
+
-- 
cgit v1.2.3