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

Use new api function and now tickets animate whenever input is changed.

Browse Source
This commit is contained in:
Kevin
2020-03-10 00:23:09 +01:00
parent d04164280f
commit 6c05a829ac
2 changed files with 16 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AllWinesPage.vue
View File

@@ -13,6 +13,7 @@
import { page, event } from "vue-analytics"; import { page, event } from "vue-analytics";
import Banner from "@/ui/Banner"; import Banner from "@/ui/Banner";
import Wine from "@/ui/Wine"; import Wine from "@/ui/Wine";
import { overallWineStatistics } from "@/api";
export default { export default {
components: { components: {
@@ -25,8 +26,8 @@ export default {
}; };
}, },
async mounted() { async mounted() {
const _wines = await fetch("/api/wines/statistics/overall"); const wines = await overallWineStatistics();
this.wines = (await _wines.json()).sort((a, b) => this.wines = wines.sort((a, b) =>
a.rating > b.rating ? -1 : 1 a.rating > b.rating ? -1 : 1
); );
} }

39
src/components/GeneratePage.vue
View File

@@ -6,28 +6,28 @@
</p> </p>
<div class="input-line"> <div class="input-line">
<label for="redCheckbox"> <label for="redCheckbox">
<input type="checkbox" id="redCheckbox" v-model="redCheckbox" /> <input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
<span class="text">Rød</span> <span class="text">Rød</span>
</label> </label>
<label for="blueCheckbox"> <label for="blueCheckbox">
<input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" /> <input type="checkbox" id="blueCheckbox" v-model="blueCheckbox" @click="generateColors"/>
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
<span class="text">Blå</span> <span class="text">Blå</span>
</label> </label>
<label for="yellowCheckbox"> <label for="yellowCheckbox">
<input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" /> <input type="checkbox" id="yellowCheckbox" v-model="yellowCheckbox" @click="generateColors"/>
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
<span class="text">Gul</span> <span class="text">Gul</span>
</label> </label>
<label for="greenCheckbox"> <label for="greenCheckbox">
<input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" /> <input type="checkbox" id="greenCheckbox" v-model="greenCheckbox" @click="generateColors"/>
<span class="border"> <span class="border">
<span class="checkmark"></span> <span class="checkmark"></span>
</span> </span>
@@ -41,7 +41,7 @@
@keyup.enter="generateColors" @keyup.enter="generateColors"
v-model="numberOfBallots" v-model="numberOfBallots"
/> />
<button @click="generateColors">Generer</button> <button class="vin-button" @click="generateColors">Generer</button>
</div> </div>
<div class="colors"> <div class="colors">
@@ -53,7 +53,7 @@
></div> ></div>
</div> </div>
<div class="color-count-container" v-if="generated && !generating"> <div class="color-count-container" v-if="generated">
<span>Rød: {{ red }}</span> <span>Rød: {{ red }}</span>
<span>Blå: {{ blue }}</span> <span>Blå: {{ blue }}</span>
<span>Gul: {{ yellow }}</span> <span>Gul: {{ yellow }}</span>
@@ -118,7 +118,12 @@ export default {
if (time == 5) { if (time == 5) {
this.generating = false; this.generating = false;
this.generated = true; this.generated = true;
if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) { if (this.numberOfBallots > 1 &&
[this.redCheckbox, this.greenCheckbox, this.yellowCheckbox, this.blueCheckbox].filter(value => value == true).length == 1) {
return
}
if (new Set(this.colors).size == 1) {
alert("BINGO"); alert("BINGO");
} }
@@ -283,10 +288,9 @@ button {
input { input {
font-size: 1.5rem; font-size: 1.5rem;
padding: 8px; padding: 7px;
margin: 0; margin: 0;
height: 3rem; height: 3rem;
max-height: 3rem;
border: 1px solid rgba(#333333, 0.3); border: 1px solid rgba(#333333, 0.3);
} }
@@ -351,23 +355,6 @@ label .text {
} }
} }
button {
border: none;
background: #b7debd;
color: #333;
padding: 10px 30px;
margin: 0;
width: fit-content;
font-size: 1.3rem;
display: block;
height: calc(3rem + 18px);
display: inline-flex;
max-height: calc(3rem + 18px);
// disable-dbl-tap-zoom
touch-action: manipulation;
}
.colors-text { .colors-text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;