Added waiting room feature

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "foundation-vue",
+  "name": "syng-web",
-  "version": "0.0.0",
+  "version": "2.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/App.vue

@@ -80,9 +80,6 @@ function append(entry) {
     checked_append_with_name(entry, state.value.name) 
 }
 function checked_append_with_name(entry, name) {
-    console.log("checked_append_with_name")
-    console.log(entry)
-    console.log(name)
     if(name == "" || name == null) {
         state.value.current_entry = entry;
         state.value.current_name = "";
@@ -97,7 +94,8 @@ function checked_append_with_name(entry, name) {
             }
         }
 
-        if(in_queue) {
+        if(in_queue && !state.value.admin) {
+            state.value.current_entry = entry;
             $("#alreadyqueued").foundation("open");
         } else {
             raw_append(entry.ident, name, entry.source, state.value.uid);
@@ -121,7 +119,6 @@ function wait_append(ident, name, source, uid) {
 
     state.value.current_name = null;
     state.value.current_entry = null;
-    console.log(name)
     state.socket.emit("waiting-room-append", {"ident": ident, "performer": name, "source": source, "uid": uid });
     $("#queue-tab-title").click();
 }

src/assets/main.css

@@ -1,7 +1,7 @@
 li {
     opacity: 0.9;
-    margin-left: 0.2em;
+    /* margin-left: 0.2em; */
-    margin-right: 0.2em;
+    /* margin-right: 0.2em; */
 }
 
 .row {
@@ -10,7 +10,7 @@ li {
 }
 
 .header {
-		background-color: #008000;
+		background-color: #008000 !important;
 		font-weight: bold;
 		color: #ffffff;
 		display: block;

src/components/AlreadyQueued.vue

@@ -4,10 +4,23 @@ const emits = defineEmits(["append", "wait", "cancel"])
 <template>
 <div class="reveal" id="alreadyqueued" data-reveal >
 <h1>You are already in queue</h1>
-<p>While you can append the song anyway, you can also queue it to the "waiting room".</p>
+<p>While you can append the song anyway, you can also add it to the <i>waiting room</i>.</p>
 <p>It will be appended to the queue as soon, as your next song leaves the queue.</p>
-<button class="button" @click="$emit('append')">Append</button>
+<div class="grid-x">
-<button class="button" @click="$emit('wait')">Waiting Room</button>
+  <div class="cell medium-6 small-12 btn">
-<button class="button" @click="$emit('cancel')">Abort</button>
+    <button class="button expanded" @click="$emit('wait')">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>
 </div>
 </template>
+<style scoped>
+.btn {
+  padding: 3px;
+}
+</style>

src/components/Entry.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-const props = defineProps(['admin', 'entry', 'current', 'firstStartedAt', 'offset', 'currentTime', 'additionalClass'])
+const props = defineProps(['admin', 'entry', 'current', 'firstStartedAt', 'offset', 'currentTime', 'waitingRoom'])
 const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
 
 function skip() {
@@ -27,13 +27,13 @@ const eta = computed(() =>{
 </script>
 
 <template>
-  <li :class="[{ current: current }, additionalClass]">
+  <li :class="[{ current: current }, {waitingRoom: waitingRoom}]">
       <div class="grid-x">
           <div class="cell" :class="{'small-9': admin}">
             <span class="artist">{{ entry.artist }}</span>
             <span class="title">{{ entry.title }}</span><br />
-            <span class="performer">{{ entry.performer }} [{{ entry.uid }}]</span>
+            <span class="performer">{{ entry.performer }}</span>
-            <span v-if="!current && eta" class="eta">{{ eta }}</span>
+            <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">
@@ -41,7 +41,7 @@ const eta = computed(() =>{
                   </button>
                   <button 
                     class="button alert fright" 
-                    v-if="!current" 
+                    v-if="!current && !waitingRoom" 
                     @click="$emit('moveUp', entry.uuid)" >
                   <font-awesome-icon icon="fa-solid fa-arrow-up" />
                   </button>

src/components/QueueInner.vue

@@ -42,13 +42,13 @@ function offset(index) {
             @moveUp="(uuid) => $emit('moveUp', uuid)" 
           />
           </ul>
+          <div class="header">Waiting room</div>
           <ul id="waiting_room" class="vertical menu">
-          <li class="heading">Waiting room</li>
           <Entry 
             v-for="(entry, index) in waiting_room" 
             :entry="entry" 
             :admin="admin"
-            class="waitingRoom"
+            :waitingRoom="true"
             @skip="(uuid) => $emit('skip', uuid)" 
             @skipCurrent="$emit('skipCurrent')"
             @moveUp="(uuid) => $emit('moveUp', uuid)" 
@@ -59,15 +59,6 @@ function offset(index) {
 </template>
 <style scoped>
 
-#waiting_room {
-    background: repeating-linear-gradient(
-  45deg,
-  #000000,
-  #000000 10px,
-  #004000 10px,
-  #004000 20px
-);
-  }
 #waiting_room li{
     opacity: 0.5;
   }
@@ -75,4 +66,8 @@ function offset(index) {
   background: #00ff00;
   font-weight: bold;
 }
+
+.menu {
+  margin-bottom: .5rem;
+}
 </style>

src/components/Result.vue

@@ -14,6 +14,9 @@ const emits = defineEmits(['append'])
     <a class="button alert fright" target="_blank" rel="noreferrer noopener" :href="result.ident" v-if="result.source == 'youtube'">
 <font-awesome-icon icon="fa-brands fa-youtube" />
     </a>
+    <!-- <button class="button fright" @click="$emit('append')"> -->
+    <!--   <font-awesome-icon icon="fa-solid fa-chair" /> -->
+    <!-- </button> -->
     <button class="button fright" @click="$emit('append')">
       <font-awesome-icon icon="fa-solid fa-plus" />
     </button>

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