Implemented (partially) Voronoi algorithm for zone-dividing in Seville map. Also refactored some things in frontend. Modified hardware firmware for conditional compilation for both SENSOR and ACTUATOR type boards.

frontend/src/pages/Dashboard.jsx

@@ -8,7 +8,7 @@ const Dashboard = () => {
     const { groupId, deviceId } = useParams();
 
     return (
-        <main className='container justify-content-center'>
+        <main className='container justify-content-center gap-3 d-flex flex-column'>
             <SummaryCards groupId={groupId} deviceId={deviceId} />
             <PollutionMap groupId={groupId} deviceId={deviceId} />
             <HistoryCharts groupId={groupId} deviceId={deviceId} />

frontend/src/pages/GroupView.jsx

@@ -9,8 +9,10 @@ import { useEffect, useState } from "react";
 import { DataProvider } from "@/context/DataContext";
 
 import { MapContainer, TileLayer, Marker } from 'react-leaflet';
-import L from 'leaflet';
+import L, { map } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import PropTypes from 'prop-types';
+import { text } from "@fortawesome/fontawesome-svg-core";
 
 // Icono de marcador por defecto (porque Leaflet no lo carga bien en algunos setups)
 const markerIcon = new L.Icon({
@@ -19,6 +21,7 @@ const markerIcon = new L.Icon({
     iconAnchor: [12, 41],
 });
 
+
 const MiniMap = ({ lat, lon }) => (
     <MapContainer
         center={[lat, lon]}
@@ -34,6 +37,11 @@ const MiniMap = ({ lat, lon }) => (
     </MapContainer>
 );
 
+MiniMap.propTypes = {
+    lat: PropTypes.number.isRequired,
+    lon: PropTypes.number.isRequired,
+};
+
 const GroupView = () => {
     const { groupId } = useParams();
     const { config, configLoading } = useConfig();
@@ -91,21 +99,20 @@ const GroupViewContent = () => {
 
     return (
         <CardContainer
-            links
             cards={data.map(device => {
                 const latest = latestData[device.deviceId];
                 const gpsSensor = latest?.data[0];
-                const mapPreview = gpsSensor?.lat && gpsSensor?.lon
-                    ? <MiniMap lat={gpsSensor.lat} lon={gpsSensor.lon} />
-                    : "Sin posición";
+                const mapPreview = <MiniMap lat={gpsSensor?.lat} lon={gpsSensor?.lon} />;
 
                 return {
                     title: device.deviceName,
                     status: `ID: ${device.deviceId}`,
-                    content: mapPreview,
+                    link: gpsSensor != undefined,
+                    text: gpsSensor == undefined,
+                    marquee: gpsSensor == undefined,
+                    content: gpsSensor == undefined ? "SOLO VEHICULOS ELECTRICOS" : mapPreview,
                     to: `/groups/${groupId}/devices/${device.deviceId}`,
-                    styleMode: "override",
-                    className: "col-12 col-md-6 col-lg-4"
+                    className: `col-12 col-md-6 col-lg-4 ${gpsSensor == undefined ? "led" : ""}`,
                 };
             })}
 

frontend/src/pages/Groups.jsx

@@ -60,17 +60,16 @@ const GroupsContent = ({ config }) => {
 
     return (
         <CardContainer
-            links
-            text
             cards={data.map(group => {
                 const groupDevices = devices[group.groupId]?.data;
                 const deviceCount = groupDevices?.length;
 
                 return {
                     title: group.groupName,
+                    link: true,
+                    text: true,
                     status: `ID: ${group.groupId}`,
                     to: `/groups/${group.groupId}`,
-                    styleMode: "override",
                     content: deviceCount != null
                         ? (deviceCount === 1 ? "1 dispositivo" : `${deviceCount} dispositivos`)
                         : "Cargando dispositivos...",