implementing categories

src/components/Main.vue

@@ -63,6 +63,7 @@ export default {
 		favorites: [],
 		showSidebar: false,
 		sidebarStation: {},
+		queryParams: {},
 	}),
 	computed: {
 		player() {
@@ -223,7 +224,6 @@ export default {
 				html5: true,
 				volume: vm.player.volume,
 				onplay() {
-					console.log('onplay')
 					vm.$store.dispatch('isPlaying', true)
 					vm.$store.dispatch('isBuffering', false)
 				},
@@ -284,36 +284,63 @@ export default {
 			let sortBy = 'clickcount'
 
 			if (vm.$route.name === 'CATEGORIES') {
-				vm.tableData = [
-					{
-						name: t('radio', 'Countries'),
-						type: 'folder',
-						path: '#/categories/countries',
-					},
-					{
-						name: t('radio', 'States'),
-						type: 'folder',
-						path: '#/categories/states',
-					},
-					{
-						name: t('radio', 'Languages'),
-						type: 'folder',
-						path: '#/categories/languages',
-					},
-					{
-						name: t('radio', 'Tags'),
-						type: 'folder',
-						path: '#/categories/tags',
-					},
-				]
-				vm.pageLoading = false
-				return true
+				if (vm.$route.path === '/categories') {
+					vm.tableData = [
+						{
+							name: t('radio', 'Countries'),
+							type: 'folder',
+							path: '/categories/countries',
+						},
+						{
+							name: t('radio', 'States'),
+							type: 'folder',
+							path: '/categories/states',
+						},
+						{
+							name: t('radio', 'Languages'),
+							type: 'folder',
+							path: '/categories/languages',
+						},
+						{
+							name: t('radio', 'Tags'),
+							type: 'folder',
+							path: '/categories/tags',
+						},
+					]
+					vm.pageLoading = false
+					return true
+				} else if (vm.$route.params.category === 'tags') {
+					if (vm.$route.params.query) {
+						queryURI = this.$apiUrl + '/json/stations/search?tag=' + vm.$route.params.query + '&tagExact=true'
+					} else {
+						queryURI = this.$apiUrl + '/json/tags'
+					}
+				} else if (vm.$route.params.category === 'countries') {
+					if (vm.$route.params.query) {
+						queryURI = this.$apiUrl + '/json/stations/search?country=' + vm.$route.params.query + '&countryExact=true'
+					} else {
+						queryURI = this.$apiUrl + '/json/countries'
+					}
+				} else if (vm.$route.params.category === 'states') {
+					if (vm.$route.params.query) {
+						queryURI = this.$apiUrl + '/json/stations/search?state=' + vm.$route.params.query + '&stateExact=true'
+					} else {
+						queryURI = this.$apiUrl + '/json/states'
+					}
+				} else if (vm.$route.params.category === 'languages') {
+					if (vm.$route.params.query) {
+						queryURI = this.$apiUrl + '/json/stations/search?language=' + vm.$route.params.query + '&languageExact=true'
+					} else {
+						queryURI = this.$apiUrl + '/json/languages'
+					}
+				}
 			}
 
 			// Skip loading more stations on certain sites
 			if (vm.tableData.length > 0
 				&& (vm.$route.name === 'FAVORITES'
-				|| vm.$route.name === 'RECENT')) {
+				|| vm.$route.name === 'RECENT'
+				|| vm.$route.name === 'CATEGORIES')) {
 				return true
 			}
 
@@ -330,23 +357,34 @@ export default {
 				queryURI = generateUrl('/apps/radio/api/recent')
 			}
 
+			if (menuState !== 'CATEGORIES') {
+				vm.queryParams = {
+					limit: 20,
+					order: sortBy,
+					reverse: true,
+					offset: vm.tableData.length,
+				}
+			} else {
+				vm.queryParams = {}
+			}
+
 			try {
 				await axios.get(queryURI, {
-					params: {
-						limit: 20,
-						order: sortBy,
-						reverse: true,
-						offset: vm.tableData.length,
-					},
+					params: vm.queryParams,
 				})
 					.then(function(response) {
 						for (let i = 0; i < response.data.length; i++) {
 							const obj = response.data[i]
-							let blurHash = vm.blurHashes[obj.stationuuid]
-							if (!blurHash) {
-								blurHash = 'L1TSUA?bj[?b~qfQfQj[ayfQfQfQ'
+							if (obj.stationuuid) {
+								let blurHash = vm.blurHashes[obj.stationuuid]
+								if (!blurHash) {
+									blurHash = 'L1TSUA?bj[?b~qfQfQj[ayfQfQfQ'
+								}
+								response.data[i].blurHash = blurHash
+							} else {
+								response.data[i].type = 'folder'
+								response.data[i].path = vm.$route.path + '/' + obj.name
 							}
-							response.data[i].blurHash = blurHash
 						}
 						vm.tableData = vm.tableData.concat(response.data)
 						vm.pageLoading = false

src/components/Table.vue

@@ -10,7 +10,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<template v-if="stationData[0].type!=='folder'">
+			<template v-if="!isFolder">
 				<tr
 					v-for="(station, idx) in stationData"
 					:key="idx"
@@ -55,11 +55,11 @@
 					</td>
 				</tr>
 			</template>
-			<template v-if="stationData[0].type==='folder'">
+			<template v-if="isFolder">
 				<tr
 					v-for="(station, idx) in stationData"
 					:key="idx"
-					@click="doPlay(idx, station)">
+					@click="changeRoute(station.path)">
 					<td>
 						<span class="icon-folder" />
 					</td>
@@ -98,6 +98,16 @@ export default {
 	data: () => ({
 		activeItem: null,
 	}),
+	computed: {
+		isFolder() {
+			if (this.stationData[0]) {
+				if (this.stationData[0].type === 'folder') {
+					return true
+				}
+			}
+			return false
+		},
+	},
 	methods: {
 		doPlay(idx, station) {
 			this.activeItem = idx
@@ -109,6 +119,9 @@ export default {
 		toggleSidebar(station) {
 			this.$emit('toggleSidebar', station)
 		},
+		changeRoute(path) {
+			this.$router.push({ path })
+		},
 	},
 }
 </script>

src/router.js

@@ -33,7 +33,7 @@ const router = new Router({
 			name: 'FAVORITES',
 		},
 		{
-			path: '/categories',
+			path: '/categories/:category?/:query?',
 			component: Main,
 			name: 'CATEGORIES',
 		},