refactor: removed jQuery

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

frontend/components/Admin/News.vue

@@ -322,15 +322,13 @@ export default {
 			);
 		},
 		addChange: function(type) {
-			let change = $(`#new-${type}`)
-				.val()
-				.trim();
+			let change = document.getElementById(`new-${type}`).value.trim();
 
 			if (this.creating[type].indexOf(change) !== -1)
 				return Toast.methods.addToast(`Tag already exists`, 3000);
 
 			if (change) {
-				$(`#new-${type}`).val("");
+				document.getElementById(`new-${type}`).value = "";
 				this.creating[type].push(change);
 			} else Toast.methods.addToast(`${type} cannot be empty`, 3000);
 		},

frontend/components/Admin/Stations.vue

@@ -256,31 +256,31 @@ export default {
 			});
 		},
 		addGenre: function() {
-			let genre = $("#new-genre")
-				.val()
-				.toLowerCase()
+			let genre = document
+				.getElementById(`new-genre`)
+				.value.toLowerCase()
 				.trim();
 			if (this.newStation.genres.indexOf(genre) !== -1)
 				return Toast.methods.addToast("Genre already exists", 3000);
 			if (genre) {
 				this.newStation.genres.push(genre);
-				$("#new-genre").val("");
+				document.getElementById(`new-genre`).value = "";
 			} else Toast.methods.addToast("Genre cannot be empty", 3000);
 		},
 		removeGenre: function(index) {
 			this.newStation.genres.splice(index, 1);
 		},
 		addBlacklistedGenre: function() {
-			let genre = $("#new-blacklisted-genre")
-				.val()
-				.toLowerCase()
+			let genre = document
+				.getElementById(`new-blacklisted-genre`)
+				.value.toLowerCase()
 				.trim();
 			if (this.newStation.blacklistedGenres.indexOf(genre) !== -1)
 				return Toast.methods.addToast("Genre already exists", 3000);
 
 			if (genre) {
 				this.newStation.blacklistedGenres.push(genre);
-				$("#new-blacklisted-genre").val("");
+				document.getElementById(`new-blacklisted-genre`).value = "";
 			} else Toast.methods.addToast("Genre cannot be empty", 3000);
 		},
 		removeBlacklistedGenre: function(index) {

frontend/components/Modals/EditNews.vue

@@ -171,9 +171,7 @@ export default {
 	components: { Modal },
 	methods: {
 		addChange: function(type) {
-			let change = $(`#edit-${type}`)
-				.val()
-				.trim();
+			let change = document.getElementById(`edit-${type}`).value.trim();
 
 			if (this.$parent.editing[type].indexOf(change) !== -1)
 				return Toast.methods.addToast(`Tag already exists`, 3000);

frontend/components/Modals/EditSong.vue

@@ -431,33 +431,33 @@ export default {
 		},
 		changeVolume: function() {
 			let local = this;
-			let volume = $("#volumeSlider").val();
+			let volume = document.getElementById("volumeSlider").value;
 			localStorage.setItem("volume", volume);
 			local.video.player.setVolume(volume);
 			if (volume > 0) local.video.player.unMute();
 		},
 		addTag: function(type) {
 			if (type == "genres") {
-				let genre = $("#new-genre")
-					.val()
-					.toLowerCase()
+				let genre = document
+					.getElementById("new-genre")
+					.value.toLowerCase()
 					.trim();
 				if (this.editing.song.genres.indexOf(genre) !== -1)
 					return Toast.methods.addToast("Genre already exists", 3000);
 				if (genre) {
 					this.editing.song.genres.push(genre);
-					$("#new-genre").val("");
+					document.getElementById("new-genre").value = "";
 				} else Toast.methods.addToast("Genre cannot be empty", 3000);
 			} else if (type == "artists") {
-				let artist = $("#new-artist").val();
+				let artist = document.getElementById("new-artist").value;
 				if (this.editing.song.artists.indexOf(artist) !== -1)
 					return Toast.methods.addToast(
 						"Artist already exists",
 						3000
 					);
-				if ($("#new-artist").val() !== "") {
+				if (document.getElementById("new-artist").value !== "") {
 					this.editing.song.artists.push(artist);
-					$("#new-artist").val("");
+					document.getElementById("new-artist").value = "";
 				} else Toast.methods.addToast("Artist cannot be empty", 3000);
 			}
 		},
@@ -593,8 +593,8 @@ export default {
 		});
 
 		let volume = parseInt(localStorage.getItem("volume"));
-		volume = typeof volume === "number" ? volume : 20;
-		$("#volumeSlider").val(volume);
+		document.getElementById("volumeSlider").value = volume =
+			typeof volume === "number" ? volume : 20;
 	}
 };
 </script>

frontend/components/Modals/Playlists/Edit.vue

@@ -14,16 +14,13 @@
 				</div>
 			</nav>
 			<hr />
-			<aside
-				v-if="playlist.songs && playlist.songs.length > 0"
-				class="menu"
-			>
+			<aside class="menu">
 				<ul class="menu-list">
 					<li v-for="(song, index) in playlist.songs" :key="index">
 						<a href="#" target="_blank">{{ song.title }}</a>
 						<div class="controls">
 							<a href="#" v-on:click="promoteSong(song.songId)">
-								<i class="material-icons" v-if="$index > 0"
+								<i class="material-icons" v-if="index > 0"
 									>keyboard_arrow_up</i
 								>
 								<i
@@ -35,7 +32,7 @@
 							</a>
 							<a href="#" v-on:click="demoteSong(song.songId)">
 								<i
-									v-if="playlist.songs.length - 1 !== $index"
+									v-if="playlist.songs.length - 1 !== index"
 									class="material-icons"
 									>keyboard_arrow_down</i
 								>
@@ -48,7 +45,7 @@
 							</a>
 							<a
 								href="#"
-								@click="removeSongFromPlaylist(song.songId)"
+								v-on:click="removeSongFromPlaylist(song.songId)"
 							>
 								<i class="material-icons">delete</i>
 							</a>

frontend/components/Modals/Report.vue

@@ -226,7 +226,8 @@ export default {
 			});
 		},
 		updateCharactersRemaining: function() {
-			this.charactersRemaining = 400 - $(".textarea").val().length;
+			this.charactersRemaining =
+				400 - document.getElementsByClassName("textarea").value.length;
 		},
 		highlight: function(type) {
 			if (type == "currentSong") {

frontend/components/Station/Station.vue

@@ -596,14 +596,13 @@ export default {
 		resizeSeekerbar: function() {
 			let local = this;
 			if (!local.paused) {
-				$(".seeker-bar").width(
+				document.getElementsByClassName("seeker-bar")[0].style.width =
 					parseFloat(
 						(local.getTimeElapsed() /
 							1000 /
 							local.currentSong.duration) *
 							100
-					) + "%"
-				);
+					) + "%";
 			}
 		},
 		formatTime: function(duration) {
@@ -646,7 +645,7 @@ export default {
 		},
 		changeVolume: function() {
 			let local = this;
-			let volume = $("#volumeSlider").val();
+			let volume = document.getElementById("volumeSlider").value;
 			localStorage.setItem("volume", volume / 100);
 			if (local.playerReady) {
 				local.player.setVolume(volume / 100);
@@ -727,7 +726,7 @@ export default {
 				let volume =
 					this.player.getVolume() * 100 <= 0 ? previousVolume : 0;
 				this.muted = !this.muted;
-				$("#volumeSlider").val(volume * 100);
+				document.getElementById("volumeSlider").value = volume * 100;
 				this.player.setVolume(volume);
 				if (!this.muted) localStorage.setItem("volume", volume);
 			}
@@ -738,7 +737,7 @@ export default {
 				let volume = previousVolume + 5;
 				if (previousVolume === 0) this.muted = false;
 				if (volume > 100) volume = 100;
-				$("#volumeSlider").val(volume * 100);
+				document.getElementById("volumeSlider").value = volume * 100;
 				this.player.setVolume(volume);
 				localStorage.setItem("volume", volume);
 			}
@@ -1113,7 +1112,7 @@ export default {
 		let volume = parseFloat(localStorage.getItem("volume"));
 		volume = typeof volume === "number" && !isNaN(volume) ? volume : 20;
 		localStorage.setItem("volume", volume);
-		$("#volumeSlider").val(volume * 100);
+		document.getElementById("volumeSlider").value = volume * 100;
 	},
 	components: {
 		OfficialHeader,

frontend/dist/index.tpl.html

@@ -37,7 +37,6 @@
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
 	<link rel='stylesheet' href='/index.css'>
 	<script src='https://www.youtube.com/iframe_api'></script>
-	<script type='text/javascript' src='/vendor/jquery.min.js'></script>
 	<script type='text/javascript' src='/vendor/moment.min.js'></script>
 	<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js'></script>
 	<script type='text/javascript' src='/lofig.min.js'></script>