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

Total-numbers

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-21 10:08:34 +01:00
parent 3f422d9bf0
commit 467e6df2d3
4 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -2,12 +2,12 @@
<html> <html>
<head> <head>
<title>Vinlottis</title> <title>Vinlottis</title>
<link href=/dist/css/vinlottis.9de3c0e.css rel=stylesheet></head> <link href=/dist/css/vinlottis.9c7b01a.css rel=stylesheet></head>
<body> <body>
<div id=app></div> <div id=app></div>
<script src=/dist/js/vinlottis.bundle.9de3c0e.js></script> <script src=/dist/js/vinlottis.bundle.9c7b01a.js></script>
<script type=text/javascript src=/dist/js/vinlottis.bundle.9de3c0e.js></script></body> <script type=text/javascript src=/dist/js/vinlottis.bundle.9c7b01a.js></script></body>
</html> </html>

11
src/ui/Highscore.vue
View File

@@ -2,9 +2,7 @@
<div v-if="highscore.length > 0"> <div v-if="highscore.length > 0">
<h3>Highscore</h3> <h3>Highscore</h3>
<ol> <ol>
<li v-for="person in highscore"> <li v-for="person in highscore">{{ person.name }} - {{ person.wins.length }}</li>
{{ person.name }} - {{ person.wins.length }}
</li>
</ol> </ol>
</div> </div>
</template> </template>
@@ -15,10 +13,11 @@ export default {
return { highscore: [] }; return { highscore: [] };
}, },
async mounted() { async mounted() {
let _response = await fetch( let _response = await fetch("/api/highscore/statistics");
"/api/highscore/statistics"
);
let response = await _response.json(); let response = await _response.json();
response.sort((a, b) => {
return a.wins.length > b.wins.length ? 1 : -1;
});
this.highscore = response; this.highscore = response;
} }
}; };

12
src/ui/PurchaseGraph.vue
View File

@@ -12,33 +12,31 @@ export default {
let canvas = this.$refs["purchase-chart"].getContext("2d"); let canvas = this.$refs["purchase-chart"].getContext("2d");
console.log(canvas); console.log(canvas);
let _response = await fetch( let _response = await fetch("/api/purchase/statistics");
"/api/purchase/statistics"
);
let response = await _response.json(); let response = await _response.json();
let labels = []; let labels = [];
let blue = { let blue = {
label: "Blå", label: "Blå",
borderColor: "#4bcffa", borderColor: "#4bcffa",
backgroundColor: "#4bcffa42", backgroundColor: "#4bcffa10",
data: [] data: []
}; };
let yellow = { let yellow = {
label: "Gul", label: "Gul",
borderColor: "#ffdd59", borderColor: "#ffdd59",
backgroundColor: "#ffdd5942", backgroundColor: "#ffdd5910",
data: [] data: []
}; };
let red = { let red = {
label: "Rød", label: "Rød",
borderColor: "#ef5777", borderColor: "#ef5777",
backgroundColor: "#ef577742", backgroundColor: "#ef577710",
data: [] data: []
}; };
let green = { let green = {
label: "Grønn", label: "Grønn",
borderColor: "#0be881", borderColor: "#0be881",
backgroundColor: "#0be88142", backgroundColor: "#0be88110",
data: [] data: []
}; };

40
src/ui/TotalBought.vue
View File

@@ -28,6 +28,13 @@
<div>{{ green.win }} vinn</div> <div>{{ green.win }} vinn</div>
<div>{{ greenPercentage }}% vinn</div> <div>{{ greenPercentage }}% vinn</div>
</div> </div>
<div class="total-container">
<div>
totalt&nbsp;
<span class="total">{{ total }}</span> kjøpt
</div>
<div>{{ totalWin }} vinn</div>
</div>
</div> </div>
</template> </template>
<script> <script>
@@ -48,9 +55,7 @@ export default {
}; };
}, },
async mounted() { async mounted() {
let _response = await fetch( let _response = await fetch("/api/purchase/statistics/color");
"/api/purchase/statistics/color"
);
let response = await _response.json(); let response = await _response.json();
this.red = response.red; this.red = response.red;
this.blue = response.blue; this.blue = response.blue;
@@ -60,15 +65,23 @@ export default {
this.totalWin = this.totalWin =
this.red.win + this.yellow.win + this.blue.win + this.green.win; this.red.win + this.yellow.win + this.blue.win + this.green.win;
this.redPercentage = this.redPercentage = this.round(
this.red.win == 0 ? 0 : (this.totalWin / this.red.win) * 100; this.red.win == 0 ? 0 : (this.totalWin / this.red.win) * 100
this.greenPercentage = );
this.green.win == 0 ? 0 : (this.totalWin / this.green.win) * 100; this.greenPercentage = this.round(
this.bluePercentage = this.green.win == 0 ? 0 : (this.totalWin / this.green.win) * 100
this.blue.win == 0 ? 0 : (this.totalWin / this.blue.win) * 100; );
this.yellowPercentage = this.bluePercentage = this.round(
this.yellow.win == 0 ? 0 : (this.totalWin / this.yellow.win) * 100; this.blue.win == 0 ? 0 : (this.totalWin / this.blue.win) * 100
console.log(response); );
this.yellowPercentage = this.round(
this.yellow.win == 0 ? 0 : (this.totalWin / this.yellow.win) * 100
);
},
methods: {
round: function(number) {
return Math.round(number * 100) / 100;
}
} }
}; };
</script> </script>
@@ -85,7 +98,8 @@ export default {
.green, .green,
.blue, .blue,
.yellow, .yellow,
.red { .red,
.total {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
} }