From 47619888b3394eed92708ea4dbfe2817e83d3d2f Mon Sep 17 00:00:00 2001 From: heimoshuiyu Date: Fri, 21 May 2021 16:35:12 +0800 Subject: [PATCH] =?UTF-8?q?files=5Fsearch=20=E5=89=8D=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/index.html | 16 +++++++ web/index.js | 112 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+) create mode 100644 web/index.html create mode 100644 web/index.js diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..69dc96d --- /dev/null +++ b/web/index.html @@ -0,0 +1,16 @@ + + + + + + + +
+ +
+ + + + + + diff --git a/web/index.js b/web/index.js new file mode 100644 index 0000000..4168cc0 --- /dev/null +++ b/web/index.js @@ -0,0 +1,112 @@ +const app = Vue.createApp({ + data() { + return { + search_filenames: '', + download_total: 0, + download_loaded: 0, + } + }, + methods: { + }, +}) + +app.component('component-file', { + props: ['file'], + template: ` +{{ file.id }} +{{ file.filename }} +{{ computed_readable_size }} + +`, + data() { + return { + download_loaded: 0, + } + }, + methods: { + download_file(file) { + axios({ + url: '/api/v1/get_file', + method: 'POST', + responseType: 'blob', // important + data: { + id: file.id, + }, + onDownloadProgress: ProgressEvent => { + console.log(ProgressEvent.loaded) + this.download_loaded = ProgressEvent.loaded + } + }).then((response) => { + const url = window.URL.createObjectURL(new Blob([response.data])); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', file.filename); + document.body.appendChild(link); + link.click(); + }) + }, + }, + computed: { + computed_download_status() { + if (this.download_loaded === 0) { + return 'Download' + } else { + return Math.round(this.download_loaded / this.file.filesize * 100) + '%' + } + }, + computed_readable_size() { + let filesize = this.file.filesize + if (filesize < 1024) { + return filesize + } + if (filesize < 1024 * 1024) { + return Math.round(filesize / 1024) + 'K' + } + if (filesize < 1024 * 1024 * 1024) { + return Math.round(filesize / 1024 / 1024) + 'M' + } + if (filesize < 1024 * 1024 * 1024 * 1024) { + return Math.round(filesize / 1024 / 1024 / 1024) + 'G' + } + }, + }, +}) + +app.component('component-search-files', { + template: ` + + + + + + + + + + + + + + + + +
IDFilenameSizeAction
+`, + data() { + return { + files: [], + } + }, + methods: { + search_files(app) { + axios.post('http://localhost:8080/api/v1/search_files', { + filename: app.search_filenames, + limit: 10, + offset: 0, + }).then(function(response) { + app.files = response.data.files + }) + }, + }, +}) +app.mount('#app')