Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

mark stations currently playing

Browse Source
This commit is contained in:
Jonas Heinrich 2020-10-19 20:06:07 +02:00
parent 5d232586cf
commit 97d39c0406
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Table.vue
View File

@ -10,12 +10,15 @@
</tr> </tr>
</thead> </thead>
<tbody v-if="stationData"> <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"> <td @click="doPlay">
<div class="stationIcon" <div class="stationIcon"
:style="{ backgroundImage: `url('${ station.favicon }')` }" /> :style="{ backgroundImage: `url('${ station.favicon }')` }" />
</td> </td>
<td class="filenameColumn" @click="doPlay(station)"> <td class="filenameColumn" @click="doPlay(idx, station)">
<span class="innernametext"> <span class="innernametext">
{{ station.name }} {{ station.name }}
</span> </span>
@ -51,8 +54,14 @@ export default {
default() { return [] }, default() { return [] },
}, },
}, },
data() {
return {
activeItem: null,
}
},
methods: { methods: {
doPlay(station) { doPlay(idx, station) {
this.activeItem = idx
this.$emit('doPlay', station) this.$emit('doPlay', station)
}, },
}, },
@ -107,6 +116,10 @@ table {
} }
} }
tr.selected {
background-color: var(--color-primary-light);
}
tr td:first-child { tr td:first-child {
padding-left: 40px; padding-left: 40px;
width: 32px; width: 32px;