Added Reports on frontend

backend/logic/actions/reports.js

@@ -12,7 +12,7 @@ module.exports = {
 		});
 	}),
 
-	add: hooks.loginRequired((session, report, cb) => {
+	create: hooks.loginRequired((session, report, cb) => {
 		console.log(report);
 	})
 

frontend/components/Modals/Report.vue

@@ -0,0 +1,241 @@
+<template>
+	<div class='modal is-active'>
+		<div class='modal-background'></div>
+		<div class='modal-card'>
+			<header class='modal-card-head'>
+				<p class='modal-card-title'>Report</p>
+				<button class='delete' @click='$parent.modals.report = !$parent.modals.report'></button>
+			</header>
+			<section class='modal-card-body'>
+				<div class='columns'>
+					<div class='column'>
+						<div class='card is-fullwidth'>
+							<header class='card-header'>
+								<p class='card-header-title'>
+									Previous Song
+								</p>
+							</header>
+							<div class='card-content'>
+								<article class='media'>
+									<figure class='media-left'>
+										<p class='image is-64x64'>
+											<img :src='$parent.previousSong.thumbnail' onerror='this.src="/assets/notes.png"'>
+										</p>
+									</figure>
+									<div class='media-content'>
+										<div class='content'>
+											<p>
+												<strong>{{ $parent.previousSong.title }}</strong>
+												<br>
+												<small>{{ $parent.previousSong.artists.split(' ,') }}</small>
+											</p>
+										</div>
+									</div>
+								</article>
+							</div>
+						</div>
+					</div>
+					<div class='column'>
+						<div class='card is-fullwidth'>
+							<header class='card-header'>
+								<p class='card-header-title'>
+									Current Song
+								</p>
+							</header>
+							<div class='card-content'>
+								<article class='media'>
+									<figure class='media-left'>
+										<p class='image is-64x64'>
+											<img :src='$parent.currentSong.thumbnail' onerror='this.src="/assets/notes.png"'>
+										</p>
+									</figure>
+									<div class='media-content'>
+										<div class='content'>
+											<p>
+												<strong>{{ $parent.currentSong.title }}</strong>
+												<br>
+												<small>{{ $parent.currentSong.artists.split(' ,') }}</small>
+											</p>
+										</div>
+									</div>
+								</article>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class='edit-report-wrapper'>
+					<div class='columns'>
+						<div class='column'>
+							<label class='label'>Video</label>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Doesn't exist
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									It's Private
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									It's not available in my country
+								</label>
+							</p>
+						</div>
+						<div class='column'>
+							<label class='label'>Title</label>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Incorrect
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Inappropriate
+								</label>
+							</p>
+						</div>
+					</div>
+					<div class='columns'>
+						<div class='column'>
+							<label class='label'>Duration</label>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Skips too soon
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Skips too late
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Starts too soon
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Starts too late
+								</label>
+							</p>
+						</div>
+						<div class='column'>
+							<label class='label'>Artists</label>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Incorrect
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Inappropriate
+								</label>
+							</p>
+						</div>
+					</div>
+					<div class='columns'>
+						<div class='column'>
+							<label class='label'>Thumbnail</label>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Incorrect
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Inappropriate
+								</label>
+							</p>
+							<p class='control'>
+								<label class='checkbox'>
+									<input type='checkbox'>
+									Doesn't exist
+								</label>
+							</p>
+						</div>
+						<div class='column'>
+							<label class='label'>Other</label>
+							<textarea class='textarea' placeholder='Any other details...'></textarea>
+						</div>
+					</div>
+				</div>
+			</section>
+			<footer class='modal-card-foot'>
+				<a class='button is-success' @click='save()'>
+					<i class='material-icons save-changes'>done</i>
+					<span>&nbsp;Submit Report</span>
+				</a>
+				<a class='button is-danger' @click='$parent.modals.report = !$parent.modals.report'>
+					<span>&nbsp;Cancel</span>
+				</a>
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				report: {
+
+				}
+			}
+		},
+		methods: {
+			save: function () {
+				// this.socket.emit('reports.updateDisplayName', this.$parent.stationId, this.$parent.station.displayName, res => {
+				// 	if (res.status == 'success') return Toast.methods.addToast(res.message, 4000);
+				// 	Toast.methods.addToast(res.message, 8000);
+				// });
+			}
+		},
+		ready() {
+			console.log(this.$parent.currentSong)
+		}
+	}
+</script>
+
+<style type='scss' scoped>
+	h6 { margin-bottom: 15px; }
+
+	.previous-song, .current-song {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.media-content {
+		display: flex;
+		align-items: center;
+		height: 64px;
+	}
+
+	.radio-controls .control {
+		display: flex;
+		align-items: center;
+	}
+
+	@media screen and (min-width: 769px) {
+		.radio-controls .control-label { padding-top: 0 !important; }
+	}
+
+	.edit-report-wrapper {
+		padding: 20px;
+	}
+</style>

frontend/components/Station/CommunityHeader.vue

@@ -4,6 +4,11 @@
 			<a class='nav-item logo' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
 				Musare
 			</a>
+			<a v-if='$parent.$parent.loggedIn' class='nav-item' href='#' @click='$parent.modals.report = !$parent.modals.report'>
+				<span class='icon'>
+					<i class='material-icons'>report</i>
+				</span>
+			</a>
 			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.toggleModal("editStation")'>
 				<span class='icon'>
 					<i class='material-icons'>settings</i>

frontend/components/Station/OfficialHeader.vue

@@ -43,6 +43,11 @@
 		</span>
 
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
+			<a v-if='$parent.$parent.loggedIn' class='nav-item' href='#' @click='$parent.modals.report = !$parent.modals.report'>
+				<span class='icon'>
+					<i class='material-icons'>report</i>
+				</span>
+			</a>
 			<a class='nav-item' href='#' @click='$parent.sidebars.queue = !$parent.sidebars.queue' v-if='$parent.station.partyMode === true'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>

frontend/components/Station/Station.vue

@@ -6,6 +6,7 @@
 	<edit-playlist v-if='modals.editPlaylist'></edit-playlist>
 	<create-playlist v-if='modals.createPlaylist'></create-playlist>
 	<edit-station v-if='modals.editStation'></edit-station>
+	<report v-if='modals.report'></report>
 
 	<queue-sidebar v-if='sidebars.queue'></queue-sidebar>
 	<playlist-sidebar v-if='sidebars.playlist'></playlist-sidebar>
@@ -71,6 +72,7 @@
 	import EditPlaylist from '../Modals/Playlists/Edit.vue';
 	import CreatePlaylist from '../Modals/Playlists/Create.vue';
 	import EditStation from '../Modals/EditStation.vue';
+	import Report from '../Modals/Report.vue';
 
 	import QueueSidebar from '../Sidebars/Queue.vue';
 	import PlaylistSidebar from '../Sidebars/Playlist.vue';
@@ -84,18 +86,20 @@
 			return {
 				type: '',
 				playerReady: false,
+				previousSong: {},
 				currentSong: {},
 				player: undefined,
 				timePaused: 0,
 				paused: false,
-				timeElapsed: "0:00",
+				timeElapsed: '0:00',
 				liked: false,
 				disliked: false,
 				modals: {
 					addSongToQueue: false,
 					editPlaylist: false,
 					createPlaylist: false,
-					editStation: false
+					editStation: false,
+					report: false
 				},
 				sidebars: {
 					queue: false,
@@ -368,6 +372,7 @@
 					}
 
 					_this.socket.on('event:songs.next', data => {
+						_this.previousSong = _this.currentSong;
 						_this.currentSong = (data.currentSong) ? data.currentSong : {};
 						_this.startedAt = data.startedAt;
 						_this.paused = data.paused;
@@ -462,13 +467,24 @@
 			$("#volumeSlider").val(volume);
 		},
 		events: {
-			'handleSocketConnection': function() {
+			'handleSocketConnection': function () {
 				if (this.$parent.socketConnected) {
 					this.joinStation(321);
 				}
 			}
 		},
-		components: { OfficialHeader, CommunityHeader, SongQueue, EditPlaylist, CreatePlaylist, EditStation, QueueSidebar, PlaylistSidebar, UsersSidebar }
+		components: {
+			OfficialHeader,
+			CommunityHeader,
+			SongQueue,
+			EditPlaylist,
+			CreatePlaylist,
+			EditStation,
+			Report,
+			QueueSidebar,
+			PlaylistSidebar,
+			UsersSidebar
+		}
 	}
 </script>
 

frontend/components/pages/Home.vue

@@ -11,7 +11,7 @@
 				</div>
 				<div class="card-content">
 					<div class="media">
-						<div class="media-left">
+						<div class="media-left displayName">
 							<h5>{{ station.displayName }}</h5>
 						</div>
 						<div class="media-content"></div>
@@ -36,7 +36,7 @@
 				</div>
 				<div class="card-content">
 					<div class="media">
-						<div class="media-left">
+						<div class="media-left displayName">
 							<h5>{{ station.displayName }}</h5>
 						</div>
 						<div class="media-content"></div>
@@ -229,7 +229,7 @@
 		overflow: hidden;
 	}
 
-	.media-left {
+	.displayName {
 		word-wrap: break-word;
     	width: 80%;
 	}