Skip to content

Commit

Permalink
Merge pull request #78 from CIAT-DAPA/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@CarlosNasayo
CarlosNasayo authored Oct 30, 2024
2 parents 5f7b83b + d91cb41 commit be4e561
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 26 deletions.
Binary file added src/src/assets/img/blackMarker.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/src/assets/img/whiteMarker.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/src/components/legend/Legend.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,7 @@
.legend > div {
cursor: pointer;
}
.iconBlack {
width: 32px;
height: 32px;
}
12 changes: 11 additions & 1 deletion src/src/components/legend/Legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import yellowImg from "../../assets/img/yellowMarker.png";
import brownImg from "../../assets/img/brownMarker.png";
import redImg from "../../assets/img/redMarker.png";
import grayImg from "../../assets/img/grayMarker.png";
import blackIcon from "../../assets/img/blackMarker.png";
import { useTranslation } from "react-i18next";

function Legend({ setFilter, filter }) {
Expand Down Expand Up @@ -48,7 +49,16 @@ function Legend({ setFilter, filter }) {
<img src={redImg} alt="" className="me-1" />
<p className="m-0">{t("monitoring.near")}</p>
</div>

<div
className={`d-flex align-items-center mb-1 ${
filter.gray ? "" : "text-decoration-line-through opacity-75"
}`}
onClick={() => setFilter({ ...filter, gray: !filter.gray })}
>
<img src={grayImg} alt="" className="me-1" />
<p className="m-0">{t("monitoring.seasonally")}</p>
</div>

</div>
);
}
Expand Down
6 changes: 5 additions & 1 deletion src/src/components/simpleLegend/Simplelegend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,12 @@ function Simplelegend() {
<img src={redImg} alt="" className="me-1" />
<p className="m-0">{t("monitoring.near")}</p>
</div>
<div className="d-flex align-items-center mb-1">
<img src={grayImg} alt="" className="me-1" />
<p className="m-0">{t("monitoring.seasonally")}</p>
</div>
</div>
);
}

export default Simplelegend;
export default Simplelegend;
58 changes: 38 additions & 20 deletions src/src/pages/monitoring/Monitoring.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ function Visualization() {
iconUrl: require(`../../assets/img/redMarker.png`),
iconSize: [32, 32],
});
const blackIcon = new L.Icon({
iconUrl: require(`../../assets/img/blackMarker.png`),
iconSize: [50, 50],
});
const grayIcon = new L.Icon({
iconUrl: require(`../../assets/img/grayMarker.png`),
iconSize: [32, 32],
Expand Down Expand Up @@ -123,9 +127,14 @@ function Visualization() {
const depth = val.values.find(
(val) => val.type === "depth"
).value;
const climatology_depth = val.values.find(
(val) => val.type === "climatology_depth"
).value;

let color;
if (depth <0.2) {
if (depth ==0 && climatology_depth == 0) {
color = "gray";
} else if (depth >= 0 && depth < 0.2) {
color = "red";
} else if (depth > 0.2 && depth < 0.3) {
color = "brown";
Expand Down Expand Up @@ -155,15 +164,13 @@ function Visualization() {
}, [filter, waterpoints]);
const popupData = (wp) => {
if (wp.name === "Kitala") {
if (!filter.gray) {
return null;
}


return (
<Marker position={[wp.lat, wp.lon]} icon={grayIcon} key={wp.id}>
<Marker position={[wp.lat, wp.lon]} icon={blackIcon} key={wp.id}>
<Popup closeButton={false} className="popup" maxWidth={200}>
<div className="text-center">
<WpLabel waterpoint={wp} /> {/* El label que mencionas */}
<WpLabel waterpoint={wp} />
<h6 className="fw-medium mb-0 text-gray">
Apologies,
</h6>
Expand All @@ -179,19 +186,24 @@ function Visualization() {
const depthValue = monitoredData
? monitoredData.values.find((value) => value.type === "depth")
: null;

const climatology_depthValue = monitoredData
? monitoredData.values.find((value) => value.type === "climatology_depth")
: null;

const hasContentsWp =
monitoredData.am || monitoredData.or || monitoredData.en;

return depthValue === null
? null
: !filter.green && depthValue.value >= 0.7
? null
: !filter.yellow && depthValue.value >= 0.3 && depthValue.value < 0.7
: !filter.yellow && depthValue.value > 0.3 && depthValue.value < 0.7
? null
: !filter.brown && depthValue.value >= 0.2 && depthValue.value < 0.3
: !filter.brown && depthValue.value > 0.2 && depthValue.value < 0.3
? null
: !filter.red && depthValue.value < 0.2
: !filter.red && depthValue.value < 0.2 && depthValue.value >= 0
? null
: !filter.gray && depthValue.value === 0 && climatology_depthValue.value === 0
? null
: (
<>
Expand Down Expand Up @@ -236,11 +248,13 @@ function Visualization() {
<Marker
position={[wp.lat, wp.lon]}
icon={
depthValue.value < 0.2
depthValue.value == 0 && climatology_depthValue.value == 0
? grayIcon
: depthValue.value >= 0 && depthValue.value < 0.2
? redIcon
: depthValue.value >= 0.2 && depthValue.value < 0.3
: depthValue.value > 0.2 && depthValue.value < 0.3
? brownIcon
: depthValue.value >= 0.3 && depthValue.value < 0.7
: depthValue.value > 0.3 && depthValue.value < 0.7
? yellowIcon
: greenIcon
}
Expand Down Expand Up @@ -317,20 +331,24 @@ function Visualization() {
<td>
<div
className={`td-name text-center fw-medium ${
depthValue.value < 0.2
depthValue.value == 0 && climatology_depthValue.value == 0
? "td-gray"
: depthValue.value >= 0 && depthValue.value < 0.2
? "td-red"
: depthValue.value >= 0.2 && depthValue.value < 0.3
: depthValue.value > 0.2 && depthValue.value < 0.3
? "td-brown"
: depthValue.value >= 0.3 && depthValue.value < 0.7
: depthValue.value > 0.3 && depthValue.value < 0.7
? "td-yellow"
: "td-green"
}`}
>
{depthValue.value < 0.2
{depthValue.value == 0 && climatology_depthValue.value == 0
? t("monitoring.seasonally")
: depthValue.value >= 0 && depthValue.value < 0.2
? t("monitoring.near")
: depthValue.value >= 0.2 && depthValue.value < 0.3
: depthValue.value > 0.2 && depthValue.value < 0.3
? t("monitoring.alert")
: depthValue.value >= 0.3 && depthValue.value < 0.7
: depthValue.value > 0.3 && depthValue.value < 0.7
? t("monitoring.watch")
: t("monitoring.good")}
</div>
Expand Down Expand Up @@ -463,6 +481,7 @@ function Visualization() {
}
});
};
console.log(wpstolabel)

return (
<>
Expand Down Expand Up @@ -540,7 +559,6 @@ function Visualization() {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{waterpoints && <WpLabel waterpoints={wpstolabel} />}

{route && (
<Polyline
color="#0016ff"
Expand Down
7 changes: 5 additions & 2 deletions src/src/pages/profile/Profile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ function Waterprofile() {
return <></>;
}
};
console.log(wp)
return (
<>
{idWater ? (
Expand Down Expand Up @@ -321,9 +322,11 @@ function Waterprofile() {
<Marker
position={[wp.lat, wp.lon]}
icon={
wp.depth < 0.2
wp.depth ==0 && wp.climatology_depth ==0
? grayIcon
: wp.depth >= 0 && wp.depth <0.2
? redIcon
: wp.depth > 0.2 && wp.depth <0.3
: wp.depth > 0.2 && wp.depth < 0.3
? brownIcon
: wp.depth > 0.3 && wp.depth < 0.7
? yellowIcon
Expand Down
5 changes: 3 additions & 2 deletions src/src/pages/userprofile/Userprofile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,6 @@ function Userprofile() {
[event.target.name]: event.target.checked,
});
};

return (
<>
<ToastContainer
Expand Down Expand Up @@ -314,7 +313,9 @@ function Userprofile() {
<div className="d-flex align-items-stretch ">
<div
className={`td-name text-center fw-medium px-4 me-2 ${
waterpoint.last_monitored_deph < 0.2
waterpoint.last_monitored_deph == 0 && waterpoint.climatology_depth == 0
? "td-gray"
: waterpoint.last_monitored_deph >= 0 && waterpoint.last_monitored_deph < 0.2
? "td-red"
: waterpoint.last_monitored_deph > 0.2 && waterpoint.last_monitored_deph < 0.3
? "td-brown"
Expand Down

0 comments on commit be4e561

Please sign in to comment.