diff --git a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js index e385e43..90d799c 100644 --- a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js +++ b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js @@ -12,6 +12,7 @@ import FilterBox from "./FilterBox"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; +import SelectedFilters from "./SelectedFilters"; import Icon1 from "../../../Icons/icon1.svg"; import Icon2 from "../../../Icons/icon2.svg"; @@ -82,6 +83,8 @@ class ControlInAfricaMap extends React.Component { regional_treaties: [], international_treaties: [], intsruments: [], + internationalIntsruments: [], + africanIntsruments: [], loading: true, error: null, @@ -96,6 +99,7 @@ class ControlInAfricaMap extends React.Component { selectedCountry: "", selectedRegion: "", selectedTreaty: "", + selectedTreatyOfficialName: "", // For the Slescted filters box selectedCountriesNamesRegions: [], selectedCountriesNamesTreaties: [], @@ -112,17 +116,15 @@ class ControlInAfricaMap extends React.Component { infoBox: [], showInfoBox: false, }; - } - componentDidMount() { this.fetchData(); window.addEventListener("resize", this.handleResize); } componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); + window.removeEventListener("resize", this.handleResize); } fetchData = async () => { @@ -170,6 +172,18 @@ class ControlInAfricaMap extends React.Component { }) ); + const internationalIntsruments = data.internationalIntsruments.map( + (instrument) => ({ + ...instrument, + icon: iconMap[instrument.icon] || null, + }) + ); + + const africanIntsruments = data.africanIntsruments.map((instrument) => ({ + ...instrument, + icon: iconMap[instrument.icon] || null, + })); + const intsruments = data.intsruments.map((instrument) => ({ ...instrument, icon: iconMap[instrument.icon] || null, @@ -180,6 +194,8 @@ class ControlInAfricaMap extends React.Component { geographical_organisations: data.geographical_organisations, regional_treaties, international_treaties, + internationalIntsruments, + africanIntsruments, intsruments, }, () => { @@ -277,6 +293,7 @@ class ControlInAfricaMap extends React.Component { selectedCountry: "", selectedRegion: "", selectedTreaty: "", + selectedTreatyOfficialName: "", selectedCountriesNamesRegions: [], selectedCountriesNamesTreaties: [], @@ -300,6 +317,7 @@ class ControlInAfricaMap extends React.Component { selectedCountry: countryName, selectedRegion: "", selectedTreaty: "", + selectedTreatyOfficialName: "", selectedCountriesNamesRegions: [], selectedCountriesNamesTreaties: [], @@ -367,20 +385,24 @@ class ControlInAfricaMap extends React.Component { prevStatuesRegion: status, selectedCountriesFeaturesRegions, selectedTreaty: "", + selectedTreatyOfficialName: "", showInfoBox: true, }); }; - handleTreatiesClick = (name, status) => { + handleTreatiesClick = (name, status, official_name) => { const { selectedRegion, selectedTreaty, + selectedTreatyOfficialName, selectedCountriesNamesRegions, prevStatuesTreaty, africaCountries, regional_treaties, international_treaties, intsruments, + internationalIntsruments, + africanIntsruments, } = this.state; // get the icon of the selected treaty based on the name and status of the treaty @@ -390,7 +412,12 @@ class ControlInAfricaMap extends React.Component { regional_treaties.find((org) => org.name2 === name) || international_treaties.find((org) => org.name2 === name); - let instrument = intsruments.find( + let instrument = + internationalIntsruments.find( + (instrument) => instrument.name2 === name + ) || africanIntsruments.find((instrument) => instrument.name2 === name); + + let instrument_ = intsruments.find( (instrument) => instrument.name2 === name ); @@ -418,6 +445,7 @@ class ControlInAfricaMap extends React.Component { selectedCountryColor: "yellow", selectedCountry: "", selectedTreaty: "", + selectedTreatyOfficialName: "", prevStatuesTreaty: "", prevStatuesRegion: "", selectedIcon: "none", @@ -434,6 +462,7 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesTreaties: [], selectedCountry: "", selectedTreaty: "", + selectedTreatyOfficialName: "", prevStatuesTreaty: "", selectedIcon: "none", showInfoBox: true, @@ -464,6 +493,7 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesTreaties: intersection, selectedCountry: "", selectedTreaty: name, + selectedTreatyOfficialName: official_name, prevStatuesTreaty: status, showInfoBox: true, }); @@ -474,6 +504,7 @@ class ControlInAfricaMap extends React.Component { selectedCountriesNamesTreaties, selectedCountry: "", selectedTreaty: name, + selectedTreatyOfficialName: official_name, prevStatuesTreaty: status, selectedCountriesFeaturesTreaties, }); @@ -485,6 +516,7 @@ class ControlInAfricaMap extends React.Component { ) { this.setState({ selectedTreaty: name, + selectedTreatyOfficialName: official_name, }); } }; @@ -494,6 +526,8 @@ class ControlInAfricaMap extends React.Component { selectedCountriesFeaturesRegions, regional_treaties, international_treaties, + internationalIntsruments, + africanIntsruments, intsruments, } = this.state; @@ -524,11 +558,29 @@ class ControlInAfricaMap extends React.Component { }); }; + // Helper function to process instruments + const processInstruments = (instruments) => { + return instruments.map((instrument) => { + const countris = selectedCountriesFeaturesRegions.filter( + (feature) => feature.properties[instrument.name2] === 1 + ); + return { + name: instrument.name, + countries: countris.length, + }; + }); + }; + const organisationsRegionalTreaties = processTreaties(regional_treaties); const organisationsInternationalTreaties = processTreaties( international_treaties ); + const internationalIntsruments_ = processInstruments( + internationalIntsruments + ); + const africanIntsruments_ = processInstruments(africanIntsruments); + const organisationsInstruments = intsruments.map((instrument) => { const countris = selectedCountriesFeaturesRegions.filter( (feature) => feature.properties[instrument.name2] === 1 @@ -543,6 +595,8 @@ class ControlInAfricaMap extends React.Component { organisationsRegionalTreaties, organisationsInternationalTreaties, organisationsInstruments, + internationalIntsruments_, + africanIntsruments_, }; }; @@ -599,11 +653,15 @@ class ControlInAfricaMap extends React.Component { selectedCountryColor, selectedRegion, selectedTreaty, + selectedTreatyOfficialName, selectedIcon, geographical_organisations, regional_organisations, regional_treaties, international_treaties, + internationalIntsruments, + africanIntsruments, + intsruments, } = this.state; if (loading) { @@ -615,7 +673,7 @@ class ControlInAfricaMap extends React.Component { return ( - + @@ -729,6 +790,15 @@ class ControlInAfricaMap extends React.Component { + {selectedRegion || selectedTreatyOfficialName ? ( + + ) : ( + <> + )} + {this.state.showInfoBox && ( { regional_treaties, international_treaties, geographical_organisations, + instruments, + internationalIntsruments, + africanIntsruments, } = props; return ( @@ -59,6 +62,9 @@ const FilterBox = (props) => { diff --git a/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx b/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx index a5065a7..de4033b 100644 --- a/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx +++ b/src/Components/Layout/ControlInAfrica/MapInfoBox.jsx @@ -1,8 +1,9 @@ import React, { useState } from "react"; -import Button from "react-bootstrap/Button"; import Collapse from "react-bootstrap/Collapse"; +import Card_ from "../../UI/Card_/Card_"; const MapInfoBox = (props) => { + const { internationalIntsruments_, africanIntsruments_ } = props.info; const regional_treaties = props.info.organisationsRegionalTreaties; const international_treaties = props.info.organisationsInternationalTreaties; const instruments = props.info.organisationsInstruments; @@ -10,15 +11,22 @@ const MapInfoBox = (props) => { const [isHidden, setIsHidden] = useState(false); return ( -
+
{setOpen(!open); setIsHidden(!isHidden);}} + onClick={() => { + setOpen(!open); + setIsHidden(!isHidden); + }} aria-controls="example-collapse-text" aria-expanded={open} style={{ display: "flex", justifyContent: "space-between" }} > -

{props.selectedRegion}

 -

{isHidden ? 'Show' : 'Hide'}

 + +

{props.selectedRegion}

+ + +

{isHidden ? "Show" : "Hide"}

+
@@ -144,8 +152,29 @@ const MapInfoBox = (props) => {
- {instruments && - instruments.map((item, index) => { + {internationalIntsruments_ && + internationalIntsruments_.map((item, index) => { + return ( +

+ {item.name}:{" "} + + {item.countries} + +

+ ); + })} + {africanIntsruments_ && + africanIntsruments_.map((item, index) => { return (

{item.name}:{" "} @@ -167,7 +196,7 @@ const MapInfoBox = (props) => { })}

- + ); }; diff --git a/src/Components/Layout/ControlInAfrica/SelectedFilters.jsx b/src/Components/Layout/ControlInAfrica/SelectedFilters.jsx new file mode 100644 index 0000000..9c7714a --- /dev/null +++ b/src/Components/Layout/ControlInAfrica/SelectedFilters.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import Card_ from "../../UI/Card_/Card_"; + +const SelectedFilters = (props) => { + const { selectedRegion, selectedTreatyOfficialName } = props; + return ( + +
Selected Filter/s:
+ {selectedRegion &&
  • {selectedRegion}
    • } + {selectedTreatyOfficialName &&
  • {selectedTreatyOfficialName}
    • } +     + ); +}; + +export default SelectedFilters; diff --git a/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx b/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx index dad6055..f0085c7 100644 --- a/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx +++ b/src/Components/Layout/ControlInAfrica/Treaties_Filter.jsx @@ -19,12 +19,15 @@ const Treaties_Filter = (props) => { en: "African Guidelines & Instrumentss", fr: "Directives & instruments africains", ar: "المبادىء التوجيهية و الأدوات السياسية في افريقيا", - } + }; const { international_treaties, handleTreatiesClick, regional_treaties, language, + instruments, + internationalIntsruments, + africanIntsruments, } = props; return (
    @@ -67,7 +70,9 @@ const Treaties_Filter = (props) => { title={`${treaty.name}-Eligible`} srcSet="" className="icon" - onClick={() => handleTreatiesClick(treaty.name2, "Eligible")} + onClick={() => + handleTreatiesClick(treaty.name2, "Eligible", treaty.name) + } /> ) : (
    @@ -79,7 +84,9 @@ const Treaties_Filter = (props) => { title={`${treaty.name}-Signed`} srcSet="" className="icon" - onClick={() => handleTreatiesClick(treaty.name2, "Signed")} + onClick={() => + handleTreatiesClick(treaty.name2, "Signed", treaty.name) + } /> ) : (
    @@ -91,7 +98,9 @@ const Treaties_Filter = (props) => { title={`${treaty.name}-Ratified`} srcSet="" className="icon" - onClick={() => handleTreatiesClick(treaty.name2, "Ratified")} + onClick={() => + handleTreatiesClick(treaty.name2, "Ratified", treaty.name) + } /> ) : (
    @@ -116,7 +125,9 @@ const Treaties_Filter = (props) => { title={`${treaty.name}-Eligible`} srcSet="" className="icon-2" - onClick={() => handleTreatiesClick(treaty.name2, "Eligible")} + onClick={() => + handleTreatiesClick(treaty.name2, "Eligible", treaty.name) + } /> ) : (
    @@ -128,7 +139,9 @@ const Treaties_Filter = (props) => { title={`${treaty.name}-Signed`} srcSet="" className="icon-2" - onClick={() => handleTreatiesClick(treaty.name2, "Signed")} + onClick={() => + handleTreatiesClick(treaty.name2, "Signed", treaty.name) + } /> ) : (
    @@ -140,7 +153,9 @@ const Treaties_Filter = (props) => { title={`${treaty.name}-Ratified`} srcSet="" className="icon-2" - onClick={() => handleTreatiesClick(treaty.name2, "Ratified")} + onClick={() => + handleTreatiesClick(treaty.name2, "Ratified", treaty.name) + } /> ) : (
    @@ -151,58 +166,70 @@ const Treaties_Filter = (props) => {
    - {language === "en" &&
    - International Guidelines & Instruments
    - (countries with recent activities only, 2014 - 2019) -
    } - {language === "fr" &&
    - Directives & instruments internationaux
    - (pays avec activité récente uniquement, 2014 - 2019) -
    } - {language === "ar" &&
    - المبادىء التوجيهية و الأدوات الدولية
    - (فقط الدول ذات النشاطات الحديثة 2014-2019) -
    } -
    - - handleTreatiesClick("UNProgrammeofAction", "Checked") - } - /> -
    UN Programme of Action
    -
    -
    - - handleTreatiesClick("InternationalTracingInstrument", "Checked") - } - /> -
    - International Tracing Instrument + {language === "en" && ( +
    + International Guidelines & Instruments
    + (countries with recent activities only, 2014 - 2019) +
    + )} + {language === "fr" && ( +
    + Directives & instruments internationaux
    + (pays avec activité récente uniquement, 2014 - 2019) +
    + )} + {language === "ar" && ( +
    + المبادىء التوجيهية و الأدوات الدولية
    + (فقط الدول ذات النشاطات الحديثة 2014-2019) +
    + )} + {internationalIntsruments.map((instrument) => ( +
    + {instrument.name} + handleTreatiesClick( + instrument.name2, + "checked", + instrument.name + ) + } + /> +
    {instrument.name}
    -
    + ))}
    -
    {africanGuidelinesHeadings[language] || africanGuidelinesHeadings['en']}
    +
    + {africanGuidelinesHeadings[language] || + africanGuidelinesHeadings["en"]} +
    -
    - handleTreatiesClick("StG-PoA", "Checked")} - /> -
    - Silencing the Guns in Africa Programme of Action + {africanIntsruments.map((instrument) => ( +
    + {instrument.name} + handleTreatiesClick( + instrument.name2, + "checked", + instrument.name + ) + } + /> +
    {instrument.name}
    -
    + ))}
    ); diff --git a/src/Components/UI/Card_/Card_.js b/src/Components/UI/Card_/Card_.js index 7e2bffe..4a41077 100644 --- a/src/Components/UI/Card_/Card_.js +++ b/src/Components/UI/Card_/Card_.js @@ -1,9 +1,9 @@ import React from "react"; -import classes from './Card_.module.css' + const Card_ = props => { return ( -
    {props.children}
    +
    {props.children}
    ); } diff --git a/src/Data/Orgs.geojson b/src/Data/Orgs.geojson index 4c24ae0..e304753 100644 --- a/src/Data/Orgs.geojson +++ b/src/Data/Orgs.geojson @@ -1,109 +1,132 @@ -{"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" } -], +{ + "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" } + ], -"geographical_organisations": [ - { "name": "Northern-Africa", "color": "#e3e3e3" }, - { "name": "Eastern-Africa", "color": "#e3e3e3" }, - { "name": "Southern-Africa", "color": "#e3e3e3" }, - { "name": "Western-Africa", "color": "#e3e3e3" }, - { "name": "Central-Africa", "color": "#e3e3e3" } -], + "geographical_organisations": [ + { "name": "Northern-Africa", "color": "#e3e3e3" }, + { "name": "Eastern-Africa", "color": "#e3e3e3" }, + { "name": "Southern-Africa", "color": "#e3e3e3" }, + { "name": "Western-Africa", "color": "#e3e3e3" }, + { "name": "Central-Africa", "color": "#e3e3e3" } + ], -"regional_treaties": [ - { - "name": "Bamako Declaration", - "name2": "BamakoDeclaration", - "icon_eligible": "Icon26", - "icon_signed": "Icon24", - "icon_ratified": "none" - }, - { - "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": "none" - }, - { - "name": "Khartoum Declaration", - "name2": "KhartoumDeclaration", - "icon_eligible": "Icon21", - "icon_signed": "Icon23", - "icon_ratified": "none" - }, - { - "name": "Nairobi Protocol", - "name2": "NairobiProtocol", - "icon_eligible": "Icon22", - "icon_signed": "Icon25", - "icon_ratified": "none" - }, - { - "name": "SADC Firearms Protocol", - "name2": "SADCFirearmsProtocol", - "icon_eligible": "Icon8", - "icon_signed": "Icon7", - "icon_ratified": "Icon9" - } -], + "regional_treaties": [ + { + "name": "Bamako Declaration", + "name2": "BamakoDeclaration", + "icon_eligible": "Icon26", + "icon_signed": "Icon24", + "icon_ratified": "none" + }, + { + "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": "none" + }, + { + "name": "Khartoum Declaration", + "name2": "KhartoumDeclaration", + "icon_eligible": "Icon21", + "icon_signed": "Icon23", + "icon_ratified": "none" + }, + { + "name": "Nairobi Protocol", + "name2": "NairobiProtocol", + "icon_eligible": "Icon22", + "icon_signed": "Icon25", + "icon_ratified": "none" + }, + { + "name": "SADC Firearms Protocol", + "name2": "SADCFirearmsProtocol", + "icon_eligible": "Icon8", + "icon_signed": "Icon7", + "icon_ratified": "Icon9" + } + ], -"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" - } -], + "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" + } + ], -"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" - } -]} \ No newline at end of file + "internationalIntsruments": [ + { + "name2": "UNProgrammeofAction", + "name": "UN Programme of Action", + "icon": "Icon20" + }, + { + "name2": "InternationalTracingInstrument", + "name": "International Tracing Instrument", + "icon": "Icon16" + } + ], + + "africanIntsruments": [ + { + "name2": "StG-PoA", + "name": "Silencing the Guns in Africa Programme of Action", + "icon": "Icon1" + } + ], + + "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" + } + ] +} diff --git a/src/Styles/Components/_cards.scss b/src/Styles/Components/_cards.scss index e69de29..ccadd76 100644 --- a/src/Styles/Components/_cards.scss +++ b/src/Styles/Components/_cards.scss @@ -0,0 +1,5 @@ +.card{ + // background-color: red; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + border-radius: 5px; +} \ No newline at end of file diff --git a/src/Styles/Layout/_map.scss b/src/Styles/Layout/_map.scss index afe9360..a87741b 100644 --- a/src/Styles/Layout/_map.scss +++ b/src/Styles/Layout/_map.scss @@ -20,6 +20,13 @@ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; } + +.selected-filters{ + position: absolute; + top: 60px; + left: 20px; +} + @media (min-width: 200px) { .col-sm-9 { flex: 0 0 auto; diff --git a/src/Styles/main.scss b/src/Styles/main.scss index d200d57..3c65e0d 100644 --- a/src/Styles/main.scss +++ b/src/Styles/main.scss @@ -19,6 +19,7 @@ // Components @import 'Components/zoom_control'; +@import 'Components/cards'; // Import other components partials... // Import other partials as needed...