Skip to content

Commit

Permalink
feat (frontend: colour features based on entity mapping status (#1500)
Browse files Browse the repository at this point in the history 
* feat(getTaskStatusSyle): getFeatureStatusStyle function add to colorize each building according to feature map status

* feat(projectDetailsV2): getFeatureStatusStyle function call to set style of each feature

* refactor(projectDetailsV2): remove unused variables
  • Loading branch information
@NSUWAL123
NSUWAL123 authored Apr 30, 2024
1 parent ae54c4d commit 5d9cd84
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 19 deletions.
78 changes: 78 additions & 0 deletions src/frontend/src/utilfunctions/getTaskStatusStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
25 changes: 6 additions & 19 deletions src/frontend/src/views/ProjectDetailsV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -27,15 +25,13 @@ 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';
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';
Expand All @@ -52,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<any>();
Expand All @@ -61,14 +57,8 @@ const Home = () => {
const [dataExtractUrl, setDataExtractUrl] = useState(null);
const [dataExtractExtent, setDataExtractExtent] = useState(null);
const [taskBoundariesLayer, setTaskBoundariesLayer] = useState<null | Record<string, any>>(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<File | string>();
const [positionGeojson, setPositionGeojson] = useState<any>(null);
const [deviceRotation, setDeviceRotation] = useState(0);
const [viewState, setViewState] = useState('project_info');
const projectId: string = params.id;
const defaultTheme = useAppSelector((state) => state.theme.hotTheme);
Expand All @@ -84,6 +74,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) {
Expand Down Expand Up @@ -247,12 +238,6 @@ const Home = () => {
// }
};

const buildingStyle = {
...defaultStyles,
lineColor: '#FF0000',
fillOpacity: '0',
};

useEffect(() => {
if (mobileFooterSelection !== '') {
dispatch(ProjectActions.ToggleGenerateMbTilesModalStatus(false));
Expand Down Expand Up @@ -492,7 +477,9 @@ const Home = () => {
<VectorLayer
fgbUrl={dataExtractUrl}
fgbExtent={dataExtractExtent}
style={buildingStyle}
getTaskStatusStyle={(feature) => {
return getFeatureStatusStyle(feature?.getProperties()?.osm_id, mapTheme, entityOsmMap);
}}
viewProperties={{
size: map?.getSize(),
padding: [50, 50, 50, 50],
Expand Down

0 comments on commit 5d9cd84

Please sign in to comment.