From 252bb2bbabdddf11d3a05b33cb65837b136cf577 Mon Sep 17 00:00:00 2001
From: Amar <amar.sidkir@studenti.unitn.it>
Date: Sun, 16 Feb 2025 14:31:30 +0100
Subject: [PATCH] Fixed cookie auth and dynamic map loading + various bug fixes

---
 .../src/components/Badge/BadgeCategoria.vue   |  5 ++-
 frontend/src/components/Badge/BadgeRuolo.vue  |  7 ++--
 frontend/src/components/Badge/BadgeStato.vue  |  7 ++--
 .../components/Badge/BadgeStatoReports.vue    |  9 +++--
 frontend/src/components/Mappa/Mappa.vue       | 14 ++++---
 frontend/src/states/loggedUser.js             | 15 ++++++-
 frontend/src/views/ViewHome.vue               | 40 +++++++++++++++++--
 7 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Badge/BadgeCategoria.vue b/frontend/src/components/Badge/BadgeCategoria.vue
index 388bbce..91607d7 100644
--- a/frontend/src/components/Badge/BadgeCategoria.vue
+++ b/frontend/src/components/Badge/BadgeCategoria.vue
@@ -2,13 +2,14 @@
 const props = defineProps({
     category: {
         type: String,
-        required: true
+        required: false,
+        default: "unknown"
     }
 });
 </script>
 
 <template>
-    <div v-if="category" class="badge">{{ props.category }}</div>
+    <div v-if="props.category !== 'unknown'" class="badge">{{ props.category }}</div>
     <div v-else class="badge badge-ghost">Categoria sconosciuta</div>
 </template>
 
diff --git a/frontend/src/components/Badge/BadgeRuolo.vue b/frontend/src/components/Badge/BadgeRuolo.vue
index 809a7db..b498b30 100644
--- a/frontend/src/components/Badge/BadgeRuolo.vue
+++ b/frontend/src/components/Badge/BadgeRuolo.vue
@@ -2,14 +2,15 @@
 const props = defineProps({
     role: {
         type: String,
-        required: true
+        required: false,
+        default: "unknown"
     }
 });
 </script>
 
 <template>
-    <div v-if="role && role === 'citizen'" class="badge badge-secondary">Cittadino</div>
-    <div v-else-if="role && role === 'operator'" class="badge badge-info text-white">Operatore</div>
+    <div v-if="props.role === 'citizen' || props.role === 'cittadino'" class="badge badge-secondary">Cittadino</div>
+    <div v-else-if="props.role === 'operator' || props.role === 'operatore'" class="badge badge-info text-white">Operatore</div>
     <div v-else class="badge badge-ghost">Ruolo sconosciuto</div>
 </template>
 
diff --git a/frontend/src/components/Badge/BadgeStato.vue b/frontend/src/components/Badge/BadgeStato.vue
index 2de7333..59945a0 100644
--- a/frontend/src/components/Badge/BadgeStato.vue
+++ b/frontend/src/components/Badge/BadgeStato.vue
@@ -2,14 +2,15 @@
 const props = defineProps({
     state: {
         type: String,
-        required: true
+        required: false,
+        default: "unknown"
     }
 });
 </script>
 
 <template>
-    <div v-if="props.state && (props.state === 'in_progress' || props.state === 'In corso')" class="badge badge-success badge-md">In corso</div>
-    <div v-else-if="props.state && (props.state === 'ended' || props.state === 'Terminato')" class="badge badge-error badge-md">Terminato</div>
+    <div v-if="props.state === 'in_progress' || props.state === 'In corso'" class="badge badge-success badge-md">In corso</div>
+    <div v-else-if="props.state === 'ended' || props.state === 'Terminato'" class="badge badge-error badge-md">Terminato</div>
     <div v-else class="badge badge-secondary text-sm">Stato sconosciuto</div>
 </template>
 
diff --git a/frontend/src/components/Badge/BadgeStatoReports.vue b/frontend/src/components/Badge/BadgeStatoReports.vue
index 5b433cf..ce79929 100644
--- a/frontend/src/components/Badge/BadgeStatoReports.vue
+++ b/frontend/src/components/Badge/BadgeStatoReports.vue
@@ -2,15 +2,16 @@
 const props = defineProps({
     state: {
         type: String,
-        required: true
+        required: false,
+        default: "unknown"
     }
 });
 </script>
 
 <template>
-    <div v-if="props.state && props.state === 'pending'" class="badge badge-warning badge-md">In attesa</div>
-    <div v-else-if="props.state && props.state === 'approved'" class="badge badge-success badge-md">Approvata</div>
-    <div v-else-if="props.state && props.state === 'rejected'" class="badge badge-error badge-md">Rifiutata</div>
+    <div v-if="props.state === 'pending'" class="badge badge-warning badge-md">In attesa</div>
+    <div v-else-if="props.state === 'approved'" class="badge badge-success badge-md">Approvata</div>
+    <div v-else-if="props.state === 'rejected'" class="badge badge-error badge-md">Rifiutata</div>
     <div v-else class="badge badge-secondary text-sm">Stato sconosciuto</div>
 </template>
 
diff --git a/frontend/src/components/Mappa/Mappa.vue b/frontend/src/components/Mappa/Mappa.vue
index adfa17d..599c61f 100644
--- a/frontend/src/components/Mappa/Mappa.vue
+++ b/frontend/src/components/Mappa/Mappa.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { loggedUser } from '../../states/loggedUser.js'
 
 import { LMap, LTileLayer, LMarker, LPopup, LPolygon } from "@vue-leaflet/vue-leaflet"
@@ -36,12 +36,14 @@ onMounted(() => {
         .catch(error => {
             console.error('Errore caricamento mappa:', error);
         });
-
-    filteredEmergencies.value = props.emergencies?.filter(emergency => {
-        return emergency.coordinates.lat !== null &&
-            emergency.coordinates.lon !== null;
-    })
 });
+
+// Filtro le emergenze con coordinate parziali o mancanti
+watch(() => props.emergencies, (newEmergencies) => {
+    filteredEmergencies.value = newEmergencies?.filter(emergency => 
+        emergency.coordinates.lat !== null && emergency.coordinates.lon !== null
+    );
+}, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/src/states/loggedUser.js b/frontend/src/states/loggedUser.js
index 5c698a8..eece156 100644
--- a/frontend/src/states/loggedUser.js
+++ b/frontend/src/states/loggedUser.js
@@ -5,6 +5,7 @@ import { resetEmergencies } from '@/data/emergencies';
 import { resetReports } from '@/data/reports';
 
 const loggedUser = reactive({
+    saveDate: undefined,
     self: undefined,
     token: undefined,
     id: undefined,
@@ -20,11 +21,20 @@ function loadUserFromCookies() {
     const userData = Cookies.get('loggedUser');
 
     if (userData) {
-        Object.assign(loggedUser, JSON.parse(userData))
+        const parsedUserData = JSON.parse(userData);
+        const timeLimit = 24 * 60 * 60 * 1000;
+
+        // Check if saveDate is older than 24 hours
+        if (parsedUserData.saveDate && (Date.now() - new Date(parsedUserData.saveDate).getTime()) > timeLimit) {
+            clearLoggedUser();
+        } else {
+            Object.assign(loggedUser, parsedUserData);
+        }
     }
 };
 
 function setLoggedUser(data) {
+    loggedUser.saveDate = new Date();
     loggedUser.self = data.self;
     loggedUser.token = data.token;
     loggedUser.id = data.id;
@@ -35,10 +45,11 @@ function setLoggedUser(data) {
     loggedUser.updatedAt = data.updatedAt;
 
     // Save to cookies
-    Cookies.set('loggedUser', JSON.stringify(loggedUser), { expires: 90 }); // expires in 3 months
+    Cookies.set('loggedUser', JSON.stringify(loggedUser), { expires: 30 * 6 }); // Scadenza tra 6 mesi
 }
 
 function clearLoggedUser() {
+    loggedUser.saveDate = undefined;
     loggedUser.self = undefined;
     loggedUser.token = undefined;
     loggedUser.id = undefined;
diff --git a/frontend/src/views/ViewHome.vue b/frontend/src/views/ViewHome.vue
index 672c642..024790f 100644
--- a/frontend/src/views/ViewHome.vue
+++ b/frontend/src/views/ViewHome.vue
@@ -1,19 +1,51 @@
 <script setup>
-import { onMounted } from 'vue'
-import { emergenciesInProgress, getEmergenciesInProgress } from '../data/emergencies'
+import { ref, onMounted } from 'vue'
 import { ChevronDoubleRightIcon } from "@heroicons/vue/24/solid"
 
 import Mappa from "../components/Mappa/Mappa.vue"
 import BadgeCategoria from '@/components/Badge/BadgeCategoria.vue'
 
-// Ottengo l'ora attuale
+const apiEmergencies = import.meta.env.VITE_API_BASE_URL + "/emergencies/";
+const emergenciesInProgress = ref([]);
+
+// Funzione per ottenere l'ora attuale
 const oraUltimoAggiornamento = new Date().toLocaleString('it-IT', {
     hour: '2-digit',
     minute: '2-digit'
 });
 
+// Funzione per ottenere la data delle emergenze
+function formattaData(date) {
+    return new Date(date).toLocaleString("it-IT", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}
+
+// Funzione per recuperare l'id delle emergenze
+function recuperaId(self) {
+    return self.substring(self.lastIndexOf("/") + 1);
+}
+
 onMounted(() => {
-    getEmergenciesInProgress()
+    fetch(apiEmergencies + "?state=in_corso")
+        .then((response) => response.json())
+        .then((data) => {
+            emergenciesInProgress.value = data.map((data) => {
+                return {
+                    ...data,
+                    startDate: formattaData(data.startDate),
+                    id: recuperaId(data.self),
+                };
+            });
+        })
+        .catch((error) => {
+            console.error("Errore nella chiamata ", apiEmergencies, "?state=in_corso: ", error);
+            emergenciesInProgress.value = null;
+        });
 })
 </script>