yetangitu/funkwhale
1
0
Fork 0
mirror of https://code.eliotberriot.com/funkwhale/funkwhale.git synced 2025-10-05 07:39:24 +02:00
Code Issues Releases Wiki Activity

Fixed #26: can now reorder tracks in queue using drag and drop

Browse source
This commit is contained in:
Eliot Berriot 2017-06-28 19:34:05 +02:00
parent 03bb740db3
commit 33eecf55cb
3 changed files with 49 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

51
front/src/components/Sidebar.vue
View file

@ -50,27 +50,27 @@
</div>
<div class="ui bottom attached tab" data-tab="queue">
<table class="ui compact inverted very basic fixed single line table">
<tbody>
<tr @click="queue.play(index)" v-for="(track, index) in queue.tracks" :class="[{'active': index === queue.currentIndex}]">
<td class="right aligned">{{ index + 1}}</td>
<td class="center aligned">
<img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
<img class="ui mini image" v-else src="../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ track.title }}</strong><br />
{{ track.artist.name }}
</td>
<td>
<template v-if="favoriteTracks.objects[track.id]">
<i @click.stop="queue.cleanTrack(index)" class="pink heart icon"></i>
</template
</td>
<td>
<i @click.stop="queue.cleanTrack(index)" class="circular trash icon"></i>
</td>
</tr>
</tbody>
<draggable v-model="queue.tracks" element="tbody" @update="reorder">
<tr @click="queue.play(index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
<td class="right aligned">{{ index + 1}}</td>
<td class="center aligned">
<img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
<img class="ui mini image" v-else src="../assets/audio/default-cover.png">
</td>
<td colspan="4">
<strong>{{ track.title }}</strong><br />
{{ track.artist.name }}
</td>
<td>
<template v-if="favoriteTracks.objects[track.id]">
<i @click.stop="queue.cleanTrack(index)" class="pink heart icon"></i>
</template
</td>
<td>
<i @click.stop="queue.cleanTrack(index)" class="circular trash icon"></i>
</td>
</tr>
</draggable>
</table>
<div v-if="radios.running" class="ui black message">
@ -98,6 +98,7 @@ import SearchBar from '@/components/audio/SearchBar'
import auth from '@/auth'
import queue from '@/audio/queue'
import backend from '@/audio/backend'
import draggable from 'vuedraggable'
import radios from '@/radios'
import $ from 'jquery'
@ -107,7 +108,8 @@ export default {
components: {
Player,
SearchBar,
Logo
Logo,
draggable
},
data () {
return {
@ -120,6 +122,11 @@ export default {
},
mounted () {
$(this.$el).find('.menu .item').tab()
},
methods: {
reorder (e) {
this.queue.reorder(e.oldIndex, e.newIndex)
}
}
}
</script>