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

src/App.vue

@@ -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

src/components/DesktopLayout.vue

@@ -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)"
     /> 

src/components/Entry.vue

@@ -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 
+                  <!-- <button  -->
-                    class="button warning fright" 
+                  <!--   class="button warning fright"  -->
-                    v-if="!current && !waitingRoom" 
+                  <!--   v-if="!current && !waitingRoom"  -->
-                    @click="$emit('moveUp', entry.uuid)" >
+                  <!--   @click="$emit('moveUp', entry.uuid)" > -->
-                  <font-awesome-icon icon="fa-solid fa-arrow-up" />
+                  <!-- <font-awesome-icon icon="fa-solid fa-arrow-up" /> -->
-                  </button>
+                  <!-- </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>

src/components/MobileLayout.vue

@@ -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)"
             /> 

src/components/QueueDesktop.vue

@@ -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)"
     />

src/components/QueueInner.vue

@@ -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>

src/components/QueueTab.vue

@@ -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>