starting to implement remove station from favorites

src/components/Main.vue

@@ -97,14 +97,26 @@ export default {
 			 * @param {Object} station Station object
 			 */
 		async doFavor(station) {
-			try {
-				await axios
-					.post(generateUrl('/apps/radio/api/favorites'), station)
-					.then(response => {
-						this.favorites.push(station.stationuuid)
-					})
-			} catch (error) {
-				showError(t('radio', 'Could not favor station'))
+			if (this.favorites.includes(station.stationuuid)) {
+				try {
+					await axios
+						.delete(generateUrl(`/apps/radio/api/favorites/${station.id}`))
+						.then(response => {
+							this.favorites = this.favorites.filter(item => item !== station.stationuuid)
+						})
+				} catch (error) {
+					showError(t('radio', 'Could not remove station from favorites'))
+				}
+			} else {
+				try {
+					await axios
+						.post(generateUrl('/apps/radio/api/favorites'), station)
+						.then(response => {
+							this.favorites.push(station.stationuuid)
+						})
+				} catch (error) {
+					showError(t('radio', 'Could not favor station'))
+				}
 			}
 		},
 

src/components/Table.vue

@@ -30,9 +30,20 @@
 				</td>
 				<td class="actionColumn">
 					<Actions>
-						<ActionButton icon="icon-star" :close-after-click="true" @click="doFavor(idx, station)">
+						<ActionButton
+							v-if="!favorites.includes(station.stationuuid)"
+							icon="icon-star"
+							:close-after-click="true"
+							@click="doFavor(idx, station)">
 							{{ t('radio', 'Add to favorites') }}
 						</ActionButton>
+						<ActionButton
+							v-if="favorites.includes(station.stationuuid)"
+							icon="icon-star"
+							:close-after-click="true"
+							@click="doFavor(idx, station)">
+							{{ t('radio', 'Remove from favorites') }}
+						</ActionButton>
 						<ActionButton icon="icon-info" :close-after-click="true">
 							{{ t('radio', 'Details') }}
 						</ActionButton>