X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Fjs%2Fapp.js;h=f532bc1e508515a9196329474af9e53450644ce9;hb=2d28c88dd7a6765a6d2ed54758bbb4c3da999331;hp=57b831eeca698423a3e25bafcde72900fdf0d87c;hpb=f8693af1f69c91e93ff1b48614df92a84da78e8d;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git diff --git a/frontend/js/app.js b/frontend/js/app.js index 57b831e..f532bc1 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -1,6 +1,11 @@ (function () { 'use strict'; +/* global superagent */ +/* global Vue */ +/* global $ */ +/* global filesize */ + // poor man's async function asyncForEach(items, handler, callback) { var cur = 0; @@ -18,24 +23,29 @@ function asyncForEach(items, handler, callback) { })(); } -function getProfile(accessToken, callback) { - callback = callback || function (error) { if (error) console.error(error); }; - +function initWithToken(accessToken) { 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 (error && !error.response) return console.error(error); if (result.statusCode !== 200) { delete localStorage.accessToken; - return callback('Invalid access token'); + return; } localStorage.accessToken = accessToken; app.session.username = result.body.username; app.session.valid = true; - callback(); + superagent.get('/api/settings').query({ access_token: localStorage.accessToken }).end(function (error, result) { + if (error) console.error(error); + + app.folderListingEnabled = !!result.body.folderListingEnabled; + + loadDirectory(decode(window.location.hash.slice(1))); + + app.refreshAccessTokens(); + }); }); } @@ -57,7 +67,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) { @@ -83,6 +93,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; @@ -98,6 +118,8 @@ function loadDirectory(filePath) { app.entries = result.body.entries.map(function (entry) { entry.previewUrl = getPreviewUrl(entry, filePath); entry.extension = getExtension(entry); + entry.rename = false; + entry.filePathNew = entry.filePath; return entry; }); app.path = filePath; @@ -113,7 +135,10 @@ function loadDirectory(filePath) { }); } -function open(row, event, column) { +function open(row, column, event) { + // ignore item open on row clicks if we are renaming this entry + if (row.rename) return; + var path = sanitize(app.path + '/' + row.filePath); if (row.isDirectory) { @@ -121,7 +146,19 @@ function open(row, event, column) { return; } - window.open(encode(path)); + app.activeEntry = row; + app.activeEntry.fullPath = encode(sanitize(app.path + '/' + row.filePath)); + app.previewDrawerVisible = true + + // need to wait for DOM element to exist + setTimeout(function () { + $('iframe').on('load', function (e) { + if (!e.target.contentWindow.document.body) return; + + e.target.contentWindow.document.body.style.display = 'flex' + e.target.contentWindow.document.body.style.justifyContent = 'center' + }); + }, 0); } function uploadFiles(files) { @@ -129,23 +166,37 @@ function uploadFiles(files) { app.uploadStatus.busy = true; app.uploadStatus.count = files.length; + app.uploadStatus.size = 0; app.uploadStatus.done = 0; app.uploadStatus.percentDone = 0; + 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.name)); + 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) { + var finishedUploadSize = app.uploadStatus.done; + + 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; + + app.uploadStatus.done = finishedUploadSize + event.loaded; + var tmp = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100); + app.uploadStatus.percentDone = tmp > 100 ? 100 : tmp; + }).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); - app.uploadStatus.done += 1; - app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100); - callback(); }); }, function (error) { @@ -153,6 +204,7 @@ function uploadFiles(files) { app.uploadStatus.busy = false; app.uploadStatus.count = 0; + app.uploadStatus.size = 0; app.uploadStatus.done = 0; app.uploadStatus.percentDone = 100; @@ -161,24 +213,73 @@ function uploadFiles(files) { } function dragOver(event) { + event.stopPropagation(); event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; } function drop(event) { + event.stopPropagation(); event.preventDefault(); - uploadFiles(event.dataTransfer.files || []); + + if (!event.dataTransfer.items[0]) return; + + // 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); + } + + // 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); + }); + } + } + + traverseFileTree(folderItem, '', function (error) { + app.uploadStatus.busy = false; + app.uploadStatus.uploadListCount = 0; + + if (error) return console.error(error); + + uploadFiles(fileList); + }); } var app = new Vue({ el: '#app', data: { ready: false, - busy: true, + busy: false, + origin: window.location.origin, uploadStatus: { busy: false, count: 0, done: 0, - percentDone: 50 + percentDone: 50, + uploadListCount: 0 }, path: '/', pathParts: [], @@ -188,30 +289,35 @@ var app = new Vue({ folderListingEnabled: false, loginData: { username: '', - password: '' + password: '', + busy: false }, - entries: [] + previewDrawerVisible: false, + activeEntry: {}, + entries: [], + accessTokens: [], + accessTokensDialogVisible: false }, methods: { onLogin: function () { - app.busy = true; + var that = this; - superagent.post('/api/login').send({ username: app.loginData.username, password: app.loginData.password }).end(function (error, result) { - app.busy = false; + that.loginData.busy = true; - if (error) return console.error(error); - if (result.statusCode === 401) return console.error('Invalid credentials'); + superagent.post('/api/login').send({ username: that.loginData.username, password: that.loginData.password }).end(function (error, result) { + that.loginData.busy = false; - getProfile(result.body.accessToken, function (error) { - if (error) return console.error(error); + if (error && !result) return that.$message.error(error.message); + if (result.statusCode === 401) return that.$message.error('Wrong username or password'); - loadDirectory(window.location.hash.slice(1)); - }); + initWithToken(result.body.accessToken); }); }, onOptionsMenu: function (command) { if (command === 'folderListing') { - console.log('Not implemented'); + 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', @@ -223,83 +329,148 @@ var app = new Vue({ 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; - }); + logout(); + } else if (command === 'apiAccess') { + this.accessTokensDialogVisible = true; } }, onDownload: function (entry) { if (entry.isDirectory) return; - window.location.href = encode('/api/files/' + sanitize(app.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken; + window.location.href = encode('/api/files/' + sanitize(this.path + '/' + entry.filePath)) + '?access_token=' + localStorage.accessToken; }, onUpload: function () { - $(app.$refs.upload).on('change', function () { + var that = this; + $(this.$refs.upload).on('change', function () { // detach event handler - $(app.$refs.upload).off('change'); + $(that.$refs.upload).off('change'); + uploadFiles(that.$refs.upload.files || []); + }); - uploadFiles(app.$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 - app.$refs.upload.value = ''; - app.$refs.upload.click(); + 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(app.path + '/' + entry.filePath)); + 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 console.error('Error deleting file: ', result.statusCode); - if (error) return console.error(error); + 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 () { - console.log('delete error:', arguments); + }).catch(function () {}); + }, + onRename: function (entry, scope) { + if (entry.rename) return entry.rename = false; + + entry.rename = true; + + Vue.nextTick(function () { + var elem = document.getElementById('filePathRenameInputId-' + scope.$index); + elem.focus(); + + if (typeof elem.selectionStart != "undefined") { + elem.selectionStart = 0; + elem.selectionEnd = entry.filePath.lastIndexOf('.'); + } }); }, - 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); + onRenameEnd: function (entry) { + entry.rename = false; + entry.filePathNew = entry.filePath; + }, + onRenameSubmit: function (entry) { + var that = this; - 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); + entry.rename = false; - refresh(); - }); - }).catch(function () { - console.log('rename error:', arguments); + if (entry.filePathNew === entry.filePath) return; + + var path = encode(sanitize(this.path + '/' + entry.filePath)); + var newFilePath = sanitize(this.path + '/' + entry.filePathNew); + + 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); + + entry.filePath = entry.filePathNew; }); }, 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(app.path + '/' + data.value)); + 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 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); + 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 () { - console.log('create folder error:', arguments); + }).catch(function () {}); + }, + refreshAccessTokens: function () { + var that = this; + + superagent.get('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) { + if (error && !result) return that.$message.error(error.message); + + that.accessTokens = result.body.accessTokens; }); }, + onCopyAccessToken: function (event) { + event.target.select(); + document.execCommand('copy'); + + this.$message({ type: 'success', message: 'Access token copied to clipboard' }); + }, + onCreateAccessToken: function () { + var that = this; + + superagent.post('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) { + if (error && !result) return that.$message.error(error.message); + + that.refreshAccessTokens(); + }); + }, + onDeleteAccessToken: function (token) { + var that = this; + + this.$confirm('All actions from apps using this token will fail!', 'Really delete this access token?', { confirmButtonText: 'Yes Delete', cancelButtonText: 'No' }).then(function () { + superagent.delete('/api/tokens/' + token).query({ access_token: localStorage.accessToken }).end(function (error, result) { + if (error && !result) return that.$message.error(error.message); + + that.refreshAccessTokens(); + }); + }).catch(function () {}); + + }, prettyDate: function (row, column, cellValue, index) { var date = new Date(cellValue), diff = (((new Date()).getTime() - date.getTime()) / 1000), @@ -325,7 +496,7 @@ var app = new Vue({ }, loadDirectory: loadDirectory, onUp: function () { - window.location.hash = sanitize(app.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); + window.location.hash = sanitize(this.path.split('/').slice(0, -1).filter(function (p) { return !!p; }).join('/')); }, open: open, drop: drop, @@ -333,14 +504,10 @@ var app = new Vue({ } }); -getProfile(localStorage.accessToken, function (error) { - if (error) return console.error(error); - - loadDirectory(window.location.hash.slice(1)); -}); +initWithToken(localStorage.accessToken); $(window).on('hashchange', function () { - loadDirectory(window.location.hash.slice(1)); + loadDirectory(decode(window.location.hash.slice(1))); }); })();