starting to implement search page

appinfo/routes.php

@@ -27,21 +27,80 @@ return [
   		'station_api' => ['url' => '/api/0.1/stations']
   	],
     'routes' => [
+
        // Web page templates
-	   ['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+  	   [
-     ['name' => 'page#index', 'url' => '/top', 'verb' => 'GET', 'postfix' => 'top'],
+          'name' => 'page#index',
-     ['name' => 'page#index', 'url' => '/recent', 'verb' => 'GET', 'postfix' => 'recent'],
+          'url' => '/',
-     ['name' => 'page#index', 'url' => '/new', 'verb' => 'GET', 'postfix' => 'new'],
+          'verb' => 'GET'
-     ['name' => 'page#index', 'url' => '/favorites', 'verb' => 'GET', 'postfix' => 'favorites'],
+       ],
-     ['name' => 'page#index', 'url' => '/categories', 'verb' => 'GET', 'postfix' => 'categories'],
+       [
-     ['name' => 'page#index', 'url' => '/search', 'verb' => 'GET', 'postfix' => 'search'],
+          'name' => 'page#index',
+          'url' => '/top',
+          'verb' => 'GET',
+          'postfix' => 'top'
+       ],
+       [
+          'name' => 'page#index',
+          'url' => '/recent',
+          'verb' => 'GET',
+          'postfix' => 'recent'
+       ],
+       [
+          'name' => 'page#index',
+          'url' => '/new',
+          'verb' => 'GET',
+          'postfix' => 'new'
+       ],
+       [
+         'name' => 'page#index',
+         'url' => '/favorites',
+         'verb' => 'GET',
+         'postfix' => 'favorites'
+       ],
+       [
+         'name' => 'page#index',
+         'url' => '/categories',
+         'verb' => 'GET',
+         'postfix' => 'categories'
+       ],
+       [
+         'name' => 'page#index',
+         'url' => '/search/{query}',
+         'verb' => 'GET',
+         'postfix' => 'search',
+         'requirements' => ['query' => '.+'],
+       ],
+
        // Settings
-     ['name' => 'settings#set_menu_state', 'url' => '/settings/menuState', 'verb' => 'POST'],
+       [
-     ['name' => 'settings#get_menu_state', 'url' => '/settings/menuState', 'verb' => 'GET'],
+         'name' => 'settings#set_menu_state',
-     ['name' => 'settings#set_volume_state', 'url' => '/settings/volumeState', 'verb' => 'POST'],
+         'url' => '/settings/menuState',
-     ['name' => 'settings#get_volume_state', 'url' => '/settings/volumeState', 'verb' => 'GET'],
+         'verb' => 'POST'
+       ],
+       [
+         'name' => 'settings#get_menu_state',
+         'url' => '/settings/menuState',
+         'verb' => 'GET'
+       ],
+       [
+         'name' => 'settings#set_volume_state',
+         'url' => '/settings/volumeState',
+         'verb' => 'POST'
+       ],
+       [
+         'name' => 'settings#get_volume_state',
+         'url' => '/settings/volumeState',
+         'verb' => 'GET'
+       ],
+
        // Api
-     ['name' => 'station_api#preflighted_cors', 'url' => '/api/0.1/{path}',
+       [
-        'verb' => 'OPTIONS', 'requirements' => ['path' => '.+']]
+         'name' => 'station_api#preflighted_cors',
+         'url' => '/api/0.1/{path}',
+         'verb' => 'OPTIONS',
+         'requirements' => ['path' => '.+']
+       ]
+
     ]
 ];

src/components/Main.vue

@@ -75,6 +75,7 @@ export default {
 	},
 	created() {
 		this.loadSettings()
+		console.log('my route ', this.$route.name)
 	},
 	mounted() {
 		this.loadStations()

src/components/Navigation.vue

@@ -22,6 +22,7 @@
 				icon="icon-files-dark"
 				:title="t('radio', 'Categories')" />
 			<AppNavigationItem
+				v-if="isSearch"
 				:to="{ name: 'SEARCH' }"
 				icon="icon-search"
 				:title="t('radio', 'Search')" />
@@ -45,5 +46,10 @@ export default {
 		AppNavigationItem,
 		Player,
 	},
+	computed: {
+		isSearch() {
+			return this.$route.name === 'SEARCH'
+		},
+	},
 }
 </script>

src/router.js

@@ -39,7 +39,7 @@ const router = new Router({
 			name: 'CATEGORIES',
 		},
 		{
-			path: '/search',
+			path: '/search/:query',
 			component: Main,
 			name: 'SEARCH',
 		},