Calls api from within and get as screen can fit.

This commit is contained in:
2021-02-18 23:25:13 +01:00
parent cff64999b3
commit 07dd0d43f5

View File

@@ -1,54 +1,42 @@
<template> <template>
<div class="highscores" v-if="highscore.length > 0"> <div class="highscores" v-if="highscore.length > 0">
<section class="heading"> <section class="heading">
<h3> <h3>
Topp 5 vinnere Topp vinnere
</h3> </h3>
<router-link to="highscore" class=""> <router-link to="highscore" class="">
<span class="vin-link">Se alle vinnere</span> <span class="vin-link">Se alle vinnere</span>
</router-link> </router-link>
</section> </section>
<ol class="winner-list-container"> <ol class="winner-list-container">
<li v-for="(person, index) in highscore" :key="person._id" class="single-winner"> <li v-for="(person, index) in highscore" :key="person._id">
<span class="placement">{{index + 1}}.</span> <router-link :to="`/highscore/${person.name}`" class="single-winner">
<i class="icon icon--medal"></i> <span class="placement">{{ index + 1 }}.</span>
<p class="winner-name">{{ person.name }}</p> <i class="icon icon--medal"></i>
<p class="winner-name">{{ person.name }}</p>
</router-link>
</li> </li>
</ol> </ol>
</div> </div>
</template> </template>
<script> <script>
import { highscoreStatistics } from "@/api"; import { highscoreStatistics } from "@/api";
export default { export default {
data() { data() {
return { highscore: [] }; return {
highscore: [],
limit: 22
};
}, },
async mounted() { async mounted() {
let response = await highscoreStatistics(); return fetch(`/api/history/by-wins?limit=${limit}`)
response.sort((a, b) => a.wins.length < b.wins.length ? 1 : -1) .then(resp => resp.json())
this.highscore = this.generateScoreBoard(response.slice(0, 5)); .then(response => {
}, this.highscore = response.winners;
methods: { });
generateScoreBoard(highscore=this.highscore) {
let place = 0;
let highestWinCount = -1;
return highscore.map(win => {
const wins = win.wins.length
if (wins != highestWinCount) {
place += 1
highestWinCount = wins
}
const placeString = place.toString().padStart(2, "0");
win.rank = placeString;
return win
})
}
} }
}; };
</script> </script>