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

src/app/components/LoadingMarkersModal.js

@@ -3,9 +3,8 @@ import {
   Modal,
   StyleSheet,
   Text,
-  TouchableHighlight,
-  View,
   TouchableOpacity,
+  View,
 } from "react-native";
 
 import { MaterialCommunityIcons } from "@expo/vector-icons";

src/app/components/forms/AssembleIngestionObject.js

@@ -1,7 +1,7 @@
 import moment from "moment";
 import sendFormAnswer from "../../api/Ingestion/sendFormAnswer";
 
-const AssembleIngestionObject = (
+async function AssembleIngestionObject(
   { images, description },
   user,
   situation,
@@ -10,7 +10,7 @@ const AssembleIngestionObject = (
   date,
   time,
   address
-) => {
+) {
   const ingestionObject = {
     responseData: {
       array_to_json: [
@@ -33,9 +33,9 @@ const AssembleIngestionObject = (
     },
   };
 
-  const a = sendFormAnswer(ingestionObject);
-};
-const AssembleIngestionPluviometer = ({
+  return sendFormAnswer(ingestionObject);
+}
+const AssembleIngestionPluviometer = async ({
   pluviometer,
   description,
   images,
@@ -70,8 +70,6 @@ async function AssembleIngestionPluvRegistration(
   address,
   coordinates
 ) {
-  console.log(user);
-  console.log(coordinates);
   const pluvResgistrationObject = {
     responseData: {
       array_to_json: [

src/app/components/forms/OnSubmitAwaitModal.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import colors from "../../config/colors";
+
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { dimensions, screen_height } from "../../config/dimensions";
+
+const OnSubmitAwaitModal = ({ show }) => {
+  if(show){
+  return (
+    <Modal
+      transparent={true}
+      isVisible={show}
+      style={{
+        justifyContent: "flex-start",
+        alignSelf: "flex-end",
+      }}
+    >
+      <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
+        <MaterialCommunityIcons
+          name="sync"
+          size={48}
+          color={colors.primary}
+          style={{ alignSelf: "center", marginBottom: 12 }}
+        />
+        <Text style={styles.text}>
+          Aguarde um momento. Estamos enviando o formulário.
+        </Text>
+      </View>
+    </Modal>
+    
+  );
+    }else{
+      return(
+  <></>
+      );
+    }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    width: "80%",
+    height: 170,
+    // justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: colors.lightestGray,
+    borderColor: colors.primary,
+    borderWidth: 2,
+    borderRadius: 12,
+    padding: 12,
+  },
+  text: {
+    fontSize: dimensions.text.secondary,
+    textAlign: "center",
+    color: colors.primary,
+    fontWeight: "bold",
+  },
+});
+
+export default OnSubmitAwaitModal;

src/app/components/forms/OnSubmitMessageModal.js

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import colors from "../../config/colors";
+
+import { AntDesign } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { dimensions, screen_height } from "../../config/dimensions";
+import ConfirmationModal from "../ConfirmationModal";
+
+function OnSubmitMessageModal({ show, setShow, sucess, navigation }){
+const onModalClose = () =>{
+    setShow(false);
+    navigation.navigate("Home");
+}
+  if (show) {
+    return (
+      <Modal
+        transparent={true}
+        isVisible={show}   
+        style={{
+          justifyContent: "flex-start",
+          alignSelf: "flex-end",
+        }}
+      >
+        <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
+          <View style={{ flex: 0.85 }}>
+            {!sucess && (
+              <View>
+                <AntDesign
+                  name="warning"
+                  size={48}
+                  color={colors.primary}
+                  style={{ alignSelf: "center", marginBottom: 12 }}
+                />
+                <Text style={styles.text}>
+                  Erro ao enviar informação. Por favor, tente mais tarde!
+                </Text>
+              </View>
+            )}
+            {sucess && (
+              <View>
+                <MaterialCommunityIcons
+                  name="check-all"
+                  size={48}
+                  color={colors.primary}
+                  style={{ alignSelf: "center", marginBottom: 12 }}
+                />
+                <Text style={styles.text}>Informação enviada com sucesso!</Text>
+              </View>
+            )}
+          </View>
+          <View style={{ flex: 0.15 }}>
+            <Text style={styles.btn} onPress={()=> onModalClose()}>OK</Text>
+          </View>
+        </View>
+      </Modal>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: "absolute",
+    width: "80%",
+    height: 170,
+    // justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: colors.lightestGray,
+    borderColor: colors.primary,
+    borderWidth: 2,
+    borderRadius: 12,
+    padding: 12,
+  },
+  text: {
+    fontSize: dimensions.text.secondary,
+    textAlign: "center",
+    color: colors.black,
+    fontWeight: "bold",
+    alignSelf: "center",
+  },
+  btn: {
+    fontSize: dimensions.text.secondary,
+    textAlign: "right",
+    alignContent: "center",
+    color: colors.primary,
+    fontWeight: "bold",
+  },
+});
+
+export default OnSubmitMessageModal;

src/app/screens/PluviometerRegisterScreen.js

@@ -12,6 +12,8 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import { AuthContext } from "../auth/context";
 import { Shadow } from "react-native-shadow-2";
 import { AssembleIngestionPluvRegistration } from "../components/forms/AssembleIngestionObject";
+import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
+import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
@@ -114,69 +116,74 @@ function PluviometerRegisterScreen(props) {
   const [coordinates, setCoordinates] = useState(null);
   const { user, _ } = useContext(AuthContext);
 
+  const [showAwaitModal, setShowAwaitModal] = useState(false);
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [apiMessage, setApiMessage] = useState(null);
+
+  const sendForm = async (date,
+    time,
+    user,
+    address,
+    coordinates) => {
+    const isSent = await AssembleIngestionPluvRegistration(date,
+      time,
+      user,
+      address,
+      coordinates);
+    if (isSent) {
+      setApiMessage(isSent.ok);
+    }
+
+    return apiMessage;
+  };
+
   return (
-    <View>
+    <View style={{padding: 10, flex:1}}>
+     <OnSubmitAwaitModal show={showAwaitModal} />
+      <OnSubmitMessageModal
+        show={showMessageModal}
+        setShow={setShowMessageModal}
+        sucess={apiMessage}
+        navigation={props.navigation}
+      />
       <Form
         initialValues={{}}
-        onSubmit={async () => {
-          showMessage({
-            message: "Aguarde! Estamos enviando a informação.",
-            duration: 2005,
-            icon: "warning",
-            type: "warning",
-            onPress: () => {},
-          });
-          const isSent = await AssembleIngestionPluvRegistration(
+        onSubmit={async () => {          
+          setShowAwaitModal(true);
+          sendForm(
             date,
             time,
             user,
             location,
             coordinates
-          );
-          if (isSent.ok) {
-            showMessage({
-              message: "Pluviômetro cadastrado!",
-              duration: 1950,
-              icon: "success",
-              type: "success",
-              onPress: () => {},
-            });
-
-            props.navigation.navigate("Home");
-          } else {
-            showMessage({
-              message:
-                "Erro ao cadastrar pluviômetro. Por favor, tente mais tarde!",
-              duration: 1950,
-              icon: "danger",
-              type: "danger",
-              onPress: () => {},
+          ).then((isSent) => {
+              setShowAwaitModal(false);
+              setShowMessageModal(true);
             });
-          }
         }}
       >
-        <View padding={16}>
+        <View style={{padding: 6, flex:1}}>
           <Text style={styles.title}>Cadastro do Pluviômetro</Text>
-          {/* <Text */}
-          {/*   style={{ */}
-          {/*     marginTop: 24, */}
-          {/*     marginBottom: 16, */}
-          {/*     fontSize: dimensions.text.secondary, */}
-          {/*     fontWeight: "bold", */}
-          {/*     textAlign: "left", */}
-          {/*     color: colors.secondary, */}
-          {/*   }} */}
-          {/* > */}
-          {/*   Data do cadastro: */}
-          {/* </Text> */}
+           <Text 
+             style={{ 
+               marginTop: 24, 
+               marginBottom: 16, 
+               fontSize: dimensions.text.secondary, 
+               fontWeight: "bold", 
+               textAlign: "left", 
+               color: colors.secondary, 
+             }} 
+           > 
+             Data do cadastro: 
+           </Text> 
 
-          {/* <FormDatePicker */}
-          {/*   onDateChange={(value) => setDate(value)} */}
-          {/*   onTimeChange={(value) => setTime(value)} */}
-          {/*   date={date} */}
-          {/*   time={time} */}
-          {/*   formTypeFace={"pluviometerRegister"} */}
-          {/* /> */}
+           <FormDatePicker 
+             onDateChange={(value) => setDate(value)} 
+             onTimeChange={(value) => setTime(value)} 
+             date={date} 
+             time={time} 
+             formTypeFace={"pluviometerRegister"} 
+           /> 
           <Text style={styles.label}>Endereço do pluviômetro*: </Text>
 
           <View marginBottom={24}>

src/app/screens/PluviometerSharingDataScreen.js

@@ -13,6 +13,8 @@ import PickEventDateLocation from "../components/PickEventDateLocation";
 import { EventLocationContext } from "../context/EventLocationContext";
 import { formcode } from "../components/forms/FormsCode";
 import { AssembleIngestionPluviometer } from "../components/forms/AssembleIngestionObject";
+import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
+import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
@@ -39,8 +41,42 @@ function PluviometerSharingDataScreen(props) {
     context.defaultLocation();
   }, []);
 
+  const [showAwaitModal, setShowAwaitModal] = useState(false);
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [apiMessage, setApiMessage] = useState(null);
+
+  const sendForm = async ({
+    pluviometer,
+    description,
+    images,
+    user,
+    date,
+    time,
+  }) => {
+    const isSent = await AssembleIngestionPluviometer({
+      pluviometer,
+      description,
+      images,
+      user,
+      date,
+      time,
+    });
+    if (isSent) {
+      setApiMessage(isSent.ok);
+    }
+
+    return apiMessage;
+  };
+
   return (
     <Screen style={styles.container}>
+      <OnSubmitAwaitModal show={showAwaitModal} />
+      <OnSubmitMessageModal
+        show={showMessageModal}
+        setShow={setShowMessageModal}
+        sucess={apiMessage}
+        navigation={props.navigation}
+      />
       <ScrollView>
         <Form
           initialValues={{
@@ -49,15 +85,11 @@ function PluviometerSharingDataScreen(props) {
             images: [],
           }}
           onSubmit={(values) => {
-          //  insertPluviometerData({ ...values, dateTime, time });
-            AssembleIngestionPluviometer({ ...values, user, date, time})
-            showMessage({
-              message: "Informação enviada!",
-              duration: 3000,
-              icon: "success",
-              type: "success",
+            setShowAwaitModal(true);
+            sendForm({ ...values, user, date, time }).then((isSent) => {
+              setShowAwaitModal(false);
+              setShowMessageModal(true);
             });
-            props.navigation.navigate("Home");
           }}
           validationSchema={validationSchema}
         >

src/app/screens/RainSharingDataScreen.js

@@ -10,7 +10,7 @@ import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRainData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
-import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions, screen_height } from "../config/dimensions";
 import assets from "../config/assets";
 import moment from "moment";
 import { EventLocationContext } from "../context/EventLocationContext";
@@ -18,6 +18,8 @@ import PickEventDateLocation from "../components/PickEventDateLocation";
 import SvgLabeledButton from "../components/SvgLabeledButton";
 import { AssembleIngestionObject } from "../components/forms/AssembleIngestionObject";
 import { formcode } from "../components/forms/FormsCode";
+import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
+import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -26,18 +28,15 @@ const validationSchema = Yup.object().shape({
 
 function RainSharingDataScreen(props) {
   const user = props.route.params.user;
+  const code = formcode.rain;
   const [rain, setRain] = useState(-1);
   const [rainSituation, setRainSituation] = useState(null);
   const [error, setError] = useState(false);
-;
 
   const dims = scaleDimsFromWidth(85, 85, 27);
 
   const [date, setDate] = useState(moment());
   const [time, setTime] = useState(moment());
-
-  const code = formcode.rain;
-
   const context = useContext(EventLocationContext);
 
   useEffect(() => {
@@ -47,9 +46,47 @@ function RainSharingDataScreen(props) {
   const location = context.eventCoordinates;
   const address = context.eventLocation;
 
+  const [showAwaitModal, setShowAwaitModal] = useState(false);
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [apiMessage, setApiMessage] = useState(null);
+
+  const sendForm = async (
+    { images, description },
+    user,
+    situation,
+    code,
+    location,
+    date,
+    time,
+    address
+  ) => {
+    const isSent = await AssembleIngestionObject(
+      { images, description },
+      user,
+      situation,
+      code,
+      location,
+      date,
+      time,
+      address
+    );
+    setApiMessage(isSent.ok);
+
+    return apiMessage;
+  };
+
   return (
     <Screen style={styles.container}>
-      <ScrollView>
+    <OnSubmitAwaitModal
+      show={showAwaitModal}
+    />
+    <OnSubmitMessageModal
+      show={showMessageModal}
+      setShow={setShowMessageModal}
+      sucess={apiMessage}
+      navigation={props.navigation}
+    />
+          <ScrollView>
         <Form
           initialValues={{
             images: [],
@@ -59,7 +96,9 @@ function RainSharingDataScreen(props) {
               setError(true);
               return;
             }
-            AssembleIngestionObject(
+            
+            setShowAwaitModal(true);
+            sendForm(
               {
                 ...values,
               },
@@ -70,16 +109,10 @@ function RainSharingDataScreen(props) {
               date,
               time,
               address
-            );
-            // insertRainData({ ...values, rain, location, date, time, address });
-            showMessage({
-              message: "Informação enviada!",
-              duration: 1950,
-              icon: "success",
-              type: "success",
-              onPress: () => {},
-            });
-            props.navigation.navigate("Home");
+            ).then((isSent) => {
+              setShowAwaitModal(false); 
+              setShowMessageModal(true)});
+            
           }}
           validationSchema={validationSchema}
         >

src/app/screens/RiverFloodSharingDataScreen.js

@@ -18,6 +18,8 @@ import PickEventDateLocation from "../components/PickEventDateLocation";
 import SvgLabeledButton from "../components/SvgLabeledButton";
 import { formcode } from "../components/forms/FormsCode";
 import { AssembleIngestionObject } from "../components/forms/AssembleIngestionObject";
+import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";
+import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -44,8 +46,44 @@ function RiverFloodSharingDataScreen(props) {
   const [date, setDate] = useState(moment());
   const [time, setTime] = useState(moment());
 
+  const [showAwaitModal, setShowAwaitModal] = useState(false);
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [apiMessage, setApiMessage] = useState(null);
+
+  const sendForm = async (
+    { images, description },
+    user,
+    situation,
+    code,
+    location,
+    date,
+    time,
+    address
+  ) => {
+    const isSent = await AssembleIngestionObject(
+      { images, description },
+      user,
+      situation,
+      code,
+      location,
+      date,
+      time,
+      address
+    );
+    setApiMessage(isSent.ok);
+
+    return apiMessage;
+  };
+
   return (
     <Screen style={styles.container}>
+      <OnSubmitAwaitModal show={showAwaitModal} />
+      <OnSubmitMessageModal
+        show={showMessageModal}
+        setShow={setShowMessageModal}
+        sucess={apiMessage}
+        navigation={props.navigation}
+      />
       <KeyboardAwareScrollView
         resetScrollToCoords={{ x: 0, y: 0 }}
         scrollEnabled={true}
@@ -60,8 +98,8 @@ function RiverFloodSharingDataScreen(props) {
               setError(true);
               return;
             }
-            // insertRiverData({ ...values, riverScale, location, date, time, address,});
-            AssembleIngestionObject(
+            setShowAwaitModal(true);
+            sendForm(
               {
                 ...values,
               },
@@ -72,14 +110,10 @@ function RiverFloodSharingDataScreen(props) {
               date,
               time,
               address
-            );
-            showMessage({
-              message: "Informação enviada!",
-              duration: 1950,
-              icon: "success",
-              type: "success",
+            ).then((isSent) => {
+              setShowAwaitModal(false);
+              setShowMessageModal(true);
             });
-            props.navigation.navigate("Home");
           }}
           validationSchema={validationSchema}
         >

src/app/screens/SharingFloodZonesScreen.js

@@ -17,6 +17,8 @@ import PickEventDateLocation from "../components/PickEventDateLocation";
 import SvgLabeledButton from "../components/SvgLabeledButton";
 import { formcode } from "../components/forms/FormsCode";
 import { AssembleIngestionObject } from "../components/forms/AssembleIngestionObject";
+import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
+import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -42,8 +44,45 @@ function SharingFloodZonesScreen(props) {
   }, []);
   const location = context.eventCoordinates;
 
+  const [showAwaitModal, setShowAwaitModal] = useState(false);
+  const [showMessageModal, setShowMessageModal] = useState(false);
+  const [apiMessage, setApiMessage] = useState(null);
+
+  const sendForm = async (
+    { images, description },
+    user,
+    situation,
+    code,
+    location,
+    date,
+    time,
+    address
+  ) => {
+    const isSent = await AssembleIngestionObject(
+      { images, description },
+      user,
+      situation,
+      code,
+      location,
+      date,
+      time,
+      address
+    );
+    setApiMessage(isSent.ok);
+
+    return apiMessage;
+  };
+
+
   return (
     <Screen style={styles.container}>
+    <OnSubmitAwaitModal show={showAwaitModal} />
+      <OnSubmitMessageModal
+        show={showMessageModal}
+        setShow={setShowMessageModal}
+        sucess={apiMessage}
+        navigation={props.navigation}
+      />
       <KeyboardAwareScrollView
         resetScrollToCoords={{ x: 0, y: 0 }}
         scrollEnabled={true}
@@ -58,8 +97,8 @@ function SharingFloodZonesScreen(props) {
               setError(true);
               return;
             }
-            //insertFloodZone({ ...values, passable,  location, date, time, address, });
-            AssembleIngestionObject(
+            setShowAwaitModal(true);
+            sendForm(
               {
                 ...values,
               },
@@ -70,14 +109,10 @@ function SharingFloodZonesScreen(props) {
               date,
               time,
               address
-            );
-            showMessage({
-              message: "Informação enviada!",
-              duration: 1950,
-              icon: "success",
-              type: "success",
-            });
-            props.navigation.navigate("Home");
+            ).then((isSent) => {
+              setShowAwaitModal(false);
+              setShowMessageModal(true);
+            });            
           }}
           validationSchema={validationSchema}
         >