AC-259 minos issues fixed

CIAT-DAPA · Nov 14, 2024 · 0e7a9ba · 0e7a9ba
1 parent ff70b9d
commit 0e7a9ba
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 51 deletions.
diff --git a/src/package-lock.json b/src/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -123,6 +123,7 @@ function Station() {
         bigSize={true}
         stations={stations}
         onStationClick={handleStationClick}
+        onMap
       />
     </>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -123,6 +123,7 @@ function Station() { @@
             bigSize={true}
             stations={stations}
             onStationClick={handleStationClick}
+            onMap
           />
         </>
       );
@@ Expand Down @@