From 18b6e3a94174a3f79614d9c093b4aadfbdbdf941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Mon, 16 Mar 2020 09:39:46 +0100
Subject: [PATCH] Socket-things

---
 .../VirtualLotteryRegistrationPage.vue        | 20 ++++++++++++++++++-
 src/routes/vinlottisRouter.js                 |  2 --
 src/ui/Attendees.vue                          |  2 ++
 src/ui/Chat.vue                               |  5 +++--
 src/ui/WinnerDraw.vue                         |  2 ++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/VirtualLotteryRegistrationPage.vue b/src/components/VirtualLotteryRegistrationPage.vue
index 3bbddfb..3187293 100644
--- a/src/components/VirtualLotteryRegistrationPage.vue
+++ b/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() {
diff --git a/src/routes/vinlottisRouter.js b/src/routes/vinlottisRouter.js
index 747db10..f330588 100644
--- a/src/routes/vinlottisRouter.js
+++ b/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 = [
diff --git a/src/ui/Attendees.vue b/src/ui/Attendees.vue
index 0d0820f..f95a24b 100644
--- a/src/ui/Attendees.vue
+++ b/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 {
diff --git a/src/ui/Chat.vue b/src/ui/Chat.vue
index 26ba956..79cbcee 100644
--- a/src/ui/Chat.vue
+++ b/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>
diff --git a/src/ui/WinnerDraw.vue b/src/ui/WinnerDraw.vue
index d0c07d6..ef9aaa1 100644
--- a/src/ui/WinnerDraw.vue
+++ b/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>