Implement ranking page

This commit is contained in:
Maciej Pędzich 2023-06-27 10:35:51 +02:00
parent 5ac55557c9
commit b95cc86b6a
2 changed files with 64 additions and 1 deletions

View File

@ -1,6 +1,9 @@
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import { useVote } from '@/composables/useVote';
const { userSubmittedAllVotes } = useVote();
const routes = [
{
@ -11,8 +14,20 @@ const routes = [
{
path: '/vote',
name: 'Vote',
meta: { authRequired: true },
component: () => import('../views/Vote.vue')
},
{
path: '/ranking',
name: 'Ranking',
component: () => import('../views/Ranking.vue'),
// eslint-disable-next-line @typescript-eslint/no-unused-vars
beforeEnter: (_to: unknown, _from: unknown, next: () => void) => {
if (userSubmittedAllVotes.value) {
return next();
} else {
return false;
}
}
}
];

48
src/views/Ranking.vue Normal file
View File

@ -0,0 +1,48 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useDisplay } from 'vuetify';
import { useVote } from '@/composables/useVote';
const display = useDisplay();
const { photos } = useVote();
const photosSortedByRatingDesc = photos.value.sort(
(a, b) => b.rating - a.rating
);
const cols = computed(() =>
display.xl.value ? 3 : display.lg.value ? 4 : display.md.value ? 6 : 12
);
</script>
<template>
<section class="w-100 h-100 d-flex flex-column justify-center align-center">
<h1 class="mt-10 mb-5 text-h3">Ranking</h1>
<p class="px-4 mb-5 text-h6 font-weight-regular">
Here's the final ranking of photos based on the votes you've submitted:
</p>
<v-container>
<v-row dense no-gutters>
<v-col
v-for="(photo, index) in photosSortedByRatingDesc"
class="px-4 py-4 d-flex justify-center"
:key="photo.fileName"
:cols="cols"
>
<v-card max-width="480" max-height="270">
<v-img
:src="`/images/${photo.fileName}`"
:alt="photo.altText"
class="align-end"
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
:aspect-ratio="16 / 9"
>
<v-card-title class="text-white">
{{ `#${index + 1} (Rating: ${photo.rating.toFixed(2)})` }}
</v-card-title>
</v-img>
</v-card>
</v-col>
</v-row>
</v-container>
</section>
</template>