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

wip

Browse Source
This commit is contained in:
Adrian Thompson
2020-10-01 14:29:30 +02:00
parent 2b44a6454f
commit 5ffb10468c
3 changed files with 196 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/VinlottisPage.vue
View File

@@ -19,39 +19,19 @@
</section> </section>
<div class="container"> <section class="container">
<!-- <span> Scroll for å annen gøy statistikk</span> --> <p class="scroll-info"> | Scroll for å se annen gøy statistikk</p>
<Highscore class="highscore"/>
<TotalBought class="total-bought" />
<section class="header-and-notification">
<h1 @click="startCountdown">Vinlotteri</h1>
<img
src="/public/assets/images/notification.svg"
alt="Notification-bell"
@click="requestNotificationAccess"
class="notification-request-button"
role="button"
v-if="notificationAllowed"
/>
</section>
<div class="to-lottery-container">
<a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a>
</div>
<section class="chart-container"> <section class="chart-container">
<PurchaseGraph class="purchase" /> <PurchaseGraph class="purchase" />
<WinGraph class="win" /> <WinGraph class="win" />
</section> </section>
<TotalBought class="total-bought" />
<Vipps class="vipps-icon" />
<Highscore class="highscore"/>
<Wines class="wines-container" /> <Wines class="wines-container" />
</div> </section>
<Countdown :hardEnable="hardStart" @countdown="changeEnabled" /> <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
</div> </div>
@@ -200,125 +180,45 @@ h1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.header-and-notification{
display: flex;
flex-direction: row;
margin: auto;
}
.vipps-icon{
margin: 1em;
}
@include tablet { @include tablet {
margin: .5em;
.chart-container { .chart-container {
display: flex; display: flex;
width: 100%; width: 100%;
} }
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto-flow min-content;
grid-template-areas: "top-top top-top top-top"
"top-bot top-bot top-bot"
"middle-top middle-top middle-top"
"middle-bot-left middle-bot-left middle-bot-right"
"bot-left bot-right bot-right";
.header-and-notification { .scroll-info {
grid-area: top-top; grid-column: 3 / -3;
}
.to-lottery-container{
grid-area: top-bot;
} }
.chart-container { .chart-container {
grid-area: middle-top; grid-column: 3 / -3;
} }
.total-bought { .total-bought {
grid-area: middle-bot-left; grid-column: 3 / -3;
} }
.highscore { .highscore {
border-top: 1px solid rgb(237, 237, 237); grid-column: 3 / -3;
grid-area: bot-left;
align-self: baseline; align-self: baseline;
} }
.wines-container { .wines-container {
border-top: 1px solid rgb(237, 237, 237); grid-column: 3 / -3;
padding-left: 1em;
border-left: 1px solid rgb(237, 237, 237);
grid-area: bot-right;
}
.vipps-icon {
padding-left: 1em;
align-self: center;
grid-area: middle-bot-right;
border-left: 1px solid rgb(237, 237, 237);
} }
} }
@include desktop { // @include desktop {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto-flow min-content;
grid-template-areas: "top-top top-top top-top top-top"
"top-bot top-bot top-bot top-bot"
"middle-top middle-top middle-top middle-top"
"middle-bot middle-bot middle-bot aside"
"bot-left bot-right bot-right aside";
grid-gap: 1em;
align-items: center;
.header-and-notification { // }
grid-area: top-top;
}
.to-lottery-container { // @include widescreen {
grid-area: top-bot;
}
.chart-container { // }
grid-area: middle-top;
}
.total-bought {
grid-area: middle-bot;
border-bottom: 1px solid rgb(237, 237, 237);
}
.highscore {
border: none;
grid-area: bot-left;
}
.wines-container {
border: none;
grid-area: bot-right;
}
.vipps-icon {
grid-area: aside;
padding-left: 3em;
border-left: 1px solid rgb(237, 237, 237);
}
}
@include widescreen {
width: 70%;
max-width: 1800px;
margin: auto;
.vipps-icon {
padding-left: 6em;
}
}
} }

99
src/ui/Highscore.vue
View File

@@ -1,13 +1,19 @@
<template> <template>
<div class="highscores" v-if="highscore.length > 0"> <div class="highscores" v-if="highscore.length > 0">
<h3>
<router-link to="highscore"> <section class="heading">
Topp 10 vinnere <span class="vin-link">Se alle &gt;</span> <h3>
Topp 5 vinnere
</h3>
<router-link to="highscore" class="">
<span class="vin-link">Se alle vinnere</span>
</router-link> </router-link>
</h3> </section>
<ol> <ol class="winner-list-container">
<li v-for="person in highscore" :key="person"> <li v-for="(person, index) in highscore" :key="person" class="single-winner">
{{ person.name }} - {{ person.wins.length }} <span class="placement">{{index + 1}}</span>
<span class="winner-icon"> ic </span>
<p class="winner-name">{{ person.name }}</p>
</li> </li>
</ol> </ol>
</div> </div>
@@ -29,60 +35,69 @@ export default {
response = response.filter( response = response.filter(
person => person.name != null && person.name != "" person => person.name != null && person.name != ""
); );
this.highscore = response.slice(0, 10); this.highscore = response.slice(0, 5);
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/media-queries.scss"; @import "../styles/media-queries.scss";
div { @import "../styles/variables.scss";
margin: 0; .heading {
font-family: Arial; display: flex;
display: inline-flex; justify-content: space-between;
flex-direction: column; align-items: center;
} }
h3 { a {
text-align: left; text-decoration: none;
color: #333333;
& a { &:focus,
&:active,
&:visited {
text-decoration: none; text-decoration: none;
color: #333333; color: #333333;
&:focus,
&:active,
&:visited {
text-decoration: none;
color: #333333;
}
} }
} }
ol { ol {
padding-left: 1.375rem !important; list-style-type: none;
margin-left: 0; margin-left: 0;
margin: 0 0 1.5em;
padding: 0; padding: 0;
counter-reset: item; }
& > li {
padding: 2.5px 0; .winner-list-container {
width: max-content; width: 100%;
margin: 0 0 0 -1.25rem; display: grid;
padding: 0; grid-template: 1fr / repeat(5, 1fr);
list-style-type: none; column-gap: 2em;
counter-increment: item; margin: 0;
&:before {
display: inline-block; .single-winner {
width: 1em; width: 10em;
padding-right: 0.5rem; background: $primary;
font-weight: bold; padding: 1em;
text-align: right; display: grid;
content: counter(item) "."; grid-template: 1fr .3fr / 1fr 1fr 1fr;
justify-content: center;
align-items: center;
justify-items: center;
.placement {
grid-row: 1;
grid-column: 1 / 3;
font-size: 3em;
} }
@include mobile { .winner-name {
padding: 5px 0; grid-row: 2;
grid-column: 1 / -1;
}
.winner-icon {
grid-row: 1;
grid-column: 3;
} }
} }
} }

197
src/ui/TotalBought.vue
View File

@@ -1,6 +1,15 @@
<template> <template>
<div class="outer-bought"> <section class="outer-bought">
<h3>Loddstatistikk</h3> <h3>Loddstatistikk</h3>
<div class="inner-bought-container total-ballots">
Totalt&nbsp;
<span class="total">{{ total }}</span>
&nbsp;kjøpte og&nbsp;
<span>{{ totalWin }}&nbsp;vinn</span>
</div>
<div class="bought-container"> <div class="bought-container">
<div <div
v-for="color in colors" v-for="color in colors"
@@ -8,34 +17,23 @@
color.name + color.name +
'-container ' + '-container ' +
color.name + color.name +
'-ballot inner-bought-container ballot-element' '-ballot ballot-element-local'
" "
:key="color.name" :key="color.name"
> >
<div class="number-container"> <p class="number-container">
<span class="color-total bought-number-span"> {{translate(color.name)}} vinnersjanse
<!-- <span class="color-total bought-number-span">
{{ color.total }} {{ color.total }}
</span> </span> -->
<span>kjøpte</span> </p>
</div> <h3>{{ color.totalPercentage }}% vinn</h3>
<div class="inner-text-container"> <div class="inner-text-container">
<div>{{ color.win }} vinn</div> <div>{{ color.win }} vinn</div>
<div>{{ color.totalPercentage }}% vinn</div>
</div>
</div>
<div class="inner-bought-container total-ballots">
<div class="total-container">
Totalt&nbsp;
<div>
<span class="total">{{ total }}</span> kjøpte
</div>
<div>{{ totalWin }} vinn</div>
<div>{{ stolen }} stjålet</div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</template> </template>
<script> <script>
import { colorStatistics } from "@/api"; import { colorStatistics } from "@/api";
@@ -114,6 +112,23 @@ export default {
this.colors = this.colors.sort((a, b) => (a.win > b.win ? -1 : 1)); this.colors = this.colors.sort((a, b) => (a.win > b.win ? -1 : 1));
}, },
methods: { methods: {
translate(color){
switch(color) {
case "blue":
return "Blå"
break;
case "red":
return "Rød"
break;
case "green":
return "Grønn"
break;
case "yellow":
return "Gul"
break;
break;
}
},
getPercentage: function(win, total) { getPercentage: function(win, total) {
return this.round(win == 0 ? 0 : (win / total) * 100); return this.round(win == 0 ? 0 : (win / total) * 100);
}, },
@@ -125,108 +140,138 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/global.scss"; // @import "../styles/global.scss";
@import "../styles/variables.scss"; @import "../styles/variables.scss";
@import "../styles/media-queries.scss"; @import "../styles/media-queries.scss";
.inner-bought-container { .total-ballots {
display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
.ballot-element { .bought-container {
width: 140px; margin-top: 2em;
height: 150px; display: grid;
margin: 20px 0; grid-template-columns: repeat(4, 1fr);
} column-gap: 2em;
.number-container { .ballot-element-local {
display: flex; margin: 0;
align-items: flex-end; width: 100%;
height: 100%;
padding: .5em;
& span:last-child { &.green-ballot {
padding-bottom: 5px; background-color: $light-green;
padding-left: 5px; }
&.blue-ballot {
background-color: $light-blue;
}
&.yellow-ballot {
background-color: $light-yellow;
}
&.red-ballot {
background-color: $light-red;
}
} }
} }
.inner-bought-container {
}
.ballot-element {
// width: 140px;
// height: 150px;
// margin: 20px 0;
}
.number-container {
// display: flex;
// align-items: flex-end;
// & span:last-child {
// padding-bottom: 5px;
// padding-left: 5px;
// }
}
.inner-text-container { .inner-text-container {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
// TODO fix styling for displaying in columns // TODO fix styling for displaying in columns
@include mobile { @include mobile {
& div { // & div {
padding: 0 5px; // padding: 0 5px;
} // }
} }
} }
.total-ballots { .total-ballots {
width: 150px; // width: 150px;
height: 150px; // height: 150px;
margin: 20px 0; // margin: 20px 0;
} }
.total-container { .total-container {
align-items: flex-start; // align-items: flex-start;
} }
@include mobile { @include mobile {
.total-container { // .total-container {
> div:nth-of-type(2) { // > div:nth-of-type(2) {
margin-top: auto; // margin-top: auto;
padding-bottom: 4px; // padding-bottom: 4px;
padding-left: 5px; // padding-left: 5px;
} // }
} // }
} }
.bought-number-span { .bought-number-span {
display: inline-flex; // display: inline-flex;
} }
.outer-bought { // .outer-bought {
@include mobile { // @include mobile {
padding: 0 20px; // padding: 0 20px;
} // }
} // }
.bought-container { .bought-container {
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
flex-wrap: wrap; // flex-wrap: wrap;
width: 100%; // width: 100%;
padding-bottom: 3rem; // padding-bottom: 3rem;
max-width: 1400px; // max-width: 1400px;
margin: auto; // margin: auto;
justify-content: space-between; // justify-content: space-between;
font-family: Arial; // font-family: Arial;
@include mobile { @include mobile {
padding-bottom: 0px; // padding-bottom: 0px;
} }
} }
.color-total, .color-total,
.total { .total {
font-size: 2rem; // font-size: 2rem;
font-weight: bold; // font-weight: bold;
} }
.small { .small {
font-weight: bold; // font-weight: bold;
font-size: 1.25rem; // font-size: 1.25rem;
display: inline-block; // display: inline-block;
} }
@include mobile { @include mobile {
.bought-container { .bought-container {
flex-wrap: wrap; // flex-wrap: wrap;
} }
} }
</style> </style>