]> git.immae.eu Git - perso/Immae/Projets/Nodejs/Surfer.git/commitdiff
projects / perso / Immae / Projets / Nodejs / Surfer.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6eb72d6)
Make directory listing navigatable
authorJohannes Zellner <johannes@nebulon.de>
Tue, 1 Mar 2016 14:10:25 +0000 (15:10 +0100)
committerJohannes Zellner <johannes@nebulon.de>
Tue, 1 Mar 2016 14:10:25 +0000 (15:10 +0100)
app/css/style.css patch | blob | blame | history
app/index.html patch | blob | blame | history
app/js/app.js patch | blob | blame | history

diff --git a/app/css/style.css b/app/css/style.css
index c75e03844d492c218a5f69bf2193be2311fe37d2..b7e57423e86267d47c4a1c62753fa94f827474c4 100644 (file)
--- a/app/css/style.css
+++ b/app/css/style.css
@@ -29,3 +29,7 @@ pre {
 [v-cloak] {
   display: none;
 }
+
+.hand {
+    cursor: hand;
+}
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 5807724fe85b9f2a7f470e99268af07e11f65acf..773b5cf6c35e0c691fbd5067dd5390fac23fd251 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -2,6 +2,7 @@
 <head>
     <title> Cloudron Surfer </title>
 
+    <link rel="stylesheet" href="/admin/css/font-awesome.min.css">
     <link rel="stylesheet" href="/admin/css/bootstrap.min.css">
     <link rel="stylesheet" href="/admin/css/style.css">
 
@@ -63,27 +64,39 @@
         <div class="row">
             <div class="col-lg-12">
                 <ol class="breadcrumb">
-                    <li><a href="#">Home</a></li>
-                    <li><a href="#">Library</a></li>
-                    <li class="active">Data</li>
+                    <li><i class="fa fa-home"></i>&nbsp;</li>
+                    <li v-for="part in pathParts">
+                        {{ part }}
+                    </li>
                 </ol>
             </div>
             <div class="col-lg-12">
-                <table class="table table-hover">
+                <table class="table table-hover table-condensed">
                     <thead>
                         <tr>
                             <th>Type</th>
                             <th>Name</th>
                             <th>Size</th>
                             <th>Modified</th>
+                            <th style="text-align: right;">Action</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr>
-                            <th>Type</th>
-                            <th>Name</th>
-                            <th>Size</th>
-                            <th>Modified</th>
+                        <tr v-show="path !== '/'" v-on:click="up()" class="hand">
+                            <th><i class="fa fa-chevron-up"></i></th>
+                            <th>..</th>
+                            <th></th>
+                            <th></th>
+                        </tr>
+                        <tr v-for="entry in entries" v-on:click="open(entry)" class="hand">
+                            <th>
+                                <i class="fa fa-folder-o" v-show="entry.isDirectory"></i>
+                                <i class="fa fa-file-o" v-show="entry.isFile"></i>
+                            </th>
+                            <th>{{ entry.filePath }}</th>
+                            <th>{{ entry.size }}</th>
+                            <th>{{ entry.mtime }}</th>
+                            <th style="text-align: right;"><button class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button></th>
                         </tr>
                     </tbody>
                 </table>
diff --git a/app/js/app.js b/app/js/app.js
index 55153d44ef57c08938920c0919c3c01cc16ba1c1..10a489cce59e89af843379a2f5ffbb5ef0034c89 100644 (file)
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -20,6 +20,8 @@ function login(username, password) {
         // clearly not the best option
         localStorage.username = username;
         localStorage.password = password;
+
+        loadDirectory(app.path);
     });
 }
 
@@ -32,20 +34,61 @@ function logout() {
     delete localStorage.password;
 }
 
+function sanitize(filePath) {
+    filePath = '/' + filePath;
+    return filePath.replace(/\/+/g, '/');
+}
+
+function loadDirectory(filePath) {
+    app.busy = true;
+
+    filePath = filePath ? sanitize(filePath) : '/';
+
+    console.log(filePath);
+
+    superagent.get('/api/files/' + filePath).query({ username: app.session.username, password: app.session.password }).end(function (error, result) {
+        app.busy = false;
+
+        if (error) return console.error(error);
+        if (result.statusCode === 401) return logout();
+
+        app.entries = result.body.entries;
+        app.path = filePath;
+        app.pathParts = filePath.split('/').filter(function (e) { return !!e; });
+        console.log(app.pathParts)
+    });
+}
+
+function open(entry) {
+    var path = sanitize(app.path + '/' + entry.filePath);
+
+    if (entry.isDirectory) return loadDirectory(path);
+
+    window.location.href = window.location.origin + path;
+}
+
+function up() {
+    loadDirectory(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
+}
+
 var app = new Vue({
     el: '#app',
     data: {
         busy: true,
+        path: '/',
+        pathParts: [],
         session: {
             valid: false
         },
-        loginData: {
-
-        }
+        loginData: {},
+        entries: []
     },
     methods: {
         login: login,
-        logout: logout
+        logout: logout,
+        loadDirectory: loadDirectory,
+        open: open,
+        up: up
     }
 });
 
Surfer is a Simple static file server