Skip to content

Commit 04691bf

Browse files
shreeyash07frozenhelium
shreeyash07
authored and
frozenhelium
committed
Add geoJson css
1 parent 3ea5e16 commit 04691bf

File tree

9 files changed

+93
-34
lines changed

9 files changed

+93
-34
lines changed

‎manager-dashboard/app/Base/utils/errorTransform.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { internal } from '@togglecorp/toggle-form';
1+
import { nonFieldError } from '@togglecorp/toggle-form';
22
import { listToMap, isDefined, isNotDefined } from '@togglecorp/fujs';
33

44
interface Error {
5-
[internal]?: string | undefined;
5+
[nonFieldError]?: string | undefined;
66
[key: string]: string | Error | undefined;
77
}
88

@@ -53,7 +53,7 @@ function transformObject(errors: ObjectError[] | undefined): Error | undefined {
5353
);
5454

5555
return {
56-
[internal]: finalNonFieldErrors,
56+
[nonFieldError]: finalNonFieldErrors,
5757
...finalFieldErrors,
5858
};
5959
}
@@ -68,7 +68,7 @@ function transformArray(errors: (ArrayError | null)[] | undefined): Error | unde
6868
const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
6969

7070
return {
71-
[internal]: topLevelError?.messages,
71+
[nonFieldError]: topLevelError?.messages,
7272
...listToMap(
7373
memberErrors,
7474
(error) => error.clientId,

‎manager-dashboard/app/components/GeoJsonPreview/index.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
geoJSON,
66
TileLayer,
77
Coords,
8+
StyleFunction,
9+
PointExpression,
810
} from 'leaflet';
911
import { _cs } from '@togglecorp/fujs';
1012

@@ -48,13 +50,17 @@ interface Props {
4850
className?: string;
4951
geoJson: GeoJSON.GeoJSON | undefined;
5052
url?: string | undefined;
53+
previewStyle?: StyleFunction;
54+
boundsPadding?: PointExpression | undefined;
5155
}
5256

5357
function GeoJsonPreview(props: Props) {
5458
const {
5559
className,
5660
geoJson,
5761
url,
62+
previewStyle,
63+
boundsPadding = [0, 0],
5864
} = props;
5965

6066
const mapRef = React.useRef<Map>();
@@ -66,6 +72,7 @@ function GeoJsonPreview(props: Props) {
6672
mapRef.current = createMap(mapContainerRef.current, {
6773
zoomSnap: 0,
6874
scrollWheelZoom: false,
75+
zoomControl: false,
6976
});
7077
}
7178

@@ -91,14 +98,12 @@ function GeoJsonPreview(props: Props) {
9198
);
9299

93100
layer.addTo(mapRef.current);
94-
mapRef.current.zoomControl.remove();
95101
mapRef.current.invalidateSize();
96102
}
97103

98104
return () => {
99105
if (mapRef.current) {
100106
mapRef.current.remove();
101-
mapRef.current.zoomControl.remove();
102107
mapRef.current = undefined;
103108
}
104109
};
@@ -117,14 +122,14 @@ function GeoJsonPreview(props: Props) {
117122
return undefined;
118123
}
119124

120-
const newGeoJson = geoJSON();
125+
const newGeoJson = geoJSON(geoJson, {
126+
style: previewStyle,
127+
});
121128
newGeoJson.addTo(map);
122-
123-
newGeoJson.addData(geoJson);
124129
const bounds = newGeoJson.getBounds();
125130

126131
if (bounds.isValid()) {
127-
map.fitBounds(bounds, { padding: [0, 0] });
132+
map.fitBounds(bounds, { padding: boundsPadding });
128133
}
129134

130135
return () => {
@@ -133,7 +138,12 @@ function GeoJsonPreview(props: Props) {
133138
};
134139
},
135140
// NOTE: adding url as dependency as url will re-create the map
136-
[geoJson, url],
141+
[
142+
geoJson,
143+
url,
144+
previewStyle,
145+
boundsPadding,
146+
],
137147
);
138148

139149
return (

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { PointExpression } from 'leaflet';
23
import { _cs } from '@togglecorp/fujs';
34

45
import MobilePreview from '#components/MobilePreview';
@@ -29,6 +30,18 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
2930
urlB,
3031
} = props;
3132

33+
const previewStyles = React.useCallback(() => (
34+
{
35+
stroke: true,
36+
weight: 0.5,
37+
color: '#ffffff',
38+
fillColor: 'transparent',
39+
fillOpacity: 0.2,
40+
}
41+
), []);
42+
43+
const boundsPadding: PointExpression = [10, 10];
44+
3245
const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
3346

3447
return (
@@ -45,13 +58,17 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
4558
>
4659
<GeoJsonPreview
4760
className={styles.mapPreview}
61+
previewStyle={previewStyles}
4862
geoJson={geoJson}
4963
url={url}
64+
boundsPadding={boundsPadding}
5065
/>
5166
<GeoJsonPreview
5267
className={styles.mapPreview}
68+
previewStyle={previewStyles}
5369
geoJson={geoJson}
5470
url={urlB}
71+
boundsPadding={boundsPadding}
5572
/>
5673
</MobilePreview>
5774
);

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { StyleFunction } from 'leaflet';
23
import { _cs } from '@togglecorp/fujs';
34

45
import MobilePreview from '#components/MobilePreview';
@@ -7,8 +8,9 @@ import { IconKey, iconMap } from '#utils/common';
78

89
import {
910
PartialCustomOptionsType,
10-
FootprintGeoJSON,
1111
colorKeyToColorMap,
12+
FootprintGeoJSON,
13+
FootprintProperties,
1214
} from '../../utils';
1315
import styles from './styles.css';
1416

@@ -21,17 +23,27 @@ interface Props {
2123
icon?: IconKey;
2224
}
2325
url: string | undefined;
24-
customOptionsPreview: PartialCustomOptionsType | undefined;
26+
customOptions: PartialCustomOptionsType | undefined;
2527
}
2628
export default function FootprintGeoJsonPreview(props: Props) {
2729
const {
2830
className,
2931
geoJson,
3032
url,
3133
previewPopUp,
32-
customOptionsPreview,
34+
customOptions,
3335
} = props;
3436

37+
const previewStyles: StyleFunction<FootprintProperties> = React.useCallback(() => (
38+
{
39+
color: '#ffffff',
40+
dashArray: '3',
41+
stroke: true,
42+
weight: 1,
43+
fillColor: 'transparent',
44+
}
45+
), []);
46+
3547
const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
3648

3749
return (
@@ -47,11 +59,12 @@ export default function FootprintGeoJsonPreview(props: Props) {
4759
>
4860
<GeoJsonPreview
4961
className={styles.mapPreview}
62+
previewStyle={previewStyles}
5063
url={url}
5164
geoJson={geoJson}
5265
/>
5366
<div className={styles.options}>
54-
{customOptionsPreview?.map((option) => {
67+
{customOptions?.map((option) => {
5568
const Icon = option.icon
5669
? iconMap[option.icon]
5770
: iconMap.flagOutline;
@@ -69,7 +82,9 @@ export default function FootprintGeoJsonPreview(props: Props) {
6982
),
7083
}}
7184
>
72-
<Icon />
85+
{Icon && (
86+
<Icon />
87+
)}
7388
</div>
7489
</div>
7590
);

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
2+
import { PathOptions, StyleFunction } from 'leaflet';
23
import { _cs } from '@togglecorp/fujs';
34

45
import MobilePreview from '#components/MobilePreview';
56
import GeoJsonPreview from '#components/GeoJsonPreview';
67
import { iconMap, IconKey } from '#utils/common';
78

8-
import { BuildAreaGeoJSON } from '../../utils';
9+
import { BuildAreaGeoJSON, BuildAreaProperties } from '../../utils';
910
import styles from './styles.css';
1011

1112
interface Props {
@@ -27,6 +28,29 @@ function ScenarioGeoJsonPreview(props: Props) {
2728
url,
2829
} = props;
2930

31+
const previewStyles: StyleFunction<BuildAreaProperties> = React.useCallback((feature) => {
32+
const buildAreaPreviewStylesobject: PathOptions = {
33+
color: '#ffffff',
34+
stroke: true,
35+
weight: 0.5,
36+
fillOpacity: 0.2,
37+
};
38+
if (!feature) {
39+
return buildAreaPreviewStylesobject;
40+
}
41+
const referenceColorMap: Record<number, string> = {
42+
0: 'transparent',
43+
1: 'green',
44+
2: 'yellow',
45+
3: 'red',
46+
};
47+
const ref = feature.properties.reference;
48+
return {
49+
...buildAreaPreviewStylesobject,
50+
fillColor: referenceColorMap[ref] || 'transparent',
51+
};
52+
}, []);
53+
3054
const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
3155

3256
return (
@@ -44,6 +68,7 @@ function ScenarioGeoJsonPreview(props: Props) {
4468
className={styles.mapContainer}
4569
geoJson={geoJson}
4670
url={url}
71+
previewStyle={previewStyles}
4772
/>
4873
</MobilePreview>
4974
);

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
.scenario-geo-json-preview {
22
.content {
3-
padding: var(--spacing-extra-large) var(--spacing-medium);
4-
53
.map-container {
64
z-index: 0;
7-
height: var(--height-mobile-preview);
5+
height: var(--height-mobile-preview-builarea-content);
86
}
97
}
108
}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ interface Props {
7979
projectType: ProjectType | undefined;
8080
url: string | undefined;
8181
urlB: string | undefined;
82-
customOptionsPreview: PartialCustomOptionsType | undefined;
82+
customOptions: PartialCustomOptionsType | undefined;
8383
scenarioId: number;
8484
disabled: boolean;
8585
}
@@ -94,7 +94,7 @@ export default function ScenarioPageInput(props: Props) {
9494
url,
9595
projectType,
9696
urlB,
97-
customOptionsPreview,
97+
customOptions,
9898
scenarioId,
9999
disabled,
100100
} = props;
@@ -260,7 +260,8 @@ export default function ScenarioPageInput(props: Props) {
260260
urlB={urlB}
261261
/>
262262
)}
263-
{projectType === (PROJECT_TYPE_BUILD_AREA || PROJECT_TYPE_COMPLETENESS) && (
263+
{((projectType === PROJECT_TYPE_BUILD_AREA)
264+
|| (projectType === PROJECT_TYPE_COMPLETENESS)) && (
264265
// FIXME: Rename this to something more specific
265266
<ScenarioGeoJsonPreview
266267
geoJson={geoJson as BuildAreaGeoJSON | undefined}
@@ -272,8 +273,7 @@ export default function ScenarioPageInput(props: Props) {
272273
<FootprintGeoJsonPreview
273274
geoJson={geoJson as FootprintGeoJSON | undefined}
274275
url={url}
275-
previewPopUp={previewPopUpData}
276-
customOptionsPreview={customOptionsPreview}
276+
customOptions={customOptions}
277277
/>
278278
)}
279279
<SegmentInput

‎manager-dashboard/app/views/NewTutorial/index.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -280,12 +280,6 @@ function NewTutorial(props: Props) {
280280
createdBy: userId,
281281
};
282282

283-
console.log(uploadData);
284-
if (uploadData) {
285-
setTutorialSubmissionStatus('failed');
286-
return;
287-
}
288-
289283
const database = getDatabase();
290284
const tutorialDraftsRef = databaseRef(database, 'v2/tutorialDrafts/');
291285
const newTutorialDraftsRef = await pushToDatabase(tutorialDraftsRef);
@@ -732,7 +726,7 @@ function NewTutorial(props: Props) {
732726
projectType={value.projectType}
733727
onChange={onScenarioFormChange}
734728
error={scenarioError?.[task.scenarioId]}
735-
customOptionsPreview={customOptions}
729+
customOptions={customOptions}
736730
geoJson={value.tutorialTasks}
737731
url={tileServerAUrl}
738732
urlB={tileServerBUrl}

‎manager-dashboard/app/views/NewTutorial/utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export const defaultFootprintCustomOptions: PartialTutorialFormType['customOptio
269269
},
270270
];
271271

272-
interface BuildAreaProperties {
272+
export interface BuildAreaProperties {
273273
reference: number;
274274
screen: number;
275275
// eslint-disable-next-line camelcase
@@ -286,7 +286,7 @@ interface BuildAreaProperties {
286286
// category for completeness?
287287
}
288288

289-
interface FootprintProperties {
289+
export interface FootprintProperties {
290290
id: string;
291291
reference: number;
292292
screen: number;

0 commit comments

Comments
 (0)