From 0e7a9ba140a551bb28279df93c43ea477efa8a9b Mon Sep 17 00:00:00 2001
From: Minotriz02 <sebastian.lopez_Ast@uao.edu.com>
Date: Thu, 14 Nov 2024 10:53:22 -0500
Subject: [PATCH] AC-259 minos issues fixed

---
 src/package-lock.json                         |  11 ++
 src/package.json                              |   1 +
 src/src/components/searchBar/SearchBar.css    |   5 +-
 src/src/components/searchBar/SearchBar.js     |   8 +-
 .../components/weatherChart/WeatherChart.js   |   7 +-
 src/src/pages/dashboard/Dashboard.js          | 114 +++++++++++-------
 src/src/pages/station/Station.js              |   1 +
 7 files changed, 96 insertions(+), 51 deletions(-)

diff --git a/src/package-lock.json b/src/package-lock.json
index e6f4fa9..a5ff703 100644
--- a/src/package-lock.json
+++ b/src/package-lock.json
@@ -15,6 +15,7 @@
         "axios": "^1.7.7",
         "bootstrap": "^5.3.3",
         "chart.js": "^4.4.4",
+        "jquery": "^3.7.1",
         "leaflet": "^1.9.4",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
@@ -12295,6 +12296,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -27314,6 +27320,11 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w=="
     },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/src/package.json b/src/package.json
index eb32339..a40cc32 100644
--- a/src/package.json
+++ b/src/package.json
@@ -11,6 +11,7 @@
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.4.4",
+    "jquery": "^3.7.1",
     "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
diff --git a/src/src/components/searchBar/SearchBar.css b/src/src/components/searchBar/SearchBar.css
index 96fb8bb..e0e64dc 100644
--- a/src/src/components/searchBar/SearchBar.css
+++ b/src/src/components/searchBar/SearchBar.css
@@ -10,8 +10,9 @@
     width: 320px;
   }
 }
-.stations-search{
-  width: 95vw;
+.stations-search {
+  width: 100%;
+  z-index: 2000;
 }
 
 .bar-hints {
diff --git a/src/src/components/searchBar/SearchBar.js b/src/src/components/searchBar/SearchBar.js
index 12f0615..3b236c5 100644
--- a/src/src/components/searchBar/SearchBar.js
+++ b/src/src/components/searchBar/SearchBar.js
@@ -2,7 +2,7 @@ import { IconSearch, IconRouter } from "@tabler/icons-react";
 import React, { useState } from "react";
 import "./SearchBar.css";
 
-function SearchBar({ stations, onStationClick, bigSize, dashboard }) {
+function SearchBar({ stations, onStationClick, bigSize, dashboard, onMap }) {
   const [filterText, setFilterText] = useState("");
   const [selectedStation, setSelectedStation] = useState(null);
 
@@ -30,7 +30,11 @@ function SearchBar({ stations, onStationClick, bigSize, dashboard }) {
   };
 
   return (
-    <div className={`${dashboard ? "" : "bar-hints"}`}>
+    <div
+      className={`${dashboard ? "" : "bar-hints"} ${
+        onMap ? "" : "position-relative"
+      }`}
+    >
       <div
         className={`d-flex px-3 bg-white align-items-center border-bottom justify-content-between py-2 ${
           filterText.length < 3 ? "search-bar-unfocused" : "search-bar-focused"
diff --git a/src/src/components/weatherChart/WeatherChart.js b/src/src/components/weatherChart/WeatherChart.js
index dd36cb5..ffbbb80 100644
--- a/src/src/components/weatherChart/WeatherChart.js
+++ b/src/src/components/weatherChart/WeatherChart.js
@@ -85,8 +85,7 @@ const WeatherChart = ({
             <div className="d-flex justify-content-between align-items-center">
               <h5>{title}</h5>
               <Button
-                variant="primary"
-                className="text-white"
+                variant="dark"
                 onClick={downloadCSV}
                 disabled={
                   data.length === 0 ||
@@ -110,7 +109,9 @@ const WeatherChart = ({
               </div>
             ) : allDataZero ? (
               <div className="h-75 d-flex flex-column justify-content-between">
-                <p>No hubo {title.toLowerCase()} durante este período.</p>
+                <p>
+                  No hay datos de {title.toLowerCase()} durante este período.
+                </p>
                 <img
                   src={noDataImage}
                   alt="No data available"
diff --git a/src/src/pages/dashboard/Dashboard.js b/src/src/pages/dashboard/Dashboard.js
index 7af7427..acb7371 100644
--- a/src/src/pages/dashboard/Dashboard.js
+++ b/src/src/pages/dashboard/Dashboard.js
@@ -19,11 +19,13 @@ const Dashboard = () => {
   });
   const [stations, setStations] = useState([]);
   const [currentStation, setCurrentStation] = useState(null);
+  const [currentStationSpacial, setCurrentStationSpacial] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isChartLoading, setIsChartLoading] = useState(false);
   const [startDate, setStartDate] = useState();
   const [endDate, setEndDate] = useState();
   const [endDataDate, setEndDataDate] = useState();
+  const [endDataSpacialDate, setEndDataSpacialDate] = useState();
   const [isFavorite, setIsFavorite] = useState(false);
   const { idWS } = useParams();
   const navigate = useNavigate();
@@ -45,9 +47,16 @@ const Dashboard = () => {
         const filteredStations = response.filter(
           (item) => item.origin === "WEATHERLINK"
         );
+        const filteredStationsSpacial = response.filter(
+          (item) => item.origin === "CHIRPS y AgERA-5"
+        );
         const station = filteredStations.find((item) => item.id === idWS);
+        const stationSpacial = filteredStationsSpacial.find(
+          (item) => item.ext_id === station.ext_id + "_h"
+        );
         setStations(filteredStations);
         setCurrentStation(station);
+        setCurrentStationSpacial(stationSpacial);
       } catch (error) {
         console.error("Error fetching weather stations:", error);
       } finally {
@@ -69,6 +78,16 @@ const Dashboard = () => {
         setEndDate(formattedEndDate);
         setEndDataDate(formattedEndDate);
 
+        const lastDataSpacialAvailable = await Services.getLastDailyWeather(
+          currentStationSpacial.id
+        );
+        const formattedSpacialEndDate = new Date(
+          lastDataSpacialAvailable[0].date
+        )
+          .toISOString()
+          .split("T")[0];
+        setEndDataSpacialDate(formattedSpacialEndDate);
+
         const startDate = new Date(lastDataAvailable[0].date);
         startDate.setDate(startDate.getDate() - 7);
         const formattedStartDate = startDate.toISOString().split("T")[0];
@@ -204,6 +223,8 @@ const Dashboard = () => {
     setIsFavorite(true);
   };
 
+  const compareData = () => {};
+
   const chartConfig = (label, data, color) => ({
     labels: data.map((item) => item.label),
     datasets: [
@@ -243,8 +264,8 @@ const Dashboard = () => {
   );
 
   return (
-    <div>
-      <Container fluid className="p-3 bg-dashboard">
+    <div className="bg-dashboard">
+      <Container className="p-3 bg-dashboard">
         <SearchBar
           stations={stations}
           onStationClick={handleStationClick}
@@ -258,55 +279,60 @@ const Dashboard = () => {
         ) : (
           <>
             <Col className="bg-white rounded p-4 my-2 text-dark">
-              <div className="d-flex justify-content-between align-items-center mb-2">
-                <Form.Group className="d-flex">
-                  <div className="d-flex flex-column">
-                    <Form.Label className="me-2">
-                      {" "}
-                      <IconCalendarMonth className="me-2" /> Fecha de inicio:
-                    </Form.Label>
-                    <Form.Control
-                      type="date"
-                      aria-label="Fecha de inicio"
-                      className="me-2"
-                      value={startDate}
-                      onChange={handleStartDateChange}
-                      max={endDate}
-                    />
-                  </div>
-                  <div className="d-flex flex-column pb-2 justify-content-end mx-3">
-                    -
-                  </div>
-                  <div className="d-flex flex-column">
-                    <Form.Label className="me-2">
-                      {" "}
-                      <IconCalendarMonth className="me-2" />
-                      Fecha de fin:
-                    </Form.Label>
-                    <Form.Control
-                      type="date"
-                      aria-label="Fecha de fin"
-                      value={endDate}
-                      onChange={handleEndDateChange}
-                      min={startDate}
-                      max={endDataDate}
-                    />
-                  </div>
-                </Form.Group>
+              <div className="d-flex justify-content-between">
+                <div>
+                  <h1 className="mb-0">{currentStation?.name}</h1>
+                  <p className="text-muted ">Fuente: WeatherLink</p>
+                </div>
+                <div className="d-flex justify-content-between align-items-center mb-2">
+                  <Form.Group className="d-flex">
+                    <div className="d-flex flex-column">
+                      <Form.Label className="me-2">
+                        {" "}
+                        <IconCalendarMonth className="me-2" /> Fecha de inicio:
+                      </Form.Label>
+                      <Form.Control
+                        type="date"
+                        aria-label="Fecha de inicio"
+                        className="me-2"
+                        value={startDate}
+                        onChange={handleStartDateChange}
+                        max={endDate}
+                      />
+                    </div>
+                    <div className="d-flex flex-column pb-2 justify-content-end mx-3">
+                      -
+                    </div>
+                    <div className="d-flex flex-column">
+                      <Form.Label className="me-2">
+                        {" "}
+                        <IconCalendarMonth className="me-2" />
+                        Fecha de fin:
+                      </Form.Label>
+                      <Form.Control
+                        type="date"
+                        aria-label="Fecha de fin"
+                        value={endDate}
+                        onChange={handleEndDateChange}
+                        min={startDate}
+                        max={endDataDate}
+                      />
+                    </div>
+                  </Form.Group>
+                </div>
               </div>
 
-              <h4 className="mb-0">{currentStation?.name}</h4>
-              <p className="text-muted ">Fuente: WeatherLink</p>
               <hr />
               <p>
                 La estación meteorológica <b>{currentStation?.name}</b> está
                 ubicada en{" "}
                 <b>
-                  {currentStation?.latitude + ", " + currentStation?.longitude}.
+                  {currentStation?.latitude + ", " + currentStation?.longitude}.{" "}
                 </b>
-                Su principal objetivo es monitorear y registrar las condiciones
-                climáticas locales, proporcionando datos precisos y en tiempo
-                real.
+                Cuenta con datos observados desde el {" ----- "} hasta el{" "}
+                <b>{endDataDate}</b>, se puede comparar con datos espaciales
+                como AgERA-5 y CHIRPS que tiene datos desde el {" ----- "} hasta
+                el <b>{endDataSpacialDate}</b>.
               </p>
               {currentStation?.latitude && currentStation?.longitude ? (
                 <MapContainer
@@ -381,7 +407,7 @@ const Dashboard = () => {
               isFavorite={isFavorite}
             />
             <FloatingButton type="download" onClick={downloadAllData} />
-            <FloatingButton type="compare" onClick={() => alert("Comparar")} />
+            <FloatingButton type="compare" onClick={compareData} />
           </>
         )}
       </Container>
diff --git a/src/src/pages/station/Station.js b/src/src/pages/station/Station.js
index ae09b26..49d00f8 100644
--- a/src/src/pages/station/Station.js
+++ b/src/src/pages/station/Station.js
@@ -123,6 +123,7 @@ function Station() {
         bigSize={true}
         stations={stations}
         onStationClick={handleStationClick}
+        onMap
       />
     </>
   );