Add ui to create directories

2 files changed, 55 insertions, 3 deletions

diff --git a/app/index.html b/app/index.html
index cf1f399..ea14bc1 100644
--- a/app/index.html
+++ b/app/index.html
@@ -49,6 +49,29 @@
         </div>
     </div>
 
+    <div class="modal fade" tabindex="-1" role="dialog" id="modalcreateDirectory">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">New Directory Name</h4>
+                </div>
+                <div class="modal-body">
+                    <form v-on:submit.prevent="createDirectory(createDirectoryData)">
+                        <div class="form-group">
+                            <input type="text" class="form-control" v-model="createDirectoryData" placeholder="Name">
+                        </div>
+                        <button type="submit" style="display: none;"></button>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary" v-on:click="createDirectory(createDirectoryData)">Create</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="container" v-show="busy" v-cloak>
         <div class="row">
             <div class="col-lg-12">
@@ -126,7 +149,7 @@
                 </table>
             </div>
             <div class="col-lg-12" style="text-align: right;">
-                <button class="btn btn-default btn-sm" v-on:click="">Create Directory</button>
+                <button class="btn btn-default btn-sm" v-on:click="createDirectoryAsk()">Create Directory</button>
             </div>
         </div>
     </div>
diff --git a/app/js/app.js b/app/js/app.js
index 823e4f7..c0ed616 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -79,9 +79,12 @@ function up() {
 }
 
 function upload() {
-    $(app.$els.upload).change(function () {
+    $(app.$els.upload).on('change', function () {
         app.busy = true;
 
+        // detach event handler
+        $(app.$els.upload).off('change');
+
         var file = app.$els.upload.files[0];
         var path = encode(sanitize(app.path + '/' + file.name));
 
@@ -123,6 +126,29 @@ function del(entry) {
     });
 }
 
+function createDirectoryAsk() {
+    $('#modalcreateDirectory').modal('show');
+    app.createDirectoryData = '';
+}
+
+function createDirectory(name) {
+    app.busy = true;
+
+    var path = encode(sanitize(app.path + '/' + name));
+
+    superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password, directory: true }).end(function (error, result) {
+        app.busy = false;
+
+        if (error) return console.error(error);
+        if (result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode);
+
+        app.createDirectoryData = '';
+        refresh();
+
+        $('#modalcreateDirectory').modal('hide');
+    });
+}
+
 var app = new Vue({
     el: '#app',
     data: {
@@ -134,6 +160,7 @@ var app = new Vue({
         },
         loginData: {},
         deleteData: {},
+        createDirectoryData: '',
         entries: []
     },
     methods: {
@@ -144,7 +171,9 @@ var app = new Vue({
         up: up,
         upload: upload,
         delAsk: delAsk,
-        del: del
+        del: del,
+        createDirectoryAsk: createDirectoryAsk,
+        createDirectory: createDirectory
     }
 });