christofsteel/syng-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updatable config, server side checking of waiting room

Browse source
This commit is contained in:
Christoph Stahl 2023-11-01 13:04:30 +01:00
parent 5e5c7d94a0
commit 92c5792831
9 changed files with 110 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
src/App.vue
View file

@ -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");
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);
}
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>

5
src/components/AlreadyQueued.vue
View file

@ -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>

37
src/components/Config.vue Normal file
View file

@ -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>

1
src/components/DesktopLayout.vue
View file

@ -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)"

5
src/components/Footer.vue
View file

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

1
src/components/MobileLayout.vue
View file

@ -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')"

3
src/components/QueueDesktop.vue
View file

@ -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')"

6
src/components/QueueInner.vue
View file

@ -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"

3
src/components/QueueTab.vue
View file

@ -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')"