fix browsing categories again

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Set user agent http header for remote API
   [221](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/221) @onny
 - Update favorite and recent categories without page reload
+  [242](https://git.project-insanity.org/onny/nextcloud-app-radio/-/issues/242) @onny
 
 ### Changed
 - Update npm modules

src/services/RadioBrowserApi.js

@@ -50,8 +50,10 @@ export class RadioBrowserApi {
 	queryList(listName, offset) {
 
 		let order = 'clickcount'
+		let reverse = true
 		if (listName === 'NEW') {
 			order = 'lastchangetime'
+			reverse = false
 		}
 
 		delete axios.defaults.headers.requesttoken
@@ -59,7 +61,7 @@ export class RadioBrowserApi {
 			params: {
 				limit: 20,
 				order,
-				reverse: true,
+				reverse,
 				offset,
 			},
 		})
@@ -101,4 +103,68 @@ export class RadioBrowserApi {
 
 	}
 
+	queryCategory(categoryName, offset = 0) {
+
+		delete axios.defaults.headers.requesttoken
+		return axios.get(this.url() + '/json/' + categoryName, {
+			params: {
+				limit: 20,
+				offset,
+			},
+		})
+			.then(
+				(response) => {
+					for (let i = 0; i < response.data.length; i++) {
+						const obj = response.data[i]
+						response.data[i].type = 'folder'
+						response.data[i].path = '/categories/' + categoryName + '/' + obj.name
+					}
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+
+	}
+
+	queryByCategory(categoryName, categoryQuery, offset = 0) {
+
+		let categoryNameShort = ''
+		if (categoryName === 'countries') {
+			categoryNameShort = 'country'
+		} else if (categoryName === 'tags') {
+			categoryNameShort = 'tag'
+		} else if (categoryName === 'states') {
+			categoryNameShort = 'state'
+		} else if (categoryName === 'languages') {
+			categoryNameShort = 'language'
+		}
+		console.log(categoryNameShort, categoryQuery)
+		delete axios.defaults.headers.requesttoken
+		return axios.get(this.url() + '/json/stations/search?' + categoryNameShort
+			+ '=' + categoryQuery + '&' + categoryNameShort + 'Exact=true', {
+			params: {
+				limit: 20,
+				order: 'clickcount',
+				offset,
+			},
+		})
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+
+	}
+
 }

src/views/Main.vue

@@ -142,7 +142,8 @@ export default {
 		]),
 
 		onResize({ width, height }) {
-			const contentHeight = document.getElementById('app-content-vue').scrollHeight
+			const contentHeight
+				= document.getElementById('app-content-vue').scrollHeight
 			const tableHeight = height
 			if (tableHeight < contentHeight) {
 				this.preFill()
@@ -203,16 +204,19 @@ export default {
 			if (menuState === 'FAVORITES' || menuState === 'RECENT') {
 				this.pageLoading = false
 			} else if (menuState === 'SEARCH') {
-				const stations = await apiClient.searchStations(this.$route.params.query, this.tableData.length)
+				const stations
+					= await apiClient.searchStations(this.$route.params.query,
+						this.tableData.length)
 				this.tableData = this.tableData.concat(stations)
 				this.pageLoading = false
 			} else if (menuState === 'NEW' || menuState === 'TOP') {
-				const stations = await apiClient.queryList(menuState, this.tableData.length)
+				const stations
+					= await apiClient.queryList(menuState, this.tableData.length)
 				this.tableData = this.tableData.concat(stations)
 				this.pageLoading = false
 			}
 
-			/* if (this.$route.name === 'CATEGORIES') {
+			if (this.$route.name === 'CATEGORIES') {
 				if (this.$route.path === '/categories') {
 					this.tableData = [
 						{
@@ -238,58 +242,19 @@ export default {
 					]
 					this.pageLoading = false
 					return true
-				} else if (this.$route.params.category === 'tags') {
+				} else if (this.$route.params.category && !this.$route.params.query) {
-					if (this.$route.params.query) {
+					const stations
-						queryURI = this.$apiUrl + '/json/stations/search?tag=' + this.$route.params.query + '&tagExact=true'
+						= await apiClient.queryCategory(this.$route.params.category)
-					} else {
+					this.tableData = this.tableData.concat(stations)
-						queryURI = this.$apiUrl + '/json/tags'
+					this.pageLoading = false
-					}
+				} else if (this.$route.params.category && this.$route.params.query) {
-				} else if (this.$route.params.category === 'countries') {
+					const stations
-					if (this.$route.params.query) {
+						= await apiClient.queryByCategory(this.$route.params.category,
-						queryURI = this.$apiUrl + '/json/stations/search?country=' + this.$route.params.query + '&countryExact=true'
+							this.$route.params.query)
-					} else {
+					this.tableData = this.tableData.concat(stations)
-						queryURI = this.$apiUrl + '/json/countries'
+					this.pageLoading = false
-					}
-				} else if (this.$route.params.category === 'states') {
-					if (this.$route.params.query) {
-						queryURI = this.$apiUrl + '/json/stations/search?state=' + this.$route.params.query + '&stateExact=true'
-					} else {
-						queryURI = this.$apiUrl + '/json/states'
-					}
-				} else if (this.$route.params.category === 'languages') {
-					if (this.$route.params.query) {
-						queryURI = this.$apiUrl + '/json/stations/search?language=' + this.$route.params.query + '&languageExact=true'
-					} else {
-						queryURI = this.$apiUrl + '/json/languages'
-					}
 				}
-			} */
+			}
-
-			/* try {
-				delete axios.defaults.headers.requesttoken
-				await axios.get(queryURI, {
-					params: vm.queryParams,
-				})
-					.then(function(response) {
-						for (let i = 0; i < response.data.length; i++) {
-							const obj = response.data[i]
-							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
-							}
-						}
-						vm.tableData = vm.tableData.concat(response.data)
-						vm.pageLoading = false
-					})
-			} catch (error) {
-				showError(t('radio', 'Could not fetch stations from remote API'))
-			} */
 
 		},
 
@@ -298,7 +263,8 @@ export default {
 		 */
 		scroll() {
 			window.onscroll = () => {
-				if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+				if ((window.innerHeight + window.scrollY)
+					>= document.body.scrollHeight) {
 					const route = this.$route
 					this.loadStations(route.name)
 		    }