From b95cc86b6afa9fda6c61dec4205109af3c15749f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Tue, 27 Jun 2023 10:35:51 +0200
Subject: [PATCH] Implement ranking page

---
 src/router/index.ts   | 17 ++++++++++++++-
 src/views/Ranking.vue | 48 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Ranking.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index ead1e81..ee4b685 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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;
+      }
+    }
   }
 ];
 
diff --git a/src/views/Ranking.vue b/src/views/Ranking.vue
new file mode 100644
index 0000000..96bf63c
--- /dev/null
+++ b/src/views/Ranking.vue
@@ -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>