Added Welcome screen

src/App.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref, onMounted, onDeactivated } from 'vue'
-import $ from 'jquery'
 import { io } from "socket.io-client"
 import { useRoute, useRouter } from 'vue-router'
 
 import MobileLayout from './components/MobileLayout.vue'
 import DesktopLayout from './components/DesktopLayout.vue'
+import WelcomeReveal from './components/WelcomeReveal.vue'
 
 const router=useRouter()
 
@@ -17,33 +17,28 @@ const is_small = ref(window.innerWidth < 768)
 const state = ref({
 'search': {'searchTerm': '', 'searchResults': []},
 'queue': [ ],
-'roomCode': undefined,
-'name': undefined
+'room': useRoute().params.room,
+'name': undefined,
+'joined': false
 })
 
 onMounted(() => {
   window.addEventListener("resize", resizeBrowserHandler)
-  $(document).foundation();
-  $("#welcome").foundation("open")
-  if(useRoute().params.room) {
-    state.value.roomCode = useRoute().params.room
-    closeWelcome()
-  }
 })
 
-function setRoomCode(roomEvent) {
-state.value.roomCode = roomEvent.target.value
+function setRoomCode(room) {
+state.value.room = room
 }
 
-function setName(nameEvent) {
-state.value.name = nameEvent.target.value
+function setName(name) {
+state.value.name = name
 }
 
 function updateSearchTerm(val) {
 state.value.search.searchTerm = val
 }
 
-const socket = io("ws://localhost:8080")
+const socket = io()
 
 function search() {
   socket.emit("search", {"query": state.value.search.searchTerm })
@@ -53,17 +48,15 @@ function append(entry) {
   socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source })
 }
 
-function closeWelcome() {
-  if(state.value.roomCode != undefined) {
-    socket.emit("register-web", {"room": state.value.roomCode}, (response) => {
+function joinRoom() {
+  socket.emit("register-web", {"room": state.value.room}, (response) => {
     if(response === true) {
-      $('#welcome').foundation("close")
-      router.push({name: "room", params: {room: state.value.roomCode}})
+      state.value.joined = true
+      router.push({name: "room", params: {room: state.value.room}})
     } else {
       console.log("no such room")
     }
-   }) 
-  }
+  })
 }
 
 socket.on("search-results", (results) => {
@@ -71,11 +64,14 @@ socket.on("search-results", (results) => {
 })
 
 socket.on("connect", () =>
-  { socket.emit("register-web", {"room": "ABCD"}) }
+  { 
+  joinRoom()
+  }
   )
 
 socket.on("state", (val) => {
-  state.value.queue=val
+  state.value.queue=val.queue
+  state.value.recent=val.recent
 })
 </script>
 
@@ -87,34 +83,9 @@ socket.on("state", (val) => {
     <div class="row" id="main-content">
       <MobileLayout v-show="is_small" :state="state" @update:searchTerm="updateSearchTerm" />
       <DesktopLayout v-show="!is_small" :state="state" @update:searchTerm="updateSearchTerm" @search="search" @append="append" />
-      <div class="reveal" id="welcome" data-reveal data-close-on-click="false">
-      <h1>Welcome to Syng</h1>
-      <p>
-        Please enter the room code and your name
-      </p>
-      
-        <div class="grid-container">
-          <div class="grid-x grid-padding-x">
-            <div class="medium-6 cell">
-              <label>Room code
-                <input type="text" @input="setRoomCode" placeholder="XXXX">
-              </label>
-            </div>
-            <div class="medium-6 cell">
-              <label>Name
-                <input type="text" @input="setName" placeholder="Leave empty to be asked on append">
-              </label>
-            </div>
-          </div>
-        </div>
-        <button class="button" @click="closeWelcome" >Connect</button>
-      <button class="close-button" data-close aria-label="Close reveal" type="button">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      </div>
+      <WelcomeReveal v-if="!state.joined" :room="state.room" @connect="joinRoom" @update:room="setRoomCode" @update:name="setName" />
     </div>
   </div>
-  <router-view></router-view>
 </template>
 
 <style scoped>

src/components/DesktopLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import SearchDesktop from './SearchDesktop.vue'
 import QueueDesktop from './QueueDesktop.vue'
+import RecentDesktop from './RecentDesktop.vue'
 
 const props = defineProps(['state']);
 const emit = defineEmits(['update:searchTerm', 'search', 'append'])
@@ -11,26 +12,6 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append'])
   <div class="splitter">
     <SearchDesktop :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
     <QueueDesktop :queue="state.queue" />
-      <div class="comp-column" id="right-side">
-              <div class="header">Recent</div>
-              <div id="large-recent-list">
-                  <div class="vsplit">
-                      <div id="large-recent-list-wrapper" class="results">
-                          <ol id="large-last10" class="vertical menu">
-                              <li rv-each-entry="queue.last10">
-                                  <div class="row">
-                                      <span class="artist">{ entry.artist }</span>
-                                      <span class="title">{ entry.title }</span>
-                                      <span class="album">{ entry.album }</span>
-                                  </div>
-                                  <div class="row">
-                                      <span class="singer">{ entry.performer }</span>
-                                  </div>
-                              </li>
-                          </ol>
-                      </div>
-                  </div>
-              </div>
-      </div>
+    <RecentDesktop :recent="state.recent" />
   </div>
 </template>

src/components/Entry.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  props: ['admin', 'artist', 'title', 'album', 'performer', 'current']
+  props: ['admin', 'entry', 'current']
 }
 </script>
 
@@ -8,9 +8,9 @@ export default {
   <li :class="{ current: current }">
       <div class="grid-x">
           <div class="cell" :class="{'small-9': admin}">
-            <span class="artist">{{ artist }}</span>
-            <span class="title">{{ title }}</span><br />
-            <span class="performer">{{ performer }}</span>
+            <span class="artist">{{ entry.artist }}</span>
+            <span class="title">{{ entry.title }}</span><br />
+            <span class="performer">{{ entry.performer }}</span>
           </div>
           <div v-if="admin" class="cell small-3">
                   <button class="button alert fright" v-if="!current">

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'])
+const emit = defineEmits(['update:searchTerm', 'search'])
 
 </script>
 
@@ -18,9 +18,9 @@ const emit = defineEmits(['update:searchTerm'])
             <TabHeader link="#recent-list" icon="fa-history" />
         </div>
         <div class="tabs-container" data-tabs-content="main-tab">
-          <SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)"/>
+          <SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')"/>
           <QueueTab :queue="state.queue" />
-          <RecentTab />
+          <RecentTab :recent="state.recent" />
         </div>
     </div>
 </div>

src/components/QueueInner.vue

@@ -12,7 +12,7 @@ export default {
   <div class="vsplit">
       <div id="queue-list-wrapper" class="results">
           <ul id="queue" class="vertical menu">
-          <Entry v-for="(entry, index) in queue" :artist="entry.artist" :title="entry.title" :album="entry.album" :performer="entry.performer" :current="index == 0" :admin="admin" />
+          <Entry v-for="(entry, index) in queue" :entry="entry" :current="index == 0" :admin="admin" />
           <li v-if="admin">
               <div class="row">
                   <div class="columns small-12">

src/components/RecentDesktop.vue

@@ -0,0 +1,11 @@
+<script setup>
+import RecentInner from './RecentInner.vue'
+
+const props = defineProps(['recent'])
+</script>
+<template>
+  <div class="comp-column" id="right-side">
+    <div class="header">Recent</div>
+    <RecentInner :state="recent" />
+  </div>
+</template>

src/components/RecentInner.vue

@@ -0,0 +1,14 @@
+<script setup>
+import Entry from './Entry.vue'
+
+const props = defineProps(['recent'])
+</script>
+<template>
+  <div class="vsplit">
+      <div id="recent-list-wrapper" class="results">
+          <ul id="last10" class="vertical menu">
+            <Entry v-for="entry in recent" :entry="entry" />
+          </ul>
+      </div>
+  </div>
+</template>

src/components/RecentTab.vue

@@ -1,17 +1,11 @@
 <script setup>
-import Entry from './Entry.vue'
+import RecentInner from './RecentInner.vue'
+
+const props = defineProps(['recent'])
 </script>
 
 <template>
   <div class="tabs-panel" id="recent-list">
-      <div class="vsplit">
-          <div id="recent-list-wrapper" class="results">
-              <ol id="last10" class="vertical menu">
-              <Entry artist="Artist" title="Title" album="Album" performer="Performer" />
-              <Entry artist="Artist" title="Title" album="Album" performer="Performer" />
-              <Entry artist="Artist" title="Title" album="Album" performer="Performer" />
-              </ol>
-          </div>
-      </div>
+    <RecentInner :recent="recent" />
   </div>
 </template>

src/components/SearchBar.vue

@@ -5,7 +5,7 @@ const emit = defineEmits(['update:searchTerm', 'search'])
 
 <template>
     <div class="input-group">
-        <input id="search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" :value='searchTerm' @input="$emit('update:searchTerm', $event.target.value)"/>
+        <input id="search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" :value='searchTerm' @input="$emit('update:searchTerm', $event.target.value)" @keyup.enter="$emit('search')" />
         <div class="input-group-button">
             <button class="button" @click="$emit('search')"><font-awesome-icon icon="fa-solid fa-magnifying-glass" /></button>
         </div>

src/components/WelcomeReveal.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue'
+import $ from 'jquery'
+
+const emits = defineEmits(['connect', 'update:room', 'update:name'])
+const props = defineProps(['room'])
+
+onMounted(() => {
+  $(document).foundation();
+  $("#welcome").foundation("open")
+})
+
+onBeforeUnmount(() => {
+  $("#welcome").foundation("close")
+})
+</script>
+<template>
+<div class="reveal" id="welcome" data-reveal data-close-on-click="false">
+<h1>Welcome to Syng</h1>
+<p>
+  Please enter the room code and your name
+</p>
+
+  <div class="grid-container">
+    <div class="grid-x grid-padding-x">
+      <div class="medium-6 cell">
+        <label>Room code
+          <input type="text" :value="room" @input="$emit('update:room', $event.target.value)" placeholder="ABCD">
+        </label>
+      </div>
+      <div class="medium-6 cell">
+        <label>Name
+          <input type="text" @input="$emit('update:name', $event.target.value)" placeholder="Leave empty to be asked on append">
+        </label>
+      </div>
+    </div>
+  </div>
+  <button class="button" @click="$emit('connect')">Connect</button>
+<button class="close-button" data-close aria-label="Close reveal" type="button">
+  <span aria-hidden="true">&times;</span>
+</button>
+</div>
+</template>