split components
This commit is contained in:
louai98
parent
d8e9b74988
commit
4172d1f941
@ -6,7 +6,9 @@ import Africa from "../../../Data/ControlinAfrica.geojson";
|
|||||||
import "../../../Styles/main.scss";
|
import "../../../Styles/main.scss";
|
||||||
import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
|
import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
|
||||||
import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component
|
import MapInfoBox from "./MapInfoBox"; // Import the InfoBox component
|
||||||
import MarkerIcon, { iconMarker } from "./MarkerIcon";
|
import MarkerIcon from "./MarkerIcon";
|
||||||
|
import CountryPopup from "./CountryPopup";
|
||||||
|
import FilterBox from "./FilterBox";
|
||||||
import Container from "react-bootstrap/Container";
|
import Container from "react-bootstrap/Container";
|
||||||
import Row from "react-bootstrap/Row";
|
import Row from "react-bootstrap/Row";
|
||||||
import Col from "react-bootstrap/Col";
|
import Col from "react-bootstrap/Col";
|
||||||
@ -164,17 +166,17 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
{
|
{
|
||||||
name2: "UNProgrammeofAction",
|
name2: "UNProgrammeofAction",
|
||||||
name: "UN Programme of Action",
|
name: "UN Programme of Action",
|
||||||
icon: Icon16,
|
icon: Icon20,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name2: "InternationalTracingInstrument",
|
name2: "InternationalTracingInstrument",
|
||||||
name: "International Tracing Instrument",
|
name: "International Tracing Instrument",
|
||||||
icon: Icon1,
|
icon: Icon16,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name2: "StG-PoA",
|
name2: "StG-PoA",
|
||||||
name: "Silencing the Guns in Africa Programme of Action",
|
name: "Silencing the Guns in Africa Programme of Action",
|
||||||
icon: Icon20,
|
icon: Icon1,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -387,7 +389,6 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
selectedCountriesNamesRegions,
|
selectedCountriesNamesRegions,
|
||||||
prevStatuesTreaty,
|
prevStatuesTreaty,
|
||||||
africaCountries,
|
africaCountries,
|
||||||
selectedIcon,
|
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
// get the icon of the selected treaty based on the name and status of the treaty
|
// get the icon of the selected treaty based on the name and status of the treaty
|
||||||
@ -397,13 +398,22 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
this.regional_treaties.find((org) => org.name2 === name) ||
|
this.regional_treaties.find((org) => org.name2 === name) ||
|
||||||
this.international_treaties.find((org) => org.name2 === name);
|
this.international_treaties.find((org) => org.name2 === name);
|
||||||
|
|
||||||
|
let instrument = this.intsruments.find(
|
||||||
|
(instrument) => instrument.name2 === name
|
||||||
|
);
|
||||||
|
|
||||||
if (org) {
|
if (org) {
|
||||||
//console.log(org[`icon_${status.toLowerCase()}`]);
|
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedIcon: org[`icon_${status.toLowerCase()}`] || "none",
|
selectedIcon: org[`icon_${status.toLowerCase()}`] || "none",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (instrument) {
|
||||||
|
this.setState({
|
||||||
|
selectedIcon: instrument[`icon`] || "none",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// if the same treaty is selected previously and the region is not selected
|
// if the same treaty is selected previously and the region is not selected
|
||||||
// then the treaty will be deselected
|
// then the treaty will be deselected
|
||||||
if (
|
if (
|
||||||
@ -463,7 +473,7 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
selectedCountriesNamesTreaties: intersection,
|
selectedCountriesNamesTreaties: intersection,
|
||||||
selectedCountry: "",
|
selectedCountry: "",
|
||||||
selectedTreaty: name,
|
selectedTreaty: name,
|
||||||
prevStatuesTreaty: status,
|
prevStatuesTreaty: status || "checked",
|
||||||
showInfoBox: true,
|
showInfoBox: true,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@ -473,7 +483,7 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
selectedCountriesNamesTreaties,
|
selectedCountriesNamesTreaties,
|
||||||
selectedCountry: "",
|
selectedCountry: "",
|
||||||
selectedTreaty: name,
|
selectedTreaty: name,
|
||||||
prevStatuesTreaty: status,
|
prevStatuesTreaty: status || "checked",
|
||||||
selectedCountriesFeaturesTreaties,
|
selectedCountriesFeaturesTreaties,
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -556,31 +566,33 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
selectedCountriesNamesTreaties,
|
selectedCountriesNamesTreaties,
|
||||||
selectedCountryColor
|
selectedCountryColor
|
||||||
) => {
|
) => {
|
||||||
if (feature.properties.name === selectedCountry) {
|
const { name } = feature.properties;
|
||||||
|
// select one country
|
||||||
|
if (name === selectedCountry) {
|
||||||
console.log("one country selected");
|
console.log("one country selected");
|
||||||
return CountrySelectedStyle(selectedCountryColor);
|
return CountrySelectedStyle(selectedCountryColor);
|
||||||
} else if (
|
}
|
||||||
selectedCountriesNamesRegions.includes(feature.properties.name) &&
|
|
||||||
selectedCountriesNamesTreaties.length === 0
|
const inSelectedRegions = selectedCountriesNamesRegions.includes(name);
|
||||||
) {
|
const inSelectedTreaties = selectedCountriesNamesTreaties.includes(name);
|
||||||
|
// select one region
|
||||||
|
if (inSelectedRegions && !selectedCountriesNamesTreaties.length) {
|
||||||
console.log("region selected");
|
console.log("region selected");
|
||||||
return CountrySelectedStyle(selectedCountryColor);
|
return CountrySelectedStyle(selectedCountryColor);
|
||||||
} else if (
|
}
|
||||||
selectedCountriesNamesRegions.includes(feature.properties.name) &&
|
// select one treaty
|
||||||
selectedCountriesNamesTreaties.includes(feature.properties.name) === false
|
if (inSelectedRegions && !inSelectedTreaties) {
|
||||||
) {
|
|
||||||
console.log("region and treaty selected 1");
|
console.log("region and treaty selected 1");
|
||||||
return CountrySelectedStyle(selectedCountryColor);
|
return CountrySelectedStyle(selectedCountryColor);
|
||||||
} else if (
|
}
|
||||||
selectedCountriesNamesRegions.includes(feature.properties.name) &&
|
// select region and treaty
|
||||||
selectedCountriesNamesTreaties.includes(feature.properties.name)
|
if (inSelectedRegions && inSelectedTreaties) {
|
||||||
) {
|
|
||||||
console.log("region and treaty selected 2");
|
console.log("region and treaty selected 2");
|
||||||
return CountrySelectedStyle(selectedCountryColor, 0.7);
|
return CountrySelectedStyle(selectedCountryColor, 0.7);
|
||||||
} else {
|
|
||||||
console.log("default");
|
|
||||||
return CountryStyle();
|
|
||||||
}
|
}
|
||||||
|
// default style
|
||||||
|
console.log("default");
|
||||||
|
return CountryStyle();
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -613,184 +625,13 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
<Container fluid>
|
<Container fluid>
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm={3}>
|
<Col sm={3}>
|
||||||
<div className={`filters-box`}>
|
<FilterBox
|
||||||
<div>
|
selectedCountry={selectedCountry}
|
||||||
<h5>African Countries</h5>
|
countriesNames={countriesNames}
|
||||||
|
handleCountryChange={this.handleCountryChange}
|
||||||
<select
|
handleOrganizationClick={this.handleOrganizationClick}
|
||||||
onChange={this.handleCountryChange}
|
handleTreatiesClick={this.handleTreatiesClick}
|
||||||
value={selectedCountry}
|
></FilterBox>
|
||||||
>
|
|
||||||
<option value="">Select a country</option>
|
|
||||||
{countriesNames.map((country, index) => (
|
|
||||||
<option key={index} value={country}>
|
|
||||||
{country}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5>Regional Organisations</h5>
|
|
||||||
<div className="regional-organisations">
|
|
||||||
{this.regional_organisations.map((org, index) => (
|
|
||||||
<div
|
|
||||||
key={org.name}
|
|
||||||
className="organization-item"
|
|
||||||
style={{ backgroundColor: org.color }}
|
|
||||||
onClick={() =>
|
|
||||||
this.handleOrganizationClick(org.name, "", org.color)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="name">{org.name}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5>Regional Treaties</h5>
|
|
||||||
<div className="regional-treaties">
|
|
||||||
{this.regional_treaties.map((treaty) => (
|
|
||||||
<div key={treaty.name} className="treaty-item">
|
|
||||||
<div className="treaty-item-name">{treaty.name}</div>
|
|
||||||
|
|
||||||
{treaty.icon_eligible && (
|
|
||||||
<img
|
|
||||||
src={treaty.icon_eligible}
|
|
||||||
alt={`${treaty.name}-Eligible`}
|
|
||||||
title={`${treaty.name}-Eligible`}
|
|
||||||
srcSet=""
|
|
||||||
className="icon"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick(treaty.name2, "Eligible")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{treaty.icon_signed && (
|
|
||||||
<img
|
|
||||||
src={treaty.icon_signed}
|
|
||||||
alt={`${treaty.name}-Signed`}
|
|
||||||
title={`${treaty.name}-Signed`}
|
|
||||||
srcSet=""
|
|
||||||
className="icon"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick(treaty.name2, "Signed")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{treaty.icon_ratified && (
|
|
||||||
<img
|
|
||||||
src={treaty.icon_ratified}
|
|
||||||
alt={`${treaty.name}-Ratified`}
|
|
||||||
title={`${treaty.name}-Ratified`}
|
|
||||||
srcSet=""
|
|
||||||
className="icon"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick(treaty.name2, "Ratified")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5>International Treaties</h5>
|
|
||||||
{this.international_treaties.map((treaty) => (
|
|
||||||
<div key={treaty.name} className="treaty-item">
|
|
||||||
<div className="treaty-item-name">{treaty.name}</div>
|
|
||||||
|
|
||||||
{treaty.icon_eligible && (
|
|
||||||
<img
|
|
||||||
src={treaty.icon_eligible}
|
|
||||||
alt={`${treaty.name}-Eligible`}
|
|
||||||
title={`${treaty.name}-Eligible`}
|
|
||||||
srcSet=""
|
|
||||||
className="icon-2"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick(treaty.name2, "Eligible")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{treaty.icon_signed && (
|
|
||||||
<img
|
|
||||||
src={treaty.icon_signed}
|
|
||||||
alt={`${treaty.name}-Signed`}
|
|
||||||
title={`${treaty.name}-Signed`}
|
|
||||||
srcSet=""
|
|
||||||
className="icon-2"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick(treaty.name2, "Signed")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{treaty.icon_ratified && (
|
|
||||||
<img
|
|
||||||
src={treaty.icon_ratified}
|
|
||||||
alt={`${treaty.name}-Ratified`}
|
|
||||||
title={`${treaty.name}-Ratified`}
|
|
||||||
srcSet=""
|
|
||||||
className="icon-2"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick(treaty.name2, "Ratified")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5>
|
|
||||||
International Guidelines & Instruments <br />
|
|
||||||
<small>
|
|
||||||
(countries with recent activities only, 2014 - 2019)
|
|
||||||
</small>
|
|
||||||
</h5>
|
|
||||||
<div className="treaty-item-2">
|
|
||||||
<div className="treaty-item-name">UN Programme of Action</div>
|
|
||||||
<img
|
|
||||||
src={Icon20}
|
|
||||||
alt=""
|
|
||||||
className="icon-2"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick("UNProgrammeofAction")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="treaty-item-2">
|
|
||||||
<div className="treaty-item-name">
|
|
||||||
International Tracing Instrument
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
src={Icon16}
|
|
||||||
alt=""
|
|
||||||
className="icon-2"
|
|
||||||
onClick={() =>
|
|
||||||
this.handleTreatiesClick("InternationalTracingInstrument")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h5>African Guidelines & Instrumentss</h5>
|
|
||||||
<div className="treaty-item-2">
|
|
||||||
<div className="treaty-item-name">
|
|
||||||
Silencing the Guns in Africa Programme of Action
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
src={Icon1}
|
|
||||||
alt=""
|
|
||||||
className="icon-2"
|
|
||||||
onClick={() => this.handleTreatiesClick("StG-PoA")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Col>
|
</Col>
|
||||||
<Col sm={9}>
|
<Col sm={9}>
|
||||||
<div id="map" className="map-container">
|
<div id="map" className="map-container">
|
||||||
@ -840,82 +681,9 @@ class ControlInAfricaMap extends React.Component {
|
|||||||
permanent
|
permanent
|
||||||
className="tooltip-custom"
|
className="tooltip-custom"
|
||||||
>
|
>
|
||||||
<h5>{feature.properties.name}</h5>
|
<CountryPopup
|
||||||
<div className="matrix">
|
feature={feature}
|
||||||
{this.regional_organisations.map((org) => (
|
></CountryPopup>
|
||||||
<div
|
|
||||||
key={org.name}
|
|
||||||
className="rectangle"
|
|
||||||
style={
|
|
||||||
feature.properties[org.name] === 1
|
|
||||||
? {
|
|
||||||
backgroundColor: findColorByName(
|
|
||||||
org.name
|
|
||||||
),
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
title={org.name}
|
|
||||||
></div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="matrix-treaties-map">
|
|
||||||
{this.regional_treaties.map((org) => (
|
|
||||||
<div key={org.name2}>
|
|
||||||
<img
|
|
||||||
title={org.name}
|
|
||||||
src={
|
|
||||||
org[
|
|
||||||
"icon_" +
|
|
||||||
feature.properties[
|
|
||||||
org.name2
|
|
||||||
].toLowerCase()
|
|
||||||
]
|
|
||||||
}
|
|
||||||
alt=""
|
|
||||||
srcSet="No Image"
|
|
||||||
className="img-fluid"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="matrix-treaties-map">
|
|
||||||
{this.international_treaties.map((org) => (
|
|
||||||
<div key={org.name2}>
|
|
||||||
<img
|
|
||||||
title={org.name}
|
|
||||||
src={
|
|
||||||
org[
|
|
||||||
"icon_" +
|
|
||||||
feature.properties[
|
|
||||||
org.name2
|
|
||||||
].toLowerCase()
|
|
||||||
]
|
|
||||||
}
|
|
||||||
alt=""
|
|
||||||
srcSet="No Image"
|
|
||||||
className="img-fluid"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="matrix-treaties-map">
|
|
||||||
<div>
|
|
||||||
{feature.properties.UNProgrammeofAction ===
|
|
||||||
1 && <img src={Icon20} alt="" srcSet="" />}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{feature.properties
|
|
||||||
.InternationalTracingInstrument === 1 && (
|
|
||||||
<img src={Icon16} alt="" srcSet="" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{feature.properties["StG-PoA"] === 1 && (
|
|
||||||
<img src={Icon1} alt="" srcSet="" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Marker>
|
</Marker>
|
||||||
);
|
);
|
||||||
|
|||||||
209
src/Components/Layout/ControlInAfrica/CountryPopup.jsx
Normal file
209
src/Components/Layout/ControlInAfrica/CountryPopup.jsx
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "../../../Styles/main.scss";
|
||||||
|
|
||||||
|
import Icon1 from "../../../Icons/icon1.svg";
|
||||||
|
import Icon2 from "../../../Icons/icon2.svg";
|
||||||
|
import Icon3 from "../../../Icons/icon3.svg";
|
||||||
|
import Icon4 from "../../../Icons/icon4.svg";
|
||||||
|
import Icon5 from "../../../Icons/icon5.svg";
|
||||||
|
import Icon6 from "../../../Icons/icon6.svg";
|
||||||
|
import Icon7 from "../../../Icons/icon7.svg";
|
||||||
|
import Icon8 from "../../../Icons/icon8.svg";
|
||||||
|
import Icon9 from "../../../Icons/icon9.svg";
|
||||||
|
import Icon10 from "../../../Icons/icon10.svg";
|
||||||
|
import Icon11 from "../../../Icons/icon11.svg";
|
||||||
|
import Icon12 from "../../../Icons/icon12.svg";
|
||||||
|
import Icon13 from "../../../Icons/icon13.svg";
|
||||||
|
import Icon14 from "../../../Icons/icon14.svg";
|
||||||
|
import Icon15 from "../../../Icons/icon15.svg";
|
||||||
|
import Icon16 from "../../../Icons/icon16.svg";
|
||||||
|
import Icon17 from "../../../Icons/icon17.svg";
|
||||||
|
import Icon18 from "../../../Icons/icon18.svg";
|
||||||
|
import Icon19 from "../../../Icons/icon19.svg";
|
||||||
|
import Icon20 from "../../../Icons/icon20.svg";
|
||||||
|
import Icon21 from "../../../Icons/icon21.svg";
|
||||||
|
import Icon22 from "../../../Icons/icon22.svg";
|
||||||
|
import Icon23 from "../../../Icons/icon23.svg";
|
||||||
|
import Icon24 from "../../../Icons/icon24.svg";
|
||||||
|
import Icon25 from "../../../Icons/icon25.svg";
|
||||||
|
import Icon26 from "../../../Icons/icon26.svg";
|
||||||
|
|
||||||
|
const regional_organisations = [
|
||||||
|
{ name: "AU", color: "#b2df8a" },
|
||||||
|
{ name: "EAC", color: "#33a02c" },
|
||||||
|
{ name: "IGAD", color: "#fb9a99" },
|
||||||
|
{ name: "UMA", color: "#e31a1c" },
|
||||||
|
{ name: "COMESA", color: "#fdbf6f" },
|
||||||
|
{ name: "ECOWAS", color: "#ff7f00" },
|
||||||
|
{ name: "CEN-SAD", color: "#cab2d6" },
|
||||||
|
{ name: "SADC", color: "#6a3d9a" },
|
||||||
|
{ name: "ECCAS", color: "#ffff99" },
|
||||||
|
{ name: "ICGLR", color: "#b15928" },
|
||||||
|
{ name: "RECSA", color: "#a6cee3" },
|
||||||
|
{ name: "SARCOM", color: "#1f78b4" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const regional_treaties = [
|
||||||
|
{
|
||||||
|
name: "Bamako Declaration",
|
||||||
|
name2: "BamakoDeclaration",
|
||||||
|
icon_eligible: Icon26,
|
||||||
|
icon_signed: Icon24,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Kinshasa Convention",
|
||||||
|
name2: "KinshasaConvention",
|
||||||
|
icon_eligible: Icon4,
|
||||||
|
icon_signed: Icon6,
|
||||||
|
icon_ratified: Icon5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ECOWAS Convention",
|
||||||
|
name2: "ECOWASConvention",
|
||||||
|
icon_eligible: Icon2,
|
||||||
|
icon_signed: Icon3,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Khartoum Declaration",
|
||||||
|
name2: "KhartoumDeclaration",
|
||||||
|
icon_eligible: Icon21,
|
||||||
|
icon_signed: Icon23,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Nairobi Protocol",
|
||||||
|
name2: "NairobiProtocol",
|
||||||
|
icon_eligible: Icon22,
|
||||||
|
icon_signed: Icon25,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "SADC Firearms Protocol",
|
||||||
|
name2: "SADCFirearmsProtocol",
|
||||||
|
icon_eligible: Icon8,
|
||||||
|
icon_signed: Icon7,
|
||||||
|
icon_ratified: Icon9,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const international_treaties = [
|
||||||
|
{
|
||||||
|
name: "Arms Trade Treaty",
|
||||||
|
name2: "ArmsTradeTreaty",
|
||||||
|
icon_eligible: Icon19,
|
||||||
|
icon_signed: Icon17,
|
||||||
|
icon_ratified: Icon18,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Firearms Protocol",
|
||||||
|
name2: "FirearmsProtocol",
|
||||||
|
icon_eligible: Icon12,
|
||||||
|
icon_signed: Icon10,
|
||||||
|
icon_ratified: Icon11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Wassenaar Agreement",
|
||||||
|
name2: "WassenaarAgreement",
|
||||||
|
icon_eligible: Icon15,
|
||||||
|
icon_signed: Icon13,
|
||||||
|
icon_ratified: Icon14,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const intsruments = [
|
||||||
|
{
|
||||||
|
name2: "UNProgrammeofAction",
|
||||||
|
name: "UN Programme of Action",
|
||||||
|
icon: Icon20,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name2: "InternationalTracingInstrument",
|
||||||
|
name: "International Tracing Instrument",
|
||||||
|
icon: Icon16,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name2: "StG-PoA",
|
||||||
|
name: "Silencing the Guns in Africa Programme of Action",
|
||||||
|
icon: Icon1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const findColorByName = (name) => {
|
||||||
|
const org = regional_organisations.find((org) => org.name === name);
|
||||||
|
return org ? org.color : ""; // Return color value if found, otherwise return an empty string
|
||||||
|
};
|
||||||
|
|
||||||
|
const CountryPopup = (props) => {
|
||||||
|
const { feature } = props;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h5>{feature.properties.name}</h5>
|
||||||
|
<div className="matrix">
|
||||||
|
{regional_organisations.map((org) => (
|
||||||
|
<div
|
||||||
|
key={org.name}
|
||||||
|
className="rectangle"
|
||||||
|
style={
|
||||||
|
feature.properties[org.name] === 1
|
||||||
|
? {
|
||||||
|
backgroundColor: findColorByName(org.name),
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
title={org.name}
|
||||||
|
></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="matrix-treaties-map">
|
||||||
|
{regional_treaties.map((treaty) => (
|
||||||
|
<div key={treaty.name2}>
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
treaty["icon_" + feature.properties[treaty.name2].toLowerCase()]
|
||||||
|
}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="img-fluid"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="matrix-treaties-map">
|
||||||
|
{international_treaties.map((treaty) => (
|
||||||
|
<div key={treaty.name2}>
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
treaty["icon_" + feature.properties[treaty.name2].toLowerCase()]
|
||||||
|
}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="img-fluid"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="matrix-treaties-map">
|
||||||
|
<div>
|
||||||
|
{feature.properties.UNProgrammeofAction === 1 && (
|
||||||
|
<img src={Icon20} alt="" srcSet="" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{feature.properties.InternationalTracingInstrument === 1 && (
|
||||||
|
<img src={Icon16} alt="" srcSet="" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{feature.properties["StG-PoA"] === 1 && (
|
||||||
|
<img src={Icon1} alt="" srcSet="" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CountryPopup;
|
||||||
308
src/Components/Layout/ControlInAfrica/FilterBox.jsx
Normal file
308
src/Components/Layout/ControlInAfrica/FilterBox.jsx
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "../../../Styles/main.scss";
|
||||||
|
|
||||||
|
import Icon1 from "../../../Icons/icon1.svg";
|
||||||
|
import Icon2 from "../../../Icons/icon2.svg";
|
||||||
|
import Icon3 from "../../../Icons/icon3.svg";
|
||||||
|
import Icon4 from "../../../Icons/icon4.svg";
|
||||||
|
import Icon5 from "../../../Icons/icon5.svg";
|
||||||
|
import Icon6 from "../../../Icons/icon6.svg";
|
||||||
|
import Icon7 from "../../../Icons/icon7.svg";
|
||||||
|
import Icon8 from "../../../Icons/icon8.svg";
|
||||||
|
import Icon9 from "../../../Icons/icon9.svg";
|
||||||
|
import Icon10 from "../../../Icons/icon10.svg";
|
||||||
|
import Icon11 from "../../../Icons/icon11.svg";
|
||||||
|
import Icon12 from "../../../Icons/icon12.svg";
|
||||||
|
import Icon13 from "../../../Icons/icon13.svg";
|
||||||
|
import Icon14 from "../../../Icons/icon14.svg";
|
||||||
|
import Icon15 from "../../../Icons/icon15.svg";
|
||||||
|
import Icon16 from "../../../Icons/icon16.svg";
|
||||||
|
import Icon17 from "../../../Icons/icon17.svg";
|
||||||
|
import Icon18 from "../../../Icons/icon18.svg";
|
||||||
|
import Icon19 from "../../../Icons/icon19.svg";
|
||||||
|
import Icon20 from "../../../Icons/icon20.svg";
|
||||||
|
import Icon21 from "../../../Icons/icon21.svg";
|
||||||
|
import Icon22 from "../../../Icons/icon22.svg";
|
||||||
|
import Icon23 from "../../../Icons/icon23.svg";
|
||||||
|
import Icon24 from "../../../Icons/icon24.svg";
|
||||||
|
import Icon25 from "../../../Icons/icon25.svg";
|
||||||
|
import Icon26 from "../../../Icons/icon26.svg";
|
||||||
|
|
||||||
|
const regional_organisations = [
|
||||||
|
{ name: "AU", color: "#b2df8a" },
|
||||||
|
{ name: "EAC", color: "#33a02c" },
|
||||||
|
{ name: "IGAD", color: "#fb9a99" },
|
||||||
|
{ name: "UMA", color: "#e31a1c" },
|
||||||
|
{ name: "COMESA", color: "#fdbf6f" },
|
||||||
|
{ name: "ECOWAS", color: "#ff7f00" },
|
||||||
|
{ name: "CEN-SAD", color: "#cab2d6" },
|
||||||
|
{ name: "SADC", color: "#6a3d9a" },
|
||||||
|
{ name: "ECCAS", color: "#ffff99" },
|
||||||
|
{ name: "ICGLR", color: "#b15928" },
|
||||||
|
{ name: "RECSA", color: "#a6cee3" },
|
||||||
|
{ name: "SARCOM", color: "#1f78b4" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const regional_treaties = [
|
||||||
|
{
|
||||||
|
name: "Bamako Declaration",
|
||||||
|
name2: "BamakoDeclaration",
|
||||||
|
icon_eligible: Icon26,
|
||||||
|
icon_signed: Icon24,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Kinshasa Convention",
|
||||||
|
name2: "KinshasaConvention",
|
||||||
|
icon_eligible: Icon4,
|
||||||
|
icon_signed: Icon6,
|
||||||
|
icon_ratified: Icon5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ECOWAS Convention",
|
||||||
|
name2: "ECOWASConvention",
|
||||||
|
icon_eligible: Icon2,
|
||||||
|
icon_signed: Icon3,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Khartoum Declaration",
|
||||||
|
name2: "KhartoumDeclaration",
|
||||||
|
icon_eligible: Icon21,
|
||||||
|
icon_signed: Icon23,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Nairobi Protocol",
|
||||||
|
name2: "NairobiProtocol",
|
||||||
|
icon_eligible: Icon22,
|
||||||
|
icon_signed: Icon25,
|
||||||
|
icon_ratified: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "SADC Firearms Protocol",
|
||||||
|
name2: "SADCFirearmsProtocol",
|
||||||
|
icon_eligible: Icon8,
|
||||||
|
icon_signed: Icon7,
|
||||||
|
icon_ratified: Icon9,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const international_treaties = [
|
||||||
|
{
|
||||||
|
name: "Arms Trade Treaty",
|
||||||
|
name2: "ArmsTradeTreaty",
|
||||||
|
icon_eligible: Icon19,
|
||||||
|
icon_signed: Icon17,
|
||||||
|
icon_ratified: Icon18,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Firearms Protocol",
|
||||||
|
name2: "FirearmsProtocol",
|
||||||
|
icon_eligible: Icon12,
|
||||||
|
icon_signed: Icon10,
|
||||||
|
icon_ratified: Icon11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Wassenaar Agreement",
|
||||||
|
name2: "WassenaarAgreement",
|
||||||
|
icon_eligible: Icon15,
|
||||||
|
icon_signed: Icon13,
|
||||||
|
icon_ratified: Icon14,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const intsruments = [
|
||||||
|
{
|
||||||
|
name2: "UNProgrammeofAction",
|
||||||
|
name: "UN Programme of Action",
|
||||||
|
icon: Icon20,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name2: "InternationalTracingInstrument",
|
||||||
|
name: "International Tracing Instrument",
|
||||||
|
icon: Icon16,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name2: "StG-PoA",
|
||||||
|
name: "Silencing the Guns in Africa Programme of Action",
|
||||||
|
icon: Icon1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const FilterBox = (props) => {
|
||||||
|
const { selectedCountry, countriesNames, handleCountryChange, handleOrganizationClick, handleTreatiesClick } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`filters-box`}>
|
||||||
|
<div>
|
||||||
|
<h5>African Countries</h5>
|
||||||
|
|
||||||
|
<select onChange={handleCountryChange} value={selectedCountry}>
|
||||||
|
<option value="">Select a country</option>
|
||||||
|
{countriesNames.map((country, index) => (
|
||||||
|
<option key={index} value={country}>
|
||||||
|
{country}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5>Regional Organisations</h5>
|
||||||
|
<div className="regional-organisations">
|
||||||
|
{regional_organisations.map((org, index) => (
|
||||||
|
<div
|
||||||
|
key={org.name}
|
||||||
|
className="organization-item"
|
||||||
|
style={{ backgroundColor: org.color }}
|
||||||
|
onClick={() =>
|
||||||
|
handleOrganizationClick(org.name, "", org.color)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="name">{org.name}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5>Regional Treaties</h5>
|
||||||
|
<div className="regional-treaties">
|
||||||
|
{regional_treaties.map((treaty) => (
|
||||||
|
<div key={treaty.name} className="treaty-item">
|
||||||
|
<div className="treaty-item-name">{treaty.name}</div>
|
||||||
|
|
||||||
|
{treaty.icon_eligible && (
|
||||||
|
<img
|
||||||
|
src={treaty.icon_eligible}
|
||||||
|
alt={`${treaty.name}-Eligible`}
|
||||||
|
title={`${treaty.name}-Eligible`}
|
||||||
|
srcSet=""
|
||||||
|
className="icon"
|
||||||
|
onClick={() =>
|
||||||
|
handleTreatiesClick(treaty.name2, "Eligible")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{treaty.icon_signed && (
|
||||||
|
<img
|
||||||
|
src={treaty.icon_signed}
|
||||||
|
alt={`${treaty.name}-Signed`}
|
||||||
|
title={`${treaty.name}-Signed`}
|
||||||
|
srcSet=""
|
||||||
|
className="icon"
|
||||||
|
onClick={() =>
|
||||||
|
handleTreatiesClick(treaty.name2, "Signed")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{treaty.icon_ratified && (
|
||||||
|
<img
|
||||||
|
src={treaty.icon_ratified}
|
||||||
|
alt={`${treaty.name}-Ratified`}
|
||||||
|
title={`${treaty.name}-Ratified`}
|
||||||
|
srcSet=""
|
||||||
|
className="icon"
|
||||||
|
onClick={() =>
|
||||||
|
handleTreatiesClick(treaty.name2, "Ratified")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5>International Treaties</h5>
|
||||||
|
{international_treaties.map((treaty) => (
|
||||||
|
<div key={treaty.name} className="treaty-item">
|
||||||
|
<div className="treaty-item-name">{treaty.name}</div>
|
||||||
|
|
||||||
|
{treaty.icon_eligible && (
|
||||||
|
<img
|
||||||
|
src={treaty.icon_eligible}
|
||||||
|
alt={`${treaty.name}-Eligible`}
|
||||||
|
title={`${treaty.name}-Eligible`}
|
||||||
|
srcSet=""
|
||||||
|
className="icon-2"
|
||||||
|
onClick={() =>
|
||||||
|
handleTreatiesClick(treaty.name2, "Eligible")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{treaty.icon_signed && (
|
||||||
|
<img
|
||||||
|
src={treaty.icon_signed}
|
||||||
|
alt={`${treaty.name}-Signed`}
|
||||||
|
title={`${treaty.name}-Signed`}
|
||||||
|
srcSet=""
|
||||||
|
className="icon-2"
|
||||||
|
onClick={() => handleTreatiesClick(treaty.name2, "Signed")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{treaty.icon_ratified && (
|
||||||
|
<img
|
||||||
|
src={treaty.icon_ratified}
|
||||||
|
alt={`${treaty.name}-Ratified`}
|
||||||
|
title={`${treaty.name}-Ratified`}
|
||||||
|
srcSet=""
|
||||||
|
className="icon-2"
|
||||||
|
onClick={() =>
|
||||||
|
handleTreatiesClick(treaty.name2, "Ratified")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5>
|
||||||
|
International Guidelines & Instruments <br />
|
||||||
|
<small>(countries with recent activities only, 2014 - 2019)</small>
|
||||||
|
</h5>
|
||||||
|
<div className="treaty-item-2">
|
||||||
|
<div className="treaty-item-name">UN Programme of Action</div>
|
||||||
|
<img
|
||||||
|
src={Icon20}
|
||||||
|
alt=""
|
||||||
|
className="icon-2"
|
||||||
|
onClick={() => handleTreatiesClick("UNProgrammeofAction", "Checked")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="treaty-item-2">
|
||||||
|
<div className="treaty-item-name">
|
||||||
|
International Tracing Instrument
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src={Icon16}
|
||||||
|
alt=""
|
||||||
|
className="icon-2"
|
||||||
|
onClick={() =>
|
||||||
|
handleTreatiesClick("InternationalTracingInstrument", "Checked")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5>African Guidelines & Instrumentss</h5>
|
||||||
|
<div className="treaty-item-2">
|
||||||
|
<div className="treaty-item-name">
|
||||||
|
Silencing the Guns in Africa Programme of Action
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src={Icon1}
|
||||||
|
alt=""
|
||||||
|
className="icon-2"
|
||||||
|
onClick={() => handleTreatiesClick("StG-PoA", "Checked")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilterBox;
|
||||||
@ -30,7 +30,6 @@ import Icon25 from "../../../Icons/icon25.svg";
|
|||||||
import Icon26 from "../../../Icons/icon26.svg";
|
import Icon26 from "../../../Icons/icon26.svg";
|
||||||
|
|
||||||
const MarkerIcon = (props) => {
|
const MarkerIcon = (props) => {
|
||||||
console.log(props.icon)
|
|
||||||
return (
|
return (
|
||||||
<Marker
|
<Marker
|
||||||
key={props.index}
|
key={props.index}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
.filters-box {
|
.filters-box {
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
// _organizations
|
// _organizations
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user