fix(frontend): use vue references instead of document.getElementById

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/modals/EditNews.vue

@@ -25,7 +25,7 @@
 					<label class="label">Bugs</label>
 					<p class="control has-addons">
 						<input
-							id="edit-bugs"
+							ref="edit-bugs"
 							class="input"
 							type="text"
 							placeholder="Bug"
@@ -51,7 +51,7 @@
 					<label class="label">Features</label>
 					<p class="control has-addons">
 						<input
-							id="edit-features"
+							ref="edit-features"
 							class="input"
 							type="text"
 							placeholder="Feature"
@@ -83,7 +83,7 @@
 					<label class="label">Improvements</label>
 					<p class="control has-addons">
 						<input
-							id="edit-improvements"
+							ref="edit-improvements"
 							class="input"
 							type="text"
 							placeholder="Improvement"
@@ -112,7 +112,7 @@
 					<label class="label">Upcoming</label>
 					<p class="control has-addons">
 						<input
-							id="edit-upcoming"
+							ref="edit-upcoming"
 							class="input"
 							type="text"
 							placeholder="Upcoming"
@@ -189,7 +189,7 @@ export default {
 	},
 	methods: {
 		add(type) {
-			const change = document.getElementById(`edit-${type}`).value.trim();
+			const change = this.$refs[`edit-${type}`].value.trim();
 
 			if (this.news[type].indexOf(change) !== -1)
 				return new Toast(`Tag already exists`);
@@ -197,7 +197,7 @@ export default {
 			if (change) this.addChange({ type, change });
 			else new Toast(`${type} cannot be empty`);
 
-			document.getElementById(`edit-${type}`).value = "";
+			this.$refs[`edit-${type}`].value = "";
 			return true;
 		},
 		remove(type, index) {

frontend/src/components/modals/EditSong.vue

@@ -7,7 +7,7 @@
 						<div class="player-section">
 							<div id="editSongPlayer"></div>
 							<canvas
-								id="durationCanvas"
+								ref="durationCanvas"
 								height="20"
 								width="530"
 							></canvas>
@@ -87,7 +87,7 @@
 									<input
 										class="input"
 										type="text"
-										id="title-input"
+										ref="title-input"
 										v-model="song.title"
 										@keyup.ctrl.alt.d="
 											getAlbumData('title')
@@ -156,7 +156,7 @@
 									<input
 										class="input"
 										type="text"
-										id="new-artist"
+										ref="new-artist"
 										v-model="artistInputValue"
 										@blur="blurArtistInput()"
 										@focus="focusArtistInput()"
@@ -229,7 +229,7 @@
 									<input
 										class="input"
 										type="text"
-										id="new-genre"
+										ref="new-genre"
 										v-model="genreInputValue"
 										@blur="blurGenreInput()"
 										@focus="focusGenreInput()"
@@ -356,7 +356,7 @@
 							<input
 								class="input"
 								type="text"
-								id="discogs-input"
+								ref="discogs-input"
 								v-model="discogsQuery"
 								@keyup.enter="searchDiscogsForPage(1)"
 								@change="onDiscogsQueryChange"
@@ -864,7 +864,7 @@ export default {
 			keyCode: 36,
 			preventDefault: true,
 			handler: () => {
-				document.getElementById("title-input").focus();
+				this.$refs["title-input"].focus();
 			}
 		});
 
@@ -872,7 +872,7 @@ export default {
 			keyCode: 35,
 			preventDefault: true,
 			handler: () => {
-				document.getElementById("discogs-input").focus();
+				this.$refs["discogs-input"].focus();
 			}
 		});
 
@@ -1282,27 +1282,27 @@ export default {
 		},
 		addTag(type) {
 			if (type === "genres") {
-				const genre = document
-					.getElementById("new-genre")
-					.value.toLowerCase()
+				const genre = this.$refs["new-genre"].value
+					.toLowerCase()
 					.trim();
+
 				if (this.song.genres.indexOf(genre) !== -1)
 					return new Toast("Genre already exists");
 				if (genre) {
 					this.song.genres.push(genre);
-					document.getElementById("new-genre").value = "";
+					this.$refs["new-genre"].value = "";
 					return false;
 				}
 
 				return new Toast("Genre cannot be empty");
 			}
 			if (type === "artists") {
-				const artist = document.getElementById("new-artist").value;
+				const artist = this.$refs["new-artist"].value;
 				if (this.song.artists.indexOf(artist) !== -1)
 					return new Toast("Artist already exists");
-				if (document.getElementById("new-artist").value !== "") {
+				if (this.$refs["new-artist"].value !== "") {
 					this.song.artists.push(artist);
-					document.getElementById("new-artist").value = "";
+					this.$refs["new-artist"].value = "";
 					return false;
 				}
 				return new Toast("Artist cannot be empty");
@@ -1315,7 +1315,7 @@ export default {
 			else if (type === "artists") this.song.artists.splice(index, 1);
 		},
 		drawCanvas() {
-			const canvasElement = document.getElementById("durationCanvas");
+			const canvasElement = this.$refs.durationCanvas;
 			const ctx = canvasElement.getContext("2d");
 
 			const videoDuration = Number(this.youtubeVideoDuration);

frontend/src/pages/Admin/tabs/News.vue

@@ -72,7 +72,7 @@
 								<label class="label">Bugs</label>
 								<p class="control has-addons">
 									<input
-										id="new-bugs"
+										ref="new-bugs"
 										class="input"
 										type="text"
 										placeholder="Bug"
@@ -101,7 +101,7 @@
 								<label class="label">Features</label>
 								<p class="control has-addons">
 									<input
-										id="new-features"
+										ref="new-features"
 										class="input"
 										type="text"
 										placeholder="Feature"
@@ -134,7 +134,7 @@
 								<label class="label">Improvements</label>
 								<p class="control has-addons">
 									<input
-										id="new-improvements"
+										ref="new-improvements"
 										class="input"
 										type="text"
 										placeholder="Improvement"
@@ -166,7 +166,7 @@
 								<label class="label">Upcoming</label>
 								<p class="control has-addons">
 									<input
-										id="new-upcoming"
+										ref="new-upcoming"
 										class="input"
 										type="text"
 										placeholder="Upcoming"
@@ -313,13 +313,13 @@ export default {
 			this.openModal({ sector: "admin", modal: "editNews" });
 		},
 		addChange(type) {
-			const change = document.getElementById(`new-${type}`).value.trim();
+			const change = this.$refs[`new-${type}`].value.trim();
 
 			if (this.creating[type].indexOf(change) !== -1)
 				return new Toast(`Tag already exists`);
 
 			if (change) {
-				document.getElementById(`new-${type}`).value = "";
+				this.$refs[`new-${type}`].value = "";
 				this.creating[type].push(change);
 				return true;
 			}

frontend/src/pages/Admin/tabs/Stations.vue

@@ -109,7 +109,7 @@
 							<div class="sector">
 								<p class="control has-addons">
 									<input
-										id="new-genre"
+										ref="new-genre"
 										class="input"
 										type="text"
 										placeholder="Genre"
@@ -137,7 +137,7 @@
 							<div class="sector">
 								<p class="control has-addons">
 									<input
-										id="new-blacklisted-genre"
+										ref="new-blacklisted-genre"
 										class="input"
 										type="text"
 										placeholder="Blacklisted Genre"
@@ -287,15 +287,12 @@ export default {
 			});
 		},
 		addGenre() {
-			const genre = document
-				.getElementById(`new-genre`)
-				.value.toLowerCase()
-				.trim();
+			const genre = this.$refs["new-genre"].value.toLowerCase().trim();
 			if (this.newStation.genres.indexOf(genre) !== -1)
 				return new Toast("Genre already exists");
 			if (genre) {
 				this.newStation.genres.push(genre);
-				document.getElementById(`new-genre`).value = "";
+				this.$refs["new-genre"].value = "";
 				return true;
 			}
 			return new Toast("Genre cannot be empty");
@@ -304,16 +301,15 @@ export default {
 			this.newStation.genres.splice(index, 1);
 		},
 		addBlacklistedGenre() {
-			const genre = document
-				.getElementById(`new-blacklisted-genre`)
-				.value.toLowerCase()
+			const genre = this.$refs["new-blacklisted-genre"].value
+				.toLowerCase()
 				.trim();
 			if (this.newStation.blacklistedGenres.indexOf(genre) !== -1)
 				return new Toast("Genre already exists");
 
 			if (genre) {
 				this.newStation.blacklistedGenres.push(genre);
-				document.getElementById(`new-blacklisted-genre`).value = "";
+				this.$refs["new-blacklisted-genre"].value = "";
 				return true;
 			}
 			return new Toast("Genre cannot be empty");
@@ -331,8 +327,9 @@ export default {
 			});
 		},
 		init() {
-			this.socket.dispatch("stations.index", data => {
-				this.loadStations(data.stations);
+			this.socket.dispatch("stations.index", res => {
+				if (res.status === "success")
+					this.loadStations(res.data.stations);
 			});
 			this.socket.dispatch("apis.joinAdminRoom", "stations", () => {});
 		},