From f2c0c1ab3c1dc876f0470c6576945ff565901799 Mon Sep 17 00:00:00 2001 From: louai98 Date: Mon, 10 Jun 2024 17:16:53 +0200 Subject: [PATCH] pssm legend - select --- .../ControlInAfrica/ControlInAfricaMap.js | 1 - src/Components/Layout/PSSM/Blurb.js | 202 +++++++++--------- src/Components/Layout/PSSM/Legend.jsx | 18 ++ src/Components/Layout/PSSM/MarkerCustom.jsx | 52 +++++ src/Components/Layout/PSSM/PSSM.jsx | 100 +++++---- src/Components/Layout/PSSM/SelectMenu.jsx | 37 ++++ src/Styles/Layout/_legend.scss | 36 ++++ src/Styles/Layout/_map_pssm.scss | 14 ++ src/Styles/main.scss | 2 + 9 files changed, 326 insertions(+), 136 deletions(-) create mode 100644 src/Components/Layout/PSSM/Legend.jsx create mode 100644 src/Components/Layout/PSSM/MarkerCustom.jsx create mode 100644 src/Components/Layout/PSSM/SelectMenu.jsx create mode 100644 src/Styles/Layout/_legend.scss diff --git a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js index 46fd78d..69e35b5 100644 --- a/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js +++ b/src/Components/Layout/ControlInAfrica/ControlInAfricaMap.js @@ -759,7 +759,6 @@ class ControlInAfricaMap extends React.Component { -
diff --git a/src/Components/Layout/PSSM/Blurb.js b/src/Components/Layout/PSSM/Blurb.js index 873050e..4870aff 100644 --- a/src/Components/Layout/PSSM/Blurb.js +++ b/src/Components/Layout/PSSM/Blurb.js @@ -3,6 +3,7 @@ import Card_ from "../../UI/Card_/Card_"; import DOMPurify from "dompurify"; import parse from "html-react-parser"; import TruncateContent from "../../Helpers/TruncateContent/TruncateContent"; +import Collapse from "react-bootstrap/Collapse"; const Blurb = () => { DOMPurify.addHook("afterSanitizeAttributes", function (node) { @@ -30,15 +31,14 @@ const Blurb = () => { return ( - - - - + ); }; const MainText = ({ footnotes }) => { + const [open, setOpen] = useState(false); + const [isHidden, setIsHidden] = useState(true); return (

Physical Security and Stockpile Management (PSSM)

@@ -61,100 +61,110 @@ const MainText = ({ footnotes }) => { .

-

- Physical Security and Stockpile Management (PSSM) consists of the - “procedures and activities that are necessary for the safe and secure - accounting, storage, transportation and handling of SALW” - - 3 - - . It can therefore be viewed as a key element of practical weapons and - ammunition management, and it significantly decreases the risk of - illicit proliferation, trafficking and diversion of firearms, - ammunition, and explosives as well as reduces the risk of Unintentional - Munitions Explosions. -

-

- Responsible management of stockpiles can therefore positively impact on - efforts to reduce armed violence and contribute towards enhancing the - security of the surrounding communities as well as the security at the - local, national and regional level. -

-

Regional PSSM Training of Trainers (ToT) processes

-

- Since 2016, the bicc advisory team on Weapons and Ammunition Management - (WAM) has been supporting two multi-stakeholder regional PSSM Training - of Trainers (ToT) processes; one in East Africa (with the Regional - Centre on Small Arms in the Great Lakes Region, the Horn of Africa and - Bordering States, RECSA) and one in West Africa (with the Economic - Community of West African States, ECOWAS). -

-

- The aim of both processes was to support and enhance regional ownership, - strengthen PSSM capacities, establish sustainable structures by creating - a regional trainer pool whose trainers can independently train more - trainers that equally possess the necessary regional and local - knowledge, thereby decreasing a dependency on foreign experts. The focus - on regional ownership and sustainability represents a crucial piece of - the peace and security puzzle, in alignment with SDG 16. -

-

- Based on the UN Programme of Action, and acknowledging PSSM as a key - element of WAM, the Multinational Small Arms and Ammunition Group (MSAG) - initiated a training programme on the security and stockpile management - of weapons, ammunition, and explosives for East African states in Kenya - in 2012. Participants of the ToT processes derived from among the - military, police and wildlife service sectors. Up until March 2024, 469 - participants have been trained, out of which 42 were certified as PSSM - Instructors and 13 as Senior Instructors. The map below shows their - geographical distribution. -

-

- In the meantime, the need for another regional PSSM ToT process was - identified in the ECOWAS region (West Africa), which was established in - 2018 and completed in 2023. Based on the identified need for a regional - trainer pool and more accountable PSSM practices, this process also took - into account lessons learned from the East Africa ToT process. Between - 2018 and 2023, a total of 000 participants have been trained, out of - which 000 were certified as PSSM Instructors and 000 as Senior - Instructors. The map below shows their geographical distribution. -

-

Stakeholders implementing the regional PSSM ToT trainings were:

-
    -
  • - RECSA, MSAG nations (namely the Bundeswehr Verification Centre, the - Austrian Verification Centre, Denmark, among others), IPSTC - (International Peace Support Training Centre) in Nairobi/Kenya and - bicc. -
    • -
  • ECOWAS, MSAG (the Bundeswehr Verification Centre) and bicc.
    • -
-

- Each of these partners brings a unique skillset that complements that of - the other stakeholders. -

-
- ); -}; + +
+

+ Physical Security and Stockpile Management (PSSM) consists of the + “procedures and activities that are necessary for the safe and + secure accounting, storage, transportation and handling of SALW” + + 3 + + . It can therefore be viewed as a key element of practical weapons + and ammunition management, and it significantly decreases the risk + of illicit proliferation, trafficking and diversion of firearms, + ammunition, and explosives as well as reduces the risk of + Unintentional Munitions Explosions. +

+

+ Responsible management of stockpiles can therefore positively impact + on efforts to reduce armed violence and contribute towards enhancing + the security of the surrounding communities as well as the security + at the local, national and regional level. +

-const Footnotes = ({ footnotes }) => { - return ( -
-

-
-

- {footnotes.map((footnote) => ( -
    -
  • - {parse(`${footnote.id}. ${footnote.text}`)} -
    • -
- ))} +

Regional PSSM Training of Trainers (ToT) processes

+

+ Since 2016, the bicc advisory team on Weapons and Ammunition + Management (WAM) has been supporting two multi-stakeholder regional + PSSM Training of Trainers (ToT) processes; one in East Africa (with + the Regional Centre on Small Arms in the Great Lakes Region, the + Horn of Africa and Bordering States, RECSA) and one in West Africa + (with the Economic Community of West African States, ECOWAS). +

+

+ The aim of both processes was to support and enhance regional + ownership, strengthen PSSM capacities, establish sustainable + structures by creating a regional trainer pool whose trainers can + independently train more trainers that equally possess the necessary + regional and local knowledge, thereby decreasing a dependency on + foreign experts. The focus on regional ownership and sustainability + represents a crucial piece of the peace and security puzzle, in + alignment with SDG 16. +

+

+ Based on the UN Programme of Action, and acknowledging PSSM as a key + element of WAM, the Multinational Small Arms and Ammunition Group + (MSAG) initiated a training programme on the security and stockpile + management of weapons, ammunition, and explosives for East African + states in Kenya in 2012. Participants of the ToT processes derived + from among the military, police and wildlife service sectors. Up + until March 2024, 469 participants have been trained, out of which + 42 were certified as PSSM Instructors and 13 as Senior Instructors. + The map below shows their geographical distribution. +

+

+ In the meantime, the need for another regional PSSM ToT process was + identified in the ECOWAS region (West Africa), which was established + in 2018 and completed in 2023. Based on the identified need for a + regional trainer pool and more accountable PSSM practices, this + process also took into account lessons learned from the East Africa + ToT process. Between 2018 and 2023, a total of 000 participants have + been trained, out of which 000 were certified as PSSM Instructors + and 000 as Senior Instructors. The map below shows their + geographical distribution. +

+

Stakeholders implementing the regional PSSM ToT trainings were:

+
    +
  • + RECSA, MSAG nations (namely the Bundeswehr Verification Centre, + the Austrian Verification Centre, Denmark, among others), IPSTC + (International Peace Support Training Centre) in Nairobi/Kenya and + bicc. +
    • +
  • ECOWAS, MSAG (the Bundeswehr Verification Centre) and bicc.
    • +
+

+ Each of these partners brings a unique skillset that complements + that of the other stakeholders. +

+
+

+
+

+ {footnotes.map((footnote) => ( +
    +
  • + {parse(`${footnote.id}. ${footnote.text}`)} +
    • +
+ ))} +
+
+ + {setOpen(!open); setIsHidden(!isHidden);}} + aria-controls="example-collapse-text" + aria-expanded={open} + > + {isHidden ? "Read more" : "Read less"} +
); }; diff --git a/src/Components/Layout/PSSM/Legend.jsx b/src/Components/Layout/PSSM/Legend.jsx new file mode 100644 index 0000000..1b4670b --- /dev/null +++ b/src/Components/Layout/PSSM/Legend.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const Legend = () => { + return ( +
+
+
+ RECSA +
+
+
+ ECOWAS +
+
+ ); +}; + +export default Legend; diff --git a/src/Components/Layout/PSSM/MarkerCustom.jsx b/src/Components/Layout/PSSM/MarkerCustom.jsx new file mode 100644 index 0000000..62499f9 --- /dev/null +++ b/src/Components/Layout/PSSM/MarkerCustom.jsx @@ -0,0 +1,52 @@ +import React from "react"; +import { Marker, Tooltip } from "react-leaflet"; + +import Person from "../../../Icons/person.svg"; +import Person2 from "../../../Icons/person2.svg"; +import Person3 from "../../../Icons/person3.svg"; + +const MarkerCustom = (props) => { + const { feature } = props; + return ( + + +
{feature.properties.name}
+
+
    +
  • + Number of + participants trained:{" "} + + {feature.properties["Trained-Participants"] || "-"} + +
    • +
  • + Number of PSSM + instractors:{" "} + + {feature.properties["PSSM-Instructors"] || "-"} + +
    • +
  • + Number of senior PSSM + instractors:{" "} + + {feature.properties["PSSM-Senior-Instructors"] || "-"} + +
    • +
+
+ + + ); +}; + +export default MarkerCustom; diff --git a/src/Components/Layout/PSSM/PSSM.jsx b/src/Components/Layout/PSSM/PSSM.jsx index 8d854f4..ccb7fe5 100644 --- a/src/Components/Layout/PSSM/PSSM.jsx +++ b/src/Components/Layout/PSSM/PSSM.jsx @@ -1,16 +1,33 @@ -import React from "react"; -import ReactDOM from 'react-dom'; +import React, { useEffect } from "react"; -import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet"; -import L, { control } from "leaflet"; +import { MapContainer, GeoJSON, useMap } from "react-leaflet"; +import L from "leaflet"; import Africa from "../../../Data/PSSM.geojson"; import "../../../Styles/main.scss"; import Card_ from "../../UI/Card_/Card_"; import { CountrySelectedStyle, NotPSSMCountryStyle } from "./countryStyles"; +import MarkerCustom from "./MarkerCustom"; +import SelectMenu from "./SelectMenu"; +import Legend from "./Legend"; -import Person from "../../../Icons/person.svg"; -import Person2 from "../../../Icons/person2.svg"; -import Person3 from "../../../Icons/person3.svg"; +// Custom Zoom Control Component +const CustomZoomControl = React.memo(() => { + const map = useMap(); + + useEffect(() => { + const zoomControl = L.control.zoom({ + position: 'topright' // Change the position to bottom right + }); + map.addControl(zoomControl); + + // Clean up the control on component unmount + return () => { + map.removeControl(zoomControl); + }; + }, [map]); + + return null; +}); class PSSM extends React.Component { constructor(props) { @@ -20,6 +37,8 @@ class PSSM extends React.Component { africaCountries: null, countriesNames: [], pssmCountries: [], + recsaCountries: [], + ecowasCountries: [], loading: true, error: null, selectedCountry: "", @@ -27,6 +46,7 @@ class PSSM extends React.Component { center: [3, 15], zoom: 4, scrollWheelZoom: false, + zoomControl: false, }; } @@ -48,6 +68,12 @@ class PSSM extends React.Component { (feature) => feature.properties.RECSA === 1 || feature.properties.ECOWAS === 1 ), + recsaCountries: data.features.filter( + (feature) => feature.properties.RECSA === 1 + ), + ecowasCountries: data.features.filter( + (feature) => feature.properties.ECOWAS === 1 + ), loading: false, }, () => {} @@ -58,8 +84,6 @@ class PSSM extends React.Component { loading: false, }); } - - console.log(this.state.pssmCountries); }; onEachFeature = (feature, layer) => { @@ -82,14 +106,26 @@ class PSSM extends React.Component { this.setState({ selectedCountry: countryName }); }; + handleCountryChange = (e) => { + const countryName = e.target.value; + const { selectedCountry } = this.state; + if (countryName === selectedCountry) { + this.setState({ selectedCountry: "" }); + return; + } + this.setState({ selectedCountry: countryName }); + }; + render() { const { africaCountries, - countriesNames, pssmCountries, loading, error, selectedCountry, + recsaCountries, + ecowasCountries, + zoomControl, } = this.state; if (loading) { return
Loading...
; @@ -105,6 +141,7 @@ class PSSM extends React.Component { zoom={this.state.zoom} style={{ width: "100%", height: "100%" }} scrollWheelZoom={this.state.scrollWheelZoom} + zoomControl={zoomControl} > {africaCountries && ( <> @@ -137,39 +174,24 @@ class PSSM extends React.Component { pssmCountries.map((feature) => { if (feature.properties.name === selectedCountry) { return ( - - -
{feature.properties.name}
-
-
    -
  • - Number of participants trained:{" "} - {feature.properties["Trained-Participants"] || "-"} -
    • -
  • - Number of PSSM instractors:{" "} - {feature.properties["PSSM-Instructors"] || "-"} -
    • -
  • - Number of senior PSSM instractors:{" "} - {feature.properties["PSSM-Senior-Instructors"] || "-"} -
    • -
-
- - + feature={feature} + > ); } })} + + + + + + ); diff --git a/src/Components/Layout/PSSM/SelectMenu.jsx b/src/Components/Layout/PSSM/SelectMenu.jsx new file mode 100644 index 0000000..12450d4 --- /dev/null +++ b/src/Components/Layout/PSSM/SelectMenu.jsx @@ -0,0 +1,37 @@ +import React from "react"; + +const SelectMenu = (props) => { + const { + ecowasCountries, + recsaCountries, + selectedCountry, + handleCountryChange, + } = props; + return ( +
+ +
+ ); +}; + +export default SelectMenu; diff --git a/src/Styles/Layout/_legend.scss b/src/Styles/Layout/_legend.scss new file mode 100644 index 0000000..bb12403 --- /dev/null +++ b/src/Styles/Layout/_legend.scss @@ -0,0 +1,36 @@ +.legend-container { + display: flex; + flex-direction: column; + font-size: 16px; + font-weight: bold; + position: absolute; + bottom: 20px; + left: 20px; + background-color: #f0f0f0; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + z-index: 1000; +} + +.legend-item { + display: flex; + align-items: center; + margin-bottom: 8px; /* Adjust as needed */ +} + +.legend-recsa, +.legend-ecowas { + width: 30px; /* Adjust width as needed */ + height: 15px; /* Adjust height as needed */ + margin-right: 8px; /* Adjust space between div and span as needed */ +} + +.legend-recsa { + background-color: #ffffcc; /* Replace with your color */ +} + +.legend-ecowas { + background-color: #ffcccd; /* Replace with your color */ +} diff --git a/src/Styles/Layout/_map_pssm.scss b/src/Styles/Layout/_map_pssm.scss index 2346d10..fa84c0e 100644 --- a/src/Styles/Layout/_map_pssm.scss +++ b/src/Styles/Layout/_map_pssm.scss @@ -9,4 +9,18 @@ .person-icon{ height: 1.3rem; +} +.country-select option{ + font-size: 14px; +} +.options-title{ + font-size: 20px !important; + font-weight: bold; + color: $primary-accent-color; +} +.options-title-recsa{ + color: #ffffcc; +} +.options-title-ecowas{ + color: #ffcccd; } \ No newline at end of file diff --git a/src/Styles/main.scss b/src/Styles/main.scss index 62bea58..2ad78d3 100644 --- a/src/Styles/main.scss +++ b/src/Styles/main.scss @@ -16,6 +16,8 @@ @import 'Layout/info_section'; @import 'Layout/_map_info_box'; @import 'Layout/_map_info_box2'; +@import 'Layout/_legend'; + // Import other layout partials... // Components