add info box
This commit is contained in:
louai98
parent
031e909645
commit
281720d10b
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
import Stack from "react-bootstrap/Stack";
|
||||||
import Card_ from "../../UI/Card_/Card_";
|
import Card_ from "../../UI/Card_/Card_";
|
||||||
import { useAfricaData } from "../../../Context/DataContext";
|
import { useAfricaData } from "../../../Context/DataContext";
|
||||||
|
|
||||||
@ -117,12 +118,12 @@ const international_guidelines = [
|
|||||||
{
|
{
|
||||||
name: "UN Programme of Action",
|
name: "UN Programme of Action",
|
||||||
name2: "UNProgrammeofAction",
|
name2: "UNProgrammeofAction",
|
||||||
icon_eligible: Icon15,
|
icon_eligible: Icon20,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "International Tracing Instrument",
|
name: "International Tracing Instrument",
|
||||||
name2: "InternationalTracingInstrument",
|
name2: "InternationalTracingInstrument",
|
||||||
icon_eligible: Icon15,
|
icon_eligible: Icon16,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -130,7 +131,7 @@ const african_guidelines = [
|
|||||||
{
|
{
|
||||||
name: "Silencing the Guns in Africa Programme of Action",
|
name: "Silencing the Guns in Africa Programme of Action",
|
||||||
name2: "StG-PoA",
|
name2: "StG-PoA",
|
||||||
icon_eligible: Icon15,
|
icon_eligible: Icon1,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -151,7 +152,7 @@ const DetailesSection = (props) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data && countryID != null) {
|
if (data && countryID !== null) {
|
||||||
const foundCountry = data.features.find(
|
const foundCountry = data.features.find(
|
||||||
(item) => item.properties.id === countryID
|
(item) => item.properties.id === countryID
|
||||||
);
|
);
|
||||||
@ -162,16 +163,42 @@ const DetailesSection = (props) => {
|
|||||||
);
|
);
|
||||||
setSelectedRegionalOrganisations(regionalOrgs);
|
setSelectedRegionalOrganisations(regionalOrgs);
|
||||||
|
|
||||||
const regionalTreats = regional_treaties.filter(
|
const regionalTreats = regional_treaties
|
||||||
(item) => foundCountry.properties[item.name2] != "0"
|
.filter((item) => foundCountry.properties[item.name2] !== "0")
|
||||||
|
.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
state: foundCountry.properties[item.name2],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const internationalTreats = international_treaties
|
||||||
|
.filter((item) => foundCountry.properties[item.name2] !== "0")
|
||||||
|
.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
state: foundCountry.properties[item.name2],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const internationalGuidelines = international_guidelines.filter(
|
||||||
|
(item) => foundCountry.properties[item.name2] === 1
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const africanGuidelines = african_guidelines.filter(
|
||||||
|
(item) => foundCountry.properties[item.name2] === 1
|
||||||
|
);
|
||||||
|
|
||||||
setSelectedRegionalTreaties(regionalTreats);
|
setSelectedRegionalTreaties(regionalTreats);
|
||||||
|
setSelectedInternationalTreaties(internationalTreats);
|
||||||
|
setSelectedInternationalGuidelines(internationalGuidelines);
|
||||||
|
setSelectedAfricanGuidelines(africanGuidelines);
|
||||||
}
|
}
|
||||||
}, [data, countryID]);
|
}, [data, countryID]);
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
console.log(selectedRegionalTreaties);
|
// console.log(selectedAfricanGuidelines)
|
||||||
}, [selectedRegionalTreaties]);
|
// }, [selectedAfricanGuidelines]);
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return <div>Loading...</div>;
|
return <div>Loading...</div>;
|
||||||
@ -186,7 +213,7 @@ const DetailesSection = (props) => {
|
|||||||
<div>
|
<div>
|
||||||
<h2>{selectedCountry.properties.name}</h2>
|
<h2>{selectedCountry.properties.name}</h2>
|
||||||
<p>
|
<p>
|
||||||
Regional Organisations:{" "}
|
<strong>Regional Organisations: </strong>
|
||||||
{selectedRegionalOrganisations.map((item) => {
|
{selectedRegionalOrganisations.map((item) => {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
@ -198,20 +225,114 @@ const DetailesSection = (props) => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</p>
|
</p>
|
||||||
<p>Regional Treaties:
|
<table className="table-sm table-bordered">
|
||||||
{selectedRegionalTreaties.map((item) => {
|
<tr>
|
||||||
return (
|
<td>
|
||||||
<span
|
<strong>Regional Treaties: </strong>
|
||||||
key={item.name}
|
</td>
|
||||||
>
|
<td>
|
||||||
{item.name}
|
<table className="table">
|
||||||
</span>
|
{selectedRegionalTreaties.map((item) => {
|
||||||
);
|
return (
|
||||||
})}
|
<tr key={item.name}>
|
||||||
</p>
|
<td>{item.name}</td>
|
||||||
<p>International Treaties: </p>
|
<td>{item.state}</td>
|
||||||
<p>International Guidelines & Instruments: </p>
|
<td>
|
||||||
<p>African Guidelines & Instrumentss: </p>
|
<img
|
||||||
|
title={item.name}
|
||||||
|
src={item["icon_" + item.state.toLowerCase()]}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="section-icon"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>International Treaties: </strong>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<table className="table">
|
||||||
|
{selectedInternationalTreaties.map((item) => {
|
||||||
|
return (
|
||||||
|
<tr key={item.name}>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td>{item.state}</td>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
title={item.name}
|
||||||
|
src={item["icon_" + item.state.toLowerCase()]}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="section-icon"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>International Guidelines & Instruments: </strong>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<table className="table">
|
||||||
|
{selectedInternationalGuidelines.map((item) => {
|
||||||
|
return (
|
||||||
|
<tr key={item.name}>
|
||||||
|
<td>
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
title={item.name}
|
||||||
|
src={item["icon_eligible"]}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="section-icon"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>African Guidelines & Instrumentss: </strong>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<table className="table">
|
||||||
|
{selectedAfricanGuidelines.map((item) => {
|
||||||
|
return (
|
||||||
|
<tr key={item.name}>
|
||||||
|
<td>
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
title={item.name}
|
||||||
|
src={item["icon_eligible"]}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="section-icon"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card_>
|
</Card_>
|
||||||
|
|||||||
179
src/Components/Layout/ControlInAfrica/MapInfoBox.jsx
Normal file
179
src/Components/Layout/ControlInAfrica/MapInfoBox.jsx
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const MapInfoBox = (props) => {
|
||||||
|
const regional_treaties = props.info.organisationsRegionalTreaties;
|
||||||
|
const international_treaties = props.info.organisationsInternationalTreaties;
|
||||||
|
const instruments = props.info.organisationsInstruments;
|
||||||
|
console.log(regional_treaties);
|
||||||
|
return (
|
||||||
|
<div className={props.className}>
|
||||||
|
<h3>{props.selectedRegion}</h3>
|
||||||
|
<p>Number of countries</p>
|
||||||
|
<div className="table-responsive-sm">
|
||||||
|
<table className="table table-sm table-striped">
|
||||||
|
<tr>
|
||||||
|
<th className="text-center" scope="col"></th>
|
||||||
|
<th className="text-center" scope="col">
|
||||||
|
Signed
|
||||||
|
</th>
|
||||||
|
<th className="text-center" scope="col">
|
||||||
|
Eligible
|
||||||
|
</th>
|
||||||
|
<th className="text-center" scope="col">
|
||||||
|
Ratified
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tbody>
|
||||||
|
{regional_treaties &&
|
||||||
|
regional_treaties.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<tr key={index}>
|
||||||
|
<th scope="row">{item.name}</th>
|
||||||
|
<td
|
||||||
|
className="text-center"
|
||||||
|
style={
|
||||||
|
item.signed
|
||||||
|
? {
|
||||||
|
color: props.selectedCountryColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.signed}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
className="text-center"
|
||||||
|
style={
|
||||||
|
item.eligible
|
||||||
|
? {
|
||||||
|
color: props.selectedCountryColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.eligible}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
className="text-center"
|
||||||
|
style={
|
||||||
|
item.ratified
|
||||||
|
? {
|
||||||
|
color: props.selectedCountryColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.ratified}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{international_treaties &&
|
||||||
|
international_treaties.map((item, index) => {
|
||||||
|
return (
|
||||||
|
<tr key={index}>
|
||||||
|
<th scope="row">{item.name}</th>
|
||||||
|
<td
|
||||||
|
className="text-center"
|
||||||
|
style={
|
||||||
|
item.signed
|
||||||
|
? {
|
||||||
|
color: props.selectedCountryColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.signed}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
className="text-center"
|
||||||
|
style={
|
||||||
|
item.eligible
|
||||||
|
? {
|
||||||
|
color: props.selectedCountryColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.eligible}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
className="text-center"
|
||||||
|
style={
|
||||||
|
item.ratified
|
||||||
|
? {
|
||||||
|
color: props.selectedCountryColor,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{item.ratified}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{instruments &&
|
||||||
|
instruments.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>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MapInfoBox;
|
||||||
|
|
||||||
|
//{regional_treaties &&
|
||||||
|
// regional_treaties.map((item, index) => {
|
||||||
|
// return (
|
||||||
|
// <div key={index}>
|
||||||
|
// <p>
|
||||||
|
// <strong>{item.name}</strong> Signed: {item.signed}, Eligible:{" "}
|
||||||
|
// {item.eligible}, Ratified: {item.ratified}
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// })}
|
||||||
|
// {international_treaties &&
|
||||||
|
// international_treaties.map((item, index) => {
|
||||||
|
// return (
|
||||||
|
// <div key={index}>
|
||||||
|
// <p>
|
||||||
|
// <strong>{item.name}</strong> Signed: {item.signed}, Eligible:{" "}
|
||||||
|
// {item.eligible}, Ratified: {item.ratified}
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// })}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,6 @@
|
|||||||
.filters-box {
|
.filters-box {
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
|
border: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// _organizations
|
// _organizations
|
||||||
|
|||||||
4
src/Styles/Layout/_info_section.scss
Normal file
4
src/Styles/Layout/_info_section.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.section-icon{
|
||||||
|
width: $icon-size-large;
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
.map-filter-box {
|
.map-filter-box {
|
||||||
border: 1px solid $border-color;
|
// border: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-container {
|
.leaflet-container {
|
||||||
@ -7,7 +7,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.map-container {
|
.map-container {
|
||||||
|
border: 1px solid $border-color;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
12
src/Styles/Layout/_map_info_box.scss
Normal file
12
src/Styles/Layout/_map_info_box.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.info-box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 1000;
|
||||||
|
//width: 250px;
|
||||||
|
}
|
||||||
@ -13,6 +13,8 @@
|
|||||||
@import 'Layout/map';
|
@import 'Layout/map';
|
||||||
@import 'Layout/tooltips';
|
@import 'Layout/tooltips';
|
||||||
@import 'Layout/map_pssm';
|
@import 'Layout/map_pssm';
|
||||||
|
@import 'Layout/info_section';
|
||||||
|
@import 'Layout/_map_info_box';
|
||||||
// Import other layout partials...
|
// Import other layout partials...
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
|||||||
82
src/tmp/code.txt
Normal file
82
src/tmp/code.txt
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
{(feature.properties[org.name2] === "Eligible" && (
|
||||||
|
<img title="{org.name}" src="{org.icon_eligible}" alt="" srcset="" />
|
||||||
|
)) || (feature.properties[org.name2] === "Signed" && (
|
||||||
|
<img title="{org.name}" src="{org.icon_signed}" alt="" srcset="" />
|
||||||
|
)) || (feature.properties[org.name2] === "Ratified" && (
|
||||||
|
<img title="{org.name}" src="{org.icon_ratified}" alt="" srcset="" />
|
||||||
|
))}
|
||||||
|
|
||||||
|
|
||||||
|
{(feature.properties[org.name2] ===
|
||||||
|
"Eligible" && (
|
||||||
|
<img
|
||||||
|
title={org.name}
|
||||||
|
src={org.icon_eligible}
|
||||||
|
alt=""
|
||||||
|
srcSet=""
|
||||||
|
/>
|
||||||
|
)) ||
|
||||||
|
(feature.properties[org.name2] === "Signed" && (
|
||||||
|
<img
|
||||||
|
title={org.name}
|
||||||
|
src={org.icon_signed}
|
||||||
|
alt=""
|
||||||
|
srcSet=""
|
||||||
|
/>
|
||||||
|
)) ||
|
||||||
|
(feature.properties[org.name2] ===
|
||||||
|
"Ratified" && (
|
||||||
|
<img
|
||||||
|
title={org.name}
|
||||||
|
src={org.icon_ratified}
|
||||||
|
alt=""
|
||||||
|
srcSet=""
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Stack gap="4" direction="horizontal" className="">
|
||||||
|
<strong>Regional Treaties: </strong>
|
||||||
|
<table className="table">
|
||||||
|
{selectedRegionalTreaties.map((item) => {
|
||||||
|
return (
|
||||||
|
<tr key={item.name}>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td>{item.state}</td>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
title={item.name}
|
||||||
|
src={item["icon_" + item.state.toLowerCase()]}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="section_icon"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</table>
|
||||||
|
</Stack>
|
||||||
|
<Stack gap="4" direction="horizontal" className="">
|
||||||
|
<strong>International Treaties: </strong>
|
||||||
|
<table className="table table-border">
|
||||||
|
{selectedInternationalTreaties.map((item) => {
|
||||||
|
return (
|
||||||
|
<tr key={item.name}>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td>{item.state}</td>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
title={item.name}
|
||||||
|
src={item["icon_" + item.state.toLowerCase()]}
|
||||||
|
alt=""
|
||||||
|
srcSet="No Image"
|
||||||
|
className="section_icon"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</table>
|
||||||
|
</Stack>
|
||||||
Loading…
Reference in New Issue
Block a user