KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Tabs

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-03-16 13:48:57 +01:00
parent 569aa7ef9b
commit 08c5c40335
10 changed files with 187 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config/defaults/lottery.js
View File

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

66
src/components/AdminPage.vue
View File

@@ -1,47 +1,28 @@
<template>
<div>
<h1>Admin-side</h1>
<div class="tab-container">
<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>
<Tabs :tabs="tabs" />
</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>

59
src/components/LotteryPage.vue Normal file
View File

@@ -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>

5
src/components/RegisterPage.vue
View File

@@ -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">

6
src/components/VinlottisPage.vue
View File

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

22
src/components/VirtualLotteryPage.vue
View File

@@ -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>

2
src/components/VirtualLotteryRegistrationPage.vue
View File

@@ -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">

9
src/routes/vinlottisRouter.js
View File

@@ -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",
component: GeneratePage
path: "/lottery",
component: LotteryPage
},
{
path: "/dagens",
@@ -40,8 +41,8 @@ const routes = [
component: AdminPage
},
{
path: "/virtual",
component: VirtualLotteryPage
path: "/lottery/:tab",
component: LotteryPage
}
];

89
src/ui/Tabs.vue Normal file
View File

@@ -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>

1
src/ui/Wine.vue
View File

@@ -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]
}