X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=6303a892984868c4d496b92efe04c556033e0028;hb=f43b3c162f5a0857d9fd56f4d8005763fcdca4cc;hp=e0464f8191906afd0c57334f49461b9d93ad3ce8;hpb=fea6789c72b7ef5b69281d8866f4ae0475135d4a;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git diff --git a/frontend/js/app.js b/frontend/js/app.js index e0464f8..6303a89 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -1,37 +1,48 @@ (function () { 'use strict'; -function login(username, password) { - username = username || app.loginData.username; - password = password || app.loginData.password; +// poor man's async +function asyncForEach(items, handler, callback) { + var cur = 0; - app.busy = true; + if (items.length === 0) return callback(); + + (function iterator() { + handler(items[cur], function (error) { + if (error) return callback(error); + if (cur >= items.length-1) return callback(); + ++cur; - superagent.get('/api/files/').query({ username: username, password: password }).end(function (error, result) { + iterator(); + }); + })(); +} + +function getProfile(accessToken, callback) { + callback = callback || function (error) { if (error) console.error(error); }; + + superagent.get('/api/profile').query({ access_token: accessToken }).end(function (error, result) { app.busy = false; + app.ready = true; - if (error) return console.error(error); - if (result.statusCode === 401) return console.error('Invalid credentials'); + if (error && !error.response) return callback(error); + if (result.statusCode !== 200) { + delete localStorage.accessToken; + return callback('Invalid access token'); + } + localStorage.accessToken = accessToken; + app.session.username = result.body.username; app.session.valid = true; - app.session.username = username; - app.session.password = password; - - // clearly not the best option - localStorage.username = username; - localStorage.password = password; - loadDirectory(window.location.hash.slice(1)); - }); -} + superagent.get('/api/settings').query({ access_token: localStorage.accessToken }).end(function (error, result) { + if (error) console.error(error); -function logout() { - app.session.valid = false; - app.session.username = null; - app.session.password = null; + app.folderListingEnabled = !!result.body.folderListingEnabled; - delete localStorage.username; - delete localStorage.password; + callback(); + }); + }); } function sanitize(filePath) { @@ -68,6 +79,12 @@ function getPreviewUrl(entry, basePath) { return path + 'unknown.png'; } +// simple extension detection, does not work with double extension like .tar.gz +function getExtension(entry) { + if (entry.isFile) return entry.filePath.slice(entry.filePath.lastIndexOf('.') + 1); + return ''; +} + function refresh() { loadDirectory(app.path); } @@ -77,7 +94,7 @@ function loadDirectory(filePath) { filePath = filePath ? sanitize(filePath) : '/'; - superagent.get('/api/files/' + encode(filePath)).query({ username: app.session.username, password: app.session.password }).end(function (error, result) { + superagent.get('/api/files/' + encode(filePath)).query({ access_token: localStorage.accessToken }).end(function (error, result) { app.busy = false; if (result && result.statusCode === 401) return logout(); @@ -86,6 +103,7 @@ function loadDirectory(filePath) { result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1; }); app.entries = result.body.entries.map(function (entry) { entry.previewUrl = getPreviewUrl(entry, filePath); + entry.extension = getExtension(entry); return entry; }); app.path = filePath; @@ -98,19 +116,13 @@ function loadDirectory(filePath) { // update in case this was triggered from code window.location.hash = app.path; - - Vue.nextTick(function () { - $(function () { - $('[data-toggle="tooltip"]').tooltip(); - }); - }); }); } -function open(entry) { - var path = sanitize(app.path + '/' + entry.filePath); +function open(row, event, column) { + var path = sanitize(app.path + '/' + row.filePath); - if (entry.isDirectory) { + if (row.isDirectory) { window.location.hash = path; return; } @@ -118,132 +130,55 @@ function open(entry) { window.open(encode(path)); } -function up() { - window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); -} - -function upload() { - $(app.$els.upload).on('change', function () { - - // detach event handler - $(app.$els.upload).off('change'); - - app.uploadStatus = { - busy: true, - count: app.$els.upload.files.length, - done: 0, - percentDone: 0 - }; - - function uploadFile(file) { - var path = encode(sanitize(app.path + '/' + file.name)); +function uploadFiles(files) { + if (!files || !files.length) return; - var formData = new FormData(); - formData.append('file', file); + app.uploadStatus.busy = true; + app.uploadStatus.count = files.length; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 0; - superagent.put('/api/files' + path).query({ username: app.session.username, password: app.session.password }).send(formData).end(function (error, result) { - if (result && result.statusCode === 401) return logout(); - if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode); - if (error) console.error(error); + asyncForEach(files, function (file, callback) { + var path = encode(sanitize(app.path + '/' + file.name)); - app.uploadStatus.done += 1; - app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); + var formData = new FormData(); + formData.append('file', file); - console.log(Math.round(app.uploadStatus.done / app.uploadStatus.count * 100)) + superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken }).send(formData).end(function (error, result) { + if (result && result.statusCode === 401) return logout(); + if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode); + if (error) return callback(error); - if (app.uploadStatus.done >= app.uploadStatus.count) { - app.uploadStatus = { - busy: false, - count: 0, - done: 0, - percentDone: 100 - }; + app.uploadStatus.done += 1; + app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); - refresh(); - } - }); - } - - for(var i = 0; i < app.uploadStatus.count; ++i) { - uploadFile(app.$els.upload.files[i]); - } - }); - - // reset the form first to make the change handler retrigger even on the same file selected - $('#fileUploadForm')[0].reset(); - - app.$els.upload.click(); -} - -function delAsk(entry) { - $('#modalDelete').modal('show'); - app.deleteData = entry; -} - -function del(entry) { - app.busy = true; - - var path = encode(sanitize(app.path + '/' + entry.filePath)); - - superagent.del('/api/files' + path).query({ username: app.session.username, password: app.session.password, recursive: true }).end(function (error, result) { - app.busy = false; + callback(); + }); + }, function (error) { + if (error) console.error(error); - if (result && result.statusCode === 401) return logout(); - if (result && result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode); - if (error) return console.error(error); + app.uploadStatus.busy = false; + app.uploadStatus.count = 0; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 100; refresh(); - - $('#modalDelete').modal('hide'); }); } -function createDirectoryAsk() { - $('#modalcreateDirectory').modal('show'); - app.createDirectoryData = ''; - app.createDirectoryError = null; +function dragOver(event) { + event.preventDefault(); } -function createDirectory(name) { - app.busy = true; - app.createDirectoryError = null; - - 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 (result && result.statusCode === 401) return logout(); - if (result && result.statusCode === 403) { - app.createDirectoryError = 'Name not allowed'; - return; - } - if (result && result.statusCode === 409) { - app.createDirectoryError = 'Directory already exists'; - return; - } - if (result && result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode); - if (error) return console.error(error); - - app.createDirectoryData = ''; - refresh(); - - $('#modalcreateDirectory').modal('hide'); - }); +function drop(event) { + event.preventDefault(); + uploadFiles(event.dataTransfer.files || []); } -Vue.filter('prettyDate', function (value) { - var d = new Date(value); - return d.toDateString(); -}); - -Vue.filter('prettyFileSize', function (value) { - return filesize(value); -}); - var app = new Vue({ el: '#app', data: { + ready: false, busy: true, uploadStatus: { busy: false, @@ -256,39 +191,164 @@ var app = new Vue({ session: { valid: false }, - loginData: {}, - deleteData: {}, - createDirectoryData: '', - createDirectoryError: null, + folderListingEnabled: false, + loginData: { + username: '', + password: '' + }, entries: [] }, methods: { - login: login, - logout: logout, + onLogin: function () { + app.busy = true; + + superagent.post('/api/login').send({ username: app.loginData.username, password: app.loginData.password }).end(function (error, result) { + app.busy = false; + + if (error) return console.error(error); + if (result.statusCode === 401) return console.error('Invalid credentials'); + + getProfile(result.body.accessToken, function (error) { + if (error) return console.error(error); + + loadDirectory(window.location.hash.slice(1)); + }); + }); + }, + onOptionsMenu: function (command) { + if (command === 'folderListing') { + superagent.put('/api/settings').send({ folderListingEnabled: this.folderListingEnabled }).query({ access_token: localStorage.accessToken }).end(function (error) { + if (error) console.error(error); + }); + } else if (command === 'about') { + this.$msgbox({ + title: 'About Surfer', + message: 'Surfer is a static file server written by Cloudron.

The source code is licensed under MIT and available here.', + dangerouslyUseHTMLString: true, + confirmButtonText: 'OK', + showCancelButton: false, + type: 'info', + center: true + }).then(function () {}).catch(function () {}); + } else if (command === 'logout') { + superagent.post('/api/logout').query({ access_token: localStorage.accessToken }).end(function (error) { + if (error) console.error(error); + + app.session.valid = false; + + delete localStorage.accessToken; + }); + } + }, + onDownload: function (entry) { + if (entry.isDirectory) return; + window.location.href = encode('/api/files/' + sanitize(app.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken; + }, + onUpload: function () { + $(app.$refs.upload).on('change', function () { + + // detach event handler + $(app.$refs.upload).off('change'); + + uploadFiles(app.$refs.upload.files || []); + }); + + // reset the form first to make the change handler retrigger even on the same file selected + app.$refs.upload.value = ''; + app.$refs.upload.click(); + }, + onDelete: function (entry) { + var title = 'Really delete ' + (entry.isDirectory ? 'folder ' : '') + entry.filePath; + this.$confirm('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No' }).then(function () { + var path = encode(sanitize(app.path + '/' + entry.filePath)); + + superagent.del('/api/files' + path).query({ access_token: localStorage.accessToken, recursive: true }).end(function (error, result) { + if (result && result.statusCode === 401) return logout(); + if (result && result.statusCode !== 200) return console.error('Error deleting file: ', result.statusCode); + if (error) return console.error(error); + + refresh(); + }); + }).catch(function () { + console.log('delete error:', arguments); + }); + }, + onRename: function (entry) { + var title = 'Rename ' + entry.filePath; + this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new filename', inputValue: entry.filePath }).then(function (data) { + var path = encode(sanitize(app.path + '/' + entry.filePath)); + var newFilePath = sanitize(app.path + '/' + data.value); + + superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) { + if (result && result.statusCode === 401) return logout(); + if (result && result.statusCode !== 200) return console.error('Error renaming file: ', result.statusCode); + if (error) return console.error(error); + + refresh(); + }); + }).catch(function () { + console.log('rename error:', arguments); + }); + }, + onNewFolder: function () { + var title = 'Create New Folder'; + this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new foldername' }).then(function (data) { + var path = encode(sanitize(app.path + '/' + data.value)); + + superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) { + if (result && result.statusCode === 401) return logout(); + if (result && result.statusCode === 403) return console.error('Name not allowed'); + if (result && result.statusCode === 409) return console.error('Directory already exists'); + if (result && result.statusCode !== 201) return console.error('Error creating directory: ', result.statusCode); + if (error) return console.error(error); + + refresh(); + }); + }).catch(function () { + console.log('create folder error:', arguments); + }); + }, + prettyDate: function (row, column, cellValue, index) { + var date = new Date(cellValue), + diff = (((new Date()).getTime() - date.getTime()) / 1000), + day_diff = Math.floor(diff / 86400); + + if (isNaN(day_diff) || day_diff < 0) + return; + + return day_diff === 0 && ( + diff < 60 && 'just now' || + diff < 120 && '1 minute ago' || + diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' || + diff < 7200 && '1 hour ago' || + diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') || + day_diff === 1 && 'Yesterday' || + day_diff < 7 && day_diff + ' days ago' || + day_diff < 31 && Math.ceil( day_diff / 7 ) + ' weeks ago' || + day_diff < 365 && Math.round( day_diff / 30 ) + ' months ago' || + Math.round( day_diff / 365 ) + ' years ago'; + }, + prettyFileSize: function (row, column, cellValue, index) { + return filesize(cellValue); + }, loadDirectory: loadDirectory, + onUp: function () { + window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); + }, open: open, - up: up, - upload: upload, - delAsk: delAsk, - del: del, - createDirectoryAsk: createDirectoryAsk, - createDirectory: createDirectory + drop: drop, + dragOver: dragOver } }); -window.app = app; - -login(localStorage.username, localStorage.password); +getProfile(localStorage.accessToken, function (error) { + if (error) return console.error(error); -$(window).on('hashchange', function () { loadDirectory(window.location.hash.slice(1)); }); -// setup all the dialog focus handling -['modalcreateDirectory'].forEach(function (id) { - $('#' + id).on('shown.bs.modal', function () { - $(this).find("[autofocus]:first").focus(); - }); +$(window).on('hashchange', function () { + loadDirectory(window.location.hash.slice(1)); }); })();