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 var mimeTypes = {
  47     images: [ '.png', '.jpg', '.jpeg', '.tiff', '.gif' ],
  48     text: [ '.txt', '.md' ],
  49     pdf: [ '.pdf' ],
  50     html: [ '.html', '.htm', '.php' ],
  51     video: [ '.mp4', '.mpg', '.mpeg', '.ogg', '.mkv' ]
  52 };
  53
  54 function getPreviewUrl(entry, basePath) {
  55     var path = '/_admin/img/';
  56
  57     if (entry.isDirectory) return path + 'directory.png';
  58     if (mimeTypes.images.some(function (e) { return entry.filePath.endsWith(e); })) return sanitize(basePath + '/' + entry.filePath);
  59     if (mimeTypes.text.some(function (e) { return entry.filePath.endsWith(e); })) return path +'text.png';
  60     if (mimeTypes.pdf.some(function (e) { return entry.filePath.endsWith(e); })) return path + 'pdf.png';
  61     if (mimeTypes.html.some(function (e) { return entry.filePath.endsWith(e); })) return path + 'html.png';
  62     if (mimeTypes.video.some(function (e) { return entry.filePath.endsWith(e); })) return path + 'video.png';
  63
  64     return path + 'unknown.png';
  65 }
  66
  67 function refresh() {
  68     loadDirectory(app.path);
  69 }
  70
  71 function loadDirectory(filePath) {
  72     app.busy = true;
  73
  74     filePath = filePath ? sanitize(filePath) : '/';
  75
  76     console.log(filePath);
  77
  78     superagent.get('/api/files/' + filePath).query({ username: app.session.username, password: app.session.password }).end(function (error, result) {
  79         app.busy = false;
  80
  81         if (error) return console.error(error);
  82         if (result.statusCode === 401) return logout();
  83
  84         app.entries = result.body.entries.map(function (entry) {
  85             entry.previewUrl = getPreviewUrl(entry, filePath);
  86             return entry;
  87         });
  88         app.path = filePath;
  89         app.pathParts = filePath.split('/').filter(function (e) { return !!e; });
  90
  91         Vue.nextTick(function () {
  92             $(function () {
  93                 $('[data-toggle="tooltip"]').tooltip();
  94             });
  95         });
  96     });
  97 }
  98
  99 function open(entry) {
 100     var path = sanitize(app.path + '/' + entry.filePath);
 101
 102     if (entry.isDirectory) return loadDirectory(path);
 103
 104     window.open(path);
 105 }
 106
 107 function up() {
 108     loadDirectory(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/'));
 109 }
 110
 111 function upload() {
 112     $(app.$els.upload).on('change', function () {
 113         app.busy = true;
 114
 115         // detach event handler
 116         $(app.$els.upload).off('change');
 117
 118         var file = app.$els.upload.files[0];
 119         var path = encode(sanitize(app.path + '/' + file.name));
 120
 121         var formData = new FormData();
 122         formData.append('file', file);
 123
 124         superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) {
 125             app.busy = false;
 126
 127             if (error) return console.error(error);
 128             if (result.statusCode !== 201) return console.error('Error uploading file: ', result.statusCode);
 129
 130             refresh();
 131         });
 132     });
 133
 134     app.$els.upload.click();
 135 }
 136
 137 function delAsk(entry) {
 138     $('#modalDelete').modal('show');
 139     app.deleteData = entry;
 140 }
 141
 142 function del(entry) {
 143     app.busy = true;
 144
 145     var path = encode(sanitize(app.path + '/' + entry.filePath));
 146
 147     superagent.del('/api/files' + path).query({ username: app.session.username, password: app.session.password, recursive: true }).end(function (error, result) {
 148         app.busy = false;
 149
 150         if (error) return console.error(error);
 151         if (result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode);
 152
 153         refresh();
 154
 155         $('#modalDelete').modal('hide');
 156     });
 157 }
 158
 159 function createDirectoryAsk() {
 160     $('#modalcreateDirectory').modal('show');
 161     app.createDirectoryData = '';
 162 }
 163
 164 function createDirectory(name) {
 165     app.busy = true;
 166
 167     var path = encode(sanitize(app.path + '/' + name));
 168
 169     superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password, directory: true }).end(function (error, result) {
 170         app.busy = false;
 171
 172         if (error) return console.error(error);
 173         if (result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode);
 174
 175         app.createDirectoryData = '';
 176         refresh();
 177
 178         $('#modalcreateDirectory').modal('hide');
 179     });
 180 }
 181
 182 Vue.filter('prettyDate', function (value) {
 183     var d = new Date(value);
 184     return d.toDateString();
 185 });
 186
 187 var app = new Vue({
 188     el: '#app',
 189     data: {
 190         busy: true,
 191         path: '/',
 192         pathParts: [],
 193         session: {
 194             valid: false
 195         },
 196         loginData: {},
 197         deleteData: {},
 198         createDirectoryData: '',
 199         entries: []
 200     },
 201     methods: {
 202         login: login,
 203         logout: logout,
 204         loadDirectory: loadDirectory,
 205         open: open,
 206         up: up,
 207         upload: upload,
 208         delAsk: delAsk,
 209         del: del,
 210         createDirectoryAsk: createDirectoryAsk,
 211         createDirectory: createDirectory
 212     }
 213 });
 214
 215 login(localStorage.username, localStorage.password);
 216
 217 })();