CLOUD: Add "/filesAJAX" sketch

It works already, but still requires some polishing.

8 files changed, 302 insertions, 0 deletions

diff --git a/backends/module.mk b/backends/module.mk
index a753b4d382..e74cf671a7 100644
--- a/backends/module.mk
+++ b/backends/module.mk
@@ -65,6 +65,7 @@ MODULE_OBJS += \
 	networking/sdl_net/getclienthandler.o \
 	networking/sdl_net/handlers/createdirectoryhandler.o \
 	networking/sdl_net/handlers/downloadfilehandler.o \
+	networking/sdl_net/handlers/filesajaxpagehandler.o \
 	networking/sdl_net/handlers/filesbasehandler.o \
 	networking/sdl_net/handlers/filespagehandler.o \
 	networking/sdl_net/handlers/indexpagehandler.o \
diff --git a/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp b/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp
new file mode 100644
index 0000000000..7fa7a60a9c
--- /dev/null
+++ b/backends/networking/sdl_net/handlers/filesajaxpagehandler.cpp
@@ -0,0 +1,65 @@
+/* ScummVM - Graphic Adventure Engine
+*
+* ScummVM is the legal property of its developers, whose names
+* are too numerous to list here. Please refer to the COPYRIGHT
+* file distributed with this source distribution.
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public License
+* as published by the Free Software Foundation; either version 2
+* of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with this program; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+*
+*/
+
+#include "backends/networking/sdl_net/handlers/filesajaxpagehandler.h"
+#include "backends/networking/sdl_net/handlerutils.h"
+#include "backends/networking/sdl_net/localwebserver.h"
+#include "common/translation.h"
+
+namespace Networking {
+
+#define FILES_PAGE_NAME ".filesAJAX.html"
+
+FilesAjaxPageHandler::FilesAjaxPageHandler() {}
+
+FilesAjaxPageHandler::~FilesAjaxPageHandler() {}
+
+void FilesAjaxPageHandler::handle(Client &client) {
+	// load stylish response page from the archive
+	Common::SeekableReadStream *const stream = HandlerUtils::getArchiveFile(FILES_PAGE_NAME);
+	if (stream == nullptr) {
+		HandlerUtils::setFilesManagerErrorMessageHandler(client, _("The page is not available without the resources."));
+		return;
+	}
+		
+	Common::String response = HandlerUtils::readEverythingFromStream(stream);
+	Common::String path = client.queryParameter("path");
+
+	//these occur twice:
+	replace(response, "{create_directory_button}", _("Create directory"));
+	replace(response, "{create_directory_button}", _("Create directory"));
+	replace(response, "{upload_files_button}", _("Upload files")); //tab
+	replace(response, "{upload_file_button}", _("Upload files")); //button in the tab
+	replace(response, "{create_directory_desc}", _("Type new directory name:"));
+	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 "));
+	LocalWebserver::setClientGetHandler(client, response);
+}
+
+/// public
+
+ClientHandlerCallback FilesAjaxPageHandler::getHandler() {
+	return new Common::Callback<FilesAjaxPageHandler, Client &>(this, &FilesAjaxPageHandler::handle);
+}
+
+} // End of namespace Networking
diff --git a/backends/networking/sdl_net/handlers/filesajaxpagehandler.h b/backends/networking/sdl_net/handlers/filesajaxpagehandler.h
new file mode 100644
index 0000000000..8e39ac0678
--- /dev/null
+++ b/backends/networking/sdl_net/handlers/filesajaxpagehandler.h
@@ -0,0 +1,42 @@
+/* ScummVM - Graphic Adventure Engine
+*
+* ScummVM is the legal property of its developers, whose names
+* are too numerous to list here. Please refer to the COPYRIGHT
+* file distributed with this source distribution.
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public License
+* as published by the Free Software Foundation; either version 2
+* of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with this program; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+*
+*/
+
+#ifndef BACKENDS_NETWORKING_SDL_NET_FILESAJAXPAGEHANDLER_H
+#define BACKENDS_NETWORKING_SDL_NET_FILESAJAXPAGEHANDLER_H
+
+#include "backends/networking/sdl_net/handlers/filesbasehandler.h"
+
+namespace Networking {
+
+class FilesAjaxPageHandler: public FilesBaseHandler {
+	void handle(Client &client);
+
+public:
+	FilesAjaxPageHandler();
+	virtual ~FilesAjaxPageHandler();
+
+	virtual ClientHandlerCallback getHandler();
+};
+
+} // End of namespace Networking
+
+#endif
diff --git a/backends/networking/sdl_net/localwebserver.cpp b/backends/networking/sdl_net/localwebserver.cpp
index 2ac4834005..29db0b71ff 100644
--- a/backends/networking/sdl_net/localwebserver.cpp
+++ b/backends/networking/sdl_net/localwebserver.cpp
@@ -54,6 +54,7 @@ LocalWebserver::LocalWebserver(): _set(nullptr), _serverSocket(nullptr), _timerS
 	addPathHandler("/download", _downloadFileHandler.getHandler());
 	addPathHandler("/upload", _uploadFileHandler.getHandler());
 	addPathHandler("/list", _listAjaxHandler.getHandler());
+	addPathHandler("/filesAJAX", _filesAjaxPageHandler.getHandler());
 	_defaultHandler = _resourceHandler.getHandler();
 }
 
diff --git a/backends/networking/sdl_net/localwebserver.h b/backends/networking/sdl_net/localwebserver.h
index b4655119da..1185cda890 100644
--- a/backends/networking/sdl_net/localwebserver.h
+++ b/backends/networking/sdl_net/localwebserver.h
@@ -27,6 +27,7 @@
 #include "backends/networking/sdl_net/handlers/basehandler.h"
 #include "backends/networking/sdl_net/handlers/createdirectoryhandler.h"
 #include "backends/networking/sdl_net/handlers/downloadfilehandler.h"
+#include "backends/networking/sdl_net/handlers/filesajaxpagehandler.h"
 #include "backends/networking/sdl_net/handlers/filespagehandler.h"
 #include "backends/networking/sdl_net/handlers/indexpagehandler.h"
 #include "backends/networking/sdl_net/handlers/listajaxhandler.h"
@@ -67,6 +68,7 @@ class LocalWebserver : public Common::Singleton<LocalWebserver> {
 	DownloadFileHandler _downloadFileHandler;
 	UploadFileHandler _uploadFileHandler;
 	ListAjaxHandler _listAjaxHandler;
+	FilesAjaxPageHandler _filesAjaxPageHandler;
 	ResourceHandler _resourceHandler;
 	uint32 _idlingFrames;
 	Common::Mutex _handleMutex;
diff --git a/backends/networking/wwwroot.zip b/backends/networking/wwwroot.zip
index 48e8cb6bf8..7aa7df39ec 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
new file mode 100644
index 0000000000..d1d077fc66
--- /dev/null
+++ b/backends/networking/wwwroot/.filesAJAX.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html>
+	<head>
+		<title>ScummVM</title>
+		<meta charset="utf-8"/>
+		<link rel="stylesheet" type="text/css" href="style.css"/>
+	</head>
+	<body>
+		<div class="container">
+			<div class='header'>
+				<center><img src="logo.png"/></center>
+			</div>
+			<div class="controls">
+				<table class="buttons"><tr>
+					<td><a href="javascript:show('create_directory');">{create_directory_button}</a></td>
+					<td><a href="javascript:show('upload_file');">{upload_files_button}</a></td>
+				</tr></table>
+				<div id="create_directory" class="modal">
+					<p>{create_directory_desc}</p>
+					<form action="create" id="create_directory_form">
+						<input type="hidden" name="path" value="{path}"/>
+						<input type="text" name="directory_name" value=""/>
+						<input type="submit" value="{create_directory_button}"/>
+					</form>
+				</div>
+				<div id="upload_file" class="modal">
+					<p>{upload_file_desc}</p>
+					<form action="upload?path={path}" method="post" enctype="multipart/form-data" id="files_upload_form">
+						<!-- we don't need "[]" in the name, as our webserver is not using PHP -->
+						<!-- "allowdirs" is a proposal, not implemented yet -->
+						<input type="file" name="upload_file-f" allowdirs multiple/>
+						<br/><br/>
+						<p>{or_upload_directory_desc}</p>
+						<!-- "directory"/"webkitdirectory" works in Chrome only yet, "multiple" is just in case here -->
+						<input type="file" name="upload_file-d" directory webkitdirectory multiple/>
+						<input type="submit" value="{upload_file_button}"/>
+					</form>
+				</div>
+			</div>
+			<div class="content">
+				<table class="files_list" id="files_list">
+				</table>
+			</div>
+		</div>
+		<script>
+			function show(id) {
+				var e = document.getElementById(id);
+				var visible = (e.style.display == "block");
+				if (visible) id = ""; //hide
+
+				e = document.getElementById("create_directory");
+				e.style.display = (e.id == id ? "block" : "none");
+				e = document.getElementById("upload_file");
+				e.style.display = (e.id == id ? "block" : "none");
+			}
+		</script>
+		<script src="ajax.js"></script>
+		<script>
+			window.onload = function () {
+				showDirectory("/");
+			}
+
+			function showDirectory(path) {
+				ajax.getAndParseJson("./list", {"path": path}, getCallback(path));
+			}
+
+			function getCallback(path) {
+				return function (jsonResponse) {
+					console.log(jsonResponse);
+
+					if (jsonResponse.type == "error") {
+						console.log("error");
+						return;
+					}
+
+					openDirectory(path, jsonResponse.items);
+				};
+			}
+
+			function openDirectory(path, items) {
+				// update path
+				document.getElementById("create_directory_form").elements["path"].value = path;
+				document.getElementById("files_upload_form").action = "upload?path=" + path;
+
+				// update table contents
+				listDirectory(path, items);
+			}
+
+			function listDirectory(path, items) {
+				// cleanup the list
+				var files_list = document.getElementById("files_list");
+				while (files_list.hasChildNodes())
+					files_list.removeChild(files_list.firstChild);
+				var tbody = document.createElement("tbody");
+
+				// add header item
+				var tr = document.createElement("tr");
+				tr.appendChild(createElementWithContents("td", ""));
+				var td = document.createElement("td");
+				var b = createElementWithContents("b", "{index_of}" + path.replace(new RegExp("\\\\", 'g'), '/'));
+				b.className = "directory_name";
+				td.appendChild(b);
+				tr.appendChild(td);
+				tr.appendChild(createElementWithContents("td", ""));
+				tbody.appendChild(tr);
+
+				// add items
+				for (var i in items)
+					addItem(tbody, items[i]);
+
+				files_list.appendChild(tbody);
+			}
+
+			function addItem(tbody, item) {
+				var tr = document.createElement("tr");
+				var td = document.createElement("td");
+				var img = document.createElement("img");
+				img.src = "http://localhost:12345/icons/" + item.icon;
+				td.appendChild(img);
+				tr.appendChild(td);
+
+				td = document.createElement("td");
+				var a = createElementWithContents("a", item.name);
+				if (item.isDirectory) {
+					a.onclick = function () { showDirectory(item.path); };
+					a.href = "javascript:onclick();";
+				} else
+					a.href = "http://localhost:12345/download?path=" + encodeURIComponent(item.path);
+				td.appendChild(a);
+				tr.appendChild(td);
+
+				tr.appendChild(createElementWithContents("td", ""));
+				tbody.appendChild(tr);
+			}
+
+			function createElementWithContents(type, innerHTML) {
+				var e = document.createElement(type);
+				e.innerHTML = innerHTML;
+				return e;
+			}
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/backends/networking/wwwroot/ajax.js b/backends/networking/wwwroot/ajax.js
new file mode 100644
index 0000000000..12c50f1e72
--- /dev/null
+++ b/backends/networking/wwwroot/ajax.js
@@ -0,0 +1,48 @@
+// the following is snippet from http://stackoverflow.com/a/18078705
+// I changed a few things though
+
+var ajax = {};
+ajax.x = function () { return new XMLHttpRequest(); }; // "no one uses IE6"
+
+ajax.send = function (url, callback, errorCallback, method, data, async) {
+    if (async === undefined) async = true;
+    
+    var x = ajax.x();
+    x.open(method, url, async);
+    x.onreadystatechange = function () {
+        if (x.readyState == XMLHttpRequest.DONE) {
+            if (x.status == 200)
+                callback(x.responseText);
+            else
+                errorCallback(x);
+        }
+    };
+    if (method == 'POST') {
+        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    }
+    x.send(data)
+};
+
+ajax.get = function (url, data, callback, errorCallback, async) {
+    var query = [];
+    for (var key in data) {
+        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
+    }
+    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, errorCallback, 'GET', null, async)
+};
+
+ajax.post = function (url, data, callback, errorCallback, async) {
+    var query = [];
+    for (var key in data) {
+        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
+    }
+    ajax.send(url, callback, errorCallback, 'POST', query.join('&'), async)
+};
+
+ajax.getAndParseJson = function (url, data, callback) {
+    ajax.get(
+        url, data,
+        function (responseText) { callback(JSON.parse(responseText)); },
+        function (x) { console.log("error: " + x.status); }
+    );
+};
\ No newline at end of file