Admin login

src/App.vue

@@ -2,6 +2,7 @@
 import { computed, ref, onMounted, onDeactivated } from 'vue'
 import { io } from "socket.io-client"
 import { useRoute, useRouter } from 'vue-router'
+import $ from 'jquery'
 
 import MobileLayout from './components/MobileLayout.vue'
 import DesktopLayout from './components/DesktopLayout.vue'
@@ -17,21 +18,20 @@ const state = ref({
     'joined': false,
     'server': window.location.protocol + "//" + window.location.host + "/",
     'socket': undefined, 
-    'is_small': window.innerWidth < 768
+    'is_small': window.innerWidth < 768,
+    'admin': false,
+    'secret': undefined
 })
 
-onMounted(() => { window.addEventListener("resize", (e) => { state.value.is_small = (e.target.innerWidth < 768) }) } )
+onMounted(() => { 
+  window.addEventListener("resize", (e) => { state.value.is_small = (e.target.innerWidth < 768) });
+  $(document).foundation();
+})
 
 function setRoomCode(room) { state.value.room = room }
+function setSecret(secret) { state.value.secret = secret }
 function setName(name) { state.value.name = name }
-function updateName(evt) { 
-  if(evt.target.textContent !== "") { 
-    console.log("Changed name to \"" + evt.target.textContent + "\"");
-    state.value.name = evt.target.textContent 
-  } else {
-    evt.target.textContent = state.value.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 }
 
@@ -39,18 +39,18 @@ function search() {
   state.socket.emit("search", {"query": state.value.search.searchTerm })
 }
 
-function append(entry) {
+function append(entry) {_append(entry, state.value.name) }
+function _append(entry, name) {
+  if(name == "" || name == undefined) {
+    $("#getusername").foundation("open")
+  } else {
       state.socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source })
+  }
 }
 
 function connect() {
-  if(state.value.name !== undefined && state.value.name !== "") {
   state.socket = io(state.value.server)
-      console.log(state.socket)
   registerSocketEvents(state.socket)
-  } else {
-    console.log("name cannot be " + state.value.name)
-  }
 }
 
 function registerSocketEvents(socket) {
@@ -64,6 +64,10 @@ function registerSocketEvents(socket) {
       state.value.queue=val.queue
       state.value.recent=val.recent
     })
+
+    socket.on("register-admin", (response) => {
+        state.value.admin = response.success
+    })
 }
 
 function joinRoom() {
@@ -71,6 +75,9 @@ function joinRoom() {
     if(response === true) {
       state.value.joined = true
       router.push({name: "room", params: {room: state.value.room}})
+      if (state.value.secret) {
+          state.socket.emit("register-admin", {"secret": state.value.secret})
+      }
     } else {
       console.log("no such room")
     }
@@ -86,10 +93,13 @@ function joinRoom() {
   <div class="row" id="main-content">
     <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" />
+    <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>
   </div>
 <footer>
-Name: <span class="userName" @focusout="updateName" contenteditable>{{ state.name }}</span>
+Name: <span class="userName" @focusout="(evt) => setName(evt.target.textContent)" contenteditable>{{ state.name }}</span>
 </footer>
 </div>
 </template>
@@ -113,6 +123,10 @@ footer > .userName {
 border: none;
   border-bottom: 1px dashed #00F000;
   background-color: #008000;
+  min-width: 5em;
+	   display: inline-block;
+	   height: 70%;
+	   text-align: center;
 
 }
 </style>

src/components/DesktopLayout.vue

@@ -11,7 +11,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append'])
 <template>
   <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" />
-    <RecentDesktop :recent="state.recent" />
+    <QueueDesktop :queue="state.queue" :admin="state.admin" />
+    <RecentDesktop :recent="state.recent" :admin="state.admin" />
   </div>
 </template>

src/components/MobileLayout.vue

@@ -19,8 +19,8 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append' ])
         </div>
         <div class="tabs-container" data-tabs-content="main-tab">
           <SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)"/>
-          <QueueTab :queue="state.queue" />
-          <RecentTab :recent="state.recent" />
+          <QueueTab :queue="state.queue" :admin="state.admin" />
+          <RecentTab :recent="state.recent" :admin="state.admin" />
         </div>
     </div>
 </div>

src/components/QueueDesktop.vue

@@ -1,12 +1,12 @@
 <script setup>
 import QueueInner from './QueueInner.vue'
 
-const props = defineProps(['queue']);
+const props = defineProps(['queue', 'admin']);
 </script>
 
 <template>
   <div class="comp-column" id="middle">
     <div class="header">Queue</div>
-    <QueueInner :queue="queue" />
+    <QueueInner :queue="queue" :admin="admin" />
   </div>
 </template>

src/components/QueueInner.vue

@@ -1,11 +1,7 @@
 <script setup>
 import Entry from './Entry.vue'
-</script>
 
-<script>
-export default {
-  props: ['admin', 'queue']
-  }
+const props = defineProps(['queue', 'admin']);
 </script>
 
 <template>
@@ -13,7 +9,7 @@ export default {
       <div id="queue-list-wrapper" class="results">
           <ul id="queue" class="vertical menu">
           <Entry v-for="(entry, index) in queue" :entry="entry" :current="index == 0" :admin="admin" />
-          <li v-if="admin">
+          <li v-show="admin">
               <div class="row">
                   <div class="columns small-12">
                           <a class="button" download="queue.json" rv-href="queue.data">Save</a>

src/components/QueueTab.vue

@@ -1,15 +1,11 @@
 <script setup>
 import QueueInner from './QueueInner.vue'
-</script>
 
-<script>
-export default {
-  props: ['queue']
-}
+const props = defineProps(['queue', 'admin']);
 </script>
 
 <template>
   <div class="tabs-panel" id="queue-list">
-    <QueueInner :queue="queue" />
+    <QueueInner :queue="queue" :admin="admin" />
   </div>
 </template>

src/components/RecentDesktop.vue

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

src/components/WelcomeReveal.vue

@@ -2,7 +2,7 @@
 import { onMounted, onBeforeUnmount } from 'vue'
 import $ from 'jquery'
 
-const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server'])
+const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret'])
 const props = defineProps(['room', 'server'])
 
 onMounted(() => {
@@ -23,11 +23,16 @@ onBeforeUnmount(() => {
 
   <div class="grid-container">
     <div class="grid-x grid-padding-x">
-      <div class="medium-12 cell">
+      <div class="medium-6 cell">
         <label>Syng server
           <input type="text" :value="server" @input="$emit('update:server', $event.target.value)">
         </label>
       </div>
+      <div class="medium-6 cell">
+        <label>Admin password
+          <input type="password" @input="$emit('update:secret', $event.target.value)" placeholder="Leave free, if not admin">
+        </label>
+      </div>
       <div class="medium-6 cell">
         <label>Room code
           <input type="text" :value="room" @input="$emit('update:room', $event.target.value)" placeholder="ABCD">
@@ -35,7 +40,7 @@ onBeforeUnmount(() => {
       </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">
+          <input type="text" @input="$emit('update:name', $event.target.value)" placeholder="Arno Nym">
         </label>
       </div>
     </div>