Save and load within folder and create new ones.

Author: Sascha Müller zum Hagen

code/examples/Test.py

@@ -0,0 +1 @@
+print('Hello HuCon!')

code/examples/Test.xml

@@ -0,0 +1,9 @@
+<xml xmlns="http://www.w3.org/1999/xhtml">
+  <block type="text_print" id="!?|L[H[0sBL^t9sJ7d#w" x="113" y="63">
+    <value name="TEXT">
+      <shadow type="text" id="DTPr.5v+/9d1tUJbjQo(">
+        <field name="TEXT">Hello HuCon!</field>
+      </shadow>
+    </value>
+  </block>
+</xml>

webserver/HuConJsonRpc.py

@@ -70,6 +70,8 @@ def handle_control(cls, rpc_request):
             return cls._poll(rpc_request)
         elif rpc_request['method'] == 'get_file_list':
             return cls._get_file_list(rpc_request)
+        elif rpc_request['method'] == 'create_folder':
+            return cls._create_folder(rpc_request)
         elif rpc_request['method'] == 'load_file':
             return cls._load_file(rpc_request)
         elif rpc_request['method'] == 'save_file':
@@ -124,7 +126,7 @@ def _replace_hucon_requests(cls, message):
         Print an answer from HuCon whenever the the message 'Hello HoCon!' is found.
         """
         search_string = 'print(\'Hello HuCon!\')'
-        replace_string = 'print(\'Hello HuCon!\\n\\nHello human!\\nI am a human controlled robot.\\n\\n\')'
+        replace_string = 'print(\'Hello HuCon!\\n\\nHello human!\\nI am a Hu[man] Con[trolled] robot.\\n\')'
         if search_string in message:
             message = message.replace(search_string, replace_string)
         return message
@@ -203,6 +205,23 @@ def _get_file_list(cls, rpc_request):
         else:
             return json_dump
 
+    def _create_folder(cls, rpc_request):
+        """
+        Creates the folder on the device.
+        """
+        try:
+            new_folder = os.path.join(cls._CODE_ROOT, rpc_request['params'].strip('/\\'))
+
+            if not os.path.exists(new_folder):
+                os.makedirs(new_folder)
+
+            rpc_response = cls._get_rpc_response(rpc_request['id'])
+            json_dump = json.dumps(rpc_response)
+        except Exception as e:
+            return cls._return_error(rpc_request['id'], 'Could not create the folder. (%s)' % str(e))
+        else:
+            return json_dump
+
     def _load_file(cls, rpc_request):
         """
         Return the content of the file back to the browser.

webserver/static/js/webserver.js

@@ -1,7 +1,19 @@
+// Ask the user to go before he goes.
+$(window).bind("beforeunload", function(){
+    if (HuConApp.UnsavedContent) {
+        return "Do you really want to go?\nAll your unsaved data will be lost.";
+    }
+});
+
 // On document ready this function will be called and do a base initialization.
 $(document).ready(function () {
     // Update the version information on the ui
     HuConApp.updateVersion();
+
+    $('#loadModal').modal({allowMultiple: true});
+    $('#newFolderModal').modal('attach events', '#newFolderButton')
+;
+;
 });
 
 // Handle some key bindings
@@ -38,6 +50,15 @@ var HuConApp = {}
 // Id for JSON-RPC protocol
 HuConApp.RpcId = 0;
 
+// Folder path to save and load on the device
+HuConApp.Folder = '';
+
+// File extension which is currently used.
+HuConApp.FileExt = '';
+
+// Remeber any changes after save.
+HuConApp.UnsavedContent = false;
+
 // Get a new JSON-RPC message data with a new id.
 HuConApp.getRpcRequest = function() {
     jsonRpc = {};
@@ -311,3 +332,271 @@ HuConApp.buttonModal = function() {
     $('#buttonModal').modal('show');
     $('#buttonEmbed').embed();
 }
+
+// Set the breadcrump based on the current folder.
+HuConApp.setBreadcrumb = function(modal) {
+    modal.html('<div class="divider">/</div>');
+
+    var folderPath = HuConApp.Folder.split('/');
+    for (var i = 0; i < folderPath.length; i++) {
+        if (folderPath[i] != '') {
+            modal.append('<div class="section">' + folderPath[i] + '</div>');
+            modal.append('<div class="divider">/</div>');
+        }
+    }
+}
+
+// Show a form to create a new folder.
+HuConApp.createNewFolder = function() {
+    foldername = $('#folderFilename').val();
+
+    if (foldername != '') {
+        var rpcRequest = HuConApp.getRpcRequest();
+        rpcRequest['method'] = 'create_folder';
+        rpcRequest['params'] = HuConApp.Folder + '/' + foldername;
+
+        $.ajax('/API', {
+            method: 'POST',
+            data: JSON.stringify(rpcRequest),
+            dataType: 'json',
+            error: HuConApp.appendErrorLog
+        });
+
+        HuConApp.saveFileModal(HuConApp.Folder);
+    }
+    console.log($('#folderFilename'));
+}
+
+// Show the file open modal and list all folder.
+HuConApp.openFileModal = function(newFolder) {
+
+    if (newFolder != undefined) {
+        HuConApp.Folder = newFolder;
+    }
+
+    HuConApp.setBreadcrumb($('#openBreadcrumb'));
+
+    var rpcRequest = HuConApp.getRpcRequest();
+    rpcRequest['method'] = 'get_file_list';
+    rpcRequest['params'] = HuConApp.Folder;
+
+    $.ajax('/API', {
+        method: 'POST',
+        data: JSON.stringify(rpcRequest),
+        dataType: 'json',
+        success: function(rpcResponse) {
+            HuConApp.configureLoadSaveModal(rpcResponse, $('#openFileList'), 'openFileModal', true);
+
+            $('#openModal').modal('show');
+        },
+        error: function(request, status, error) {
+            HuConApp.Folder = '';
+            HuConApp.appendErrorLog(request, status, error);
+        }
+    });
+}
+
+// Hide the open file modal and load the content from the file.
+HuConApp.loadFileFromDevice = function(filename) {
+    $('#openModal').modal('hide');
+    $('#consoleLog').html('');
+
+    var rpcRequest = HuConApp.getRpcRequest();
+    rpcRequest['method'] = 'load_file';
+    rpcRequest['params'] = HuConApp.Folder + '/' + filename;
+
+    // Store the filename for the save dialog
+    $('#saveFilename').val(filename);
+
+    $.ajax('/API', {
+        method: 'POST',
+        data: JSON.stringify(rpcRequest),
+        dataType: 'json',
+        success: function(rpcResponse) {
+            if (HuConApp.isResponseError(rpcResponse)) {
+                return
+            }
+
+            if (rpcResponse['result']) {
+                setFileContent(rpcResponse['result']);
+
+                HuConApp.appendConsoleLog('File "' + HuConApp.Folder + '/' + filename + '" loaded from local device.', 'green');
+
+                HuConApp.UnsavedContent = false;
+            }
+        },
+        error: HuConApp.appendErrorLog
+    });
+}
+
+// Show the save file modal and load the file list from the device.
+HuConApp.saveFileModal = function(newFolder) {
+
+    // Set the new Folder
+    if (newFolder != undefined) {
+        HuConApp.Folder = newFolder;
+    }
+
+    // The example folder is read only, so go back to root on save.
+    if (HuConApp.Folder == '/examples') {
+        HuConApp.Folder = '';
+    }
+
+    HuConApp.setBreadcrumb($('#saveBreadcrumb'));
+
+    var rpcRequest = HuConApp.getRpcRequest();
+    rpcRequest['method'] = 'get_file_list';
+    rpcRequest['params'] = HuConApp.Folder;
+
+    $.ajax('/API', {
+        method: 'POST',
+        data: JSON.stringify(rpcRequest),
+        dataType: 'json',
+        success: function(rpcResponse) {
+            HuConApp.configureLoadSaveModal(rpcResponse, $('#saveFileList'), 'saveFileModal', false);
+
+            $('#saveModal').modal('show');
+        },
+        error: function(request, status, error) {
+            HuConApp.Folder = '';
+            HuConApp.appendErrorLog(request, status, error);
+        }
+    });
+}
+
+// Save the file on the device and hide the file save modal.
+HuConApp.saveFileOnDevice = function() {
+    $('#saveModal').modal('hide');
+
+    $('#consoleLog').html('');
+
+    // Abort on write within the example folder
+    if (HuConApp.Folder == '/examples') {
+        HuConApp.appendConsoleLog('The file is not written on device.\nThe examples folder is read only!', 'red');
+        return;
+    }
+
+    // Get the filename without any extension.
+    filename = $('#saveFilename').val();
+    if (filename.substr(-HuConApp.FileExt.length) == HuConApp.FileExt) {
+        filename = filename.slice(0, -HuConApp.FileExt.length);
+    }
+    $('#saveFilename').val(filename + HuConApp.FileExt);
+
+    var rpcRequest = HuConApp.getRpcRequest();
+    rpcRequest['method'] = 'save_file';
+    rpcRequest['params'] = {};
+
+    // Store the blockly code if needed
+    if (HuConApp.FileExt == '.xml') {
+        rpcRequest['params']['filename'] = HuConApp.Folder + '/' + filename + '.xml';
+        rpcRequest['params']['data'] = getBlocklyCode();
+        $.ajax('/API', {
+            method: 'POST',
+            data: JSON.stringify(rpcRequest),
+            dataType: 'json',
+            success: function (rpcResponse) {
+                if (HuConApp.isResponseError(rpcResponse)) {
+                    return
+                }
+
+                HuConApp.appendConsoleLog(rpcResponse['result']);
+            },
+            error: HuConApp.appendErrorLog
+        });
+    }
+
+    // Store the python code
+    rpcRequest['params']['filename'] = HuConApp.Folder + '/' + filename + '.py';
+    rpcRequest['params']['data'] = getPythonCode();
+    $.ajax('/API', {
+        method: 'POST',
+        data: JSON.stringify(rpcRequest),
+        dataType: 'json',
+        success: function (rpcResponse) {
+            if (HuConApp.isResponseError(rpcResponse)) {
+                return
+            }
+
+            HuConApp.appendConsoleLog(rpcResponse['result']);
+        },
+        error: HuConApp.appendErrorLog
+    });
+
+    HuConApp.UnsavedContent = false;
+}
+
+// Configure the load or save modal correctly.
+HuConApp.configureLoadSaveModal = function(rpcResponse, modal, folderCallback, openFile) {
+    // clear the list
+    modal.html('');
+
+    if (HuConApp.isResponseError(rpcResponse)) {
+        return
+    }
+
+    folderHtml = `
+    <div onclick="HuConApp.{1}(\'{2}\')" class="item ok">
+        <i class="folder icon"></i>
+        <div class="content header">{3}</div>
+    </div>
+    `;
+
+    // Append the folder up if needed.
+    if (HuConApp.Folder != '') {
+        // Determine the parent folder
+        var upperFolder = HuConApp.Folder.slice(0, HuConApp.Folder.lastIndexOf('/'));
+        modal.append(HuConApp.formatVarString(folderHtml, folderCallback, upperFolder, '..'));
+    }
+
+    // Add the folder to the empty list
+    for (i=0; i<rpcResponse['result'].length; i++) {
+        var filename = rpcResponse['result'][i];
+        if (filename.indexOf('.') === -1) {
+            var newFolder = HuConApp.Folder + '/' + filename;
+
+            // Do not show the examples folder as possible folder.
+            if (!openFile && (newFolder == '/examples')) {
+                continue;
+            }
+
+            modal.append(HuConApp.formatVarString(folderHtml, folderCallback, newFolder, filename));
+        }
+    }
+
+    fileHtml = '';
+    if (openFile) {
+        fileHtml = `
+        <div onclick="HuConApp.loadFileFromDevice(\'{1}\');" class="item ok">
+            <i class="file icon"></i>
+            <div class="content header">{1}</div>
+        </div>
+        `;
+    } else {
+        fileHtml = `
+        <div onclick="$(\'#saveFilename\').val(\'{1}\');" class="item ok">
+            <i class="file icon"></i>
+            <div class="content header">{1}</div>
+        </div>
+        `;
+    }
+
+    // Add the files to the empty list
+    for (i=0; i<rpcResponse['result'].length; i++) {
+        var filename = rpcResponse['result'][i];
+        if (filename.substr(-HuConApp.FileExt.length) === HuConApp.FileExt) {
+            modal.append(HuConApp.formatVarString(fileHtml, filename));
+        }
+    }
+}
+
+HuConApp.formatVarString = function() {
+    var args = [].slice.call(arguments);
+    if(this.toString() != '[object Object]')
+    {
+        args.unshift(this.toString());
+    }
+
+    var pattern = new RegExp('{([1-' + args.length + '])}','g');
+    return String(args[0]).replace(pattern, function(match, index) { return args[index]; });
+}

webserver/templates/api.html

@@ -12,6 +12,7 @@
 <tr><td>get_version</td><td>Return the version of the server.</td></tr>
 <tr><td>poll</td><td>Return the last messages which come from the server or the running application.</td></tr>
 <tr><td>get_file_list</td><td>Return the list of files and folder.</td></tr>
+<tr><td>create_folder</td><td>Creates the folder.</td></tr>
 <tr><td>load_file</td><td>Return the content of the given file.</td></tr>
 <tr><td>save_file</td><td>Saves the given file on disk of the robot.</td></tr>
 <tr><td>is_running</td><td>Return True whenever a program is currently running.</td></tr>