Tabs

config/defaults/lottery.js

@@ -10,6 +10,7 @@ try {
     price: 10,
     message: "INSERT MESSAGE",
     date: 5,
-    hours: 15
+    hours: 15,
+    apiUrl: "https://lottis.vin"
   };
 }

src/components/AdminPage.vue

@@ -1,47 +1,28 @@
 <template>
   <div>
     <h1>Admin-side</h1>
-    <div class="tab-container">
+    <Tabs :tabs="tabs" />
-      <div
-        class="tab"
-        @click="changeTab(0)"
-        :class="chosenTab == 0 ? 'active' : null"
-      >
-        Registrering
-      </div>
-      <div
-        class="tab"
-        @click="changeTab(1)"
-        :class="chosenTab == 1 ? 'active' : null"
-      >
-        Virtuelt lotteri
-      </div>
-    </div>
-    <div class="tab-elements">
-      <RegisterPage :class="chosenTab == 0 ? null : 'hide'" />
-      <VirtualLotteryRegistrationPage :class="chosenTab == 1 ? null : 'hide'" />
-    </div>
   </div>
 </template>
 
 <script>
+import Tabs from "@/ui/Tabs";
 import RegisterPage from "@/components/RegisterPage";
 import VirtualLotteryRegistrationPage from "@/components/VirtualLotteryRegistrationPage";
 
 export default {
   components: {
+    Tabs,
     RegisterPage,
     VirtualLotteryRegistrationPage
   },
   data() {
     return {
-      chosenTab: 0
+      tabs: [
+        { name: "Registrering", component: RegisterPage },
+        { name: "Virtuelt lotteri", component: VirtualLotteryRegistrationPage }
+      ]
     };
-  },
-  methods: {
-    changeTab: function(num) {
-      this.chosenTab = num;
-    }
   }
 };
 </script>
@@ -50,37 +31,4 @@ export default {
 h1 {
   text-align: center;
 }
-.hide {
-  display: none;
-}
-
-.tab-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 25px;
-  border-bottom: 1px solid #333333;
-}
-
-.tab {
-  cursor: pointer;
-  /* height: 60px; */
-  font-size: 1.2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  margin: 0 15px;
-  border: 1px solid #333333;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  background: #00000008;
-  border-bottom: 1px solid #333333;
-  margin-bottom: -1px;
-
-  &.active {
-    border-bottom: 1px solid white;
-    background: white;
-  }
-}
 </style>

src/components/LotteryPage.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <Tabs :tabs="tabs" :active="startRoute" v-on:tabChange="tabChanged" />
+  </div>
+</template>
+
+<script>
+import Tabs from "@/ui/Tabs";
+import GeneratePage from "@/components/GeneratePage";
+import VirtualLotteryPage from "@/components/VirtualLotteryPage";
+
+export default {
+  components: {
+    Tabs,
+    GeneratePage,
+    VirtualLotteryPage
+  },
+  data() {
+    return {
+      startRoute: 0
+    };
+  },
+  beforeMount() {
+    switch (this.$router.currentRoute.params.tab) {
+      case "generate":
+        this.startRoute = 0;
+        break;
+      case "game":
+        this.startRoute = 1;
+        break;
+      default:
+        this.startRoute = 0;
+    }
+  },
+  data() {
+    return {
+      tabs: [
+        { name: "Loddgenerator", component: GeneratePage },
+        { name: "Virtuelt lotteri", component: VirtualLotteryPage }
+      ]
+    };
+  },
+  methods: {
+    tabChanged: function(num) {
+      if (num == 0) {
+        this.$router.push("/lottery/generate");
+      } else if (num == 1) {
+        this.$router.push("/lottery/game");
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+}
+</style>

src/components/RegisterPage.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="page-container">
     <h1>Registrering</h1>
-
-    <router-link to="virtual-register" class="generate-link"
-      >Virtuelt-lotteri
-      <span class="subtext generator-link">Her</span></router-link
-    >
     <br />
     <br />
     <div class="notification-element">

src/components/VinlottisPage.vue

@@ -12,9 +12,9 @@
           v-if="notificationAllowed"
         />
       </div>
-      <router-link to="generate" class="generate-link">
+      <router-link to="lottery" class="generate-link">
-        Klarer du ikke velge lodd-farger?
+        Vil du til lotteriet?
-        <span class="subtext generator-link">Prøv loddgeneratoren</span>
+        <span class="subtext generator-link">Trykk her</span>
       </router-link>
       <div class="chart-container">
         <PurchaseGraph class="purchase" />

src/components/VirtualLotteryPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>Virtuelt lotteri</h1>
+    <h1 class="title">Virtuelt lotteri</h1>
     <h2
       v-if="
         attendees.length <= 0 &&
@@ -29,19 +29,21 @@
         v-on:username="setUsername"
       />
     </div>
+    <Vipps class="vipps" :amount="1" />
   </div>
 </template>
 
 <script>
 import { attendees, winners } from "@/api";
 import Chat from "@/ui/Chat";
+import Vipps from "@/ui/Vipps";
 import Attendees from "@/ui/Attendees";
 import Winners from "@/ui/Winners";
 import WinnerDraw from "@/ui/WinnerDraw";
 import io from "socket.io-client";
 
 export default {
-  components: { Chat, Attendees, Winners, WinnerDraw },
+  components: { Chat, Attendees, Winners, WinnerDraw, Vipps },
   data() {
     return {
       attendees: [],
@@ -159,10 +161,16 @@ h2 {
 
 .outer-chat {
   margin: 0 60px 0 10px;
+  @include mobile {
+    margin: 0;
+  }
 }
 
 .outer-attendees {
   margin: 0 10px 0 45px;
+  @include mobile {
+    margin: 0;
+  }
 }
 
 .center-new-winner {
@@ -181,4 +189,14 @@ h2 {
     flex-direction: column;
   }
 }
+
+.vipps {
+  margin-top: 70px;
+  display: flex;
+  padding-bottom: 50px;
+  justify-content: center;
+  @include mobile {
+    flex-direction: column;
+  }
+}
 </style>

src/components/VirtualLotteryRegistrationPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-container">
-    <h1>Virtuelt lotteri registrering</h1>
+    <h1 class="title">Virtuelt lotteri registrering</h1>
     <br />
     <div class="draw-winner-container" v-if="attendees.length > 0">
       <div v-if="drawingWinner">

src/routes/vinlottisRouter.js

@@ -9,6 +9,7 @@ import CreatePage from "@/components/CreatePage";
 import AdminPage from "@/components/AdminPage";
 
 import VirtualLotteryPage from "@/components/VirtualLotteryPage";
+import LotteryPage from "@/components/LotteryPage";
 
 const routes = [
   {
@@ -16,8 +17,8 @@ const routes = [
     component: VinlottisPage
   },
   {
-    path: "/generate",
+    path: "/lottery",
-    component: GeneratePage
+    component: LotteryPage
   },
   {
     path: "/dagens",
@@ -40,8 +41,8 @@ const routes = [
     component: AdminPage
   },
   {
-    path: "/virtual",
+    path: "/lottery/:tab",
-    component: VirtualLotteryPage
+    component: LotteryPage
   }
 ];
 

src/ui/Tabs.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="tab-container">
+      <div
+        class="tab"
+        v-for="(tab, index) in tabs"
+        :key="index"
+        @click="changeTab(index)"
+        :class="chosenTab == index ? 'active' : null"
+      >
+        {{ tab.name }}
+      </div>
+    </div>
+    <div class="tab-elements">
+      <component
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :is="tab.component"
+        :class="chosenTab == index ? null : 'hide'"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array
+    },
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
+  beforeMount() {
+    this.chosenTab = this.active;
+  },
+  data() {
+    return {
+      chosenTab: 0
+    };
+  },
+  methods: {
+    changeTab: function(num) {
+      this.chosenTab = num;
+      this.$emit("tabChange", num);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+}
+.hide {
+  display: none;
+}
+
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 25px;
+  border-bottom: 1px solid #333333;
+}
+
+.tab {
+  cursor: pointer;
+  font-size: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  margin: 0 15px;
+  border: 1px solid #333333;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background: #00000008;
+  border-bottom: 1px solid #333333;
+  margin-bottom: -1px;
+
+  &.active {
+    border-bottom: 1px solid white;
+    background: white;
+  }
+}
+</style>

src/ui/Wine.vue

@@ -43,6 +43,7 @@ export default {
       return this.inlineSlot && window.innerWidth > 768
     },
     hostname(url) {
+      console.log(url);
       const urlHostname = new URL(url).hostname
       return urlHostname.split(".")[(urlHostname.match(/\./g) || []).length - 1]
     }