bicc/SALW_control_in_Africa
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add info box

Browse Source
This commit is contained in:
louai98 2024-06-03 15:56:29 +02:00
parent 031e909645
commit 281720d10b
10 changed files with 1418 additions and 644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

980
src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js
View File

File diff suppressed because it is too large Load Diff

169
src/Components/Layout/ControlInAfrica/DetailsSection.jsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react";
import Stack from "react-bootstrap/Stack";
import Card_ from "../../UI/Card_/Card_";
import { useAfricaData } from "../../../Context/DataContext";
@ -117,12 +118,12 @@ const international_guidelines = [
{
name: "UN Programme of Action",
name2: "UNProgrammeofAction",
icon_eligible: Icon15,
icon_eligible: Icon20,
},
{
name: "International Tracing Instrument",
name2: "InternationalTracingInstrument",
icon_eligible: Icon15,
icon_eligible: Icon16,
},
];
@ -130,7 +131,7 @@ const african_guidelines = [
{
name: "Silencing the Guns in Africa Programme of Action",
name2: "StG-PoA",
icon_eligible: Icon15,
icon_eligible: Icon1,
},
];
@ -151,7 +152,7 @@ const DetailesSection = (props) => {
);
useEffect(() => {
if (data && countryID != null) {
if (data && countryID !== null) {
const foundCountry = data.features.find(
(item) => item.properties.id === countryID
);
@ -162,16 +163,42 @@ const DetailesSection = (props) => {
);
setSelectedRegionalOrganisations(regionalOrgs);
const regionalTreats = regional_treaties.filter(
(item) => foundCountry.properties[item.name2] != "0"
const regionalTreats = regional_treaties
.filter((item) => foundCountry.properties[item.name2] !== "0")
.map((item) => {
return {
...item,
state: foundCountry.properties[item.name2],
};
});
const internationalTreats = international_treaties
.filter((item) => foundCountry.properties[item.name2] !== "0")
.map((item) => {
return {
...item,
state: foundCountry.properties[item.name2],
};
});
const internationalGuidelines = international_guidelines.filter(
(item) => foundCountry.properties[item.name2] === 1
);
const africanGuidelines = african_guidelines.filter(
(item) => foundCountry.properties[item.name2] === 1
);
setSelectedRegionalTreaties(regionalTreats);
setSelectedInternationalTreaties(internationalTreats);
setSelectedInternationalGuidelines(internationalGuidelines);
setSelectedAfricanGuidelines(africanGuidelines);
}
}, [data, countryID]);
useEffect(() => {
console.log(selectedRegionalTreaties);
}, [selectedRegionalTreaties]);
// useEffect(() => {
// console.log(selectedAfricanGuidelines)
// }, [selectedAfricanGuidelines]);
if (isLoading) {
return <div>Loading...</div>;
@ -186,7 +213,7 @@ const DetailesSection = (props) => {
<div>
<h2>{selectedCountry.properties.name}</h2>
<p>
Regional Organisations:{" "}
<strong>Regional Organisations: </strong>
{selectedRegionalOrganisations.map((item) => {
return (
<span
@ -198,20 +225,114 @@ const DetailesSection = (props) => {
);
})}
</p>
<p>Regional Treaties:
{selectedRegionalTreaties.map((item) => {
return (
<span
key={item.name}
>
{item.name}
</span>
);
})}
</p>
<p>International Treaties: </p>
<p>International Guidelines & Instruments: </p>
<p>African Guidelines & Instrumentss: </p>
<table className="table-sm table-bordered">
<tr>
<td>
<strong>Regional Treaties: </strong>
</td>
<td>
<table className="table">
{selectedRegionalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
<tr>
<td>
<strong>International Treaties: </strong>
</td>
<td>
<table className="table">
{selectedInternationalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
<tr>
<td>
<strong>International Guidelines & Instruments: </strong>
</td>
<td>
<table className="table">
{selectedInternationalGuidelines.map((item) => {
return (
<tr key={item.name}>
<td>
<span>{item.name}</span>
</td>
<td>
<img
title={item.name}
src={item["icon_eligible"]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
<tr>
<td>
<strong>African Guidelines & Instrumentss: </strong>
</td>
<td>
<table className="table">
{selectedAfricanGuidelines.map((item) => {
return (
<tr key={item.name}>
<td>
<span>{item.name}</span>
</td>
<td>
<img
title={item.name}
src={item["icon_eligible"]}
alt=""
srcSet="No Image"
className="section-icon"
/>
</td>
</tr>
);
})}
</table>
</td>
</tr>
</table>
</div>
)}
</Card_>

179
src/Components/Layout/ControlInAfrica/MapInfoBox.jsx Normal file
View File

@ -0,0 +1,179 @@
import React from "react";
const MapInfoBox = (props) => {
const regional_treaties = props.info.organisationsRegionalTreaties;
const international_treaties = props.info.organisationsInternationalTreaties;
const instruments = props.info.organisationsInstruments;
console.log(regional_treaties);
return (
<div className={props.className}>
<h3>{props.selectedRegion}</h3>
<p>Number of countries</p>
<div className="table-responsive-sm">
<table className="table table-sm table-striped">
<tr>
<th className="text-center" scope="col"></th>
<th className="text-center" scope="col">
Signed
</th>
<th className="text-center" scope="col">
Eligible
</th>
<th className="text-center" scope="col">
Ratified
</th>
</tr>
<tbody>
{regional_treaties &&
regional_treaties.map((item, index) => {
return (
<tr key={index}>
<th scope="row">{item.name}</th>
<td
className="text-center"
style={
item.signed
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.signed}
</td>
<td
className="text-center"
style={
item.eligible
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.eligible}
</td>
<td
className="text-center"
style={
item.ratified
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.ratified}
</td>
</tr>
);
})}
{international_treaties &&
international_treaties.map((item, index) => {
return (
<tr key={index}>
<th scope="row">{item.name}</th>
<td
className="text-center"
style={
item.signed
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.signed}
</td>
<td
className="text-center"
style={
item.eligible
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.eligible}
</td>
<td
className="text-center"
style={
item.ratified
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.ratified}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
{instruments &&
instruments.map((item, index) => {
return (
<p className="mb-1" key={index}>
<strong>{item.name}:</strong>{" "}
<span
style={
item.countries
? {
color: props.selectedCountryColor,
fontWeight: "bold",
fontSize: "16px",
}
: {}
}
>
{item.countries}
</span>
</p>
);
})}
</div>
);
};
export default MapInfoBox;
//{regional_treaties &&
// regional_treaties.map((item, index) => {
// return (
// <div key={index}>
// <p>
// <strong>{item.name}</strong> Signed: {item.signed}, Eligible:{" "}
// {item.eligible}, Ratified: {item.ratified}
// </p>
// </div>
// );
// })}
// {international_treaties &&
// international_treaties.map((item, index) => {
// return (
// <div key={index}>
// <p>
// <strong>{item.name}</strong> Signed: {item.signed}, Eligible:{" "}
// {item.eligible}, Ratified: {item.ratified}
// </p>
// </div>
// );
// })}

629
src/Data/ControlinAfrica.geojson
View File

File diff suppressed because it is too large Load Diff

1
src/Styles/Layout/_filters.scss
View File

@ -1,5 +1,6 @@
.filters-box {
padding: $gap;
border: 1px solid $border-color;
}
// _organizations

4
src/Styles/Layout/_info_section.scss Normal file
View File

@ -0,0 +1,4 @@
.section-icon{
width: $icon-size-large;
}

4
src/Styles/Layout/_map.scss
View File

@ -1,5 +1,5 @@
.map-filter-box {
border: 1px solid $border-color;
// border: 1px solid $border-color;
}
.leaflet-container {
@ -7,7 +7,9 @@
}
.map-container {
border: 1px solid $border-color;
width: 100%;
height: 100vh;
margin-top: 0px;
}

12
src/Styles/Layout/_map_info_box.scss Normal file
View File

@ -0,0 +1,12 @@
.info-box {
position: absolute;
bottom: 20px;
left: 20px;
background-color: white;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
//width: 250px;
}

2
src/Styles/main.scss
View File

@ -13,6 +13,8 @@
@import 'Layout/map';
@import 'Layout/tooltips';
@import 'Layout/map_pssm';
@import 'Layout/info_section';
@import 'Layout/_map_info_box';
// Import other layout partials...
// Components

82
src/tmp/code.txt Normal file
View File

@ -0,0 +1,82 @@
{(feature.properties[org.name2] === "Eligible" && (
<img title="{org.name}" src="{org.icon_eligible}" alt="" srcset="" />
)) || (feature.properties[org.name2] === "Signed" && (
<img title="{org.name}" src="{org.icon_signed}" alt="" srcset="" />
)) || (feature.properties[org.name2] === "Ratified" && (
<img title="{org.name}" src="{org.icon_ratified}" alt="" srcset="" />
))}
{(feature.properties[org.name2] ===
"Eligible" && (
<img
title={org.name}
src={org.icon_eligible}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] === "Signed" && (
<img
title={org.name}
src={org.icon_signed}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] ===
"Ratified" && (
<img
title={org.name}
src={org.icon_ratified}
alt=""
srcSet=""
/>
))}
<Stack gap="4" direction="horizontal" className="">
<strong>Regional Treaties: </strong>
<table className="table">
{selectedRegionalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section_icon"
/>
</td>
</tr>
);
})}
</table>
</Stack>
<Stack gap="4" direction="horizontal" className="">
<strong>International Treaties: </strong>
<table className="table table-border">
{selectedInternationalTreaties.map((item) => {
return (
<tr key={item.name}>
<td>{item.name}</td>
<td>{item.state}</td>
<td>
<img
title={item.name}
src={item["icon_" + item.state.toLowerCase()]}
alt=""
srcSet="No Image"
className="section_icon"
/>
</td>
</tr>
);
})}
</table>
</Stack>