Merge branch 'main' of github.com:IGSD-UoW/WPD-MobileApp into main

src/app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "src",
-    "slug": "src",
+    "name": "wpd-mobileapp",
+    "slug": "wpd-mobileapp",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./app/assets/icon.png",
@@ -13,9 +13,15 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "infoPlist": {
+        "NSCameraUsageDescription": "Enable Camera Acess so that you can record  Videos",
+        "NSPhotoLibraryUsageDescription": "Enable Camera Roll Access so that you can select Other Videos from Camera Roll"
+      }
     },
     "android": {
       "adaptiveIcon": {
@@ -25,6 +31,7 @@
     },
     "web": {
       "favicon": "./app/assets/favicon.png"
-    }
+    },
+    "description": ""
   }
 }

src/app/components/ImageInput.js

@@ -11,6 +11,7 @@ import {
 } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
+import * as Permissions from "expo-permissions";
 import colors from "../config/colors";
 
 function ImageInput({ imageUri, onChangeImage }) {
@@ -18,22 +19,34 @@ function ImageInput({ imageUri, onChangeImage }) {
     requestPermission();
     //requestPermissionCamera();
   }, []);
-  const [modalVisible, setModalVisible] = useState(false);
 
-  const requestPermission = async () => {
-    const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
-    if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
-  };
-  const requestPermissionCamera = async () => {
-    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
+ /* const requestPermissionCamera = async () => {
+    const { granted } = await Permissions.askAsync(Permissions.CAMERA);
     if(granted) {
       launchCamera();
     }
     else if (!granted) alert("Você precisa habilitar permissão para acessar a câmera.");
   };
+  
+  const launchCamera = async () => {
+    setModalVisible(false);
+    try {
+      const result = await ImagePicker.launchCameraAsync({
+        allowsEditing: false,
+      });
+      if (!result.cancelled) onChangeImage(result.uri)
+    } catch (error) {
+      console.log("Erro ao ler imagem", error);
+    }
+  };*/  
+
+  const requestPermission = async () => {
+    const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
+    if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
+  };
 
   const handlePress = () => {
-    if (!imageUri) setModalVisible(true);
+    if (!imageUri) launchImageLibrary();
     else
       Alert.alert("Deletar", "Deseja deletar esta imagem?", [
         { text: "Sim", onPress: () => onChangeImage(null) },
@@ -42,7 +55,6 @@ function ImageInput({ imageUri, onChangeImage }) {
   };
 
   const launchImageLibrary = async () => {
-    setModalVisible(false);
     try {
       const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
@@ -54,19 +66,6 @@ function ImageInput({ imageUri, onChangeImage }) {
     }
   };
 
-  const launchCamera = async () => {
-    setModalVisible(false);
-    try {
-      const result = await ImagePicker.launchCameraAsync({
-        allowsEditing: false,
-      });
-      if (!result.cancelled) onChangeImage(result.uri)
-    } catch (error) {
-      console.log("Erro ao ler imagem", error);
-    }
-  };
-
-
   return (
     <View>
       <TouchableWithoutFeedback onPress={handlePress}>
@@ -81,36 +80,6 @@ function ImageInput({ imageUri, onChangeImage }) {
           {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
         </View>
       </TouchableWithoutFeedback>
-
-      <View >
-        <Modal style={styles.centeredView}
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}>
-          <TouchableWithoutFeedback onPress={() => {
-            setModalVisible(!setModalVisible);
-          }}>
-            <View style={styles.centeredView}>
-              <View style={styles.modalView}>
-                <View>
-                  <Text style={styles.modalLabel}>Selecione uma imagem</Text>
-                  <TouchableOpacity style={{ width: 300 }} onPress={requestPermissionCamera}>
-                    <Text style={styles.modalText}>Câmera</Text>
-                  </TouchableOpacity>
-                  <TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
-                    <Text style={styles.modalText}>Galeria</Text>
-                  </TouchableOpacity>
-                </View>
-                <TouchableOpacity style={{ width: 300 }} onPress={() => { setModalVisible(false) }}>
-                  <Text style={{ fontWeight: 'bold', marginTop: 20, fontSize: 14, textAlign: 'center' }}>
-                    Cancelar
-                </Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </TouchableWithoutFeedback>
-        </Modal>
-      </View>
     </View>
   );
 }

src/app/hooks/useLocation.js

@@ -1,20 +1,22 @@
 import { useEffect, useState } from "react";
 import * as Location from "expo-location";
 
-export default function useLocation(
-  defaultLocation = { longitude: 0.0, latitude: 0.0 }
-) {
+export default function useLocation(defaultLocation = { longitude: 0.0, latitude: 0.0 }) {
   const [location, setLocation] = useState(defaultLocation);
 
   const getLocation = async () => {
     try {
       const { granted } = await Location.requestPermissionsAsync();
+
       if (!granted) return;
+
       const {
         coords: { latitude, longitude },
       } = await Location.getLastKnownPositionAsync();
+
       setLocation({ latitude, longitude });
-    } catch (error) {
+    } 
+    catch (error) {
       console.log(error);
     }
   };

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { StyleSheet, Text, View, Image, ScrollView } from "react-native";
+import { StyleSheet, Text, View, Image, ScrollView, Modal, Platform } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -13,7 +13,7 @@ import Screen from "../components/Screen";
 import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableHighlight, TouchableOpacity } from "react-native-gesture-handler";
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { showMessage } from "react-native-flash-message";
@@ -33,6 +33,22 @@ function PluviometerSharingDataScreen(props) {
   const [date, setDate] = useState(moment(defaultDate))
   const [show, setShow] = useState(false);
   let dateTime = new Date().toString();
+  //---------------ios------------------------
+  const onChange = (e, selectedDate) => {
+    setShow(false);
+    if (selectedDate) {
+      setDate(moment(defaultDate));
+    }
+  }
+  const onCancelPress = () => {
+    setDate(moment(defaultDate));
+    setShow(false);
+  }
+  const onDonePress = () => {
+    setDate(moment(date));
+    setShow(false);
+  }
+  //-------------------------------------------
 
   const onAndroidChange = (e, selectedDate) => {
     setShow(false);
@@ -42,6 +58,7 @@ function PluviometerSharingDataScreen(props) {
       //props.onDateChange(selectedDate);
     }
   }
+
   const renderDatePicker = () => {
     return (
       <DateTimePicker
@@ -49,14 +66,14 @@ function PluviometerSharingDataScreen(props) {
         value={new Date(date)}
         mode="date"
         maximumDate={new Date()}
-        onChange={onAndroidChange}
+        onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
       />
     )
   }
   /*---------------------------------------------------------------------------------------------------------*/
   return (
     <Screen style={styles.container}>
-      
+
       <View style={{ alignSelf: "center" }}>
         <Image
           style={styles.image}
@@ -67,60 +84,113 @@ function PluviometerSharingDataScreen(props) {
         </Text>
       </View>
       <ScrollView style={styles.container}>
-      <Form
-        initialValues={{
-          pluviometer: "",
-          images: [],
-        }}
-        onSubmit={(values) => {
-          insertPluviometerData({ ...values, dateTime, location });
-          showMessage({
-            message: "Informação enviada!",
-            duration: 1950,
-            icon: "success",
-            type: "success",
-          });
-          props.navigation.goBack(null);
-        }}
-        validationSchema={validationSchema}
-      >
-        <View style={{ marginTop: 30 }}>
-          <Text style={styles.labelStyle}>
-            Quantidade de chuva:
+        <Form
+          initialValues={{
+            pluviometer: "",
+            images: [],
+          }}
+          onSubmit={(values) => {
+            insertPluviometerData({ ...values, dateTime, location });
+            showMessage({
+              message: "Informação enviada!",
+              duration: 1950,
+              icon: "success",
+              type: "success",
+            });
+            props.navigation.goBack(null);
+          }}
+          validationSchema={validationSchema}
+        >
+          <View style={{ marginTop: 30 }}>
+            <Text style={styles.labelStyle}>
+              Quantidade de chuva:
           </Text>
-          <FormField
-            keyboardType="number-pad"
-            maxLength={200}
-            name="pluviometer"
-            placeholder="Digite a quantidade de chuva"
-            width={280}
-          />
-        </View>
+            <FormField
+              keyboardType="number-pad"
+              maxLength={200}
+              name="pluviometer"
+              placeholder="Digite a quantidade de chuva"
+              width={280}
+            />
+          </View>
 
-        <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
-          <Text style={styles.labelStyle}>
-            Data da coleta:
+          <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
+            <Text style={styles.labelStyle}>
+              Data da coleta:
           </Text>
-          <TouchableOpacity style={styles.datepickerStyle}
-            onPress={() => setShow(true)}>
-            <View style={styles.datePickerView}>
-              <Text style={{ fontSize: 16, marginLeft: 15 }}>
-                {date.format('DD/MM/YYYY')}
-              </Text>
-              <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
-              {show && renderDatePicker()}
-            </View>
-          </TouchableOpacity>
-        </View>
-        <FormImagePicker
-          backgroundColor="#1976D2"
-          name="images"
-          styles={{ width: 50 }}
-        />
-        <SubmitButton title="Enviar" style={{marginBottom:100}}/>
-        <View style={{ flex: 1 }}>
-        </View>
-      </Form>
+            <TouchableOpacity style={styles.datepickerStyle}
+              onPress={() => setShow(true)}>
+              <View style={styles.datePickerView}>
+                <View style={{ flexDirection:"row", justifyContent:"space-between", width: 280 }}>
+                  <Text style={{fontSize: 16, marginLeft: 15}}>{date.format('DD/MM/YYYY')}</Text>
+                  <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
+                </View>
+                {Platform.OS !== 'ios' && show &&  renderDatePicker()}
+                {Platform.OS === 'ios' && show && (
+                    <Modal
+                      transparent={true}
+                      animationType="slide"
+                      visible={show}
+                      supportedOrientations={['portrait']}
+                      onRequestClose={() => setShow(false)}>
+                      <View style={{ flex: 1 }}>
+                        <TouchableHighlight
+                          style={{
+                            flex: 1,
+                            alignItems: 'flex-end',
+                            flexDirection: 'row',
+                          }}
+                          activeOpacity={1}
+                          visible={show}>
+                          onPress={() => setShow(false)}
+                          <TouchableHighlight
+                            underlayColor={''}
+                            style={{
+                              flex: 1,
+                              borderTopColor: 'primary',
+                              borderTopWidth: 1,
+                            }}
+                            onPress={() => console.log('Datepicker press')}>
+                            <View
+                              style={{
+                                backgroundColor: '#f8f8ff',
+                                height: 256,
+                                overflow: 'hidden',
+                              }}>
+                                <View style={{ marginTop:20 }}>
+                                  { renderDatePicker }
+                                </View>
+                              <TouchableHighlight
+                                underlayColor={'transparent'}
+                                onPress={() => onCancelPress()}
+                                style={(styles.btnText, styles.btnCancel)}>
+                                <Text>Cancelar</Text>
+                              </TouchableHighlight>
+        
+                              <TouchableHighlight
+                                underlayColor={'transparent'}
+                                onPress={() => onDonePress()}
+                                style={(styles.btnText, styles.btnDone)}>
+                                <Text>OK</Text>
+                              </TouchableHighlight>
+                            </View>
+                          </TouchableHighlight>
+                        </TouchableHighlight>
+                      </View>
+                    </Modal>
+                )}
+              </View>
+            </TouchableOpacity>
+          </View>
+          <FormImagePicker
+            backgroundColor="#1976D2"
+            name="images"
+            styles={{ width: 50 }}
+          />
+          <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
+          <View style={{ flex: 1 }}>
+          </View>
+        </Form>
       </ScrollView>
     </Screen>
   );
@@ -148,7 +218,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#f8f4f4",
   },
   dateIcon: {
-    marginRight: 15,
+    marginRight: 25,
   },
   labelStyle: {
     fontSize: 16,
@@ -157,6 +227,21 @@ const styles = StyleSheet.create({
     color: "#1976D2",
     marginBottom: 5,
   },
+  btnText: {
+    position: "absolute",
+    top: 0,
+    height: 42,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  btnCancel: {
+    left: 0,
+  },
+  btnDone: {
+    right: 0,
+  },
 });
 
 export default PluviometerSharingDataScreen;