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

city, graphics page, errors on graphics still

Browse Source
This commit is contained in:
The-Coding-Kiddo
2025-07-27 21:10:01 +03:00
parent 972c62a1c0
commit bc22bc8a9b
7 changed files with 1654 additions and 1033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
src/views/DataCenterManagement.js
View File

@@ -31,6 +31,8 @@ import withReactContent from "sweetalert2-react-content";
import { getDataCenters, createDataCenter, updateDataCenter, deleteDataCenter } from "../redux/actions/dataCenter";
import { useTranslation } from "react-i18next";
import { getAreas } from "../redux/actions/areas";
import { getSectors, getSectorById, getSubSectorById, getConsuptionUnits } from "../redux/actions/datas";
import { getAllEmissionSources } from "../redux/actions/emissionSources";
import { permissionCheck } from "../components/permission-check";
import { customFilterForSelect } from "../utility/Utils";
import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
@@ -107,14 +109,33 @@ const DataCenterManagement = () => {
address: "",
latitude: null,
longitude: null,
ayposURL: ""
ayposURL: "",
city: "",
emissionScopeId: null,
sectorId: null,
subSectorId: null,
emissionSourceId: null,
consuptionUnitId: null,
activitySubUnitId: null
});
const [mapPosition, setMapPosition] = useState(null);
const dataCenterStore = useSelector((state) => state.dataCenter);
const areasStore = useSelector((state) => state.areas);
const datasStore = useSelector((state) => state.datas);
const emissionSourceStore = useSelector((state) => state.emissionSources);
const [areasOptions, setAreasOptions] = useState([]);
const [sectorsOptions, setSectorsOptions] = useState([]);
const [subSectorsOptions, setSubSectorsOptions] = useState([]);
const [emissionSourcesOptions, setEmissionSourcesOptions] = useState([]);
const [consuptionUnitsOptions, setConsuptionUnitsOptions] = useState([]);
const [activitySubUnitsOptions, setActivitySubUnitsOptions] = useState([]);
const [emissionScopesOptions, setEmissionScopesOptions] = useState([]);
// Add state for selected sector and sub sector like in data input
const [selectedSector, setSelectedSector] = useState(null);
const [selectedSubSector, setSelectedSubSector] = useState(null);
const [editingDataCenter, setEditingDataCenter] = useState(null);
@@ -205,6 +226,7 @@ const DataCenterManagement = () => {
useEffect(() => {
dispatch(getDataCenters());
dispatch(getAreas());
dispatch(getSectors());
}, [dispatch]);
useEffect(() => {
@@ -216,6 +238,96 @@ const DataCenterManagement = () => {
);
}, [areasStore]);
useEffect(() => {
setSectorsOptions(
datasStore?.sectors?.map((sector) => ({
value: sector?.id,
label: sector?.tag,
}))
);
}, [datasStore?.sectors]);
useEffect(() => {
setSubSectorsOptions([]);
setSubSectorsOptions(
datasStore?.sector?.subSectors?.map((subSector) => ({
value: subSector?.id,
label: subSector?.tag,
}))
);
}, [datasStore?.sector]);
useEffect(() => {
setActivitySubUnitsOptions(
datasStore?.subSector?.activitySubUnits?.map((activitySubUnit) => ({
value: activitySubUnit?.id,
label: activitySubUnit?.tag,
}))
);
}, [datasStore?.subSector]);
useEffect(() => {
setEmissionSourcesOptions(
emissionSourceStore?.emissionSources
?.filter((source) => source.convertUnitCheck != false)
?.map((source) => ({
value: source?.id,
label: source?.tag,
}))
);
}, [emissionSourceStore?.emissionSources]);
useEffect(() => {
if (selectedDataCenter?.emissionSourceId) {
dispatch(
getConsuptionUnits({
id: selectedDataCenter?.emissionSourceId,
sector: selectedDataCenter?.sectorId,
})
);
}
}, [selectedDataCenter?.emissionSourceId]);
useEffect(() => {
if (selectedSubSector != null) {
dispatch(getAllEmissionSources(selectedSubSector));
}
}, [selectedSubSector]);
useEffect(() => {
if (selectedSector != null) {
dispatch(getSectorById(selectedSector));
}
}, [selectedSector]);
useEffect(() => {
if (selectedSubSector != null) {
dispatch(getSubSectorById(selectedSubSector));
}
}, [selectedSubSector]);
useEffect(() => {
setConsuptionUnitsOptions(
datasStore?.consuptionUnits?.map((consuptionUnit) => ({
value: consuptionUnit?.unit?.id,
label: consuptionUnit?.unit?.description,
}))
);
}, [datasStore?.consuptionUnits]);
useEffect(() => {
setEmissionScopesOptions([
{
label: "Şehir İçi",
value: false,
},
{
label: "Şehir Dışı",
value: true,
},
]);
}, []);
const handleEditDataCenter = (row) => {
setEditingDataCenter(row);
setSelectedDataCenter({
@@ -226,8 +338,20 @@ const DataCenterManagement = () => {
address: row.address,
latitude: row.latitude,
longitude: row.longitude,
ayposURL: row.ayposURL
ayposURL: row.ayposURL,
city: row.city,
emissionScopeId: row.emissionScope?.id,
sectorId: row.sector?.id,
subSectorId: row.subSector?.id,
emissionSourceId: row.emissionSource?.id,
consuptionUnitId: row.consuptionUnit?.id,
activitySubUnitId: row.activitySubUnit?.id
});
// Set the selected sector and sub sector for cascading dropdowns
setSelectedSector(row.sector?.id);
setSelectedSubSector(row.subSector?.id);
// Only set map position if we have both address and valid coordinates
setMapPosition(row.address && row.latitude && row.longitude ? [row.latitude, row.longitude] : null);
setShowAddModal(true);
@@ -272,7 +396,14 @@ const DataCenterManagement = () => {
// Ensure number is set for new data centers
const dataToSubmit = {
...selectedDataCenter,
number: selectedDataCenter.number || 1 // Default to 1 if not set
number: selectedDataCenter.number || 1, // Default to 1 if not set
city: selectedDataCenter.city, // Add city to the payload
emissionScopeId: selectedDataCenter.emissionScopeId,
sectorId: selectedDataCenter.sectorId,
subSectorId: selectedDataCenter.subSectorId,
emissionSourceId: selectedDataCenter.emissionSourceId,
consuptionUnitId: selectedDataCenter.consuptionUnitId,
activitySubUnitId: selectedDataCenter.activitySubUnitId
};
if (editingDataCenter) {
@@ -284,12 +415,12 @@ const DataCenterManagement = () => {
await dispatch(createDataCenter(dataToSubmit));
enqueueSnackbar(t("DataCenter.createSuccess"), { variant: "success" });
}
handleCloseModal();
} catch (error) {
console.error("Operation error:", error);
console.error("Submit error:", error);
enqueueSnackbar(
error?.message || (editingDataCenter ? t("DataCenter.updateError") : t("DataCenter.createError")),
error?.message || t("DataCenter.submitError"),
{ variant: "error" }
);
}
@@ -305,7 +436,8 @@ const DataCenterManagement = () => {
address: "",
latitude: null,
longitude: null,
ayposURL: ""
ayposURL: "",
city: ""
});
setMapPosition(null);
setEditingDataCenter(null);
@@ -352,7 +484,7 @@ const DataCenterManagement = () => {
try {
const response = await nominatimAxios.get(`/search?format=json&q=${encodeURIComponent(address)}`);
if (response.data && response.data[0]) {
const { lat, lon } = response.data[0];
const newPosition = [parseFloat(lat), parseFloat(lon)];
@@ -364,7 +496,7 @@ const DataCenterManagement = () => {
}));
return true;
}
// If no results found, clear the coordinates
setMapPosition(null);
setSelectedDataCenter(prev => ({
@@ -393,7 +525,7 @@ const DataCenterManagement = () => {
...prev,
address: newAddress
}));
// If address is empty, clear the coordinates
if (!newAddress.trim()) {
setMapPosition(null);
@@ -488,6 +620,24 @@ const DataCenterManagement = () => {
/>
</FormGroup>
</Col>
<Col sm="6">
<FormGroup>
<Label for="city">{t("DataCenter.city")}</Label>
<Input
type="text"
name="city"
id="city"
placeholder={t("DataCenter.city")}
value={selectedDataCenter.city}
onChange={(e) =>
setSelectedDataCenter({
...selectedDataCenter,
city: e.target.value,
})
}
/>
</FormGroup>
</Col>
<Col sm="12">
<FormGroup>
<Label for="area">{t("DataCenter.area")}</Label>
@@ -536,6 +686,158 @@ const DataCenterManagement = () => {
</div>
</FormGroup>
</Col>
{/* Emission Scope Section */}
<Col sm="12">
<h5 className="mt-3 mb-2 text-primary">Emission Scope Configuration</h5>
</Col>
<Col sm="6">
<FormGroup>
<Label for="emissionScope">Emission Scope</Label>
<Select
id="emissionScope"
name="emissionScope"
placeholder="Select emission scope"
options={emissionScopesOptions}
value={emissionScopesOptions?.find(
(option) => option.value === selectedDataCenter.emissionScopeId
)}
onChange={(option) =>
setSelectedDataCenter({
...selectedDataCenter,
emissionScopeId: option?.value,
})
}
isClearable
filterOption={customFilterForSelect}
/>
</FormGroup>
</Col>
<Col sm="6">
<FormGroup>
<Label for="sector">Sector</Label>
<Select
id="sector"
name="sector"
placeholder="Select sector"
options={sectorsOptions}
value={sectorsOptions?.find(
(option) => option.value === selectedDataCenter.sectorId
)}
onChange={(option) => {
setSelectedSector(option?.value);
setSelectedDataCenter({
...selectedDataCenter,
sectorId: option?.value,
subSectorId: null,
emissionSourceId: null,
consuptionUnitId: null,
activitySubUnitId: null,
});
}}
isClearable
filterOption={customFilterForSelect}
/>
</FormGroup>
</Col>
<Col sm="6">
<FormGroup>
<Label for="subSector">Sub Sector</Label>
<Select
id="subSector"
name="subSector"
placeholder="Select sub sector"
options={subSectorsOptions}
value={subSectorsOptions?.find(
(option) => option.value === selectedDataCenter.subSectorId
)}
onChange={(option) => {
setSelectedSubSector(option?.value);
setSelectedDataCenter({
...selectedDataCenter,
subSectorId: option?.value,
emissionSourceId: null,
consuptionUnitId: null,
activitySubUnitId: null,
});
}}
isClearable
filterOption={customFilterForSelect}
isDisabled={!selectedDataCenter.sectorId}
/>
</FormGroup>
</Col>
<Col sm="6">
<FormGroup>
<Label for="emissionSource">Emission Source</Label>
<Select
id="emissionSource"
name="emissionSource"
placeholder="Select emission source"
options={emissionSourcesOptions}
value={emissionSourcesOptions?.find(
(option) => option.value === selectedDataCenter.emissionSourceId
)}
onChange={(option) => {
setSelectedDataCenter({
...selectedDataCenter,
emissionSourceId: option?.value,
consuptionUnitId: null,
});
}}
isClearable
filterOption={customFilterForSelect}
isDisabled={!selectedDataCenter.subSectorId}
/>
</FormGroup>
</Col>
<Col sm="6">
<FormGroup>
<Label for="consuptionUnit">Consumption Unit</Label>
<Select
id="consuptionUnit"
name="consuptionUnit"
placeholder="Select consumption unit"
options={consuptionUnitsOptions}
value={consuptionUnitsOptions?.find(
(option) => option.value === selectedDataCenter.consuptionUnitId
)}
onChange={(option) => {
setSelectedDataCenter({
...selectedDataCenter,
consuptionUnitId: option?.value,
});
}}
isClearable
filterOption={customFilterForSelect}
isDisabled={!selectedDataCenter.emissionSourceId}
/>
</FormGroup>
</Col>
<Col sm="12">
<FormGroup>
<Label for="activitySubUnit">Activity Sub Unit</Label>
<Select
id="activitySubUnit"
name="activitySubUnit"
placeholder="Select activity sub unit"
options={activitySubUnitsOptions}
value={activitySubUnitsOptions?.find(
(option) => option.value === selectedDataCenter.activitySubUnitId
)}
onChange={(option) => {
setSelectedDataCenter({
...selectedDataCenter,
activitySubUnitId: option?.value,
});
}}
isClearable
filterOption={customFilterForSelect}
isDisabled={!selectedDataCenter.subSectorId}
/>
</FormGroup>
</Col>
<Col sm="12">
<FormGroup>
<Label>{t("DataCenter.location")}</Label>