From 97d39c04063e80f697184e7cbf85818e8be81506 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Mon, 19 Oct 2020 20:06:07 +0200
Subject: [PATCH] mark stations currently playing

---
 src/components/Table.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index 346ee7c..3c7d97e 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -10,12 +10,15 @@
 			</tr>
 		</thead>
 		<tbody v-if="stationData">
-			<tr v-for="(station, idx) in stationData" :key="idx">
+			<tr
+				v-for="(station, idx) in stationData"
+				:key="idx"
+				:class="{ selected: idx === activeItem}">
 				<td @click="doPlay">
 					<div class="stationIcon"
 						:style="{ backgroundImage: `url('${ station.favicon }')` }" />
 				</td>
-				<td class="filenameColumn" @click="doPlay(station)">
+				<td class="filenameColumn" @click="doPlay(idx, station)">
 					<span class="innernametext">
 						{{ station.name }}
 					</span>
@@ -51,8 +54,14 @@ export default {
 			default() { return [] },
 		},
 	},
+	data() {
+		return {
+			activeItem: null,
+		}
+	},
 	methods: {
-		doPlay(station) {
+		doPlay(idx, station) {
+			this.activeItem = idx
 			this.$emit('doPlay', station)
 		},
 	},
@@ -107,6 +116,10 @@ table {
 			}
 		}
 
+		tr.selected {
+			background-color: var(--color-primary-light);
+		}
+
 		tr td:first-child {
 			padding-left: 40px;
 			width: 32px;