Skip to content

Commit

Permalink
feat: surface cracking screen (#850)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shrouxm
shrouxm authored Feb 14, 2024
1 parent 5da82b7 commit 01b6bc3
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 18 deletions.
Binary file added dev-client/src/assets/surface/vertical-cracking.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion dev-client/src/screens/SoilScreen/SoilScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const SoilScreen = ({siteId}: {siteId: string}) => {
return (
<ScrollView backgroundColor="grey.300">
<SoilSurfaceStatus
required={project ? project.verticalCrackingRequired : true}
required={project?.verticalCrackingRequired ?? false}
complete={Boolean(soilData?.surfaceCracksSelect)}
siteId={siteId}
/>
Expand Down
72 changes: 68 additions & 4 deletions dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,78 @@
* along with this program. If not, see https://www.gnu.org/licenses/.
*/
import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters';
import {
Box,
Column,
Heading,
Paragraph,
} from 'terraso-mobile-client/components/NativeBaseAdapters';
import {useTranslation} from 'react-i18next';
import {useDispatch, useSelector} from 'terraso-mobile-client/store';
import {selectSite} from 'terraso-client-shared/selectors';
import {AppBar} from 'terraso-mobile-client/navigation/components/AppBar';
import {Image} from 'react-native';
import {LastModified} from 'terraso-mobile-client/components/LastModified';
import {Fab, Select} from 'native-base';
import {
SurfaceCracks,
surfaceCracks,
} from 'terraso-client-shared/soilId/soilIdTypes';
import {Icon} from 'terraso-mobile-client/components/Icons';
import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
import {useCallback} from 'react';
import {updateSoilData} from 'terraso-client-shared/soilId/soilIdSlice';

type Props = {siteId: string};

export const SoilSurfaceScreen = ({}: Props) => {
export const SoilSurfaceScreen = ({siteId}: Props) => {
const {t} = useTranslation();
const site = useSelector(selectSite(siteId));
const cracking = useSelector(
state => state.soilId.soilData[siteId].surfaceCracksSelect,
);
const navigation = useNavigation();
const dispatch = useDispatch();
const onUpdate = useCallback(
(surfaceCracksSelect: SurfaceCracks) =>
dispatch(updateSoilData({siteId, surfaceCracksSelect})),
[dispatch, siteId],
);

return (
<ScreenScaffold>
<Text>Unimplemented soil surface screen</Text>
<ScreenScaffold AppBar={<AppBar title={site.name} />}>
<Column padding="md">
<Heading variant="h6">
{t('soil.collection_method.verticalCracking')}
</Heading>
<LastModified />
<Select
selectedValue={cracking ?? undefined}
onValueChange={onUpdate as (_: string) => void}>
{surfaceCracks.map(crack => (
<Select.Item
key={crack}
value={crack}
label={t(`soil.vertical_cracking.value.${crack}`)}
/>
))}
</Select>
<Box height="lg" />
<Paragraph>
{t('soil.vertical_cracking.description', {units: 'metric'})}
</Paragraph>
<Box width="100%" alignItems="center">
<Image
source={require('terraso-mobile-client/assets/surface/vertical-cracking.png')}
/>
</Box>
</Column>
<Fab
leftIcon={<Icon name="check" />}
label={t('general.done_fab')}
isDisabled={!cracking}
onPress={() => navigation.pop()}
/>
</ScreenScaffold>
);
};
5 changes: 3 additions & 2 deletions dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ type Props = {siteId: string} & Pick<

import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
import {
Column,
Heading,
Row,
} from 'terraso-mobile-client/components/NativeBaseAdapters';
Expand All @@ -38,7 +39,7 @@ export const SoilSurfaceStatus = ({required, complete, siteId}: Props) => {
}, [navigation, siteId]);

return (
<>
<Column space="1px">
<Row backgroundColor="background.default" px="16px" py="12px">
<Heading variant="h6">{t('soil.surface')}</Heading>
</Row>
Expand All @@ -48,6 +49,6 @@ export const SoilSurfaceStatus = ({required, complete, siteId}: Props) => {
label={t('soil.collection_method.verticalCracking')}
onPress={onPress}
/>
</>
</Column>
);
};
34 changes: 23 additions & 11 deletions dev-client/src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,18 @@
"photos": "Photos",
"notes": "Notes"
},
"vertical_cracking": {
"description": "Vertical cracks may appear on the soil surface when some soils experience changes in moisture or temperature. The cracks may be permanent, or they may disappear after some time.\n\nVertical cracks are at least $t(soil.vertical_cracking.description_width, {\"context\": \"{{units}}\"}) wide and $t(soil.vertical_cracking.description_depth, {\"context\": \"{{units}}\"}) deep. You should be able to place a pencil inside the cracks.",
"description_width_metric": "5 mm",
"description_width_imperial": "3/16”",
"description_depth_metric": "25 cm",
"description_depth_imperial": "10”",
"value": {
"NO_CRACKING": "No Cracking",
"SURFACE_CRACKING_ONLY": "Surface Cracking Only",
"DEEP_VERTICAL_CRACKS": "Deep Vertical Cracks"
}
},
"data": {
"rockFragmentVolume": "Rock fragment",
"texture": "Texture",
Expand Down Expand Up @@ -526,7 +538,7 @@
"bullet2": "How much organic matter is present",
"bullet3": "And much more",
"p2": "Soil color can be measured using a Munsell book or spectrometer.",
"p3": "In this app, you can also take a photo with a reference card like a Post-It Note to determine your soil color."
"p3": "In this app, you can also take a photo with a reference card like a Post-it Note to determine your soil color."
},
"hue": "Hue",
"value": "Value",
Expand All @@ -537,27 +549,27 @@
},
"guide": {
"step1": {
"title": "1. Gather Post-It® Notes.",
"content": "To ensure accurate color analysis you must use 3M Canary Yellow Post-It® Notes for your reference card, with these guidelines:",
"title": "1. Gather Post-it Notes.",
"content": "To ensure accurate color analysis you must use 3M Canary Yellow Post-it Notes for your reference card, with these guidelines:",
"bullets": {
"1": "Only use new Post-It Notes.",
"1": "Only use new Post-it Notes.",
"2": "Stack at least 3 Post-it Notes on top of each other.",
"3": "Make sure each Post-It note lays flat, isn’t written on, and isn’t dirty.",
"4": "Make sure each Post-It note isn’t degraded by sunlight, as considerable variation can exist depending on sun exposure.",
"5": "Store Post-It notes in dark envelopes to avoid sun exposure."
"3": "Make sure each Post-it note lays flat, isn’t written on, and isn’t dirty.",
"4": "Make sure each Post-it note isn’t degraded by sunlight, as considerable variation can exist depending on sun exposure.",
"5": "Store Post-it notes in dark envelopes to avoid sun exposure."
}
},
"step2": {
"title": "2. Prepare Soil Sample.",
"content": "Use dry soil whenever possible. The app does have a way to indicate if your soil is wet, but dry soil color estimates are more accurate.\n\nIf your soil layer has multiple colors (i.e. mottles, redoximorphic features, or carbonates), isolate the dominant matrix color from the pile.\n\nRun soil through a 2mm sieve to create a pile of homogenous soil, or use your hands to pick out anything larger than 2mm or 1/16”.\n\nFlatten the pile of soil to minimize shadows within the soil sample."
"content": "Use dry soil whenever possible. The app does have a way to indicate if your soil is wet, but dry soil color estimates are more accurate.\n\nIf your soil layer has multiple colors (i.e. mottles, redoximorphic features, or carbonates), isolate the dominant matrix color from the pile.\n\nRun soil through a 2mm sieve to create a pile of homogenous soil, or use your hands to pick out anything larger than 2mm (1/16)”.\n\nFlatten the pile of soil to minimize shadows within the soil sample."
},
"step3": {
"title": "3. Prepare lighting.",
"content": "The soil color photo needs to be taken in even lighting conditions and shaded from direct sun.\n\nTry to have an overhead light source rather than side lighting."
},
"step4": {
"title": "4. Place reference card next to soil.",
"content": "Place the Post-It note next to the prepared soil sample, in the proper lighting conditions."
"content": "Place the Post-it note next to the prepared soil sample, in the proper lighting conditions."
},
"step5": {
"title": "5. Ready to take the photo?",
Expand All @@ -567,14 +579,14 @@
"take_photo": "Take Photo"
},
"reference": "Reference",
"crop_reference": "Crop image to show only the 3M Canary Yellow Post-It® Note. Pinch the image with your thumb and forefinger to zoom in (pinching inward) or zoom out (pinching outward). Move the image in the box by swiping with one finger.",
"crop_reference": "Crop image to show only the 3M Canary Yellow Post-it Note. Pinch the image with your thumb and forefinger to zoom in (pinching inward) or zoom out (pinching outward). Move the image in the box by swiping with one finger.",
"soil": "Soil",
"crop_soil": "Crop image to show only the soil sample. Pinch the image with your thumb and forefinger to zoom in (pinching inward) or zoom out (pinching outward). Move the image in the box by swiping with one finger.",
"soil_condition": "Soil condition:",
"lighting_condition": "Photo has even lighting and no shadows:",
"analyze": "Analyze",
"use_photo_instead": "Don’t know the soil color values? Use a photo instead (guide included.)",
"photo_need_help": "To use a photo to determine soil color, you’ll need a 3M Canary Yellow Post-it® Note for color reference and a properly prepared soil sample. Need help? Use the step-by-step guide.",
"photo_need_help": "To use a photo to determine soil color, you’ll need a 3M Canary Yellow Post-it Note for color reference and a properly prepared soil sample. Need help? Use the step-by-step guide.",
"use_guide_label": "Use Guide",
"colorHue": {
"B": "B",
Expand Down

0 comments on commit 01b6bc3

Please sign in to comment.