From 01b6bc3fd949513c0edd76429a76a4397159e42a Mon Sep 17 00:00:00 2001 From: "garo (they/them)" <3411715+shrouxm@users.noreply.github.com> Date: Wed, 14 Feb 2024 10:16:51 -0800 Subject: [PATCH] feat: surface cracking screen (#850) --- .../src/assets/surface/vertical-cracking.png | Bin 0 -> 6979 bytes .../src/screens/SoilScreen/SoilScreen.tsx | 2 +- .../components/SoilSurfaceScreen.tsx | 72 +++++++++++++++++- .../components/SoilSurfaceStatus.tsx | 5 +- dev-client/src/translations/en.json | 34 ++++++--- 5 files changed, 95 insertions(+), 18 deletions(-) create mode 100644 dev-client/src/assets/surface/vertical-cracking.png diff --git a/dev-client/src/assets/surface/vertical-cracking.png b/dev-client/src/assets/surface/vertical-cracking.png new file mode 100644 index 0000000000000000000000000000000000000000..5898d5555bdd52b3adb17b710b9c32bb3e40ff14 GIT binary patch literal 6979 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 VY=Pzyo#X%j002ovPDHLkV1m_e2LAv6 literal 0 HcmV?d00001 diff --git a/dev-client/src/screens/SoilScreen/SoilScreen.tsx b/dev-client/src/screens/SoilScreen/SoilScreen.tsx index a3a4231d1..8906ce54b 100644 --- a/dev-client/src/screens/SoilScreen/SoilScreen.tsx +++ b/dev-client/src/screens/SoilScreen/SoilScreen.tsx @@ -85,7 +85,7 @@ export const SoilScreen = ({siteId}: {siteId: string}) => { return ( diff --git a/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx b/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx index 43808282e..264dbf2b3 100644 --- a/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx +++ b/dev-client/src/screens/SoilScreen/components/SoilSurfaceScreen.tsx @@ -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 ( - - Unimplemented soil surface screen + }> + + + {t('soil.collection_method.verticalCracking')} + + + + + + {t('soil.vertical_cracking.description', {units: 'metric'})} + + + + + + } + label={t('general.done_fab')} + isDisabled={!cracking} + onPress={() => navigation.pop()} + /> ); }; diff --git a/dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx b/dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx index 481f67b39..240ab4ad5 100644 --- a/dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx +++ b/dev-client/src/screens/SoilScreen/components/SoilSurfaceStatus.tsx @@ -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'; @@ -38,7 +39,7 @@ export const SoilSurfaceStatus = ({required, complete, siteId}: Props) => { }, [navigation, siteId]); return ( - <> + {t('soil.surface')} @@ -48,6 +49,6 @@ export const SoilSurfaceStatus = ({required, complete, siteId}: Props) => { label={t('soil.collection_method.verticalCracking')} onPress={onPress} /> - + ); }; diff --git a/dev-client/src/translations/en.json b/dev-client/src/translations/en.json index cdb87a420..eab64a970 100644 --- a/dev-client/src/translations/en.json +++ b/dev-client/src/translations/en.json @@ -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", @@ -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", @@ -537,19 +549,19 @@ }, "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.", @@ -557,7 +569,7 @@ }, "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?", @@ -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",