Favourite station functionality on stations and re-enabled on home

frontend/src/pages/Home/index.vue

@@ -6,9 +6,7 @@
 			<div class="group">
 				<div class="group-title">
 					<div>
-						<h1>
-							Stations
-						</h1>
+						<h1>Stations</h1>
 					</div>
 					<a
 						v-if="loggedIn"
@@ -64,6 +62,18 @@
 					<div class="card-content">
 						<div class="media">
 							<div class="media-left displayName">
+								<i
+									v-if="loggedIn && !isFavorite(station)"
+									@click="favoriteStation($event, station)"
+									class="favorite material-icons"
+									>star_border</i
+								>
+								<i
+									v-if="loggedIn && isFavorite(station)"
+									@click="unfavoriteStation($event, station)"
+									class="favorite material-icons"
+									>star</i
+								>
 								<h5>{{ station.displayName }}</h5>
 								<i
 									v-if="station.type === 'official'"
@@ -461,7 +471,13 @@ html {
 				display: flex;
 				line-height: 30px;
 				max-height: 30px;
-
+				.favorite {
+					position: relative;
+					padding-right: 5px;
+					color: $yellow;
+					top: -1px;
+					font-size: 28px;
+				}
 				h5 {
 					font-size: 20px;
 					font-weight: 400;

frontend/src/pages/Station/index.vue

@@ -13,8 +13,19 @@
 						<div class="row" id="station-name">
 							<h1>{{ station.displayName }}</h1>
 							<a href="#">
-								<!-- TODO: Add favourite functionality -->
-								<i class="material-icons">star</i>
+								<!-- Favourite Station Button -->
+								<i
+									v-if="loggedIn && favoriteStation"
+									@click="unfavoriteStation($event)"
+									class="material-icons"
+									>star</i
+								>
+								<i
+									v-if="loggedIn && !favoriteStation"
+									@click="addfavoriteStation($event)"
+									class="material-icons"
+									>star_border</i
+								>
 							</a>
 						</div>
 
@@ -365,7 +376,8 @@ export default {
 			lastTimeRequestedIfCanAutoplay: 0,
 			seeking: false,
 			playbackRate: 1,
-			volumeSliderValue: 0
+			volumeSliderValue: 0,
+			favoriteStation: false
 		};
 	},
 	computed: {
@@ -565,6 +577,15 @@ export default {
 			this.socket.on("event:queueLockToggled", locked => {
 				this.station.locked = locked;
 			});
+
+			this.socket.on("event:user.favoritedStation", stationId => {
+				if (stationId === this.station._id) this.favoriteStation = true;
+			});
+
+			this.socket.on("event:user.unfavoritedStation", stationId => {
+				if (stationId === this.station._id)
+					this.favoriteStation = false;
+			});
 		});
 
 		if (JSON.parse(localStorage.getItem("muted"))) {
@@ -1311,6 +1332,43 @@ export default {
 					this.exists = false;
 				}
 			});
+			this.socket.emit("users.getFavoriteStations", data => {
+				if (
+					data.status === "success" &&
+					data.favoriteStations.indexOf(this.station._id) !== -1
+				)
+					this.favoriteStation = true;
+			});
+		},
+		addfavoriteStation(event) {
+			event.preventDefault();
+			this.socket.emit(
+				"stations.favoriteStation",
+				this.station._id,
+				res => {
+					if (res.status === "success") {
+						new Toast({
+							content: "Successfully favorited station.",
+							timeout: 4000
+						});
+					} else new Toast({ content: res.message, timeout: 8000 });
+				}
+			);
+		},
+		unfavoriteStation(event) {
+			event.preventDefault();
+			this.socket.emit(
+				"stations.unfavoriteStation",
+				this.station._id,
+				res => {
+					if (res.status === "success") {
+						new Toast({
+							content: "Successfully unfavorited station.",
+							timeout: 4000
+						});
+					} else new Toast({ content: res.message, timeout: 8000 });
+				}
+			);
 		},
 		...mapActions("modals", ["openModal"]),
 		...mapActions("station", [