From c34f1232ba3fc6c7423efbfc5866c836034600e9 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 30 Apr 2024 11:06:02 +0545 Subject: [PATCH 1/3] feat(getTaskStatusSyle): getFeatureStatusStyle function add to colorize each building according to feature map status --- .../src/utilfunctions/getTaskStatusStyle.js | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/src/frontend/src/utilfunctions/getTaskStatusStyle.js b/src/frontend/src/utilfunctions/getTaskStatusStyle.js index 59df12f381..818c47b641 100644 --- a/src/frontend/src/utilfunctions/getTaskStatusStyle.js +++ b/src/frontend/src/utilfunctions/getTaskStatusStyle.js @@ -115,4 +115,82 @@ const getTaskStatusStyle = (feature, mapTheme, taskLockedByUser) => { return geojsonStyles[status]; }; +export const getFeatureStatusStyle = (osmId, mapTheme, entityOsmMap) => { + const entity = entityOsmMap?.find((entity) => entity?.osm_id === osmId); + const status = task_priority_str[entity?.status]; + const borderStrokeColor = '#FF0000'; + + const lockedPolygonStyle = createPolygonStyle( + mapTheme.palette.mapFeatureColors.locked_for_mapping_rgb, + borderStrokeColor, + ); + const lockedValidationStyle = createPolygonStyle( + mapTheme.palette.mapFeatureColors.locked_for_validation_rgb, + borderStrokeColor, + ); + const iconStyle = createIconStyle(AssetModules.LockPng); + const redIconStyle = createIconStyle(AssetModules.RedLockPng); + + const geojsonStyles = { + READY: new Style({ + stroke: new Stroke({ + color: borderStrokeColor, + width: 1, + }), + fill: new Fill({ + color: mapTheme.palette.mapFeatureColors.ready_rgb, + }), + }), + LOCKED_FOR_MAPPING: [lockedPolygonStyle, iconStyle], + MAPPED: new Style({ + stroke: new Stroke({ + color: borderStrokeColor, + width: 1, + }), + fill: new Fill({ + color: mapTheme.palette.mapFeatureColors.mapped_rgb, + }), + }), + LOCKED_FOR_VALIDATION: [lockedValidationStyle, redIconStyle], + + VALIDATED: new Style({ + stroke: new Stroke({ + color: borderStrokeColor, + width: 1, + }), + fill: new Fill({ + color: mapTheme.palette.mapFeatureColors.validated_rgb, + }), + }), + INVALIDATED: new Style({ + stroke: new Stroke({ + color: borderStrokeColor, + width: 1, + }), + fill: new Fill({ + color: mapTheme.palette.mapFeatureColors.invalidated_rgb, + }), + }), + BAD: new Style({ + stroke: new Stroke({ + color: borderStrokeColor, + width: 1, + }), + fill: new Fill({ + color: mapTheme.palette.mapFeatureColors.bad_rgb, + }), + }), + SPLIT: new Style({ + stroke: new Stroke({ + color: borderStrokeColor, + width: 1, + }), + fill: new Fill({ + color: mapTheme.palette.mapFeatureColors.split_rgb, + }), + }), + }; + return geojsonStyles[status]; +}; + export default getTaskStatusStyle; From 8628b363e29f66209c3d4ef93fb6e4575ad131a2 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 30 Apr 2024 11:07:23 +0545 Subject: [PATCH 2/3] feat(projectDetailsV2): getFeatureStatusStyle function call to set style of each feature --- src/frontend/src/views/ProjectDetailsV2.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx index 641d444472..7eb1615d52 100644 --- a/src/frontend/src/views/ProjectDetailsV2.tsx +++ b/src/frontend/src/views/ProjectDetailsV2.tsx @@ -27,8 +27,7 @@ import LayerSwitcherControl from '@/components/MapComponent/OpenLayersComponent/ import MapControlComponent from '@/components/ProjectDetailsV2/MapControlComponent'; import { VectorLayer } from '@/components/MapComponent/OpenLayersComponent/Layers'; import { geojsonObjectModel } from '@/constants/geojsonObjectModal'; -import getTaskStatusStyle from '@/utilfunctions/getTaskStatusStyle'; -import { defaultStyles } from '@/components/MapComponent/OpenLayersComponent/helpers/styleUtils'; +import getTaskStatusStyle, { getFeatureStatusStyle } from '@/utilfunctions/getTaskStatusStyle'; import MapLegends from '@/components/MapLegends'; import Accordion from '@/components/common/Accordion'; import AsyncPopup from '@/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup'; @@ -84,6 +83,7 @@ const Home = () => { const taskModalStatus = CoreModules.useAppSelector((state) => state.project.taskModalStatus); const projectOpfsBasemapPath = useAppSelector((state) => state?.project?.projectOpfsBasemapPath); const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails); + const entityOsmMap = useAppSelector((state) => state?.project?.entityOsmMap); useEffect(() => { if (state.projectInfo.title) { @@ -247,12 +247,6 @@ const Home = () => { // } }; - const buildingStyle = { - ...defaultStyles, - lineColor: '#FF0000', - fillOpacity: '0', - }; - useEffect(() => { if (mobileFooterSelection !== '') { dispatch(ProjectActions.ToggleGenerateMbTilesModalStatus(false)); @@ -492,7 +486,9 @@ const Home = () => { { + return getFeatureStatusStyle(feature?.getProperties()?.osm_id, mapTheme, entityOsmMap); + }} viewProperties={{ size: map?.getSize(), padding: [50, 50, 50, 50], From b4d99505a6cfb9c0c774dd1635921b7ec74d1c25 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 30 Apr 2024 11:09:54 +0545 Subject: [PATCH 3/3] refactor(projectDetailsV2): remove unused variables --- src/frontend/src/views/ProjectDetailsV2.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx index 7eb1615d52..a9ea99e9cb 100644 --- a/src/frontend/src/views/ProjectDetailsV2.tsx +++ b/src/frontend/src/views/ProjectDetailsV2.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'; import '../../node_modules/ol/ol.css'; import '../styles/home.scss'; import WindowDimension from '@/hooks/WindowDimension'; -// import MapDescriptionComponents from '@/components/MapDescriptionComponents'; import ActivitiesPanel from '@/components/ProjectDetailsV2/ActivitiesPanel'; import { ProjectById, GetProjectDashboard, GetEntityInfo } from '@/api/Project'; import { ProjectActions } from '@/store/slices/ProjectSlice'; @@ -11,7 +10,6 @@ import OnScroll from '@/hooks/OnScroll'; import { HomeActions } from '@/store/slices/HomeSlice'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; -import FmtmLogo from '@/assets/images/hotLog.png'; import GenerateBasemap from '@/components/GenerateBasemap'; import TaskSelectionPopup from '@/components/ProjectDetailsV2/TaskSelectionPopup'; import FeatureSelectionPopup from '@/components/ProjectDetailsV2/FeatureSelectionPopup'; @@ -34,7 +32,6 @@ import AsyncPopup from '@/components/MapComponent/OpenLayersComponent/AsyncPopup import Button from '@/components/common/Button'; import ProjectInfo from '@/components/ProjectDetailsV2/ProjectInfo'; import useOutsideClick from '@/hooks/useOutsideClick'; -import { dataExtractPropertyType } from '@/models/project/projectModel'; import { isValidUrl } from '@/utilfunctions/urlChecker'; import { useAppSelector } from '@/types/reduxTypes'; import Comments from '@/components/ProjectDetailsV2/Comments'; @@ -51,7 +48,7 @@ const Home = () => { const dispatch = CoreModules.useAppDispatch(); const params = CoreModules.useParams(); const navigate = useNavigate(); - const { windowSize, type } = WindowDimension(); + const { windowSize } = WindowDimension(); const [divRef, toggle, handleToggle] = useOutsideClick(); const [mainView, setView] = useState(); @@ -60,14 +57,8 @@ const Home = () => { const [dataExtractUrl, setDataExtractUrl] = useState(null); const [dataExtractExtent, setDataExtractExtent] = useState(null); const [taskBoundariesLayer, setTaskBoundariesLayer] = useState>(null); - const [currentCoordinate, setCurrentCoordinate] = useState<{ latitude: null | number; longitude: null | number }>({ - latitude: null, - longitude: null, - }); // Can pass a File object, or a string URL to be read by PMTiles const [customBasemapData, setCustomBasemapData] = useState(); - const [positionGeojson, setPositionGeojson] = useState(null); - const [deviceRotation, setDeviceRotation] = useState(0); const [viewState, setViewState] = useState('project_info'); const projectId: string = params.id; const defaultTheme = useAppSelector((state) => state.theme.hotTheme);