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: `
+
+
+
+
+
+ | ID |
+ Filename |
+ Size |
+ Action |
+
+
+
+
+
+
+
+
+`,
+ 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')