From 1433024d9e865d9e23660f1c505678f4c9186acf Mon Sep 17 00:00:00 2001
From: Fernando da Silva Sousa <wild.nando@gmail.com>
Date: Fri, 4 Oct 2024 15:11:47 -0300
Subject: [PATCH] =?UTF-8?q?Adiciona=20sum=C3=A1rio=20da=20vota=C3=A7=C3=A3?=
 =?UTF-8?q?o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Pages/Room.vue | 40 +++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/resources/js/Pages/Room.vue b/resources/js/Pages/Room.vue
index c749fb6..1bdb6a3 100644
--- a/resources/js/Pages/Room.vue
+++ b/resources/js/Pages/Room.vue
@@ -5,7 +5,7 @@ import BaseTable from "@/Components/VotePresentation/BaseTable.vue";
 import HorizontalTable from "@/Components/VotePresentation/HorizontalTable.vue";
 import MainLayout from "@/Layouts/MainLayout.vue";
 import { Head } from "@inertiajs/vue3";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { createRound, rooms, rounds } from "../api";
 
 const props = defineProps({
@@ -72,6 +72,24 @@ onMounted(async () => {
       finished.value = e.round.finished_at !== null;
     });
 });
+
+const groupedVotes = computed(() => {
+  const groups = votes
+    .value
+    .reduce((grouped, vote) => {
+        if (typeof vote.vote === 'number' && !isNaN(vote.vote)) {
+            grouped[vote.vote] = (grouped[vote.vote] ?? 0) + 1
+        }
+
+        return grouped;
+    }, {});
+
+    const x = Object
+        .entries(groups);
+
+    x.sort((a, b) => a[1] - b[1]);
+    return x;
+})
 </script>
 
 <template>
@@ -121,23 +139,23 @@ onMounted(async () => {
       :username="username"
     ></Deck>
 
-    <div v-if="finished" class="p-2 space-x-4 mb-4 text-white items-center justify-center fixed bottom-0 left-0 w-full flex">
+    <div v-if="finished" class="p-2 space-x-4 mb-8 text-white items-center justify-center fixed bottom-0 left-0 w-full flex">
         <div class="text-center">
-            Count
+            Total
             <span class="font-bold block">{{ count }} votes</span>
         </div>
 
-        <div>
-            Average
-            <div class="h-24 w-16">
-                <Card
-                :number="average"
-                owner=""
+        <div v-for="[vote, votes] in groupedVotes" :key="vote" class="h-28">
+            <Card
+                :number="vote"
+                :owner="`${votes} votes`"
                 :visible="true"
-                ></Card>
+            ></Card>
+
+            <div class="text-center font-bold">
+                ({{ (votes / count * 100).toFixed(0) }}%)
             </div>
         </div>
-
     </div>
   </MainLayout>
 </template>