Socket-things

src/components/VirtualLotteryRegistrationPage.vue

@@ -133,6 +133,7 @@
 </template>
 
 <script>
+import io from "socket.io-client";
 import {
   addAttendee,
   getVirtualWinner,
@@ -160,12 +161,29 @@ export default {
       secondsLeft: 20,
       drawTime: 20,
       currentWinners: 1,
-      numberOfWinners: 4
+      numberOfWinners: 4,
+      socket: null
     };
   },
   mounted() {
     this.getAttendees();
     this.getWinners();
+
+    this.socket = io(`${window.location.hostname}:${window.location.port}`);
+
+    this.socket.on("winner", async msg => {
+      this.getWinners();
+      this.getAttendees();
+    });
+
+    this.socket.on("refresh_data", async msg => {
+      this.getAttendees();
+      this.getWinners();
+    });
+
+    this.socket.on("new_attendee", async msg => {
+      this.getAttendees();
+    });
   },
   methods: {
     sendAttendee: async function() {

src/routes/vinlottisRouter.js

@@ -4,12 +4,10 @@ import TodaysPage from "@/components/TodaysPage";
 import AllWinesPage from "@/components/AllWinesPage";
 
 import LoginPage from "@/components/LoginPage";
-import RegisterPage from "@/components/RegisterPage";
 import CreatePage from "@/components/CreatePage";
 
 import AdminPage from "@/components/AdminPage";
 
-import VirtualLotteryRegistrationPage from "@/components/VirtualLotteryRegistrationPage";
 import VirtualLotteryPage from "@/components/VirtualLotteryPage";
 
 const routes = [

src/ui/Attendees.vue

@@ -43,6 +43,8 @@ export default {
   justify-content: center;
   align-items: center;
   font-weight: bold;
+  font-size: 0.75rem;
+  text-align: center;
 }
 
 .attendees {

src/ui/Chat.vue

@@ -18,7 +18,7 @@
           @keyup.enter="sendMessage"
           type="text"
           v-model="message"
-          maxlength="30"
+          placeholder="Melding.."
         />
         <button @click="sendMessage">Send</button
         ><button @click="removeUsername">Logg ut</button>
@@ -29,7 +29,8 @@
         type="text"
         @keyup.enter="setUsername"
         v-model="temporaryUsername"
-        title
+        maxlength="30"
+        placeholder="Ditt navn.."
       />
       <button @click="setUsername">Lagre brukernavn</button>
     </div>

src/ui/WinnerDraw.vue

@@ -174,5 +174,7 @@ h2 {
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 0.75rem;
+  text-align: center;
 }
 </style>