christofsteel/syng-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Removed the "move up" button and implemented "drag and drop"

Browse source
This commit is contained in:
Christoph Stahl 2024-10-13 15:36:04 +02:00
parent 877d53f8f8
commit a289dde5e3
7 changed files with 82 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -176,6 +176,10 @@ function moveUp(uuid) {
state.socket.emit("move-up", {"uuid": uuid})
}
function moveTo(data) {
state.socket.emit("move-to", data)
}
function skip(uuid) {
state.socket.emit("skip", {"uuid": uuid})
}
@ -290,6 +294,7 @@ function joinRoom() {
@skip="skip"
@skipCurrent="skipCurrent"
@moveUp="moveUp"
@moveTo="moveTo"
@waitingRoomToQueue="waitingRoomToQueue"
/>
<DesktopLayout
@ -301,6 +306,7 @@ function joinRoom() {
@skip="skip"
@skipCurrent="skipCurrent"
@moveUp="moveUp"
@moveTo="moveTo"
@waitingRoomToQueue="waitingRoomToQueue"
/>
<WelcomeReveal

3
src/components/DesktopLayout.vue
View file

@ -4,7 +4,7 @@ import QueueDesktop from './QueueDesktop.vue'
import RecentDesktop from './RecentDesktop.vue'
const props = defineProps(['state']);
const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'moveTo'])
</script>
@ -18,6 +18,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
:admin="state.admin"
@skip="(uuid) => $emit('skip', uuid)"
@moveUp="(uuid) => $emit('moveUp', uuid)"
@moveTo="(data) => $emit('moveTo', data)"
@skipCurrent="$emit('skipCurrent')"
@waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
/>

70
src/components/Entry.vue
View file

@ -1,7 +1,7 @@
<script setup>
import { computed } from 'vue'
const props = defineProps(['admin', 'entry', 'current', 'firstStartedAt', 'offset', 'currentTime', 'waitingRoom'])
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'moveTo'])
function skip() {
if(props.current) {
@ -24,10 +24,56 @@ const eta = computed(() =>{
}
})
const dragging = (e) => {
const data = {
uuid: props.entry.uuid,
index: $(e.target.closest('li')).index()}
console.log(data)
e.dataTransfer.clearData()
e.dataTransfer.setData('application/json', JSON.stringify(data))
e.dataTransfer.effectAllowed = 'move'
}
const dragend = (e) => {
e.preventDefault()
e.target.closest('li').classList.remove('draggedoverBottom')
e.target.closest('li').classList.remove('draggedoverTop')
}
const dropped = (e) => {
e.preventDefault()
e.target.closest('li').classList.remove('draggedoverBottom')
e.target.closest('li').classList.remove('draggedoverTop')
const drop_index = $(e.target.closest('li')).index()
const element = JSON.parse(e.dataTransfer.getData('application/json'))
if (element.index < drop_index) {
emits('moveTo', {"uuid": element.uuid , "target": drop_index + 1})
} else {
emits('moveTo', {"uuid": element.uuid , "target": drop_index})
}
}
const dragover = (e) => {
e.preventDefault()
e.dataTransfer.dropEffect = 'move'
const element = JSON.parse(e.dataTransfer.getData('application/json'))
const index = $(e.target.closest('li')).index()
if (index < element.index) {
e.target.closest('li').classList.add('draggedoverTop')
} else {
e.target.closest('li').classList.add('draggedoverBottom')
}
}
const dragleave = (e) => {
e.preventDefault()
e.target.closest('li').classList.remove('draggedoverTop')
e.target.closest('li').classList.remove('draggedoverBottom')
}
</script>
<template>
<li :class="[{ current: current }, {waitingRoom: waitingRoom}]">
<li :class="[{ current: current }, {waitingRoom: waitingRoom}]" :draggable="admin" @dragstart="dragging" @dragend="dragend" @dragover="dragover" @dragleave="dragleave" @drop="dropped">
<div class="grid-x">
<div class="cell" :class="{'small-9': admin}">
<span class="artist">{{ entry.artist }}</span>
@ -45,12 +91,12 @@ const eta = computed(() =>{
@click="$emit('waitingRoomToQueue', entry.uuid)" >
<font-awesome-icon icon="fa-solid fa-arrows-up-to-line" />
</button>
<button
class="button warning fright"
v-if="!current && !waitingRoom"
@click="$emit('moveUp', entry.uuid)" >
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</button>
<!-- <button -->
<!-- class="button warning fright" -->
<!-- v-if="!current && !waitingRoom" -->
<!-- @click="$emit('moveUp', entry.uuid)" > -->
<!-- <font-awesome-icon icon="fa-solid fa-arrow-up" /> -->
<!-- </button> -->
</div>
</div>
@ -76,4 +122,12 @@ const eta = computed(() =>{
content: "in ";
}
.draggedoverTop {
border-top: 2px solid #008000;
}
.draggedoverBottom {
border-bottom: 2px solid #008000;
}
</style>

3
src/components/MobileLayout.vue
View file

@ -5,7 +5,7 @@ import RecentTab from './RecentTab.vue'
import TabHeader from './TabHeader.vue'
const props = defineProps(['state']);
const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'moveTo'])
</script>
@ -26,6 +26,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
:waiting_room_policy="state.waiting_room_policy"
@skip="(uuid) => $emit('skip', uuid)"
@moveUp="(uuid) => $emit('moveUp', uuid)"
@moveTo="(data) => $emit('moveTo', data)"
@skipCurrent="$emit('skipCurrent')"
@waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
/>

3
src/components/QueueDesktop.vue
View file

@ -2,7 +2,7 @@
import QueueInner from './QueueInner.vue'
const props = defineProps(['queue', 'waiting_room', 'admin', 'waiting_room_policy']);
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'moveTo'])
</script>
<template>
@ -15,6 +15,7 @@ const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'
:waiting_room_policy="waiting_room_policy"
@skip="(uuid) => $emit('skip', uuid)"
@moveUp="(uuid) => $emit('moveUp', uuid)"
@moveTo="(data) => $emit('moveTo', data)"
@skipCurrent="$emit('skipCurrent')"
@waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
/>

8
src/components/QueueInner.vue
View file

@ -3,7 +3,7 @@ import { onMounted, reactive } from 'vue'
import Entry from './Entry.vue'
const props = defineProps(['queue', 'waiting_room', 'admin', 'waiting_room_policy']);
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'moveTo'])
let currentTime = reactive({time: Date.now()})
@ -23,12 +23,15 @@ function offset(index) {
}
return _offset
}
</script>
<template>
<div class="vsplit">
<div id="queue-list-wrapper" class="results">
<ul id="queue" class="vertical menu">
<ul id="queue" class="vertical menu" @drop="dropHandler">
<Entry
v-for="(entry, index) in queue"
:entry="entry"
@ -40,6 +43,7 @@ function offset(index) {
@skip="(uuid) => $emit('skip', uuid)"
@skipCurrent="$emit('skipCurrent')"
@moveUp="(uuid) => $emit('moveUp', uuid)"
@moveTo="(data) => $emit('moveTo', data)"
/>
</ul>
<div v-show="waiting_room_policy" class="header">Waiting room</div>

3
src/components/QueueTab.vue
View file

@ -2,7 +2,7 @@
import QueueInner from './QueueInner.vue'
const props = defineProps(['queue', 'waiting_room', 'admin', 'waiting_room_policy']);
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'moveTo'])
</script>
<template>
@ -16,6 +16,7 @@ const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'
@moveUp="(uuid) => $emit('moveUp', uuid)"
@skipCurrent="$emit('skipCurrent')"
@waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
@moveTo="(data) => $emit('moveTo', data)"
/>
</div>
</template>