From 596f2b1baa71c503278752f91116d565ec250880 Mon Sep 17 00:00:00 2001
From: Christoph Stahl <christoph.stahl@tu-dortmund.de>
Date: Fri, 25 Nov 2022 15:54:36 +0100
Subject: [PATCH] able to select new username on each append

---
 src/App.vue                      | 20 ++++++++++++++++----
 src/components/WelcomeReveal.vue |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 98239fd..84c7b39 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,9 @@ const state = ref({
     'socket': undefined, 
     'is_small': window.innerWidth < 768,
     'admin': false,
-    'secret': undefined
+    'secret': undefined,
+    'current_entry': undefined,
+    'current_name': undefined,
 })
 
 onMounted(() => { 
@@ -31,6 +33,7 @@ onMounted(() => {
 function setRoomCode(room) { state.value.room = room }
 function setSecret(secret) { state.value.secret = secret }
 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 setServer(server) { state.value.server = server }
 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, name) {
   if(name == "" || name == undefined) {
+    state.value.current_entry = entry
     $("#getusername").foundation("open")
   } 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" />
     <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" />
-    <div class="reveal" id="getusername" data-reveal data-close-on-click="false" >
-    Test123
+    <div class="reveal" id="getusername" data-reveal data-close-on-esc="false" data-close-on-click="false" >
+     <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>
 <footer>
diff --git a/src/components/WelcomeReveal.vue b/src/components/WelcomeReveal.vue
index d461017..15babf1 100644
--- a/src/components/WelcomeReveal.vue
+++ b/src/components/WelcomeReveal.vue
@@ -15,7 +15,7 @@ onBeforeUnmount(() => {
 })
 </script>
 <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>
 <p>
   Please enter the room code and your name