Add button to send a song to the waiting room

src/App.vue

@@ -94,6 +94,11 @@ function waitingRoomToQueue(uuid) {
     state.socket.emit("waiting-room-to-queue", {"uuid": uuid})
 }
 
+function queueToWaitingRoom(uuid) {
+    console.log(uuid)
+    state.socket.emit("queue-to-waiting-room", {"uuid": uuid})
+}
+
 function append(entry) {
     checked_append_with_name(entry, state.value.name) 
 }
@@ -295,6 +300,7 @@ function joinRoom() {
         @moveUp="moveUp"
         @moveTo="moveTo"
         @waitingRoomToQueue="waitingRoomToQueue"
+        @queueToWaitingRoom="queueToWaitingRoom"
         />
     <DesktopLayout 
         v-show="!state.is_small" 
@@ -307,6 +313,7 @@ function joinRoom() {
         @moveUp="moveUp"
         @moveTo="moveTo"
         @waitingRoomToQueue="waitingRoomToQueue"
+        @queueToWaitingRoom="queueToWaitingRoom"
         />
     <WelcomeReveal
       v-if="!state.joined"

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', 'moveTo'])
+const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'queueToWaitingRoom', 'moveTo'])
 </script>
 
 
@@ -21,6 +21,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
       @moveTo="(data) => $emit('moveTo', data)"
       @skipCurrent="$emit('skipCurrent')"
       @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
+      @queueToWaitingRoom="(uuid) => $emit('queueToWaitingRoom', uuid)"
     /> 
     <RecentDesktop :recent="state.recent" :admin="state.admin" />
   </div>

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', 'moveTo'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'queueToWaitingRoom', 'moveTo'])
 
 function skip() {
   if(props.current) {
@@ -88,6 +88,12 @@ const dragleave = (e) => {
                   <button v-if="!waitingRoom" class="button alert fright" @click="skip">
                   <font-awesome-icon icon="fa-solid fa-times" />
                   </button>
+                  <button 
+                    class="button success fright" 
+                    v-if="!waitingRoom && !current" 
+                    @click="$emit('queueToWaitingRoom', entry.uuid)" >
+                  <font-awesome-icon icon="fa-solid fa-arrows-down-to-line" />
+                  </button>
                   <button 
                     class="button success fright" 
                     v-if="waitingRoom" 

src/components/Footer.vue

@@ -13,7 +13,7 @@ const emits = defineEmits(['update:name', 'logout', 'config'])
       {{ name }}
     </span>
     <div class="button alert fright" @click="$emit('logout')">Log out</div>
-    <div v-if="admin" class="button alert fright" @click="$emit('config')">Config</div>
+    <!-- <div v-if="admin" class="button alert fright" @click="$emit('config')">Config</div> -->
   </footer>
 </template>
 <style scoped>

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', 'moveTo'])
+const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'queueToWaitingRoom', 'moveTo'])
 
 </script>
 
@@ -29,6 +29,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
             @moveTo="(data) => $emit('moveTo', data)"
             @skipCurrent="$emit('skipCurrent')"
             @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
+            @queueToWaitingRoom="(uuid) => $emit('queueToWaitingRoom', uuid)"
             /> 
           <RecentTab :recent="state.recent" :admin="state.admin" />
         </div>

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', 'moveTo'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'queueToWaitingRoom', 'moveTo'])
 </script>
 
 <template>
@@ -18,6 +18,7 @@ const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'
       @moveTo="(data) => $emit('moveTo', data)"
       @skipCurrent="$emit('skipCurrent')"
       @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
+      @queueToWaitingRoom="(uuid) => $emit('queueToWaitingRoom', uuid)"
     />
   </div>
 </template>

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', 'moveTo'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'queueToWaitingRoom', 'moveTo'])
 
 let currentTime = reactive({time: Date.now()})
 
@@ -44,6 +44,7 @@ function offset(index) {
             @skipCurrent="$emit('skipCurrent')"
             @moveUp="(uuid) => $emit('moveUp', uuid)" 
             @moveTo="(data) => $emit('moveTo', data)"
+            @queueToWaitingRoom="(uuid) => $emit('queueToWaitingRoom', uuid)"
           />
           </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', 'moveTo'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue', 'queueToWaitingRoom', '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)"
+      @queueToWaitingRoom="(uuid) => $emit('queueToWaitingRoom', uuid)"
       @moveTo="(data) => $emit('moveTo', data)"
     />
 </div>

src/main.js

@@ -6,7 +6,7 @@ import App from './App.vue'
 import Main from './Main.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faMagnifyingGlass, faList, faChair, faArrowUp, faHistory, faPlus, faStepForward, faTimes, faArrowsUpToLine } from '@fortawesome/free-solid-svg-icons'
+import { faMagnifyingGlass, faList, faChair, faArrowUp, faHistory, faPlus, faStepForward, faTimes, faArrowsUpToLine, faArrowsDownToLine } from '@fortawesome/free-solid-svg-icons'
 import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 
 import 'foundation-sites/dist/css/foundation.min.css'
@@ -21,6 +21,7 @@ library.add(faTimes)
 library.add(faArrowUp)
 library.add(faChair)
 library.add(faArrowsUpToLine)
+library.add(faArrowsDownToLine)
 
 window.jQuery = jquery;
 window.$ = jquery;