Make monaco work

src/js/filemanager.js

@@ -1,6 +1,9 @@
 'use strict';
 
-/* global angular, $, async */
+/* global angular, $, async, monaco */
+
+require.config({ paths: { 'vs': '3rdparty/vs' }});
+require(['vs/editor/editor.main'], function() {});
 
 // create main application module
 var app = angular.module('Application', ['angular-md5', 'ui-notification', 'ngDrag']);
@@ -162,28 +165,28 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
         });
     };
 
-    $scope.uploadFile = function () {
-        console.log('uploadFile');
-    };
-
-    $scope.uploadFolder = function () {
-        console.log('uploadFolder');
-    };
-
     $scope.open = function (entry) {
         var filePath = sanitize($scope.cwd + '/' + entry.fileName);
 
         if (entry.isDirectory) {
             setDirectory(filePath);
         } else if (entry.isFile) {
-            Client.filesGet($scope.appId, filePath, true, function (error, result) {
-                if (error) return Client.error(error);
-
-                console.log('open', result);
-            });
+            $scope.textEditor.show(entry);
         } else {}
     };
 
+    $scope.download = function (entry) {
+        var filePath = sanitize($scope.cwd + '/' + entry.fileName);
+
+        if (entry.isDirectory) return;
+
+        Client.filesGet($scope.appId, filePath, true, function (error, result) {
+            if (error) return Client.error(error);
+
+            console.log('open', result);
+        });
+    };
+
     $scope.goDirectoryUp = function () {
         setDirectory($scope.cwd + '/..');
     };
@@ -344,6 +347,55 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
         }
     };
 
+    $scope.textEditor = {
+        busy: false,
+        entry: null,
+        editor: null,
+
+        show: function (entry) {
+            $scope.textEditor.entry = entry;
+            $scope.textEditor.busy = false;
+
+            // clear model if any
+            if ($scope.textEditor.editor && $scope.textEditor.editor.getModel()) $scope.textEditor.editor.setModel(null);
+
+            $('#textEditorModal').modal('show');
+
+            var filePath = sanitize($scope.cwd + '/' + entry.fileName);
+            var language = 'javascript';
+
+            Client.filesGet($scope.appId, filePath, false, function (error, result) {
+                if (error) return Client.error(error);
+
+                if (!$scope.textEditor.editor) {
+                    $scope.textEditor.editor = monaco.editor.create(document.getElementById('textEditorContainer'), {
+                        value: result,
+                        language: language,
+                        theme: 'vs-dark'
+                    });
+                } else {
+                    $scope.textEditor.editor.setModel(monaco.editor.createModel(result, 'javascript'));
+                }
+            });
+        },
+
+        submit: function () {
+            $scope.textEditor.busy = true;
+
+            var newContent = $scope.textEditor.editor.getValue();
+            var filePath = sanitize($scope.cwd + '/' + $scope.textEditor.entry.fileName);
+            var file = new File([newContent], 'file');
+
+            Client.filesUpload($scope.appId, filePath, file, function () {}, function (error) {
+                $scope.textEditor.busy = false;
+
+                if (error) return Client.error(error);
+
+                $('#textEditorModal').modal('hide');
+            });
+        }
+    };
+
     $scope.chownEntry = {
         busy: false,
         error: null,
@@ -474,4 +526,5 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
             elem[0].setSelectionRange(0, text.indexOf('.'));
         });
     });
+
 }]);