113 lines
2.3 KiB
JavaScript
113 lines
2.3 KiB
JavaScript
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
search_filenames: '',
|
|
download_total: 0,
|
|
download_loaded: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
},
|
|
})
|
|
|
|
app.component('component-file', {
|
|
props: ['file'],
|
|
template: `
|
|
<td>{{ file.id }}</td>
|
|
<td>{{ file.filename }}</td>
|
|
<td>{{ computed_readable_size }}</td>
|
|
<td><button @click="download_file(file)">{{ computed_download_status }}</button></td>
|
|
`,
|
|
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: `
|
|
<input type="text" name="filename" v-model="search_filenames" />
|
|
<input type="button" value="Search" @click="search_files(this)" />
|
|
<table border="1">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Filename</th>
|
|
<th>Size</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="file in files">
|
|
<component-file :file=file></component-file>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`,
|
|
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')
|