From 1949f1818b65a7048e6a6999b3847541e9699f79 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sat, 22 May 2021 18:44:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=94=B9=E4=B8=BA=E9=9A=8F?=
 =?UTF-8?q?=E6=9C=BA=E6=AD=8C=E6=9B=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/index.html |  2 +-
 web/index.js   | 43 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/web/index.html b/web/index.html
index 31553a2..bbc4f95 100644
--- a/web/index.html
+++ b/web/index.html
@@ -12,7 +12,7 @@
 		<header class="header">
 			<h3 class="title">MSW Open Music Project</h3>
 			<nav class="nav">
-				<router-link class="nav-link" to="/">Files</router-link>
+				<router-link class="nav-link" to="/search_files">Files</router-link>
 				<router-link class="nav-link" to="/search_folders">Folders</router-link>
 				<router-link class="nav-link" to="/update_database">Manage</router-link>
 			</nav>
diff --git a/web/index.js b/web/index.js
index fa0c26f..dcde135 100644
--- a/web/index.js
+++ b/web/index.js
@@ -347,8 +347,48 @@ const component_search_files = {
 	},
 }
 
+const component_get_random_files = {
+	emits: ['play_audio'],
+	data() {
+		return {
+			files: [],
+		}
+	},
+	template: `
+<button @click="get_random_files">Refresh</button>
+<table>
+	<thead>
+		<tr>
+			<th>ID</th>
+			<th>Filename</th>
+			<th>Folder Name</th>
+			<th>Size</th>
+			<th>Action</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr v-for="file in files">
+			<component-file :file=file @play_audio="$emit('play_audio', file)"></component-file>
+		</tr>
+	</tbody>
+</table>
+`,
+	mounted() {
+		this.get_random_files()
+	},
+	methods: {
+		get_random_files() {
+			axios.get('/api/v1/get_random_files'
+			).then(response => {
+				this.files = response.data.files;
+			})
+		}
+	},
+}
+
 const routes = [
-	{ path: '/', component: component_search_files},
+	{ path: '/', component: component_get_random_files},
+	{ path: '/search_files', component: component_search_files},
 	{ path: '/search_folders', component: component_search_folders},
 	{ path: '/update_database', component: component_update_database},
 ]
@@ -376,6 +416,7 @@ app.component('component-update-database', component_update_database)
 app.component('component-file', component_file)
 app.component('component-audio-player', component_audio_player)
 app.component('component-search-files', component_search_files)
+app.component('component-get-random-files', component_get_random_files)
 
 app.use(router)