CLOUD: Add messages in "/filesAJAX"

4 files changed, 50 insertions, 1 deletions

diff --git a/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp b/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp
index 7fa7a60a9c..17be7faad2 100644
--- a/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp
+++ b/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp
@@ -53,6 +53,8 @@ void FilesAjaxPageHandler::handle(Client &client) {
 	replace(response, "{upload_file_desc}", _("Select a file to upload:"));
 	replace(response, "{or_upload_directory_desc}", _("Or select a directory (works in Chrome only):"));
 	replace(response, "{index_of}", _("Index of "));
+	replace(response, "{loading}", _("Loading..."));
+	replace(response, "{error}", _("Error occurred"));
 	LocalWebserver::setClientGetHandler(client, response);
 }
 
diff --git a/backends/networking/wwwroot.zip b/backends/networking/wwwroot.zip
index 8d6d63012d..7e53969589 100644
--- a/backends/networking/wwwroot.zip
+++ b/backends/networking/wwwroot.zip
diff --git a/backends/networking/wwwroot/.filesAJAX.html b/backends/networking/wwwroot/.filesAJAX.html
index a1c379d53a..16a4b5417d 100644
--- a/backends/networking/wwwroot/.filesAJAX.html
+++ b/backends/networking/wwwroot/.filesAJAX.html
@@ -38,6 +38,8 @@
 				</div>
 			</div>
 			<div class="content">
+				<div id="loading_message">{loading}</div>
+				<div id="error_message">{error}</div>
 				<table class="files_list" id="files_list">
 				</table>
 			</div>
@@ -61,6 +63,8 @@
 			}
 
 			function showDirectory(path) {
+				if (isLoading) return;
+				showLoading();
 				ajax.getAndParseJson("./list", {"path": path}, getCallback(path));
 			}
 
@@ -69,14 +73,42 @@
 					console.log(jsonResponse);
 
 					if (jsonResponse.type == "error") {
-						console.log("error");
+						showError();
 						return;
 					}
 
 					openDirectory(path, jsonResponse.items);
+					hideLoading();
 				};
 			}
 
+			var isLoading = false;
+
+			function showLoading() {
+				isLoading = true;
+				var e = document.getElementById("loading_message");
+				e.style.display = "block";
+				e = document.getElementById("error_message");
+				e.style.display = "none";
+			}
+
+			function showError() {
+				isLoading = false;
+				var e = document.getElementById("loading_message");
+				e.style.display = "none";
+				e = document.getElementById("error_message");
+				e.style.display = "block";
+				//TODO: pass the actual message there?
+			}
+
+			function hideLoading() {
+				isLoading = false;
+				var e = document.getElementById("loading_message");
+				e.style.display = "none";
+				e = document.getElementById("error_message");
+				e.style.display = "none";
+			}
+
 			function openDirectory(path, items) {
 				// update path
 				document.getElementById("create_directory_form").elements["path"].value = path;
diff --git a/backends/networking/wwwroot/style.css b/backends/networking/wwwroot/style.css
index c1bc14d652..ba31587c4d 100644
--- a/backends/networking/wwwroot/style.css
+++ b/backends/networking/wwwroot/style.css
@@ -96,3 +96,18 @@ td img { vertical-align: middle; height: 20px; }
 
 .directory_name a { color: black; }
 .directory_name a:hover { color: blue; }
+
+#loading_message, #error_message {
+	margin: -8pt;
+	margin-bottom: 5pt;
+	padding: 4pt;
+	text-align: center;
+}
+
+#loading_message {
+	background: #99FF99;
+}
+
+#error_message {
+	background: #FF9999;
+}