Merge branch 'master' of github.com:KevinMidboe/vinlottis

src/components/VirtualLotteryRegistrationPage.vue

@@ -4,18 +4,14 @@
     <br />
     <div class="draw-winner-container" v-if="attendees.length > 0">
       <div v-if="drawingWinner">
-        <span
+        <span>
-          >Trekker {{ currentWinners }} av {{ numberOfWinners }} vinnere.
+          Trekker {{ currentWinners }} av {{ numberOfWinners }} vinnere.
-          {{ secondsLeft }} sekunder av {{ drawTime }} igjen</span
+          {{ secondsLeft }} sekunder av {{ drawTime }} igjen
-        >
+        </span>
-        <button class="vin-button no-margin" @click="stopDraw">
+        <button class="vin-button no-margin" @click="stopDraw">Stopp trekning</button>
-          Stopp trekning
-        </button>
       </div>
       <div class="draw-container" v-if="!drawingWinner">
-        <button class="vin-button no-margin" @click="drawWinner">
+        <button class="vin-button no-margin" @click="drawWinner">Trekk vinnere</button>
-          Trekk vinnere
-        </button>
         <input type="number" v-model="numberOfWinners" />
       </div>
     </div>
@@ -28,24 +24,17 @@
         </div>
       </div>
     </div>
-    <div
+    <div class="delete-buttons" v-if="attendees.length > 0 || winners.length > 0">
-      class="delete-buttons"
-      v-if="attendees.length > 0 || winners.length > 0"
-    >
       <button
         class="vin-button"
         v-if="winners.length > 0"
         @click="deleteAllWinners"
-      >
+      >Slett virtuelle vinnere</button>
-        Slett virtuelle vinnere
-      </button>
       <button
         class="vin-button"
         v-if="attendees.length > 0"
         @click="deleteAllAttendees"
-      >
+      >Slett virtuelle deltakere</button>
-        Slett virtuelle deltakere
-      </button>
     </div>
     <div class="attendees" v-if="attendees.length > 0">
       <h2>Deltakere ({{ attendees.length }})</h2>
@@ -56,15 +45,9 @@
         </div>
         <div class="ballots-container">
           <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
-          <div class="blue-ballot ballot-element small">
+          <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
-            {{ attendee.blue }}
+          <div class="green-ballot ballot-element small">{{ attendee.green }}</div>
-          </div>
+          <div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div>
-          <div class="green-ballot ballot-element small">
-            {{ attendee.green }}
-          </div>
-          <div class="yellow-ballot ballot-element small">
-            {{ attendee.yellow }}
-          </div>
         </div>
       </div>
     </div>
@@ -77,12 +60,7 @@
       <br />
       <div class="label-div">
         <label for="phoneNumber">Telefonnummer</label>
-        <input
+        <input id="phoneNumber" type="text" placeholder="Telefonnummer" v-model="phoneNumber" />
-          id="phoneNumber"
-          type="text"
-          placeholder="Telefonnummer"
-          v-model="phoneNumber"
-        />
       </div>
       <br />
       <br />
@@ -186,7 +164,7 @@ export default {
   },
   methods: {
     setWithRandomColors(colors) {
-      Object.keys(colors).forEach(color => this[color] = colors[color])
+      Object.keys(colors).forEach(color => (this[color] = colors[color]));
     },
     sendAttendee: async function() {
       let response = await addAttendee({
@@ -406,7 +384,6 @@ button {
   & .ballots-container {
     display: flex;
     justify-content: center;
-    align-items: center;
   }
 
   & .name-and-phone {

src/ui/Attendees.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="attendees" v-if="attendees.length > 0">
     <h2>Deltakere ({{ attendees.length }})</h2>
+    <div class="attendees-container" ref="attendees">
       <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
         <span class="attendee-name">{{ attendee.name }}</span>
         <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
-      <div class="blue-ballot ballot-element small">
+        <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
-        {{ attendee.blue }}
+        <div class="green-ballot ballot-element small">{{ attendee.green }}</div>
-      </div>
+        <div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div>
-      <div class="green-ballot ballot-element small">
-        {{ attendee.green }}
-      </div>
-      <div class="yellow-ballot ballot-element small">
-        {{ attendee.yellow }}
       </div>
     </div>
   </div>
@@ -23,6 +19,16 @@ export default {
     attendees: {
       type: Array
     }
+  },
+  watch: {
+    attendees: {
+      deep: true,
+      handler() {
+        setTimeout(() => {
+          this.$refs.attendees.scrollTop = this.$refs.attendees.scrollHeight;
+        }, 50);
+      }
+    }
   }
 };
 </script>
@@ -53,6 +59,11 @@ export default {
   align-items: center;
   width: 65%;
   height: 100%;
+}
+
+.attendees-container {
+  width: 100%;
+  height: 100%;
   overflow-y: scroll;
 }
 

src/ui/Chat.vue

@@ -14,14 +14,9 @@
         </div>
       </div>
       <div class="input">
-        <input
+        <input @keyup.enter="sendMessage" type="text" v-model="message" placeholder="Melding.." />
-          @keyup.enter="sendMessage"
+        <button @click="sendMessage">Send</button>
-          type="text"
+        <button @click="removeUsername">Logg ut</button>
-          v-model="message"
-          placeholder="Melding.."
-        />
-        <button @click="sendMessage">Send</button
-        ><button @click="removeUsername">Logg ut</button>
       </div>
     </div>
     <div v-if="!usernameSet" class="username-dialog">
@@ -88,7 +83,7 @@ export default {
       if (date.getDate() == new Date().getDate()) {
         return timeString;
       }
-      return `${date.toLocaleDateString()} ${timeString}`
+      return `${date.toLocaleDateString()} ${timeString}`;
     },
     sendMessage: function() {
       this.$emit("message", this.message);
@@ -147,7 +142,7 @@ input {
 
 .chat-container,
 .chat-inner-container {
-  height: 100%;
+  height: 95%;
 }
 
 .history {