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>
<head>
<title>Vinlottis</title>
<link href=/dist/css/vinlottis.9de3c0e.css rel=stylesheet></head>
<link href=/dist/css/vinlottis.9c7b01a.css rel=stylesheet></head>
<body>
<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>

11
src/ui/Highscore.vue
View File

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

12
src/ui/PurchaseGraph.vue
View File

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

40
src/ui/TotalBought.vue
View File

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