Added reports support + major implementation fixes

backend/controllers/emergenciesController.js

@@ -3,10 +3,12 @@ const pathApiEmergencies = "/api/emergencies/";
 
 export const getEmergencies = async (req, res) => {
     try {
-        const state = req.query;
         let filter = {};
-        if (state && (state === "In corso" || state === "Terminato")) {
-            filter.state = state;
+        const state = req.query.state;
+
+        if (state && (state === "in_corso" || state === "terminato")) {
+            // Riformatto prima il parametro dello stato
+            filter.state = formatState(state);
         }
 
         let emergencies = await Emergency.find(filter);
@@ -26,6 +28,7 @@ export const getEmergencies = async (req, res) => {
         res.status(200).json(emergencies);
     } catch (error) {
         res.status(500).json({ message: "Error in emergencies recovery" });
+        console.log(error.message);
     }
 };
 
@@ -93,3 +96,8 @@ export const deleteEmergency = async (req, res) => {
         res.status(500).json({ message: "Error in emergency deletion" });
     }
 };
+
+function formatState(state) {
+    const words = state.split("_").join(" ");
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}

backend/controllers/reportsController.js

@@ -52,7 +52,8 @@ export const getReportsByUser = async (req, res) => {
                 coordinates: report.coordinates,
                 state: report.state,
                 description: report.description,
-                createdBy: report.createdBy
+                createdBy: report.createdBy,
+                createdAt: report.createdAt
             };
         });
         res.status(200).json(reports);

frontend/src/components/Badge/BadgeStatoReports.vue

@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+    state: {
+        type: String,
+        required: true
+    }
+});
+</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-else class="badge badge-secondary text-sm">Stato sconosciuto</div>
+</template>
+
+<style scoped>
+</style>

frontend/src/components/Mappa/Mappa.vue

@@ -3,9 +3,7 @@ import { ref, onMounted } from 'vue'
 import { loggedUser } from '../../states/loggedUser.js'
 
 import { LMap, LTileLayer, LMarker, LPopup, LPolygon } from "@vue-leaflet/vue-leaflet"
-import { ArrowsPointingOutIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid'
-import BadgeCategoria from '../Badge/BadgeCategoria.vue'
-import BadgeStato from '../Badge/BadgeStato.vue'
+import { ChevronDoubleRightIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid'
 
 // Proprietà varie della mappa Leaflet
 const url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
@@ -46,14 +44,14 @@ onMounted(() => {
             <l-marker v-for="marker in emergencies" :key="marker.id"
                 :lat-lng="[marker.coordinates.lat, marker.coordinates.lon]">
                 <l-popup>
-                    <div class="flex justify-end">
-                        <span class="indicator-item badge badge-success badge-sm mt-1 me-2"></span>
+                    <div class="flex justify-start">
+                        <span class="indicator-item badge badge-success badge-sm mt-0.5 me-2"></span>
                         <h3 class="marker-title text-lg font-bold">{{ marker.title }}</h3>
                     </div>
                     <p class="marker-location">{{ marker.location }}</p>
                     <router-link :to="`/dettagli?id=${marker.id}`">
                         <button class="btn btn-block btn-sm btn-info text-white">
-                            <ArrowsPointingOutIcon class="size-4 opacity-80 -mx-0.5" />
+                            <ChevronDoubleRightIcon class="size-4 opacity-80 -mx-0.5" />
                             Espandi
                         </button>
                     </router-link>
@@ -80,10 +78,11 @@ onMounted(() => {
 .marker-title {
     font-family: "Inter", sans-serif;
     margin-top: -3px;
+    line-height: 1.4;
 }
 
 .marker-location {
-    margin-top: 2px;
+    margin-top: 3px;
 }
 
 .btn-segnalazione {

frontend/src/components/Tabelle/TabellaEmergenze.vue

@@ -57,7 +57,10 @@ function createToast(type, title, msg) {
     <Toast v-if="showToast" :type="toastType" :title="toastTitle" :msg="toastMsg" />
 
     <div class="overflow-x-auto md:overflow-y-auto">
-        <table class="table table-sm table-zebra table-pin-rows">
+        <div v-if="emergencies.length === 0" class="text-center w-full my-4 italic">
+            Nessun risultato disponibile
+        </div>
+        <table v-else class="table table-sm table-zebra table-pin-rows">
             <thead>
                 <tr class="text-white">
                     <th>#</th>

frontend/src/components/Tabelle/TabellaSegnalazioni.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from "vue";
+
+import {
+    ChevronDoubleRightIcon
+} from "@heroicons/vue/24/solid";
+import BadgeStatoReports from "../Badge/BadgeStatoReports.vue";
+
+const props = defineProps({
+    reports: {
+        type: Array,
+        required: true
+    },
+    isOperator: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+    reviewable: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+    pendingOnly: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+    nonPendingOnly: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+});
+
+const filteredReports = computed(() => {
+    if (props.pendingOnly) {
+        return props.reports.filter(report => report.state === 'pending');
+    } else if (props.nonPendingOnly) {
+        return props.reports.filter(report => report.state !== 'pending');
+    } else {
+        return props.reports;
+    }
+});
+</script>
+
+<template>
+    <div class="overflow-x-auto md:overflow-y-auto">
+        <div v-if="filteredReports.length === 0" class="text-center w-full my-4 italic">
+            Nessun risultato disponibile
+        </div>
+        <table v-else class="table table-sm table-zebra table-pin-rows">
+            <thead>
+                <tr class="text-white">
+                    <th>#</th>
+                    <th v-if="props.isOperator">Autore</th>
+                    <th v-else>Inviata il</th>
+                    <th class="hidden md:table-cell">Luogo</th>
+                    <th>Stato</th>
+                    <th v-if="props.reviewable"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <transition-group name="fade">
+                    <tr v-for="(report, index) in filteredReports" :key="index" class="hover fade-in"
+                        :style="{ animationDelay: `${index * 0.05}s` }">
+                        <td>
+                            {{ index + 1 }}
+                        </td>
+                        <td v-if="props.isOperator">
+                            {{ report.email }}
+                        </td>
+                        <td v-else>
+                            {{ report.createdAt }}
+                        </td>
+                        <td class="hidden md:table-cell">
+                            {{ report.location }}
+                        </td>
+                        <td>
+                            <BadgeStatoReports :state="report.state" />
+                        </td>
+                        <th v-if="props.reviewable" class="px-1 pe-4 size-0">
+                            <router-link :to="`/conferma_segnalazione?id=${report.id}`">
+                                <button class="btn btn-xs btn-warning btn-square btn-outline">
+                                    <ChevronDoubleRightIcon class="size-4 text-white opacity-80" />
+                                </button>
+                            </router-link>
+                        </th>
+                    </tr>
+                </transition-group>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<style scoped>
+.fade-in {
+    opacity: 0;
+    transform: translateX(-25px);
+    animation: fadeIn 0.3s ease-out forwards, transform 0.3s ease-out forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+</style>

frontend/src/components/Tabelle/TabellaUtenti.vue

@@ -55,7 +55,10 @@ function createToast(type, title, msg) {
     <Toast v-if="showToast" :type="toastType" :title="toastTitle" :msg="toastMsg" />
 
     <div class="overflow-x-auto md:overflow-y-auto">
-        <table class="table table-sm table-zebra table-pin-rows">
+        <div v-if="users.length === 0" class="text-center w-full my-4 italic">
+            Nessun risultato disponibile
+        </div>
+        <table v-else class="table table-sm table-zebra table-pin-rows">
             <thead>
                 <tr class="text-white">
                     <th>#</th>

frontend/src/data/emergencies.js

@@ -23,6 +23,12 @@ function formattaData(date) {
     });
 }
 
+export function resetEmergencies() {
+    emergency.value = [];
+    emergencies.value = [];
+    emergenciesInProgress.value = [];
+}
+
 export async function nEmergencies() {
     try {
         const response = await fetch(apiEmergencies);
@@ -70,7 +76,7 @@ export async function getEmergencyById(id) {
 }
 
 export function getEmergenciesInProgress() {
-    fetch(apiEmergencies + "/?state=in_progress")
+    fetch(apiEmergencies + "?state=in_corso")
         .then((response) => response.json())
         .then((data) => {
             emergenciesInProgress.value = data.map((data) => {