Fixed cookie auth and dynamic map loading + various bug fixes

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>
 

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>
 

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>
 

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>
 

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>

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;

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>