selected filters

2024-06-07 13:18:11 +02:00 · 2024-06-07 13:18:11 +02:00 · 9d861a9768
commit 9d861a9768
parent f9ea03e64c
10 changed files with 357 additions and 174 deletions
--- 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 (
      <Container fluid>
        <Row>
-          <Col className="filter-section" sm={3} >
+          <Col className="filter-section" sm={3}>
            <FilterBox
              selectedCountry={selectedCountry}
              countriesNames={countriesNames}
@ -626,6 +684,9 @@ class ControlInAfricaMap extends React.Component {
              regional_organisations={regional_organisations}
              regional_treaties={regional_treaties}
              international_treaties={international_treaties}
+              internationalIntsruments={internationalIntsruments}
+              africanIntsruments={africanIntsruments}
+              intsruments={intsruments}
            ></FilterBox>
          </Col>
          <Col className="map-section" sm={9}>
@ -729,6 +790,15 @@ class ControlInAfricaMap extends React.Component {
                  </select>
                </div>

+                {selectedRegion || selectedTreatyOfficialName ? (
+                  <SelectedFilters
+                    selectedRegion={selectedRegion}
+                    selectedTreatyOfficialName={selectedTreatyOfficialName}
+                  ></SelectedFilters>
+                ) : (
+                  <></>
+                )}
+
                {this.state.showInfoBox && (
                  <MapInfoBox
                    className="info-box"
--- a/src/Components/Layout/ControlInAfrica/FilterBox.jsx
+++ b/src/Components/Layout/ControlInAfrica/FilterBox.jsx
@ -29,6 +29,9 @@ const FilterBox = (props) => {
    regional_treaties,
    international_treaties,
    geographical_organisations,
+    instruments,
+    internationalIntsruments,
+    africanIntsruments,
  } = props;

  return (
@ -59,6 +62,9 @@ const FilterBox = (props) => {
            <Treaties_Filter
              regional_treaties={regional_treaties}
              international_treaties={international_treaties}
+              instruments={instruments}
+              internationalIntsruments={internationalIntsruments}
+              africanIntsruments={africanIntsruments}
              handleTreatiesClick={handleTreatiesClick}
              language={language}
            />
--- 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 (
-    <div className={props.className}>
+    <Card_ className={props.className}>
      <div
-        onClick={() => {setOpen(!open); setIsHidden(!isHidden);}}
+        onClick={() => {
+          setOpen(!open);
+          setIsHidden(!isHidden);
+        }}
        aria-controls="example-collapse-text"
        aria-expanded={open}
        style={{ display: "flex", justifyContent: "space-between" }}
      >
-        <span><h3>{props.selectedRegion}</h3></span>
-        <span><h3>{isHidden ? 'Show' : 'Hide'}</h3></span>
+        <span>
+          <h3>{props.selectedRegion}</h3>
+        </span>
+        <span>
+          <h3>{isHidden ? "Show" : "Hide"}</h3>
+        </span>
      </div>
      <Collapse in={open}>
        <div className="example-collapse-text">
@ -144,8 +152,29 @@ const MapInfoBox = (props) => {
              </tbody>
            </table>
          </div>
-          {instruments &&
-            instruments.map((item, index) => {
+          {internationalIntsruments_ &&
+            internationalIntsruments_.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>
+              );
+            })}
+          {africanIntsruments_ &&
+            africanIntsruments_.map((item, index) => {
              return (
                <p className="mb-1" key={index}>
                  <strong>{item.name}:</strong>{" "}
@ -167,7 +196,7 @@ const MapInfoBox = (props) => {
            })}
        </div>
      </Collapse>
-    </div>
+    </Card_>
  );
 };

--- a/src/Components/Layout/ControlInAfrica/SelectedFilters.jsx
+++ 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 (
+    <Card_ className="selected-filters p-2">
+      <h5>Selected Filter/s:</h5>
+      {selectedRegion && <li>{selectedRegion}</li>}
+      {selectedTreatyOfficialName && <li>{selectedTreatyOfficialName}</li>}
+    </Card_>
+  );
+};
+
+export default SelectedFilters;
--- 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 (
    <div>
@ -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)
+                  }
                />
              ) : (
                <div className="icon"></div>
@ -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)
+                  }
                />
              ) : (
                <div className="icon"></div>
@ -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)
+                  }
                />
              ) : (
                <div className="icon"></div>
@ -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)
+                }
              />
            ) : (
              <div className="icon"></div>
@ -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)
+                }
              />
            ) : (
              <div className="icon"></div>
@ -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)
+                }
              />
            ) : (
              <div className="icon"></div>
@ -151,58 +166,70 @@ const Treaties_Filter = (props) => {
        <hr />
      </div>
      <div>
-        {language === "en" && <h5>
+        {language === "en" && (
+          <h5>
            International Guidelines & Instruments <br />
            <small>(countries with recent activities only, 2014 - 2019)</small>
-        </h5>}
-        {language === "fr" && <h5>
+          </h5>
+        )}
+        {language === "fr" && (
+          <h5>
            Directives & instruments internationaux <br />
            <small>(pays avec activité récente uniquement, 2014 - 2019)</small>
-        </h5>}
-        {language === "ar" &&  <h5>
+          </h5>
+        )}
+        {language === "ar" && (
+          <h5>
            المبادىء التوجيهية و الأدوات الدولية <br />
            <small>(فقط الدول ذات النشاطات الحديثة 2014-2019)</small>
-        </h5>}
-        <div className="treaty-item-2">
+          </h5>
+        )}
+        {internationalIntsruments.map((instrument) => (
+          <div key={instrument.name} className="treaty-item">
            <img
-            src={Icon20}
-            alt=""
+              src={instrument.icon}
+              alt={instrument.name}
+              title={instrument.name}
+              srcSet=""
              className="icon-2"
              onClick={() =>
-              handleTreatiesClick("UNProgrammeofAction", "Checked")
+                handleTreatiesClick(
+                  instrument.name2,
+                  "checked",
+                  instrument.name
+                )
              }
            />
-          <div className="treaty-item-name">UN Programme of Action</div>
-        </div>
-        <div className="treaty-item-2">
-          <img
-            src={Icon16}
-            alt=""
-            className="icon-2"
-            onClick={() =>
-              handleTreatiesClick("InternationalTracingInstrument", "Checked")
-            }
-          />
-          <div className="treaty-item-name">
-            International Tracing Instrument
-          </div>
+            <div className="treaty-item-name">{instrument.name}</div>
          </div>
+        ))}
        <hr />
      </div>
      <div>
-        <h5>{africanGuidelinesHeadings[language] || africanGuidelinesHeadings['en']}</h5>
+        <h5>
+          {africanGuidelinesHeadings[language] ||
+            africanGuidelinesHeadings["en"]}
+        </h5>

-        <div className="treaty-item-2">
+        {africanIntsruments.map((instrument) => (
+          <div key={instrument.name} className="treaty-item">
            <img
-            src={Icon1}
-            alt=""
+              src={instrument.icon}
+              alt={instrument.name}
+              title={instrument.name}
+              srcSet=""
              className="icon-2"
-            onClick={() => handleTreatiesClick("StG-PoA", "Checked")}
+              onClick={() =>
+                handleTreatiesClick(
+                  instrument.name2,
+                  "checked",
+                  instrument.name
+                )
+              }
            />
-          <div className="treaty-item-name">
-            Silencing the Guns in Africa Programme of Action
-          </div>
+            <div className="treaty-item-name">{instrument.name}</div>
          </div>
+        ))}
      </div>
    </div>
  );
--- 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 (
-        <div className={`${classes.card} ${props.className} `}>{props.children}</div>
+        <div className={`card ${props.className} `}>{props.children}</div>
    );
 }

--- a/src/Data/Orgs.geojson
+++ b/src/Data/Orgs.geojson
@ -1,4 +1,5 @@
-{"regional_organisations": [
+{
+  "regional_organisations": [
    { "name": "AU", "color": "#b2df8a" },
    { "name": "EAC", "color": "#33a02c" },
    { "name": "IGAD", "color": "#fb9a99" },
@ -11,17 +12,17 @@
    { "name": "ICGLR", "color": "#b15928" },
    { "name": "RECSA", "color": "#a6cee3" },
    { "name": "SARCOM", "color": "#1f78b4" }
-],
+  ],

-"geographical_organisations": [
+  "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": [
+  "regional_treaties": [
    {
      "name": "Bamako Declaration",
      "name2": "BamakoDeclaration",
@ -64,9 +65,9 @@
      "icon_signed": "Icon7",
      "icon_ratified": "Icon9"
    }
-],
+  ],

-"international_treaties": [
+  "international_treaties": [
    {
      "name": "Arms Trade Treaty",
      "name2": "ArmsTradeTreaty",
@ -88,9 +89,30 @@
      "icon_signed": "Icon13",
      "icon_ratified": "Icon14"
    }
-],
+  ],

-"intsruments": [
+  "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",
@ -106,4 +128,5 @@
      "name": "Silencing the Guns in Africa Programme of Action",
      "icon": "Icon1"
    }
-]}
+  ]
+}
--- 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;
+}
--- 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;
--- 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...