Abdulbari/sgeUpdated
1
0
Fork 1
forked from BLC/sgeUpdated
Code Pull Requests Actions Activity

Comment not needed orgnization code

Browse Source
This commit is contained in:
Khaled Elagamy
2025-08-18 05:38:39 +03:00
parent d224905ba0
commit dd04a057b1
1 changed files with 83 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
sge-frontend/src/views/Map.js
View File

@@ -32,10 +32,10 @@ import { getCities } from "../redux/actions/cities";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { getCity } from "../redux/actions/city"; import { getCity } from "../redux/actions/city";
import { getDistrict } from "../redux/actions/district"; import { getDistrict } from "../redux/actions/district";
import { // import {
getOrganisations, // getOrganisations,
getOrganisationById, // getOrganisationById,
} from "../redux/actions/organisations"; // } from "../redux/actions/organisations";
import { getAreasWithCriteria } from "../redux/actions/areas"; import { getAreasWithCriteria } from "../redux/actions/areas";
import { ChromePicker } from "react-color"; import { ChromePicker } from "react-color";
import { customFilterForSelect } from "../utility/Utils"; import { customFilterForSelect } from "../utility/Utils";
@@ -117,20 +117,20 @@ const Map = () => {
const citiesStore = useSelector((state) => state.cities); const citiesStore = useSelector((state) => state.cities);
const cityStore = useSelector((state) => state.city); const cityStore = useSelector((state) => state.city);
const districtStore = useSelector((state) => state.district); const districtStore = useSelector((state) => state.district);
const OrganisationsStore = useSelector((state) => state.organizations); // const OrganisationsStore = useSelector((state) => state.organizations);
const areasStore = useSelector((state) => state.areas); const areasStore = useSelector((state) => state.areas);
const dataCenterStore = useSelector((state) => state.dataCenter); const dataCenterStore = useSelector((state) => state.dataCenter);
const [cities, setCities] = useState([]); const [cities, setCities] = useState([]);
const [districts, setDistricts] = useState([]); const [districts, setDistricts] = useState([]);
const [neighborhoods, setNeighborhoods] = useState([]); const [neighborhoods, setNeighborhoods] = useState([]);
const [organizationOptions, setOrganizationOptions] = useState([]); // const [organizationOptions, setOrganizationOptions] = useState([]);
const organizationId = localStorage.getItem("organizationId"); // const organizationId = localStorage.getItem("organizationId");
const roleTag = localStorage.getItem("roleTag"); // const roleTag = localStorage.getItem("roleTag");
const [selectedOrganization, setSelectedOrganization] = useState({ // const [selectedOrganization, setSelectedOrganization] = useState({
label: localStorage.getItem("organizationName"), // label: localStorage.getItem("organizationName"),
value: organizationId, // value: organizationId,
}); // });
const [areasOptions, setAreasOptions] = useState([]); const [areasOptions, setAreasOptions] = useState([]);
const [done, setDone] = useState(false); const [done, setDone] = useState(false);
@@ -146,7 +146,7 @@ const Map = () => {
const [showDataInputModal, setShowDataInputModal] = useState(false); const [showDataInputModal, setShowDataInputModal] = useState(false);
const [inputData, setInputData] = useState({ const [inputData, setInputData] = useState({
organization: selectedOrganization, // organization: selectedOrganization,
}); });
const [referance, setReferance] = useState( const [referance, setReferance] = useState(
Number(localStorage.getItem("referance")) || 1000 Number(localStorage.getItem("referance")) || 1000
@@ -176,15 +176,17 @@ const Map = () => {
dispatch(getDataCenters()); dispatch(getDataCenters());
}, []); }, []);
useEffect(() => { // useEffect(() => {
if (selectedOrganization?.value != "undefined") { // if (selectedOrganization?.value != "undefined") {
dispatch(getAreasWithCriteria(selectedOrganization.value)); // dispatch(getAreasWithCriteria(selectedOrganization.value));
} // }
}, [selectedOrganization]); // }, [selectedOrganization]);
useEffect(() => { useEffect(() => {
setAreasOptions([]); setAreasOptions([]);
// Load all areas without organization filter for now
// You may want to add organization filtering back later if needed
const citiesOptions = const citiesOptions =
areasStore?.areasWithCriteria areasStore?.areasWithCriteria
?.map((area) => ?.map((area) =>
@@ -235,13 +237,13 @@ const Map = () => {
]); ]);
}, [areasStore]); }, [areasStore]);
useEffect(() => { // useEffect(() => {
if (roleTag === "SUPER_ADMIN") { // if (roleTag === "SUPER_ADMIN") {
dispatch(getOrganisations()); // dispatch(getOrganisations());
} else { // } else {
dispatch(getOrganisationById(organizationId)); // dispatch(getOrganisationById(organizationId));
} // }
}, []); // }, []);
const handleDataInputButtonPressed = ({ area, type }) => { const handleDataInputButtonPressed = ({ area, type }) => {
const areaName = const areaName =
@@ -348,38 +350,38 @@ const Map = () => {
}); });
}, [selectedDistrict, districtStore?.district, year.value]); }, [selectedDistrict, districtStore?.district, year.value]);
useEffect(() => { // useEffect(() => {
let organizationOptions = []; // let organizationOptions = [];
if ( // if (
OrganisationsStore.organization && // OrganisationsStore.organization &&
OrganisationsStore.organization.length !== 0 // OrganisationsStore.organization.length !== 0
) { // ) {
organizationOptions.push({ // organizationOptions.push({
value: OrganisationsStore.organization.id, // value: OrganisationsStore.organization.id,
label: OrganisationsStore.organization.tag, // label: OrganisationsStore.organization.tag,
}); // });
if (OrganisationsStore.organization.children) { // if (OrganisationsStore.organization.children) {
organizationOptions = [ // organizationOptions = [
...organizationOptions, // ...organizationOptions,
...OrganisationsStore.organization.children.map((organization) => ({ // ...OrganisationsStore.organization.children.map((organization) => ({
value: organization.child.id, // value: organization.child.id,
label: organization.child.tag, // label: organization.child.tag,
})), // })),
]; // ];
} // }
} else { // } else {
organizationOptions = OrganisationsStore.dataOrganization.map( // organizationOptions = OrganisationsStore.dataOrganization.map(
(organization) => ({ // (organization) => ({
value: organization.id, // value: organization.id,
label: organization.tag, // label: organization.tag,
}) // })
); // );
} // }
setOrganizationOptions(organizationOptions); // setOrganizationOptions(organizationOptions);
}, [OrganisationsStore]); // }, [OrganisationsStore]);
const renderDataInputModal = () => { const renderDataInputModal = () => {
return ( return (
@@ -625,27 +627,38 @@ const Map = () => {
if (!dc.latitude || !dc.longitude) return null; if (!dc.latitude || !dc.longitude) return null;
return ( return (
<Marker <Marker key={dc.id} position={[dc.latitude, dc.longitude]}>
key={dc.id}
position={[dc.latitude, dc.longitude]}
>
<Popup> <Popup>
<div className="data-center-popup"> <div className="data-center-popup">
<h5 className="mb-2">{dc.dataCenter}</h5> <h5 className="mb-2">{dc.dataCenter}</h5>
<p className="mb-1"><strong>{t('DataCenter.number')}:</strong> {dc.number}</p> <p className="mb-1">
<p className="mb-1"><strong>{t('DataCenter.externalId')}:</strong> {dc.externalId}</p> <strong>{t("DataCenter.number")}:</strong> {dc.number}
<p className="mb-1"><strong>{t('DataCenter.city')}:</strong> {dc.area?.cities?.map(city => city.name).join(', ') || "-"}</p> </p>
{dc.area && <p className="mb-1"><strong>{t('Area')}:</strong> {dc.area.tag}</p>} <p className="mb-1">
{dc.projects?.length > 0 && ( <strong>{t("DataCenter.externalId")}:</strong>{" "}
{dc.externalId}
</p>
<p className="mb-1">
<strong>{t("DataCenter.city")}:</strong>{" "}
{dc.area?.cities?.map((city) => city.name).join(", ") ||
"-"}
</p>
{dc.area && (
<p className="mb-1"> <p className="mb-1">
<strong>{t('Projects')}:</strong> {dc.projects.length} <strong>{t("Area")}:</strong> {dc.area.tag}
</p>
)}
{dc.dataCenterEmissionSources?.length > 0 && (
<p className="mb-1">
<strong>{t("EmissionSources")}:</strong>{" "}
{dc.dataCenterEmissionSources.length}
</p> </p>
)} )}
{dc.ayposURL && ( {dc.ayposURL && (
<Button <Button
className="w-100 mb-1" className="w-100 mb-1"
color="primary" color="primary"
onClick={() => window.open(dc.ayposURL, '_blank')} onClick={() => window.open(dc.ayposURL, "_blank")}
> >
Dashboard Dashboard
</Button> </Button>
@@ -699,7 +712,9 @@ const Map = () => {
setDistrictView(true); setDistrictView(true);
setZoom(8.0); setZoom(8.0);
let convertCordinates = convertCoordinates(city.coordinates); let convertCordinates = convertCoordinates(
city.coordinates
);
let length = convertCordinates[0][0][0].length; let length = convertCordinates[0][0][0].length;
let mlength = ((length + 1) / 2).toFixed(0); let mlength = ((length + 1) / 2).toFixed(0);
let lat1 = convertCordinates[0][0][0][0]; let lat1 = convertCordinates[0][0][0][0];
@@ -710,7 +725,7 @@ const Map = () => {
lat: ((lat1 + lat2) / 2).toFixed(2), lat: ((lat1 + lat2) / 2).toFixed(2),
lng: ((lng1 + lng2) / 2).toFixed(2), lng: ((lng1 + lng2) / 2).toFixed(2),
}); });
} },
}} }}
> >
<Tooltip permanent direction="center"> <Tooltip permanent direction="center">