From a14bc4e73a381c7250658ca92d5168ffacf2744a Mon Sep 17 00:00:00 2001 From: Khaled Elagamy Date: Tue, 19 Aug 2025 09:24:29 +0300 Subject: [PATCH] Add cityID in creation and update and edit some graphics in the map --- .../src/redux/actions/dataCenter/index.js | 14 +++ sge-frontend/src/views/DataCenter.js | 57 +++++---- .../src/views/DataCenterManagement.js | 5 +- .../src/views/DataSet/MainDataTables.js | 26 ++--- sge-frontend/src/views/Map.js | 108 ++++++++++++++++-- 5 files changed, 158 insertions(+), 52 deletions(-) diff --git a/sge-frontend/src/redux/actions/dataCenter/index.js b/sge-frontend/src/redux/actions/dataCenter/index.js index a8df393..dba7253 100644 --- a/sge-frontend/src/redux/actions/dataCenter/index.js +++ b/sge-frontend/src/redux/actions/dataCenter/index.js @@ -45,6 +45,10 @@ export const getDataCenters = () => { name } } + city { + id + name + } emissionScope { id tag @@ -201,6 +205,10 @@ export const createDataCenter = (dataCenterData) => { name } } + city { + id + name + } emissionScope { id tag @@ -241,6 +249,7 @@ export const createDataCenter = (dataCenterData) => { ayposURL: dataCenterData.ayposURL || "", number: parseInt(dataCenterData.number) || 1, areaId: dataCenterData.areaId || null, + cityId: dataCenterData.cityId || null, address: dataCenterData.address || "", latitude: dataCenterData.latitude ? parseFloat(dataCenterData.latitude) @@ -331,6 +340,10 @@ export const updateDataCenter = (id, dataCenterData) => { name } } + city { + id + name + } emissionScope { id tag @@ -372,6 +385,7 @@ export const updateDataCenter = (id, dataCenterData) => { ayposURL: dataCenterData.ayposURL || "", number: parseInt(dataCenterData.number) || 1, areaId: dataCenterData.areaId || null, + cityId: dataCenterData.cityId || null, address: dataCenterData.address || "", latitude: dataCenterData.latitude ? parseFloat(dataCenterData.latitude) diff --git a/sge-frontend/src/views/DataCenter.js b/sge-frontend/src/views/DataCenter.js index 374b2be..c867941 100644 --- a/sge-frontend/src/views/DataCenter.js +++ b/sge-frontend/src/views/DataCenter.js @@ -20,15 +20,14 @@ const DataCenter = () => { const getAllPhysicalMachines = (dataCenter) => { // Physical machines are directly in the dataCenter object, not in projects const pms = dataCenter.physicalMachines || []; - console.log(`Physical machines for ${dataCenter.dataCenter}:`, pms); return pms; }; // Table columns following your pattern const initialColumns = [ { - name: "Number", - selector: (row) => row.number, + name: "External ID", + selector: (row) => row.externalId, sortable: true, minWidth: "100px", }, @@ -39,32 +38,32 @@ const DataCenter = () => { minWidth: "200px", }, // Projects - Based on API response, this field might not exist or be structured differently - { - name: "Projects", - selector: (row) => row.projects?.length || 0, - sortable: true, - minWidth: "200px", - cell: (row) => ( -
- {row.projects && row.projects.length > 0 ? ( -
- {row.projects.map((project, index) => ( -
0 ? "mt-1" : "" - }`} - > - {project.name} -
- ))} -
- ) : ( - - - )} -
- ), - }, + // { + // name: "Projects", + // selector: (row) => row.projects?.length || 0, + // sortable: true, + // minWidth: "200px", + // cell: (row) => ( + //
+ // {row.projects && row.projects.length > 0 ? ( + //
+ // {row.projects.map((project, index) => ( + //
0 ? "mt-1" : "" + // }`} + // > + // {project.name} + //
+ // ))} + //
+ // ) : ( + // - + // )} + //
+ // ), + // }, // Physical Machines { name: "Physical Machines", diff --git a/sge-frontend/src/views/DataCenterManagement.js b/sge-frontend/src/views/DataCenterManagement.js index 4cbe2c1..964684f 100644 --- a/sge-frontend/src/views/DataCenterManagement.js +++ b/sge-frontend/src/views/DataCenterManagement.js @@ -412,11 +412,11 @@ const DataCenterManagement = () => { number: row.number?.toString(), address: row.address || "", areaId: row.area?.id || null, - cityId: null, + cityId: row.city?.id || null, latitude: row.latitude, longitude: row.longitude, ayposURL: row.ayposURL || "", - city: row.city || "", + city: row.city?.name || "", emissionScopeId: row.emissionScope?.id || null, sectorId: row.sector?.id || null, subSectorId: row.subSector?.id || null, @@ -611,6 +611,7 @@ const DataCenterManagement = () => { number: parseInt(selectedDataCenter.number || "1"), address: selectedDataCenter.address, areaId: selectedDataCenter.areaId, + cityId: selectedDataCenter.cityId, latitude: selectedDataCenter.latitude ? parseFloat(selectedDataCenter.latitude) : null, diff --git a/sge-frontend/src/views/DataSet/MainDataTables.js b/sge-frontend/src/views/DataSet/MainDataTables.js index f21e959..e772f2c 100644 --- a/sge-frontend/src/views/DataSet/MainDataTables.js +++ b/sge-frontend/src/views/DataSet/MainDataTables.js @@ -95,17 +95,6 @@ function MainDataTables() { size: 150, Cell: ({ cell }) => {editNumbers(cell.getValue()) || "-"}, }, - { - header: t("Created Date"), - accessorKey: "createdDate", - size: 180, - Cell: ({ cell }) => ( - - {cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"} - - ), - sortable: true, - }, { header: t("Physical Machine"), accessorKey: "physicalMachine", @@ -142,6 +131,17 @@ function MainDataTables() { size: 100, Cell: ({ cell }) => {editNumbers(cell.getValue()) || "-"}, }, + { + header: t("Created Date"), + accessorKey: "createdDate", + size: 180, + Cell: ({ cell }) => ( + + {cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"} + + ), + sortable: true, + }, ], [t] ); @@ -209,7 +209,7 @@ function MainDataTables() { enableFilters={true} enableGlobalFilter={true} enablePagination={true} - enableColumnResizing={false} // Disable resizing for better performance + enableColumnResizing={true} // Disable resizing for better performance enableStickyHeader={true} enableRowVirtualization={true} // Enable virtualization for large datasets enableColumnVirtualization={false} // Keep columns visible @@ -248,7 +248,7 @@ function MainDataTables() { }} // Disable features that can slow down large tables enableRowSelection={false} - enableColumnOrdering={false} + enableColumnOrdering={true} enableColumnDragging={false} enableDensityToggle={false} enableFullScreenToggle={false} diff --git a/sge-frontend/src/views/Map.js b/sge-frontend/src/views/Map.js index 5fb9b2b..5b7ec2d 100644 --- a/sge-frontend/src/views/Map.js +++ b/sge-frontend/src/views/Map.js @@ -41,6 +41,78 @@ import { ChromePicker } from "react-color"; import { customFilterForSelect } from "../utility/Utils"; import { permissionCheck } from "../components/permission-check"; import { getDataCenters } from "../redux/actions/dataCenter"; +import L from "leaflet"; + +// Custom data center icon +const dataCenterIcon = new L.Icon({ + iconUrl: + "data:image/svg+xml;base64," + + btoa(` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `), + iconSize: [48, 48], + iconAnchor: [18, 36], + popupAnchor: [0, -36], +}); const ColorPicker = ({ selectedColors, setSelectedColors, index }) => { const [showColorPicker, setShowColorPicker] = useState(false); @@ -627,10 +699,25 @@ const Map = () => { if (!dc.latitude || !dc.longitude) return null; return ( - +
-
{dc.dataCenter}
+
{dc.dataCenter}
+
+

+ {t("DataCenter.city")}:{" "} + {dc.city?.name || "-"} +

+ {dc.address && ( +

+ {t("Address")}: {dc.address} +

+ )} +

{t("DataCenter.number")}: {dc.number}

@@ -638,20 +725,25 @@ const Map = () => { {t("DataCenter.externalId")}:{" "} {dc.externalId}

-

- {t("DataCenter.city")}:{" "} - {dc.area?.cities?.map((city) => city.name).join(", ") || - "-"} -

{dc.area && (

{t("Area")}: {dc.area.tag}

)} + {dc.physicalMachines?.length > 0 && ( +

+ {t("Physical Machines")}:{" "} + + {dc.physicalMachines.length} + +

+ )} {dc.dataCenterEmissionSources?.length > 0 && (

{t("EmissionSources.emissionSources")}:{" "} - {dc.dataCenterEmissionSources.length} + + {dc.dataCenterEmissionSources.length} +

)} {dc.ayposURL && (