Force to waiting room, but admin can lift to queue

src/App.vue

@@ -77,6 +77,10 @@ function search() {
   }
 }
 
+function waitingRoomToQueue(uuid) {
+    state.socket.emit("waiting-room-to-queue", {"uuid": uuid})
+}
+
 function append(entry) {
     checked_append_with_name(entry, state.value.name) 
 }
@@ -265,6 +269,7 @@ function joinRoom() {
         @skip="skip"
         @skipCurrent="skipCurrent"
         @moveUp="moveUp"
+        @waitingRoomToQueue="waitingRoomToQueue"
         />
     <DesktopLayout 
         v-show="!state.is_small" 
@@ -275,6 +280,7 @@ function joinRoom() {
         @skip="skip"
         @skipCurrent="skipCurrent"
         @moveUp="moveUp"
+        @waitingRoomToQueue="waitingRoomToQueue"
         />
     <WelcomeReveal
       v-if="!state.joined"
@@ -312,6 +318,7 @@ function joinRoom() {
   <Footer
     :name="state.name"
     @update:name="setName"
+    @admin="state.admin"
     @logout="emptyLocalStorageAndLogout"
     />
 </div>

src/components/AlreadyQueued.vue

@@ -8,21 +8,19 @@ const props = defineProps(["double_entry"]);
 <p>
 <b>{{double_entry.artist}} - {{double_entry.title}}</b> <i>({{double_entry.performer}})</i>
 </p>
-<p>You can
+<p>To give everyone a chance to sing, you are limited to one song in the active queue, but you can add yourself to the <b>waiting room</b>.
+Songs in the waiting room will be added to the queue, once your old song leaves the queue.</p>
+<p>If you think this is an error, you can
 <ul>
-<li>append the song anyway, or</li>
+<li>choose another name, or</li>
-<li>add it to the <i>waiting room</i>.</li>
+<li>add it to the waiting room and talk to the organizers for manual insertion into the queue.</li>
 </ul>
 </p>
-<p>Songs in the waiting room will be added to the queue, once the last song of the performer leaves the queue.</p>
 <div class="grid-x">
   <div class="cell medium-6 small-12 btn">
-    <button class="button expanded" @click="$emit('wait', double_entry.reason == 'uid' ? double_entry.uid : null)">Waiting room</button>
+    <button class="button expanded" @click="$emit('wait', double_entry.reason == 'uid' ? double_entry.uid : null)">Add to waiting room</button>
   </div>
   <div class="cell medium-6 small-12 btn">
-    <button class="button expanded" @click="$emit('append')">Append anyway</button>
-  </div>
-  <div class="cell medium-12 small-12 btn">
     <button class="button expanded alert" @click="$emit('cancel')">Cancel</button>
   </div>
 </div>

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'])
+const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
 </script>
 
 
@@ -18,6 +18,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
       @skip="(uuid) => $emit('skip', uuid)"
       @moveUp="(uuid) => $emit('moveUp', uuid)"
       @skipCurrent="$emit('skipCurrent')"
+      @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', 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'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
 
 function skip() {
   if(props.current) {
@@ -36,11 +36,17 @@ const eta = computed(() =>{
             <span v-if="!current && !waitingRoom" class="eta">{{ eta }}</span>
           </div>
           <div v-if="admin" class="cell small-3">
-                  <button class="button alert fright" @click="skip">
+                  <button v-if="!waitingRoom" class="button alert fright" @click="skip">
                   <font-awesome-icon icon="fa-solid fa-times" />
                   </button>
                   <button 
-                    class="button alert fright" 
+                    class="button success fright" 
+                    v-if="waitingRoom" 
+                    @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" />

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'])
+const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
 
 </script>
 
@@ -26,6 +26,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
             @skip="(uuid) => $emit('skip', uuid)"
             @moveUp="(uuid) => $emit('moveUp', uuid)"
             @skipCurrent="$emit('skipCurrent')"
+            @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', 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']);
-const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
 </script>
 
 <template>
@@ -15,6 +15,7 @@ const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
       @skip="(uuid) => $emit('skip', uuid)"
       @moveUp="(uuid) => $emit('moveUp', uuid)"
       @skipCurrent="$emit('skipCurrent')"
+      @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', 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']);
-const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
+const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
 
 let currentTime = reactive({time: Date.now()})
 
@@ -52,6 +52,7 @@ function offset(index) {
             @skip="(uuid) => $emit('skip', uuid)" 
             @skipCurrent="$emit('skipCurrent')"
             @moveUp="(uuid) => $emit('moveUp', uuid)" 
+            @waitingRoomToQueue="(uuid) => $emit('waitingRoomToQueue', uuid)"
           />
           </ul>
       </div>

src/components/QueueTab.vue

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

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 } from '@fortawesome/free-solid-svg-icons'
+import { faMagnifyingGlass, faList, faChair, faArrowUp, faHistory, faPlus, faStepForward, faTimes, faArrowsUpToLine } from '@fortawesome/free-solid-svg-icons'
 import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 
 import 'foundation-sites/dist/css/foundation.min.css'
@@ -20,6 +20,7 @@ library.add(faYoutube)
 library.add(faTimes)
 library.add(faArrowUp)
 library.add(faChair)
+library.add(faArrowsUpToLine)
 
 window.jQuery = jquery;
 window.$ = jquery;