Interventions UI done

Plant-for-the-Planet-org · Aug 10, 2023 · 125ae66 · 125ae66
1 parent cfc83da
commit 125ae66
Show file tree

Hide file tree

Showing 9 changed files with 455 additions and 4 deletions.
diff --git a/app/assets/images/cleaner_phone.js b/app/assets/images/cleaner_phone.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
+
+function CleanerPhone(props) {
+  return (
+    <Svg
+      width={22}
+      height={22}
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <G clipPath="url(#clip0_2063_16103)" fill="#007A49">
+        <Path d="M15.828 7.543a.344.344 0 00.227-.325.343.343 0 00-.227-.325l-.687-.231a1.33 1.33 0 01-.842-.873l-.223-.712a.33.33 0 00-.314-.236.329.329 0 00-.313.236l-.223.712a1.331 1.331 0 01-.842.873l-.687.231a.344.344 0 00-.227.325c0 .147.09.276.227.325l.687.232c.4.133.713.458.842.872l.223.713a.33.33 0 00.313.236.329.329 0 00.314-.236l.223-.713a1.33 1.33 0 01.842-.872l.687-.232zM17.837 10.406l-.485-.165a.938.938 0 01-.597-.619l-.159-.503a.232.232 0 00-.219-.164.232.232 0 00-.219.164L16 9.622a.938.938 0 01-.597.62l-.485.164a.238.238 0 00-.159.227c0 .102.065.196.16.227l.485.165a.938.938 0 01.596.618l.16.503c.03.098.12.165.218.165a.232.232 0 00.22-.165l.158-.503a.938.938 0 01.597-.619l.485-.164a.239.239 0 00.159-.227.239.239 0 00-.16-.227zM11.83 11.327l.348.116c.202.067.36.231.425.44l.112.361c.021.071.086.12.159.12.073 0 .133-.049.159-.12l.111-.36a.669.669 0 01.425-.441l.348-.116a.172.172 0 00.116-.165.176.176 0 00-.116-.164l-.348-.116a.668.668 0 01-.425-.44l-.111-.361a.167.167 0 00-.16-.12c-.072 0-.132.048-.158.12l-.112.36a.668.668 0 01-.425.441l-.348.116a.172.172 0 00-.116.165c0 .075.048.137.116.164z" />
+        <Path d="M13.926 12.293l-.065.214c-.06.2-.176.378-.33.516v2.181c0 .17-.065.334-.18.454a.61.61 0 01-.439.188h-.841a.36.36 0 00-.266.115.415.415 0 00-.112.276.387.387 0 01-.378.392H9.25a.36.36 0 01-.266-.116.406.406 0 01-.112-.276.387.387 0 00-.111-.276.367.367 0 00-.267-.116h-.841a.61.61 0 01-.438-.187.68.68 0 01-.185-.454v-9.49c0-.17.065-.334.185-.454a.61.61 0 01.438-.187h5.186l.03-.09c.078-.257.236-.48.447-.64.099-.071.202-.13.313-.17A1.57 1.57 0 0012.91 4H7.652c-.438 0-.859.183-1.168.503-.309.32-.485.757-.485 1.21v10.569c0 .454.176.89.485 1.215.31.32.73.503 1.168.503h5.255c.438 0 .859-.183 1.168-.503.309-.32.485-.757.485-1.215v-4.327c-.12.12-.266.213-.425.267l-.21.071z" />
+      </G>
+      <Defs>
+        <ClipPath id="clip0_2063_16103">
+          <Path fill="#fff" transform="translate(6 4)" d="M0 0H12V14H0z" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}
+
+export default CleanerPhone;
diff --git a/app/assets/images/exclamation_icon.js b/app/assets/images/exclamation_icon.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function Exclamation(props) {
+  return (
+    <Svg
+      width={5}
+      height={18}
+      viewBox="0 0 5 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <Path
+        opacity={0.2}
+        d="M3.457 11.296H.636L.046 0h4l-.589 11.296zM0 15.252c0-.725.197-1.233.59-1.526.4-.293.882-.44 1.445-.44.547 0 1.017.147 1.41.44.401.293.602.801.602 1.526 0 .694-.2 1.195-.601 1.503-.394.308-.864.462-1.411.462-.563 0-1.044-.154-1.445-.462-.393-.308-.59-.81-.59-1.503z"
+        fill="#000"
+      />
+    </Svg>
+  );
+}
+
+export default Exclamation;
diff --git a/app/assets/images/sync_failed.js b/app/assets/images/sync_failed.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { G, Path, Defs, ClipPath } from 'react-native-svg';
+
+function SyncFail(props) {
+  return (
+    <Svg
+      width={16}
+      height={12}
+      viewBox="0 0 16 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <G clipPath="url(#clip0_2080_12108)">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.812 7.161c-.372-1.116-1.234-1.977-2.323-2.306v-.158A4.77 4.77 0 0011.736.984 4.333 4.333 0 007.85.154C6.502.521 5.39 1.514 4.843 2.852a2.595 2.595 0 00-1.102-.24c-.726 0-1.423.304-1.936.845a2.935 2.935 0 00-.801 2.026c0 .103 0 .202.014.3A3.727 3.727 0 000 8.361a3.71 3.71 0 001.032 2.577A3.436 3.436 0 003.505 12H12.5c1.13 0 2.195-.566 2.85-1.53.655-.963.83-2.193.457-3.309h.005zm-5.46 1.78c.258.27.258.718 0 .989a.654.654 0 01-.948 0l-1.4-1.46-1.398 1.46a.654.654 0 01-.947 0 .726.726 0 010-.989l1.399-1.46-1.4-1.461a.726.726 0 010-.988c.26-.27.688-.27.948 0l1.399 1.46 1.4-1.46c.258-.27.687-.27.946 0 .26.27.26.718 0 .988l-1.4 1.46 1.4 1.461z"
+          fill="#EB5757"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="clip0_2080_12108">
+          <Path fill="#fff" d="M0 0H16V12H0z" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}
+
+export default SyncFail;
diff --git a/app/assets/images/sync_success.js b/app/assets/images/sync_success.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function SyncSuccess(props) {
+  return (
+    <Svg
+      width={16}
+      height={12}
+      viewBox="0 0 16 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.49 4.85v-.158A4.77 4.77 0 0011.735.98 4.345 4.345 0 007.85.153c-1.347.37-2.459 1.363-3.006 2.7a2.595 2.595 0 00-1.102-.24c-.726 0-1.423.304-1.936.845a2.935 2.935 0 00-.801 2.026c0 .103 0 .202.014.3A3.727 3.727 0 000 8.361c0 .964.372 1.893 1.032 2.577A3.436 3.436 0 003.505 12H12.5c1.13 0 2.195-.566 2.85-1.53.655-.963.83-2.193.457-3.309-.372-1.116-1.234-1.977-2.323-2.306l.005-.005zm-2.29.914L7.811 9.3a.684.684 0 01-.363.207.655.655 0 01-.41-.05.68.68 0 01-.24-.162L4.81 7.215a.76.76 0 01-.183-.708.731.731 0 01.494-.521c.24-.07.5 0 .679.187l1.536 1.603 2.902-3.03a.669.669 0 01.636-.137c.222.069.396.25.462.482a.729.729 0 01-.132.664l-.01.01h.005z"
+        fill="#68B030"
+      />
+    </Svg>
+  );
+}
+
+export default SyncSuccess;
diff --git a/app/assets/index.js b/app/assets/index.js
@@ -53,8 +53,16 @@ import SpeciesLeaf from './images/drawerIcons/speciesLeaf';
 import ProjectDoc from './images/drawerIcons/projectDoc';
 import PieAdditionalData from './images/drawerIcons/pieAdditionalData';
 import OfflineMapIcon from './images/drawerIcons/offlineMapIcon';
+import CleanerPhone from './images/cleaner_phone';
+import Exclamation from './images/exclamation_icon';
+import SyncSuccess from './images/sync_success';
+import SyncFail from './images/sync_failed';
 
 export {
+  SyncFail,
+  SyncSuccess,
+  Exclamation,
+  CleanerPhone,
   ProjectDoc,
   OfflineMapIcon,
   PieAdditionalData,

diff --git a/app/components/MainScreen/BottomBar.tsx b/app/components/MainScreen/BottomBar.tsx
@@ -88,19 +88,19 @@ const AddOptions = ({ onReqClose, navigation }: any) => {
       svgIcon: <ChartIcon />,
       title: 'Monitoring Plot',
       coming_soon: true,
-      onPress: () => navigation.navigate('Intervention'),
+      onPress: () => navigation.navigate('Interventions'),
     },
     {
       svgIcon: <CrossArrow />,
       title: 'Project Site',
       coming_soon: true,
-      onPress: () => navigation.navigate('Intervention'),
+      onPress: () => navigation.navigate('Interventions'),
     },
     {
       svgIcon: <Intervention />,
       title: 'Intervention',
       coming_soon: true,
-      onPress: () => navigation.navigate('Intervention'),
+      onPress: () => navigation.navigate('Interventions'),
     },
     {
       svgIcon: <SingleTreeIcon />,

diff --git a/app/components/Navigator/BottomTab.tsx b/app/components/Navigator/BottomTab.tsx
@@ -5,6 +5,7 @@ import MainScreen from '../MainScreen';
 import { ComingSoon } from '../Common';
 import BottomBar from '../MainScreen/BottomBar';
 import NavDrawer from './Drawer';
+import Interventions from '../../screens/Interventions/Interventions';
 
 const screenOptions = { headerShown: false };
 
@@ -15,7 +16,7 @@ const BottomTab = () => {
   return (
     <Tab.Navigator screenOptions={screenOptions} tabBar={tabBar}>
       <Tab.Screen name="MainScreen" options={{ tabBarLabel: 'Map' }} component={MainScreen} />
-      <Tab.Screen name="Interventions" component={ComingSoon} />
+      <Tab.Screen name="Interventions" component={Interventions} />
       <Tab.Screen name="Plots" component={ComingSoon} />
     </Tab.Navigator>
   );

diff --git a/app/components/Navigator/MainNavigator.tsx b/app/components/Navigator/MainNavigator.tsx
@@ -48,6 +48,7 @@ import ProjectConfig from '../../screens/ManageProjectsFlow/ProjectConfig';
 import AdditionalDataSettings from '../AdditionalData/AdditionalDataSettings';
 import RemeasurementForm from '../../screens/RemeasurementFlow/RemeasurementForm';
 import RemeasurementReview from '../../screens/RemeasurementFlow/RemeasurementReview';
+import Interventions from '../../screens/Interventions/Interventions';
 
 const Stack = createStackNavigator();
 const screenOptions = { headerShown: false };
@@ -86,6 +87,7 @@ export default function MainNavigator() {
     <Stack.Navigator initialRouteName="MainScreen" screenOptions={screenOptions}>
       <Stack.Screen name="NavDrawer" component={NavDrawer} />
       <Stack.Screen name="TreeInventory" component={TreeInventory} options={MyTransition} />
+      <Stack.Screen name="Interventions" component={Interventions} options={MyTransition} />
       <Stack.Screen name="RegisterTree" component={RegisterTree} options={MyTransition} />
       <Stack.Screen name="SelectProject" component={SelectProject} options={MyTransition} />
       <Stack.Screen name="LocateTree" component={LocateTree} options={MyTransition} />