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

able to select new username on each append

Browse source
This commit is contained in:
Christoph Stahl 2022-11-25 15:54:36 +01:00
parent 3ff710e52b
commit 596f2b1baa
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/App.vue
View file

@ -20,7 +20,9 @@ const state = ref({
'socket': undefined, 'socket': undefined,
'is_small': window.innerWidth < 768, 'is_small': window.innerWidth < 768,
'admin': false, 'admin': false,
'secret': undefined 'secret': undefined,
'current_entry': undefined,
'current_name': undefined,
}) })
onMounted(() => { onMounted(() => {
@ -31,6 +33,7 @@ onMounted(() => {
function setRoomCode(room) { state.value.room = room } function setRoomCode(room) { state.value.room = room }
function setSecret(secret) { state.value.secret = secret } function setSecret(secret) { state.value.secret = secret }
function setName(name) { state.value.name = name } function setName(name) { state.value.name = name }
function setCurrentName(name) { state.value.current_name = name }
function updateName(evt) { evt.target.textContent = state.value.name;} function updateName(evt) { evt.target.textContent = state.value.name;}
function setServer(server) { state.value.server = server } function setServer(server) { state.value.server = server }
function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm } function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm }
@ -42,9 +45,13 @@ function search() {
function append(entry) {_append(entry, state.value.name) } function append(entry) {_append(entry, state.value.name) }
function _append(entry, name) { function _append(entry, name) {
if(name == "" || name == undefined) { if(name == "" || name == undefined) {
state.value.current_entry = entry
$("#getusername").foundation("open") $("#getusername").foundation("open")
} else { } else {
state.socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source }) $("#getusername").foundation("close")
state.value.current_entry = undefined
state.value.current_name = undefined
state.socket.emit("append", {"id": entry.id, "performer": name, "source": entry.source })
} }
} }
@ -94,8 +101,13 @@ function joinRoom() {
<MobileLayout v-show="state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" /> <MobileLayout v-show="state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
<DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" /> <DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
<WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" @update:secret="setSecret" /> <WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" @update:secret="setSecret" />
<div class="reveal" id="getusername" data-reveal data-close-on-click="false" > <div class="reveal" id="getusername" data-reveal data-close-on-esc="false" data-close-on-click="false" >
Test123 <h1>Please enter your name</h1>
<label>Name
<input type="text" @input="(evt) => setCurrentName(evt.target.value)" placeholder="Arno Nym">
</label>
<button class="button" @click="() => _append(state.current_entry, state.current_name)">Ok</button>
<button class="button" @click="append">Abort</button>
</div> </div>
</div> </div>
<footer> <footer>

2
src/components/WelcomeReveal.vue
View file

@ -15,7 +15,7 @@ onBeforeUnmount(() => {
}) })
</script> </script>
<template> <template>
<div class="reveal" id="welcome" data-reveal data-close-on-click="false"> <div class="reveal" id="welcome" data-reveal data-close-on-esc="false" data-close-on-click="false">
<h1>Welcome to Syng</h1> <h1>Welcome to Syng</h1>
<p> <p>
Please enter the room code and your name Please enter the room code and your name