feat: added logs tab to display server messages

src/App.vue

@@ -45,7 +45,6 @@ import TheContextMenu from '@components/globals/TheContextMenu.vue'
 import TheTrackPreview from '@components/globals/TheTrackPreview.vue'
 import TheQualityModal from '@components/globals/TheQualityModal.vue'
 // import ConfirmModal from '@components/globals/ConfirmModal.vue'
-
 import TheSidebar from '@components/TheSidebar.vue'
 import TheSearchBar from '@components/TheSearchBar.vue'
 import TheContent from '@components/TheContent.vue'
@@ -69,7 +68,7 @@ export default {
 		}
 	},
 	mounted() {
-		socket.addEventListener('open', event => {
+		socket.addEventListener('open', () => {
 			console.log('Connected to WebSocket')
 			this.isSocketConnected = true
 		})

src/components/pages/Logs.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="logs-container">
+		<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.logs') }}</h1>
+
+		<table class="w-full text-center">
+			<tr>
+				<th></th>
+				<th class="pr-5 h-12">Event</th>
+				<th>Data</th>
+			</tr>
+			<tr v-for="(message, i) of logMessages" :key="i">
+				<td class="count"></td>
+				<td class="pr-5 w-1/3">{{ message.key }}</td>
+				<td class="w-2/3">{{ message.data || 'Empty' }}</td>
+			</tr>
+		</table>
+	</div>
+</template>
+
+<script>
+import { useLogs } from '@/use/logs'
+import { computed } from '@vue/composition-api'
+
+export default {
+	name: 'Logs',
+	setup() {
+		const messages = useLogs()
+		const logMessages = computed(() => messages.value.slice(0, 50).reverse())
+
+		return {
+			logMessages
+		}
+	}
+}
+</script>
+
+<style scoped>
+.logs-container {
+	counter-reset: logs;
+}
+
+.count::before {
+	content: counter(logs);
+	counter-increment: logs;
+}
+</style>

src/data/sidebar.js

@@ -41,6 +41,13 @@ export const links = [
 		icon: 'settings',
 		label: 'sidebar.settings'
 	},
+	{
+		name: 'logs',
+		ariaLabel: 'logs',
+		routerName: 'Logs',
+		icon: 'description',
+		label: 'sidebar.logs'
+	},
 	{
 		name: 'about',
 		ariaLabel: 'info',

src/lang/en.js

@@ -399,6 +399,7 @@ const en = {
 		favorites: 'favorites',
 		linkAnalyzer: 'link analyzer',
 		settings: 'settings',
+		logs: 'logs',
 		about: 'about'
 	},
 	tracklist: {

src/lang/it.js

@@ -402,6 +402,7 @@ const it = {
 		favorites: 'preferiti',
 		linkAnalyzer: 'analizza link',
 		settings: 'impostazioni',
+		logs: 'log',
 		about: 'info'
 	},
 	tracklist: {

src/router.js

@@ -11,9 +11,11 @@ import Errors from '@components/pages/Errors.vue'
 import Favorites from '@components/pages/Favorites.vue'
 import Home from '@components/pages/Home.vue'
 import LinkAnalyzer from '@components/pages/LinkAnalyzer.vue'
+import Logs from '@components/pages/Logs.vue'
 import Search from '@components/pages/Search.vue'
 import Settings from '@components/pages/Settings.vue'
 import Tracklist from '@components/pages/Tracklist.vue'
+
 import { fetchData } from '@/utils/api'
 import EventBus from '@/utils/EventBus'
 
@@ -77,6 +79,11 @@ const routes = [
 		name: 'Errors',
 		component: Errors
 	},
+	{
+		path: '/logs',
+		name: 'Logs',
+		component: Logs
+	},
 	{
 		path: '/link-analyzer',
 		name: 'Link Analyzer',

src/use/logs.js

@@ -0,0 +1,14 @@
+import { ref } from '@vue/composition-api'
+import { socket } from '@/utils/socket'
+
+const messages = ref([])
+
+socket.addEventListener('message', event => {
+	const newMessage = JSON.parse(event.data)
+
+	messages.value.push(Object.freeze(newMessage))
+})
+
+export const useLogs = () => {
+	return messages
+}