Skip to content
This repository was archived by the owner on Apr 3, 2026. It is now read-only.

Commit e7d3367

Browse files
tnagorratnagorra
authored
Merge pull request #896 from mapswipe/dev
Only show instructions for footprint tutorial
2 parents 66b8838 + b74574e commit e7d3367

12 files changed

Lines changed: 269 additions & 266 deletions

File tree

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
TileLayer,
77
Coords,
88
StyleFunction,
9+
PointExpression,
910
} from 'leaflet';
1011
import { _cs } from '@togglecorp/fujs';
1112

@@ -50,6 +51,7 @@ interface Props {
5051
geoJson: GeoJSON.GeoJSON | undefined;
5152
url?: string | undefined;
5253
previewStyle?: StyleFunction;
54+
padding?: PointExpression;
5355
}
5456

5557
function GeoJsonPreview(props: Props) {
@@ -58,6 +60,7 @@ function GeoJsonPreview(props: Props) {
5860
geoJson,
5961
url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
6062
previewStyle,
63+
padding,
6164
} = props;
6265

6366
const mapRef = React.useRef<Map>();
@@ -91,8 +94,6 @@ function GeoJsonPreview(props: Props) {
9194
{
9295
// NOTE: we have a limit of 22
9396
maxZoom: 22,
94-
// attribution: '',
95-
// subdomains: ['a', 'b', 'c'],
9697
},
9798
);
9899

@@ -128,7 +129,7 @@ function GeoJsonPreview(props: Props) {
128129
const bounds = newGeoJson.getBounds();
129130

130131
if (bounds.isValid()) {
131-
map.fitBounds(bounds);
132+
map.fitBounds(bounds, { padding });
132133
}
133134

134135
return () => {
@@ -141,6 +142,7 @@ function GeoJsonPreview(props: Props) {
141142
geoJson,
142143
url,
143144
previewStyle,
145+
padding,
144146
],
145147
);
146148

‎manager-dashboard/app/resources/icons/tap_icon.png‎

-1.4 KB
Binary file not shown.

‎manager-dashboard/app/resources/icons/tick_green_on_white.png‎

1.73 KB
Loading

‎manager-dashboard/app/utils/common.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ import { IconType } from 'react-icons';
3333
import oneTapIcon from '#resources/icons/1_Tap_Black.png';
3434
import twoTapIcon from '#resources/icons/2_Tap_Black.png';
3535
import threeTapIcon from '#resources/icons/3_Tap_Black.png';
36-
import tapIcon from '#resources/icons/tap_icon.png';
3736
import angularTapIcon from '#resources/icons/tap_icon_angular.png';
3837
import swipeIcon from '#resources/icons/swipeleft_icon_black.png';
38+
import check from '#resources/icons/tick_green_on_white.png';
3939

4040
export function valueSelector<T>(item: { value: T }) {
4141
return item.value;
@@ -82,6 +82,7 @@ export type IconKey = 'add-outline'
8282
| 'ban-outline'
8383
| 'check'
8484
| 'close-outline'
85+
| 'checkmark-outline'
8586
| 'egg-outline'
8687
| 'ellipse-outline'
8788
| 'flag-outline'
@@ -132,7 +133,7 @@ function getPngIcon(src: string, alt: string) {
132133
return element;
133134
}
134135

135-
export const iconList: IconItem[] = [
136+
export const customOptionsOnlyIconList: IconItem[] = [
136137
{
137138
key: 'add-outline',
138139
label: 'Add',
@@ -149,8 +150,8 @@ export const iconList: IconItem[] = [
149150
component: IoBanOutline,
150151
},
151152
{
152-
key: 'check',
153-
label: 'Check',
153+
key: 'checkmark-outline',
154+
label: 'Checkmark',
154155
component: IoCheckmarkOutline,
155156
},
156157
{
@@ -263,11 +264,11 @@ export const iconList: IconItem[] = [
263264
label: 'Warning',
264265
component: IoWarningOutline,
265266
},
266-
{
267-
key: 'general-tap',
268-
label: 'General Tap',
269-
component: getPngIcon(tapIcon, 'general tap'),
270-
},
267+
];
268+
269+
// Icon List for scenario pages only.
270+
// They need to be treated diffrently as they are loaded as pngs
271+
const scenarioOnlyIconList: IconItem[] = [
271272
{
272273
key: 'tap',
273274
label: 'Tap',
@@ -293,10 +294,17 @@ export const iconList: IconItem[] = [
293294
label: 'Swipe Left',
294295
component: getPngIcon(swipeIcon, 'swipe left'),
295296
},
297+
{
298+
key: 'check',
299+
label: 'Check',
300+
component: getPngIcon(check, 'check'),
301+
},
296302
];
297303

304+
export const combinedIconList = [...scenarioOnlyIconList, ...customOptionsOnlyIconList];
305+
298306
export const iconMap = listToMap(
299-
iconList,
307+
combinedIconList,
300308
(icon) => icon.key,
301309
(icon) => icon.component,
302310
);

‎manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
8282
onChange={setFieldValueAndGenerateName}
8383
error={error?.projectTopic}
8484
label="Project Topic"
85-
hint="Enter the topic of your project (50 char max)."
85+
hint="Enter the topic of your project."
8686
disabled={disabled}
8787
autoFocus
8888
/>
@@ -91,7 +91,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
9191
value={value?.projectRegion}
9292
onChange={setFieldValueAndGenerateName}
9393
label="Project Region"
94-
hint="Enter name of your project Region (50 chars max)"
94+
hint="Enter name of your project Region"
9595
error={error?.projectRegion}
9696
disabled={disabled}
9797
/>
@@ -148,7 +148,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
148148
onChange={setFieldValue}
149149
error={error?.lookFor}
150150
label="Look For"
151-
hint="What should the users look for (e.g. buildings, cars, trees)? (25 chars max)"
151+
hint="What should the users look for (e.g. buildings, cars, trees)?"
152152
disabled={disabled}
153153
/>
154154
</div>

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -185,21 +185,27 @@ export const MIN_OPTIONS = 2;
185185
export const MAX_SUB_OPTIONS = 6;
186186
export const MIN_SUB_OPTIONS = 2;
187187

188+
const XS_TEXT_MAX_LENGTH = 25;
189+
const SM_TEXT_MAX_LENGTH = 50;
190+
const MD_TEXT_MAX_LENGTH = 1000;
191+
// const LG_TEXT_MAX_LENGTH = 2000;
192+
const XL_TEXT_MAX_LENGTH = 10000;
193+
188194
export const projectFormSchema: ProjectFormSchema = {
189195
fields: (value): ProjectFormSchemaFields => {
190196
let baseSchema: ProjectFormSchemaFields = {
191197
projectTopic: {
192198
required: true,
193199
requiredValidation: requiredStringCondition,
194-
validations: [getNoMoreThanNCharacterCondition(50)],
200+
validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
195201
},
196202
projectType: {
197203
required: true,
198204
},
199205
projectRegion: {
200206
required: true,
201207
requiredValidation: requiredStringCondition,
202-
validations: [getNoMoreThanNCharacterCondition(50)],
208+
validations: [getNoMoreThanNCharacterCondition(SM_TEXT_MAX_LENGTH)],
203209
},
204210
projectNumber: {
205211
required: true,
@@ -222,12 +228,12 @@ export const projectFormSchema: ProjectFormSchema = {
222228
lookFor: {
223229
required: true,
224230
requiredValidation: requiredStringCondition,
225-
validations: [getNoMoreThanNCharacterCondition(25)],
231+
validations: [getNoMoreThanNCharacterCondition(XS_TEXT_MAX_LENGTH)],
226232
},
227233
projectDetails: {
228234
required: true,
229235
requiredValidation: requiredStringCondition,
230-
validations: [getNoMoreThanNCharacterCondition(10000)],
236+
validations: [getNoMoreThanNCharacterCondition(XL_TEXT_MAX_LENGTH)],
231237
},
232238
tutorialId: {
233239
required: true,
@@ -441,7 +447,7 @@ export const projectFormSchema: ProjectFormSchema = {
441447
? {
442448
required: true,
443449
requiredValidation: requiredStringCondition,
444-
validations: [getNoMoreThanNCharacterCondition(1000)],
450+
validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
445451
}
446452
: {
447453
forceValue: nullValue,
@@ -492,7 +498,7 @@ export const projectFormSchema: ProjectFormSchema = {
492498
filterText: {
493499
required: true,
494500
requiredValidation: requiredStringCondition,
495-
validations: [getNoMoreThanNCharacterCondition(1000)],
501+
validations: [getNoMoreThanNCharacterCondition(MD_TEXT_MAX_LENGTH)],
496502
},
497503
};
498504
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import TextInput from '#components/TextInput';
1414
import NumberInput from '#components/NumberInput';
1515
import SelectInput from '#components/SelectInput';
1616
import NonFieldError from '#components/NonFieldError';
17-
import { iconList, keySelector, labelSelector } from '#utils/common';
17+
import { customOptionsOnlyIconList, keySelector, labelSelector } from '#utils/common';
1818

1919
import SubOptionInput from './SubOptionInput';
2020
import {
@@ -103,7 +103,7 @@ export default function CustomOptionInput(props: Props) {
103103
name="icon"
104104
label="Icon"
105105
value={value?.icon}
106-
options={iconList}
106+
options={customOptionsOnlyIconList}
107107
keySelector={keySelector}
108108
labelSelector={labelSelector}
109109
onChange={onOptionChange}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {
1414
} from '../../utils';
1515
import styles from './styles.css';
1616

17+
// NOTE: the padding is selected wrt the size of the preview
18+
const footprintGeojsonPadding = [140, 140];
19+
1720
interface Props {
1821
className?: string;
1922
geoJson: FootprintGeoJSON | undefined;
@@ -64,6 +67,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
6467
previewStyle={previewStyles}
6568
url={url}
6669
geoJson={geoJson}
70+
padding={footprintGeojsonPadding}
6771
/>
6872
<div className={styles.options}>
6973
{customOptions?.map((option) => {

0 commit comments

Comments
 (0)