X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=7a80ba72d1849666da61d5038be3fc0fe947f565;hb=4dce7a3d2e99f489245bc8b4c6611061b78aa8cf;hp=b8bd1d985f2b6751be3de20989fe2f82f93dd030;hpb=8a3d0eee58f915ed0319cf219e03cfba98426cf3;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git diff --git a/frontend/js/app.js b/frontend/js/app.js index b8bd1d9..7a80ba7 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -1,11 +1,31 @@ (function () { 'use strict'; -function getProfile(accessToken, callback) { - callback = callback || function (error) { if (error) console.error(error); }; +/* global superagent */ +/* global Vue */ +/* global $ */ +/* global filesize */ + +// 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 +37,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, '/'); @@ -69,7 +65,7 @@ var mimeTypes = { text: [ '.txt', '.md' ], pdf: [ '.pdf' ], html: [ '.html', '.htm', '.php' ], - video: [ '.mp4', '.mpg', '.mpeg', '.ogg', '.mkv' ] + video: [ '.mp4', '.mpg', '.mpeg', '.ogg', '.mkv', '.avi', '.mov' ] }; function getPreviewUrl(entry, basePath) { @@ -95,6 +91,16 @@ function refresh() { loadDirectory(app.path); } +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 loadDirectory(filePath) { app.busy = true; @@ -122,19 +128,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; } @@ -142,237 +142,297 @@ function open(entry) { window.open(encode(path)); } -function download(entry) { - if (entry.isDirectory) return; - - window.location.href = encode('/api/files/' + sanitize(app.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken; -} - -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.size = 0; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 0; - function uploadFile(file) { - var path = encode(sanitize(app.path + '/' + file.name)); + for (var i = 0; i < files.length; ++i) { + app.uploadStatus.size += files[i].size; + } + + asyncForEach(files, function (file, 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); + var finishedUploadSize = app.uploadStatus.done; - app.uploadStatus.done += 1; - app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); + superagent.post('/api/files' + path) + .query({ access_token: localStorage.accessToken }) + .send(formData) + .on('progress', function (event) { + // only handle upload events + if (!(event.target instanceof XMLHttpRequestUpload)) return; - if (app.uploadStatus.done >= app.uploadStatus.count) { - app.uploadStatus = { - busy: false, - count: 0, - done: 0, - percentDone: 100 - }; + app.uploadStatus.done = finishedUploadSize + event.loaded; + app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100); + }).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); - 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; + }, 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.size = 0; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 100; refresh(); - - $('#modalDelete').modal('hide'); }); } -function renameAsk(entry) { - app.renameData.entry = entry; - app.renameData.error = null; - app.renameData.newFilePath = entry.filePath; - - $('#modalRename').modal('show'); +function dragOver(event) { + event.stopPropagation(); + event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; } -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 drop(event) { + event.stopPropagation(); + event.preventDefault(); -function createDirectoryAsk() { - $('#modalcreateDirectory').modal('show'); - app.createDirectoryData = ''; - app.createDirectoryError = null; -} + if (!event.dataTransfer.items[0]) return; -function createDirectory(name) { - app.busy = true; - app.createDirectoryError = null; + // figure if a folder was dropped on a modern browser, in this case the first would have to be a directory + var folderItem; + try { + folderItem = event.dataTransfer.items[0].webkitGetAsEntry(); + if (folderItem.isFile) return uploadFiles(event.dataTransfer.files); + } catch (e) { + return uploadFiles(event.dataTransfer.files); + } - var path = encode(sanitize(app.path + '/' + name)); + // if we got here we have a folder drop and a modern browser + // now traverse the folder tree and create a file list + app.uploadStatus.busy = true; + app.uploadStatus.uploadListCount = 0; + + var fileList = []; + function traverseFileTree(item, path, callback) { + if (item.isFile) { + // Get file + item.file(function (file) { + fileList.push(file); + ++app.uploadStatus.uploadListCount; + callback(); + }); + } else if (item.isDirectory) { + // Get folder contents + var dirReader = item.createReader(); + dirReader.readEntries(function (entries) { + asyncForEach(entries, function (entry, callback) { + traverseFileTree(entry, path + item.name + '/', callback); + }, callback); + }); + } + } - superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken, directory: true }).end(function (error, result) { - app.busy = false; + traverseFileTree(folderItem, '', function (error) { + app.uploadStatus.busy = false; + app.uploadStatus.uploadListCount = 0; - 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'); + uploadFiles(fileList); }); } -function dragOver(event) { - event.preventDefault(); -} - -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: { - busy: true, + ready: false, + busy: false, uploadStatus: { busy: false, count: 0, done: 0, - percentDone: 50 + percentDone: 50, + uploadListCount: 0 }, path: '/', pathParts: [], 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(decode(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') { + logout(); + } + }, + 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(); + }, + onUploadFolder: function () { + var that = this; + + $(this.$refs.uploadFolder).on('change', function () { + // detach event handler + $(that.$refs.uploadFolder).off('change'); + uploadFiles(that.$refs.uploadFolder.files || []); + }); + + // reset the form first to make the change handler retrigger even on the same file selected + this.$refs.uploadFolder.value = ''; + this.$refs.uploadFolder.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, - download: download, - 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); - loadDirectory(window.location.hash.slice(1)); + loadDirectory(decode(window.location.hash.slice(1))); }); $(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(); - }); + loadDirectory(decode(window.location.hash.slice(1))); }); })();