heimoshuiyu/msw-open-music
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Loading ...

Browse Source
This commit is contained in:
黑墨水鱼
2021-05-24 14:35:41 +08:00
parent 4fb763e0d9
commit dabb4c31ac
1 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/index.js
View File

@@ -12,15 +12,30 @@ const component_search_folders = {
folder_limit: 10,
files_in_folder: [],
playing_audio_file: {},
is_loading: false,
}
},
computed: {
computed_folders_page() {
if (this.is_loading) {
return 'Loading...'
}
return this.offset + ' ~ ' + (this.offset + this.folders.length)
},
computed_files_page() {
if (this.is_loading) {
return 'Loading...'
}
return this.folder_offset + ' ~ ' + (this.folder_offset + this.files_in_folder.length)
},
},
template: `
<div class="page">
<div class="search_toolbar">
<input type="text" v-model="search_foldernames" placeholder="Enter folder name" />
<input type="text" @keyup.enter="first_search_folders" v-model="search_foldernames" placeholder="Enter folder name" />
<button @click="first_search_folders">Search Folders</Button>
<button @click="last_page">Last Page</button>
<span>{{ offset }}~{{ offset + folders.length }}</span>
<span>{{ computed_folders_page }}</span>
<button @click="next_page">Next Page</button>
</div>
@@ -41,7 +56,7 @@ const component_search_folders = {
<div class="search_toolbar">
<button @click="folder_last_page">Last Page</button>
<span>{{ folder_offset }}~{{ folder_offset + files_in_folder.length }}</span>
<span>{{ computed_files_page }}</span>
<button @click="folder_next_page">Next Page</button>
</div>
<table>
@@ -85,11 +100,13 @@ const component_search_folders = {
this.get_files_in_folder()
},
get_files_in_folder() {
this.is_loading = true
axios.post('/api/v1/get_files_in_folder', {
folder_id: this.folder.id,
limit: this.folder_limit,
offset: this.folder_offset,
}).then((response) => {
this.is_loading = false
this.files_in_folder = response.data.files
})
},
@@ -110,11 +127,13 @@ const component_search_folders = {
this.search_folders()
},
search_folders() {
this. is_loading = true
axios.post('/api/v1/search_folders', {
foldername: this.search_foldernames,
limit: this.limit,
offset: this.offset,
}).then((response) => {
this.is_loading = false
this.folders = response.data.folders
})
},
@@ -447,13 +466,21 @@ const component_audio_player = {
const component_search_files = {
emits: ['play_audio'],
props: ['token'],
computed: {
computed_files_page() {
if (this.is_loading) {
return 'Loading...'
}
return this.offset + ' ~ ' + (this.offset + this.files.length)
},
},
template: `
<div class="page">
<div class="search_toolbar">
<input type="text" name="filename" v-model="search_filenames" placeholder="Enter filename" />
<input type="text" name="filename" @keyup.enter="first_search_files" v-model="search_filenames" placeholder="Enter filename" />
<button @click="first_search_files">Search</button>
<button @click="last_page">Last Page</button>
<span>{{ offset }}~{{ offset + files.length }}</span>
<span>{{ computed_files_page }}</span>
<button @click="next_page">Next Page</button>
</div>
<table>
@@ -480,6 +507,7 @@ const component_search_files = {
offset: 0,
limit: 10,
playing_audio_file: {},
is_loading: false,
}
},
methods: {
@@ -488,11 +516,13 @@ const component_search_files = {
this.search_files()
},
search_files() {
this.is_loading = true
axios.post('/api/v1/search_files', {
filename: this.search_filenames,
limit: this.limit,
offset: this.offset,
}).then((response) => {
this.is_loading = false
this.files = response.data.files
})
},
@@ -517,12 +547,21 @@ const component_get_random_files = {
data() {
return {
files: [],
is_loading: false,
}
},
computed: {
computed_refresh() {
if (this.is_loading) {
return 'Loading...'
}
return 'Refresh'
},
},
template: `
<div class="page">
<div class="search_toolbar">
<button @click="get_random_files">Refresh</button>
<button @click="get_random_files">{{ computed_refresh }}</button>
</div>
<table>
<thead>
@@ -546,8 +585,10 @@ const component_get_random_files = {
},
methods: {
get_random_files() {
this.is_loading = true
axios.get('/api/v1/get_random_files'
).then(response => {
this.is_loading = false
this.files = response.data.files;
})
}