further tests with routing

src/components/Main.vue

@@ -45,27 +45,52 @@ export default {
 		tableData: [],
 		offset: 0,
 	}),
+	watch: {
+		$route: 'onRoute',
+	},
 	mounted() {
 		this.loadStations()
 		this.scroll()
 	},
 	methods: {
+		async onRoute() {
+			const route = this.$route
+			switch (route.name) {
+			case this.routes.TOP:
+				console.log('new route: TOP')
+				break
+			case this.routes.RECENT:
+				console.log('new route: RECENT')
+				break
+			case this.routes.FAVORITES:
+				console.log('new route: FAVORITES')
+				break
+			case this.routes.CATEGORIES:
+				console.log('new route: CATEGORIES')
+				break
+			}
+		},
 		/**
-			 * Create a new note by sending the information to the server
-			 * @param {Object} note Note object
+			 * Favor a new station by sending the information to the server
+			 * @param {Object} station Station object
 			 */
 		async doFavor(station) {
 			try {
-				const response = await axios.post(generateUrl('/apps/radio/notes'), note)
-				const index = this.notes.findIndex((match) => match.id === this.currentNoteId)
-				this.$set(this.notes, index, response.data)
-				this.currentNoteId = response.data.id
+				const response = await axios.post(generateUrl('/apps/radio/radio'), station)
+				console.log(response)
+				// const index = this.stations.findIndex((match) => match.id === this.currentStationId)
+				// this.$set(this.stations, index, response.data)
+				// this.currentStationId = response.data.id
 			} catch (e) {
 				console.error(e)
 				showError(t('radio', 'Could not favor station'))
 			}
 			this.updating = false
 		},
+		/**
+			 * Start playing a radio station and counting the playback
+			 * @param {Object} station Station object
+			 */
 		doPlay(station) {
 			if (audioPlayer !== null) {
 				audioPlayer.fade(100, 0, 500) // FIXME persistent volume state
@@ -85,6 +110,9 @@ export default {
 			const stationMetadata = document.getElementById('stationMetadata')
 			stationMetadata.textContent = station.name
 		},
+		/**
+		 * Fetching radio stations using Radio-Browser.info API
+		 */
 		loadStations() {
 			const vm = this
 			this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/search',
@@ -100,12 +128,6 @@ export default {
 					vm.offset += 20
 				})
 		},
-		watch: {
-	    $route(to, from) {
-	        console.log(to)
-	        console.log(from)
-			},
-	  },
 		scroll() {
 			window.onscroll = () => {
 				if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {

src/main.js

@@ -35,10 +35,5 @@ Vue.prototype.$jquery = jquery
 export default new Vue({
 	el: '#content',
 	router,
-	methods: {
-		doPlay() {
-			console.log('event handled!')
-		},
-	},
 	render: h => h(App),
 })