Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Colour features based on entity mapping status #1500

Merged
merged 3 commits into from
Apr 30, 2024
Merged

Colour features based on entity mapping status #1500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c34f123
feat(getTaskStatusSyle): getFeatureStatusStyle function add to colori…
NSUWAL123 Apr 30, 2024
8628b36
feat(projectDetailsV2): getFeatureStatusStyle function call to set st…
NSUWAL123 Apr 30, 2024
b4d9950
refactor(projectDetailsV2): remove unused variables
NSUWAL123 Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions src/frontend/src/utilfunctions/getTaskStatusStyle.js
View file
Open in desktop
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
Open in desktop
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
Loading