starting to implement remove station from favorites

src/components/Main.vue

@@ -97,6 +97,17 @@ export default {
 			 * @param {Object} station Station object
 			 */
 		async doFavor(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)
@@ -106,6 +117,7 @@ export default {
 				} 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>