Merge branch 'touch-move'

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) 
 }
@@ -184,15 +189,44 @@ function skip(uuid) {
 }
 
 function registerSocketEvents() {
-    state.socket = io(state.value.server)
+    state.socket = io(state.value.server, 
+        {
+            auth: {
+                type: "web",
+                room: state.value.room,
+                secret: state.value.secret,
+            }
+        }
+    )
     state.socket.on("search-results", (results) => {
       state.value.searching = false
       state.value.search.searchResults = results.results
     })
 
+    state.socket.on("disconnect", (reason) => {
+        console.warn("Disconnected from server")        
+        state.value.joined = false
+        state.value.join_msg = "Disconnected from server, please check your connection and try again."
+    })
     state.socket.on("connect", () => { joinRoom() })
+    state.socket.on("connect_error", (err) => {
+        console.warn("Connection error:", err.message);
+        state.value.joined = false;        
+        state.value.join_msg = "<strong>No such room!</strong> <br/>" + 
+            "Please use the correct room code your organizer provided you.<br/>" + 
+            "To host your own syng powered karaoke events, please download and " + 
+            "install <a href='https://github.com/christofsteel/syng' target='_blank'>Syng</a>"
+    })
 
     state.socket.io.on("reconnect", () => { joinRoom() })
+    state.socket.io.on("reconnect_error", () => {
+        state.value.joined = false;
+    })
+
+    state.socket.on("admin", (is_admin) => {
+        console.log("Admin status: " + is_admin)
+        state.value.admin = is_admin
+        })
 
     state.socket.on("state", (val) => {
       state.value.queue=val.queue
@@ -253,7 +287,14 @@ function registerSocketEvents() {
 
 function joinRoom() {
     console.log("Joining room " + state.value.room)
-    state.socket.emit("register-web", {"room": state.value.room}, (response) => {
+    localStorage.name = state.value.name
+    localStorage.server = state.value.server
+    localStorage.room = state.value.room
+    localStorage.secret = state.value.secret
+    localStorage.uid = state.value.uid
+    state.value.joined = true
+    router.push({name: "room", params: {room: state.value.room}})
+    /* state.socket.emit("register-web", {"room": state.value.room}, (response) => {
     if(response === true) {
       localStorage.name = state.value.name
       localStorage.server = state.value.server
@@ -272,12 +313,9 @@ function joinRoom() {
                 "Please use the correct room code your organizer provided you.<br/>" + 
                 "To host your own syng powered karaoke events, please download and " + 
                 "install <a href='https://github.com/christofsteel/syng' target='_blank'>Syng</a>"
-        if(state.value.joined) {
-            state.socket.disconnect()
-            setTimeout(() => connect(), 2000)
-        }
+      state.socket.disconnect()
     }
-  })
+  }) */
 }
 </script>
 
@@ -295,6 +333,7 @@ function joinRoom() {
         @moveUp="moveUp"
         @moveTo="moveTo"
         @waitingRoomToQueue="waitingRoomToQueue"
+        @queueToWaitingRoom="queueToWaitingRoom"
         />
     <DesktopLayout 
         v-show="!state.is_small" 
@@ -307,6 +346,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) {
@@ -156,6 +156,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;