Updatable config, server side checking of waiting room

src/App.vue

@@ -10,6 +10,7 @@ import WelcomeReveal from './components/WelcomeReveal.vue'
 import GetUserName from './components/GetUserName.vue'
 import Footer from './components/Footer.vue'
 import AlreadyQueued from './components/AlreadyQueued.vue'
+import Config from './components/Config.vue'
 
 const router = useRouter()
 
@@ -31,7 +32,9 @@ const state = ref({
     'last_msg': "",
     'join_msg': null,
     'uid': null,
-    'double_entry': {'artist': null, 'title': null, 'reason': null}
+    'double_entry': {'artist': null, 'title': null, 'reason': null},
+    'waiting_room_policy': null,
+    'config': {}
 })
 
 onMounted(() => { 
@@ -66,6 +69,10 @@ function setCurrentName(name) { state.value.current_name = name }
 function updateName(evt) { evt.target.textContent = state.value.name;}
 function setServer(server) { state.value.server = server }
 function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm }
+function update_config(config) {     
+    state.socket.emit("update_config", {"config": config})
+    close_config()
+}
 
 function search() {
   var yt_checker = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
@@ -77,6 +84,10 @@ function search() {
   }
 }
 
+function show_config() {
+        state.socket.emit("show_config");
+        }
+
 function waitingRoomToQueue(uuid) {
     state.socket.emit("waiting-room-to-queue", {"uuid": uuid})
 }
@@ -91,45 +102,21 @@ function checked_append_with_name(entry, name) {
         $("#getusername").foundation("open");
     } else {
         $("#getusername").foundation("close");
-
+        raw_append(entry.ident, name, entry.source, state.value.uid);
-        var splitUserName = name.toLowerCase()
-            .replace(".", " ")
-            .replace(","," ")
-            .replace(/[^a-zA-Z0-9\s\b]/, "")
-            .split(/\b/).filter(e => e.trim().length > 0 && !["der", "die", "das", "und", "alle"].includes(e)); 
-        var uid_in_queue = false;
-        var name_in_queue = false;
-        for (const entry of state.value.queue) {
-            /* if(entry.uid == state.value.uid && !state.value.admin) { 
-                state.value.double_entry = entry;
-                state.value.double_entry.reason = "uid";
-                uid_in_queue = true;
-                break;
-            } */
-
-            var splitEntryUserName = entry.performer.toLowerCase()
-                .replace(".", " ")
-                .replace(","," ")
-                .replace(/[^a-zA-Z0-9\s\b]/, "")
-                .split(/\b/).filter(e => e.trim().length > 0 && !["der", "die", "das", "und", "alle"].includes(e)); 
-            var difference = splitUserName.filter(x => splitEntryUserName.includes(x));
-            if (difference.length > 0) {
-                state.value.double_entry = entry;
-                state.value.double_entry.reason = "name";
-                name_in_queue = true;
-                break;
-            }
-        }
-
-        if(name_in_queue || uid_in_queue) {
-            state.value.current_entry = entry;
-            $("#alreadyqueued").foundation("open");
-        } else {
-            raw_append(entry.ident, name, entry.source, state.value.uid);
-        }
     }
 }
 
+function append_anyway(ident, name, source, uid) {
+    $("#getusername").foundation("close");
+    $("#alreadyqueued").foundation("close");
+
+    state.value.current_name = null;
+    state.value.current_entry = null;
+    state.value.double_entry = {'artist': null, 'title': null, 'reason': null};
+    state.socket.emit("append-anyway", {"ident": ident, "performer": name, "source": source, "uid": uid });
+    $("#queue-tab-title").click();
+}
+
 function raw_append(ident, name, source, uid) {
     $("#getusername").foundation("close");
     $("#alreadyqueued").foundation("close");
@@ -156,6 +143,9 @@ function close_name() {
   state.value.current_entry = null
   state.value.current_name = null
 }
+function close_config() {
+  $("#config").foundation("close")
+}
 
 function close_already_queued() {
     $("#alreadyqueued").foundation("close");
@@ -202,6 +192,18 @@ function registerSocketEvents() {
       state.value.queue=val.queue
       state.value.recent=val.recent
       state.value.waiting_room = val.waiting_room
+      state.value.waiting_room_policy = val.config.waiting_room_policy
+    })
+
+    state.socket.on("config", (response) => {
+        state.value.config=response
+        $("#config").foundation("open")
+    })
+
+    state.socket.on("update_config", (response) => {
+        console.log(response)
+        state.value.waiting_room_policy = response["waiting_room_policy"]
+        console.log(state)
     })
 
     state.socket.on("msg", (response) => {        
@@ -209,6 +211,12 @@ function registerSocketEvents() {
         $("#msg").foundation("open")
     })
 
+    state.socket.on("ask_for_waitingroom", (response) => {
+        state.value.double_entry = response.old_entry;
+        state.value.current_entry = response.current_entry;
+        $("#alreadyqueued").foundation("open");
+    }) 
+
     state.socket.on("err", (response) => {    
         console.log(response)
         switch(response.type) {
@@ -217,6 +225,12 @@ function registerSocketEvents() {
             var date = new Date(response.end_time * 1000).toLocaleString();
             state.value.last_msg = prefix + date;
             break;
+        case "JSON_MALFORMED":
+            state.value.last_msg = "Malformed JSON in config"
+            break;
+        case "NO_ADMIN":
+            state.value.last_msg = "Forbidden: Not in admin mode"
+            break;
         default:
             state.value.last_msg = "Unknown Error";
             break;
@@ -303,9 +317,10 @@ function joinRoom() {
       @close_name="close_name"
       />
     <AlreadyQueued
-      @append="raw_append(state.current_entry.ident, state.name ? state.name : state.current_name, state.current_entry.source, state.uid)"
+      @append="append_anyway(state.current_entry.ident, state.name ? state.name : state.current_name, state.current_entry.source, state.uid)"
       @wait="(uid) => wait_append(state.current_entry.ident, state.name ? state.name : state.current_name, state.current_entry.source, null)"
       @cancel="close_already_queued"
+      :waiting_room_policy="state.waiting_room_policy"
       :double_entry="state.double_entry"
       />
     <div class="reveal" id="msg" data-reveal>
@@ -317,10 +332,13 @@ function joinRoom() {
   </div>
   <Footer
     :name="state.name"
+    :admin="state.admin"
+    :show_name="state.show_name"
     @update:name="setName"
-    @admin="state.admin"
     @logout="emptyLocalStorageAndLogout"
+    @config="show_config"
     />
+      <Config :config="state.config" @update_config="update_config" @close="close_config"/>
 </div>
 </template>
 

src/components/AlreadyQueued.vue

@@ -1,6 +1,6 @@
 <script setup>
 const emits = defineEmits(["append", "wait", "cancel"]);
-const props = defineProps(["double_entry"]);
+const props = defineProps(["double_entry", "waiting_room_policy"]);
 </script>
 <template>
 <div class="reveal" id="alreadyqueued" data-reveal >
@@ -23,6 +23,9 @@ Songs in the waiting room will be added to the queue, once your old song leaves
   <div class="cell medium-6 small-12 btn">
     <button class="button expanded alert" @click="$emit('cancel')">Cancel</button>
   </div>
+  <div v-show="waiting_room_policy && waiting_room_policy.toLowerCase() == 'optional'" class="cell medium-12 small-12 btn">
+    <button class="button expanded" @click="$emit('append')">Append Anyway</button>
+  </div>
 </div>
 </div>
 </template>

src/components/Config.vue

@@ -0,0 +1,37 @@
+<script setup>
+  import {ref} from 'vue'
+
+const props = defineProps(["config"])
+const emits = defineEmits(["update_config", "close"])
+
+const new_cfg = ref({"config": ""})
+
+function update_new_cfg(evt) {
+  new_cfg.value.config = evt.target.value
+}
+
+function send_cfg() {
+console.log(new_cfg.value.config)
+  emits('update_config', new_cfg.value.config)
+}
+</script>
+
+<template>
+  <div class="reveal" id="config" data-reveal >
+    <h1>Config</h1>
+    <textarea @input="update_new_cfg">{{config}}</textarea>
+    <div class="grid-x">
+      <div class="cell medium-6 small-12 btn">
+        <button
+          class="button expanded"
+          @click="send_cfg"
+          >
+          Ok
+        </button>
+      </div>
+      <div class="cell medium-6 small-12 btn">
+        <button class="button expanded alert" @click="$emit('close')">Cancel</button>
+      </div>
+    </div>
+  </div>
+</template>

src/components/DesktopLayout.vue

@@ -14,6 +14,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
     <QueueDesktop
       :queue="state.queue"
       :waiting_room="state.waiting_room"
+      :waiting_room_policy="state.waiting_room_policy"
       :admin="state.admin"
       @skip="(uuid) => $emit('skip', uuid)"
       @moveUp="(uuid) => $emit('moveUp', uuid)"

src/components/Footer.vue

@@ -1,6 +1,6 @@
 <script setup>
-const props = defineProps(['name'])
+const props = defineProps(['name', 'admin', 'show_name'])
-const emits = defineEmits(['update:name', 'logout'])
+const emits = defineEmits(['update:name', 'logout', 'config'])
 </script>
 <template>
   <footer>
@@ -13,6 +13,7 @@ const emits = defineEmits(['update:name', 'logout'])
       {{ 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>
   </footer>
 </template>
 <style scoped>

src/components/MobileLayout.vue

@@ -23,6 +23,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skip
             :queue="state.queue"
             :admin="state.admin"
             :waiting_room="state.waiting_room"
+            :waiting_room_enabled="state.waiting_room_enabled"
             @skip="(uuid) => $emit('skip', uuid)"
             @moveUp="(uuid) => $emit('moveUp', uuid)"
             @skipCurrent="$emit('skipCurrent')"

src/components/QueueDesktop.vue

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

src/components/QueueInner.vue

@@ -2,7 +2,7 @@
 import { onMounted, reactive } from 'vue'
 import Entry from './Entry.vue'
 
-const props = defineProps(['queue', 'waiting_room', 'admin']);
+const props = defineProps(['queue', 'waiting_room', 'admin', 'waiting_room_policy']);
 const emits = defineEmits(['skip', 'skipCurrent', 'moveUp', 'waitingRoomToQueue'])
 
 let currentTime = reactive({time: Date.now()})
@@ -42,9 +42,9 @@ function offset(index) {
             @moveUp="(uuid) => $emit('moveUp', uuid)" 
           />
           </ul>
-          <div class="header">Waiting room</div>
+          <div v-show="waiting_room_policy" class="header">Waiting room</div>
           <ul id="waiting_room" class="vertical menu">
-          <Entry 
+          <Entry v-show="waiting_room_policy"
             v-for="(entry, index) in waiting_room" 
             :entry="entry" 
             :admin="admin"

src/components/QueueTab.vue

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