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