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 { CountryStyle, CountrySelectedStyle } from "./countryStyles";
|
||||
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 Row from "react-bootstrap/Row";
|
||||
import Col from "react-bootstrap/Col";
|
||||
@ -164,17 +166,17 @@ class ControlInAfricaMap extends React.Component {
|
||||
{
|
||||
name2: "UNProgrammeofAction",
|
||||
name: "UN Programme of Action",
|
||||
icon: Icon16,
|
||||
icon: Icon20,
|
||||
},
|
||||
{
|
||||
name2: "InternationalTracingInstrument",
|
||||
name: "International Tracing Instrument",
|
||||
icon: Icon1,
|
||||
icon: Icon16,
|
||||
},
|
||||
{
|
||||
name2: "StG-PoA",
|
||||
name: "Silencing the Guns in Africa Programme of Action",
|
||||
icon: Icon20,
|
||||
icon: Icon1,
|
||||
},
|
||||
];
|
||||
|
||||
@ -387,7 +389,6 @@ class ControlInAfricaMap extends React.Component {
|
||||
selectedCountriesNamesRegions,
|
||||
prevStatuesTreaty,
|
||||
africaCountries,
|
||||
selectedIcon,
|
||||
} = this.state;
|
||||
|
||||
// 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.international_treaties.find((org) => org.name2 === name);
|
||||
|
||||
let instrument = this.intsruments.find(
|
||||
(instrument) => instrument.name2 === name
|
||||
);
|
||||
|
||||
if (org) {
|
||||
//console.log(org[`icon_${status.toLowerCase()}`]);
|
||||
this.setState({
|
||||
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
|
||||
// then the treaty will be deselected
|
||||
if (
|
||||
@ -463,7 +473,7 @@ class ControlInAfricaMap extends React.Component {
|
||||
selectedCountriesNamesTreaties: intersection,
|
||||
selectedCountry: "",
|
||||
selectedTreaty: name,
|
||||
prevStatuesTreaty: status,
|
||||
prevStatuesTreaty: status || "checked",
|
||||
showInfoBox: true,
|
||||
});
|
||||
return;
|
||||
@ -473,7 +483,7 @@ class ControlInAfricaMap extends React.Component {
|
||||
selectedCountriesNamesTreaties,
|
||||
selectedCountry: "",
|
||||
selectedTreaty: name,
|
||||
prevStatuesTreaty: status,
|
||||
prevStatuesTreaty: status || "checked",
|
||||
selectedCountriesFeaturesTreaties,
|
||||
});
|
||||
|
||||
@ -556,31 +566,33 @@ class ControlInAfricaMap extends React.Component {
|
||||
selectedCountriesNamesTreaties,
|
||||
selectedCountryColor
|
||||
) => {
|
||||
if (feature.properties.name === selectedCountry) {
|
||||
const { name } = feature.properties;
|
||||
// select one country
|
||||
if (name === selectedCountry) {
|
||||
console.log("one country selected");
|
||||
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");
|
||||
return CountrySelectedStyle(selectedCountryColor);
|
||||
} else if (
|
||||
selectedCountriesNamesRegions.includes(feature.properties.name) &&
|
||||
selectedCountriesNamesTreaties.includes(feature.properties.name) === false
|
||||
) {
|
||||
}
|
||||
// select one treaty
|
||||
if (inSelectedRegions && !inSelectedTreaties) {
|
||||
console.log("region and treaty selected 1");
|
||||
return CountrySelectedStyle(selectedCountryColor);
|
||||
} else if (
|
||||
selectedCountriesNamesRegions.includes(feature.properties.name) &&
|
||||
selectedCountriesNamesTreaties.includes(feature.properties.name)
|
||||
) {
|
||||
}
|
||||
// select region and treaty
|
||||
if (inSelectedRegions && inSelectedTreaties) {
|
||||
console.log("region and treaty selected 2");
|
||||
return CountrySelectedStyle(selectedCountryColor, 0.7);
|
||||
} else {
|
||||
}
|
||||
// default style
|
||||
console.log("default");
|
||||
return CountryStyle();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -613,184 +625,13 @@ class ControlInAfricaMap extends React.Component {
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Col sm={3}>
|
||||
<div className={`filters-box`}>
|
||||
<div>
|
||||
<h5>African Countries</h5>
|
||||
|
||||
<select
|
||||
onChange={this.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">
|
||||
{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>
|
||||
<FilterBox
|
||||
selectedCountry={selectedCountry}
|
||||
countriesNames={countriesNames}
|
||||
handleCountryChange={this.handleCountryChange}
|
||||
handleOrganizationClick={this.handleOrganizationClick}
|
||||
handleTreatiesClick={this.handleTreatiesClick}
|
||||
></FilterBox>
|
||||
</Col>
|
||||
<Col sm={9}>
|
||||
<div id="map" className="map-container">
|
||||
@ -840,82 +681,9 @@ class ControlInAfricaMap extends React.Component {
|
||||
permanent
|
||||
className="tooltip-custom"
|
||||
>
|
||||
<h5>{feature.properties.name}</h5>
|
||||
<div className="matrix">
|
||||
{this.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">
|
||||
{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>
|
||||
<CountryPopup
|
||||
feature={feature}
|
||||
></CountryPopup>
|
||||
</Tooltip>
|
||||
</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";
|
||||
|
||||
const MarkerIcon = (props) => {
|
||||
console.log(props.icon)
|
||||
return (
|
||||
<Marker
|
||||
key={props.index}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.filters-box {
|
||||
padding: $gap;
|
||||
border: 1px solid $border-color;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
// _organizations
|
||||
|
||||
Loading…
Reference in New Issue
Block a user