app/js/app.js

   1 (function () {
   2 'use strict';
   3
   4 function login(username, password) {
   5     username = username || app.loginData.username;
   6     password = password || app.loginData.password;
   7
   8     app.busy = true;
   9
  10     superagent.get('/api/files/').query({ username: username, password: password }).end(function (error, result) {
  11         app.busy = false;
  12
  13         if (error) return console.error(error);
  14         if (result.statusCode === 401) return console.error('Invalid credentials');
  15
  16         app.session.valid = true;
  17         app.session.username = username;
  18         app.session.password = password;
  19
  20         // clearly not the best option
  21         localStorage.username = username;
  22         localStorage.password = password;
  23
  24         loadDirectory(app.path);
  25     });
  26 }
  27
  28 function logout() {
  29     app.session.valid = false;
  30     app.session.username = username;
  31     app.session.password = password;
  32
  33     delete localStorage.username;
  34     delete localStorage.password;
  35 }
  36
  37 function sanitize(filePath) {
  38     filePath = '/' + filePath;
  39     return filePath.replace(/\/+/g, '/');
  40 }
  41
  42 function encode(filePath) {
  43     return filePath.split('/').map(encodeURIComponent).join('/');
  44 }
  45
  46 function refresh() {
  47     loadDirectory(app.path);
  48 }
  49
  50 function loadDirectory(filePath) {
  51     app.busy = true;
  52
  53     filePath = filePath ? sanitize(filePath) : '/';
  54
  55     console.log(filePath);
  56
  57     superagent.get('/api/files/' + filePath).query({ username: app.session.username, password: app.session.password }).end(function (error, result) {
  58         app.busy = false;
  59
  60         if (error) return console.error(error);
  61         if (result.statusCode === 401) return logout();
  62
  63         app.entries = result.body.entries;
  64         app.path = filePath;
  65         app.pathParts = filePath.split('/').filter(function (e) { return !!e; });
  66
  67         Vue.nextTick(function () {
  68             $(function () {
  69                 $('[data-toggle="tooltip"]').tooltip();
  70             });
  71         });
  72     });
  73 }
  74
  75 function open(entry) {
  76     var path = sanitize(app.path + '/' + entry.filePath);
  77
  78     if (entry.isDirectory) return loadDirectory(path);
  79
  80     window.open(path);
  81 }
  82
  83 function up() {
  84     loadDirectory(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
  85 }
  86
  87 function upload() {
  88     $(app.$els.upload).on('change', function () {
  89         app.busy = true;
  90
  91         // detach event handler
  92         $(app.$els.upload).off('change');
  93
  94         var file = app.$els.upload.files[0];
  95         var path = encode(sanitize(app.path + '/' + file.name));
  96
  97         var formData = new FormData();
  98         formData.append('file', file);
  99
 100         superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) {
 101             app.busy = false;
 102
 103             if (error) return console.error(error);
 104             if (result.statusCode !== 201) return console.error('Error uploading file: ', result.statusCode);
 105
 106             refresh();
 107         });
 108     });
 109
 110     app.$els.upload.click();
 111 }
 112
 113 function delAsk(entry) {
 114     $('#modalDelete').modal('show');
 115     app.deleteData = entry;
 116 }
 117
 118 function del(entry) {
 119     app.busy = true;
 120
 121     var path = encode(sanitize(app.path + '/' + entry.filePath));
 122
 123     superagent.del('/api/files' + path).query({ username: app.session.username, password: app.session.password, recursive: true }).end(function (error, result) {
 124         app.busy = false;
 125
 126         if (error) return console.error(error);
 127         if (result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode);
 128
 129         refresh();
 130
 131         $('#modalDelete').modal('hide');
 132     });
 133 }
 134
 135 function createDirectoryAsk() {
 136     $('#modalcreateDirectory').modal('show');
 137     app.createDirectoryData = '';
 138 }
 139
 140 function createDirectory(name) {
 141     app.busy = true;
 142
 143     var path = encode(sanitize(app.path + '/' + name));
 144
 145     superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password, directory: true }).end(function (error, result) {
 146         app.busy = false;
 147
 148         if (error) return console.error(error);
 149         if (result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode);
 150
 151         app.createDirectoryData = '';
 152         refresh();
 153
 154         $('#modalcreateDirectory').modal('hide');
 155     });
 156 }
 157
 158 Vue.filter('prettyDate', function (value) {
 159     var d = new Date(value);
 160     return d.toDateString();
 161 });
 162
 163 var app = new Vue({
 164     el: '#app',
 165     data: {
 166         busy: true,
 167         path: '/',
 168         pathParts: [],
 169         session: {
 170             valid: false
 171         },
 172         loginData: {},
 173         deleteData: {},
 174         createDirectoryData: '',
 175         entries: []
 176     },
 177     methods: {
 178         login: login,
 179         logout: logout,
 180         loadDirectory: loadDirectory,
 181         open: open,
 182         up: up,
 183         upload: upload,
 184         delAsk: delAsk,
 185         del: del,
 186         createDirectoryAsk: createDirectoryAsk,
 187         createDirectory: createDirectory
 188     }
 189 });
 190
 191 login(localStorage.username, localStorage.password);
 192
 193 })();