Allowed for removing and checking if genre doesn't already exist in Admin Stations

frontend/components/Admin/Stations.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="columns is-mobile">
-		<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
-			<table class="table is-striped">
+	<div class='columns is-mobile'>
+		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
+			<table class='table is-striped'>
 				<thead>
 					<tr>
 						<td>ID</td>
@@ -12,72 +12,75 @@
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(index, station) in stations" track-by="$index">
+					<tr v-for='(index, station) in stations' track-by='$index'>
 						<td>
-							<p class="control">
-								<input class="input" type="text" :value="station.id" v-model="station._id">
+							<p class='control'>
+								<input class='input' type='text' :value='station.id' v-model='station._id'>
 							</p>
 						</td>
 						<td>
-							<p class="control">
-								<input class="input" type="text" :value="station.displayName" v-model="station.displayName">
+							<p class='control'>
+								<input class='input' type='text' :value='station.displayName' v-model='station.displayName'>
 							</p>
 						</td>
 						<td>
-							<p class="control">
-								<input class="input" type="text" :value="station.description" v-model="station.description">
+							<p class='control'>
+								<input class='input' type='text' :value='station.description' v-model='station.description'>
 							</p>
 						</td>
 						<td>
-							<div class="control">
-								<input v-for="song in station.playlist" track-by="$index" class="input" type="text" :value="song.id" v-model="song.id">
+							<div class='control'>
+								<input v-for='song in station.playlist' track-by='$index' class='input' type='text' :value='song.id' v-model='song.id'>
 							</p>
 						</td>
 						<td>
-							<a class="button is-danger" @click="removeStation(index)">Remove</a>
+							<a class='button is-danger' @click='removeStation(index)'>Remove</a>
 						</td>
 					</tr>
 				</tbody>
 			</table>
-			<a class="button is-success" @click="update()">Save Changes</a>
+			<a class='button is-success' @click='update()'>Save Changes</a>
 		</div>
 	</div>
-	<div class="columns is-mobile">
-		<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
-			<div class="card is-fullwidth">
-				<header class="card-header">
-					<p class="card-header-title">Create official station</p>
+	<div class='columns is-mobile'>
+		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
+			<div class='card is-fullwidth'>
+				<header class='card-header'>
+					<p class='card-header-title'>Create official station</p>
 				</header>
-				<div class="card-content">
-					<div class="content">
-						<div class="control is-horizontal">
-							<div class="control is-grouped">
-								<p class="control is-expanded">
-									<input class="input" type="text" placeholder="Unique Identifier" v-model="newStation._id">
+				<div class='card-content'>
+					<div class='content'>
+						<div class='control is-horizontal'>
+							<div class='control is-grouped'>
+								<p class='control is-expanded'>
+									<input class='input' type='text' placeholder='Unique Identifier' v-model='newStation._id'>
 								</p>
-								<p class="control is-expanded">
-									<input class="input" type="text" placeholder="Display Name" v-model="newStation.displayName">
+								<p class='control is-expanded'>
+									<input class='input' type='text' placeholder='Display Name' v-model='newStation.displayName'>
 								</p>
 							</div>
 						</div>
-						<label class="label">Description</label>
-						<p class="control is-expanded">
-							<input class="input" type="text" placeholder="Short description" v-model="newStation.description">
+						<label class='label'>Description</label>
+						<p class='control is-expanded'>
+							<input class='input' type='text' placeholder='Short description' v-model='newStation.description'>
 						</p>
-						<label class="label">Default Song</label>
-						<p class="control is-expanded">
-							<input class="input" type="text" placeholder="YouTube ID" v-model="newStation.defaultSong">
+						<label class='label'>Default Song</label>
+						<p class='control is-expanded'>
+							<input class='input' type='text' placeholder='YouTube ID' v-model='newStation.defaultSong'>
 						</p>
-						<label class="label">Genres</label>
-						<p class="control has-addons">
-							<input class="input" id="new-genre" type="text" placeholder="Genre">
-							<a class="button is-info" @click="addGenre()">Add genre</a>
+						<label class='label'>Genres</label>
+						<p class='control has-addons'>
+							<input class='input' id='new-genre' type='text' placeholder='Genre'>
+							<a class='button is-info' @click='addGenre()'>Add genre</a>
 						</p>
-						<span class="tag is-info" v-for="genre in newStation.genres" track-by="$index">{{ genre }}<button class="delete is-info"></button></span>
+						<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
+							{{ genre }}
+							<button class='delete is-info' @click='removeGenre(index)'></button>
+						</span>
 					</div>
 				</div>
-				<footer class="card-footer">
-					<a class="card-footer-item" @click="createStation()">Create</a>
+				<footer class='card-footer'>
+					<a class='card-footer-item' @click='createStation()'>Create</a>
 				</footer>
 			</div>
 		</div>
@@ -97,27 +100,6 @@
 			}
 		},
 		methods: {
-			// saveQueueSongChanges: function() {
-			// 	let local = this;
-			// 	let songId = local.reviewSongId;
-			// 	let songObject = {};
-			// 	songObject._id = $("#reviewId").val();
-			// 	songObject.title = $("#reviewTitle").val();
-			// 	songObject.artists = $("#reviewArtists").val();
-			// 	songObject.genres = $("#reviewGenres").val();
-			// 	songObject.duration = $("#reviewDuration").val();
-			// 	songObject.skipDuration = $("#reviewSkipDuration").val();
-			// 	songObject.image = $("#reviewImage").val();
-			// 	if (typeof songObject.artists === "string") {
-			// 		songObject.artists = songObject.artists.split(", ");
-			// 	}
-			// 	if (typeof songObject.genres === "string") {
-			// 		songObject.genres = songObject.genres.split(", ");
-			// 	}
-			// 	local.socket.emit("/songs/queue/updateSong/:id", songId, songObject, function(data) {
-			// 		console.log(data);
-			// 	});
-			// },
 			createStation: function () {
 				let _this = this;
 				let { newStation: { _id, displayName, description, genres } } = this;
@@ -125,13 +107,13 @@
 				let playlist = [];
 				playlist.push(this.newStation.defaultSong);
 
-				if (_id == undefined) return Toast.methods.addToast('Field (YouTube ID) cannot be empty', 2000);
-				if (displayName == undefined) return Toast.methods.addToast('Field (Display Name) cannot be empty', 2000);
-				if (description == undefined) return Toast.methods.addToast('Field (Description) cannot be empty', 2000);
+				if (_id == undefined) return Toast.methods.addToast('Field (YouTube ID) cannot be empty', 3000);
+				if (displayName == undefined) return Toast.methods.addToast('Field (Display Name) cannot be empty', 3000);
+				if (description == undefined) return Toast.methods.addToast('Field (Description) cannot be empty', 3000);
 
 				_this.socket.emit('stations.create', {
 					_id,
-					type: "official",
+					type: 'official',
 					displayName,
 					description,
 					playlist,
@@ -142,20 +124,24 @@
 			},
 			removeStation: function (index) {
 				this.socket.emit('stations.remove', this.stations[index]._id, res => {
-					if (res.status == 'success') this.stations.splice(index, 1); Toast.methods.addToast(res.message, 2000);
+					if (res.status == 'success') this.stations.splice(index, 1); Toast.methods.addToast(res.message, 3000);
 				});
 			},
 			addGenre: function () {
-				if ($("#new-genre").val() !== "") this.newStation.genres.push($("#new-genre").val());
-				else Toast.methods.addToast('Genre cannot be empty', 2000);
-			}
+				for (let z = 0; z < this.newStation.genres.length; z++) {
+					if (this.newStation.genres[z] == $('#new-genre').val()) return Toast.methods.addToast('Genre already exists', 3000);
+				}
+				if ($('#new-genre').val() !== '') this.newStation.genres.push($('#new-genre').val());
+				else Toast.methods.addToast('Genre cannot be empty', 3000);
+			},
+			removeGenre: function (index) { this.newStation.genres.splice(index, 1); }
 		},
 		ready: function () {
 			let _this = this;
 			let socketInterval = setInterval(() => {
 				if (!!_this.$parent.$parent.socket) {
 					_this.socket = _this.$parent.$parent.socket;
-					_this.socket.emit("stations.index", data => {
+					_this.socket.emit('stations.index', data => {
 						_this.stations = data.stations;
 					});
 					clearInterval(socketInterval);
@@ -165,7 +151,7 @@
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 	.is-success {
 		width: 100%;
 	}