X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=dce3a602e43f42e8e487318d5b4c46977374be4d;hb=3df9f8a6fc959eaa0924722ad9ce0675d80369f9;hp=de61dcf8f522aa48c49d929feba1e52e0891bc30;hpb=9b7a26fc3708ac42d7d29c4329adbde465d29220;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git diff --git a/frontend/js/app.js b/frontend/js/app.js index de61dcf..dce3a60 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -1,11 +1,26 @@ (function () { 'use strict'; -function getProfile(accessToken, callback) { - callback = callback || function (error) { if (error) console.error(error); }; +// poor man's async +function asyncForEach(items, handler, callback) { + var cur = 0; + + 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; + + iterator(); + }); + })(); +} +function getProfile(accessToken, callback) { superagent.get('/api/profile').query({ access_token: accessToken }).end(function (error, result) { - app.busy = false; + app.ready = true; if (error && !error.response) return callback(error); if (result.statusCode !== 200) { @@ -17,40 +32,16 @@ function getProfile(accessToken, callback) { app.session.username = result.body.username; app.session.valid = true; - callback(); - }); -} - -function login(username, password) { - username = username || app.loginData.username; - password = password || app.loginData.password; - - app.busy = true; - - superagent.post('/api/login').send({ username: username, password: password }).end(function (error, result) { - app.busy = false; - - if (error) return console.error(error); - if (result.statusCode === 401) return console.error('Invalid credentials'); + superagent.get('/api/settings').query({ access_token: localStorage.accessToken }).end(function (error, result) { + if (error) console.error(error); - getProfile(result.body.accessToken, function (error) { - if (error) return console.error(error); + app.folderListingEnabled = !!result.body.folderListingEnabled; - loadDirectory(window.location.hash.slice(1)); + callback(); }); }); } -function 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; - }); -} - function sanitize(filePath) { filePath = '/' + filePath; return filePath.replace(/\/+/g, '/'); @@ -85,6 +76,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); } @@ -103,6 +100,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; @@ -115,19 +113,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; } @@ -135,173 +127,62 @@ 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 uploadFiles(files) { if (!files || !files.length) return; - app.uploadStatus = { - busy: true, - count: files.length, - done: 0, - percentDone: 0 - }; + app.uploadStatus.busy = true; + app.uploadStatus.count = files.length; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 0; - function uploadFile(file) { - var path = encode(sanitize(app.path + '/' + file.name)); + asyncForEach(files, function (file, callback) { + // do not handle directories (file.type is empty in such a case) + if (file.type === '') return callback(); + + var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name))); var formData = new FormData(); formData.append('file', file); 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) console.error('Error uploading file: ', result.statusCode); - if (error) console.error(error); + if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode); + if (error) return callback(error); app.uploadStatus.done += 1; app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); - if (app.uploadStatus.done >= app.uploadStatus.count) { - app.uploadStatus = { - busy: false, - count: 0, - done: 0, - percentDone: 100 - }; - - refresh(); - } + callback(); }); - } - - for(var i = 0; i < app.uploadStatus.count; ++i) { - uploadFile(files[i]); - } -} - -function upload() { - $(app.$els.upload).on('change', function () { - - // detach event handler - $(app.$els.upload).off('change'); - - uploadFiles(app.$els.upload.files || []); - }); - - // 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({ access_token: localStorage.accessToken, recursive: true }).end(function (error, result) { - app.busy = false; - - 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(); - - $('#modalDelete').modal('hide'); - }); -} - -function renameAsk(entry) { - app.renameData.entry = entry; - app.renameData.error = null; - app.renameData.newFilePath = entry.filePath; - - $('#modalRename').modal('show'); -} - -function rename(data) { - app.busy = true; - - var path = encode(sanitize(app.path + '/' + data.entry.filePath)); - var newFilePath = sanitize(app.path + '/' + data.newFilePath); - - superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) { - app.busy = false; - - 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(); - - $('#modalRename').modal('hide'); - }); -} - -function createDirectoryAsk() { - $('#modalcreateDirectory').modal('show'); - app.createDirectoryData = ''; - app.createDirectoryError = null; -} - -function createDirectory(name) { - app.busy = true; - app.createDirectoryError = null; - - var path = encode(sanitize(app.path + '/' + name)); + }, function (error) { + if (error) console.error(error); - superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) { - app.busy = false; + app.uploadStatus.busy = false; + app.uploadStatus.count = 0; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 100; - 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 dragOver(event) { + event.stopPropagation(); event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; } function drop(event) { + event.stopPropagation(); 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: { - busy: true, + ready: false, + busy: false, uploadStatus: { busy: false, count: 0, @@ -313,48 +194,171 @@ var app = new Vue({ session: { valid: false }, - loginData: {}, - deleteData: {}, - renameData: { - entry: {}, - error: null, - newFilePath: '' + folderListingEnabled: false, + loginData: { + username: '', + password: '', + busy: false }, - createDirectoryData: '', - createDirectoryError: null, entries: [] }, methods: { - login: login, - logout: logout, + onLogin: function () { + var that = this; + + that.loginData.busy = true; + + superagent.post('/api/login').send({ username: that.loginData.username, password: that.loginData.password }).end(function (error, result) { + that.loginData.busy = false; + + if (error && !result) return that.$message.error(error.message); + if (result.statusCode === 401) return that.$message.error('Wrong username or password'); + + getProfile(result.body.accessToken, function (error) { + if (error) return console.error(error); + + loadDirectory(window.location.hash.slice(1)); + }); + }); + }, + onOptionsMenu: function (command) { + var that = this; + + 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); + + that.session.valid = false; + + delete localStorage.accessToken; + }); + } + }, + onDownload: function (entry) { + if (entry.isDirectory) return; + window.location.href = encode('/api/files/' + sanitize(this.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken; + }, + onUpload: function () { + var that = this; + + $(this.$refs.upload).on('change', function () { + + // detach event handler + $(that.$refs.upload).off('change'); + + uploadFiles(that.$refs.upload.files || []); + }); + + // reset the form first to make the change handler retrigger even on the same file selected + this.$refs.upload.value = ''; + this.$refs.upload.click(); + }, + onDelete: function (entry) { + var that = this; + + var title = 'Really delete ' + (entry.isDirectory ? 'folder ' : '') + entry.filePath; + this.$confirm('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No' }).then(function () { + var path = encode(sanitize(that.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 that.$message.error('Error deleting file: ' + result.statusCode); + if (error) return that.$message.error(error.message); + + refresh(); + }); + }).catch(function () {}); + }, + onRename: function (entry) { + var that = this; + + 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(that.path + '/' + entry.filePath)); + var newFilePath = sanitize(that.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 that.$message.error('Error renaming file: ' + result.statusCode); + if (error) return that.$message.error(error.message); + + refresh(); + }); + }).catch(function () {}); + }, + onNewFolder: function () { + var that = this; + + var title = 'Create New Folder'; + this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new foldername' }).then(function (data) { + var path = encode(sanitize(that.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 that.$message.error('Folder name not allowed'); + if (result && result.statusCode === 409) return that.$message.error('Folder already exists'); + if (result && result.statusCode !== 201) return that.$message.error('Error creating folder: ' + result.statusCode); + if (error) return that.$message.error(error.message); + + refresh(); + }); + }).catch(function () {}); + }, + 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(this.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); + }, open: open, - up: up, - upload: upload, - delAsk: delAsk, - del: del, - renameAsk: renameAsk, - rename: rename, - createDirectoryAsk: createDirectoryAsk, - createDirectory: createDirectory, drop: drop, dragOver: dragOver } }); -window.app = app; +getProfile(localStorage.accessToken, function (error) { + if (error) return console.error(error); -getProfile(localStorage.accessToken); - -$(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)); }); })();