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

Api call from component itself and linting.

Browse Source
This commit is contained in:
Kevin
2021-02-18 21:35:18 +01:00
parent b5cca00ed4
commit b2755add12
1 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/components/HighscorePage.vue
View File

@@ -12,7 +12,12 @@
<p class="highscore-header margin-bottom-md"><b>Plassering.</b> Navn - Antall vinn</p> <p class="highscore-header margin-bottom-md"><b>Plassering.</b> Navn - Antall vinn</p>
<ol v-if="highscore.length > 0" class="highscore-list"> <ol v-if="highscore.length > 0" class="highscore-list">
<li v-for="person in filteredResults" @click="selectWinner(person)" @keydown.enter="selectWinner(person)" tabindex="0"> <li
v-for="person in filteredResults"
@click="goToWinner(person)"
@keydown.enter="goToWinner(person)"
tabindex="0"
>
<b>{{ person.rank }}.</b>&nbsp;&nbsp;&nbsp;{{ person.name }} - {{ person.wins.length }} <b>{{ person.rank }}.</b>&nbsp;&nbsp;&nbsp;{{ person.name }} - {{ person.wins.length }}
</li> </li>
</ol> </ol>
@@ -24,8 +29,6 @@
</template> </template>
<script> <script>
import { highscoreStatistics } from "@/api";
import { humanReadableDate, daysAgo } from "@/utils"; import { humanReadableDate, daysAgo } from "@/utils";
import Wine from "@/ui/Wine"; import Wine from "@/ui/Wine";
@@ -34,18 +37,12 @@ export default {
data() { data() {
return { return {
highscore: [], highscore: [],
filterInput: '' filterInput: ""
} };
}, },
async mounted() { async mounted() {
let response = await highscoreStatistics(); const winners = await this.highscoreStatistics();
response.sort((a, b) => { this.highscore = this.generateScoreBoard(winners);
return a.wins.length > b.wins.length ? -1 : 1;
});
response = response.filter(
person => person.name != null && person.name != ""
);
this.highscore = this.generateScoreBoard(response);
}, },
computed: { computed: {
filteredResults() { filteredResults() {
@@ -53,37 +50,42 @@ export default {
let val = this.filterInput; let val = this.filterInput;
if (val.length) { if (val.length) {
val = val.toLowerCase() val = val.toLowerCase();
const nameIncludesString = (person) => person.name.toLowerCase().includes(val); const nameIncludesString = person => person.name.toLowerCase().includes(val);
highscore = highscore.filter(nameIncludesString) highscore = highscore.filter(nameIncludesString);
} }
return highscore return highscore;
} }
}, },
methods: { methods: {
highscoreStatistics() {
return fetch("/api/history/by-wins")
.then(resp => resp.json())
.then(response => response.winners);
},
generateScoreBoard(highscore = this.highscore) { generateScoreBoard(highscore = this.highscore) {
let place = 0; let place = 0;
let highestWinCount = -1; let highestWinCount = -1;
return highscore.map(win => { return highscore.map(win => {
const wins = win.wins.length const wins = win.wins.length;
if (wins != highestWinCount) { if (wins != highestWinCount) {
place += 1 place += 1;
highestWinCount = wins highestWinCount = wins;
} }
const placeString = place.toString().padStart(2, "0"); const placeString = place.toString().padStart(2, "0");
win.rank = placeString; win.rank = placeString;
return win return win;
}) });
}, },
resetFilter() { resetFilter() {
this.filterInput = ''; this.filterInput = "";
document.getElementsByTagName('input')[0].focus(); document.getElementsByTagName("input")[0].focus();
}, },
selectWinner(winner) { goToWinner(winner) {
const path = "/highscore/" + encodeURIComponent(winner.name) const path = "/highscore/" + encodeURIComponent(winner.name);
this.$router.push(path); this.$router.push(path);
}, },
humanReadableDate: humanReadableDate, humanReadableDate: humanReadableDate,
@@ -152,7 +154,8 @@ h1 {
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
&:hover, &:focus { &:hover,
&:focus {
border-color: $link-color; border-color: $link-color;
} }
} }