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

src/App.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect} from "react";
-import { NavigationContainer } from '@react-navigation/native';
+import React, { useState, useEffect } from "react";
+import { NavigationContainer } from "@react-navigation/native";
 
 import navigationTheme from "./app/navigation/navigationTheme";
 import "./app/config/globals.js";
-import AppLoading from 'expo-app-loading';
+import AppLoading from "expo-app-loading";
 import FlashMessage from "react-native-flash-message";
 import AppNavigator from "./app/navigation/AppNavigator";
 import EventLocationProvider from "./app/context/EventLocationContext";
@@ -16,28 +16,37 @@ import { getLocation } from "./app/hooks/useLocation";
 import { useFiltering } from "./app/hooks/useFiltering";
 import NoInternetConnectionScreen from "./app/screens/NoInternetConnectionScreen";
 import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
+import getPluviometerStation from "./app/hooks/usePluviometricStation";
 
 export default function App() {
   const [user, setUser] = useState();
+  const [pluviometerStation, setPluviometerStation] = useState();
   const [isReady, setIsReady] = useState();
 
   const netInfo = useNetInfo();
 
   useEffect(() => {
-    user?.username != null && authStorage.setUser(user)
-  }, [user])
-
+    if (user?.username != null) {
+      getPluviometerStation(user.id, setPluviometerStation);
+      const pluv = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah"
+      authStorage.setUser({ ...user, pluviometer: pluviometerStation });
+    }
+  }, [user]);
 
   const restoreUser = async () => {
     const storageUser = await authStorage.getUser();
     if (storageUser) setUser(storageUser);
 
-    global.location = await getLocation();
+    global.location = { lat: -9.97111566376452, long: -67.80984283755332 }; //await getLocation();
   };
 
   if (!isReady && netInfo.isInternetReachable) {
     return (
-      <AppLoading startAsync={restoreUser} onFinish={() => setIsReady(true)} onError={(e) => console.log(e)} />
+      <AppLoading
+        startAsync={restoreUser}
+        onFinish={() => setIsReady(true)}
+        onError={(e) => console.log(e)}
+      />
     );
   } else if (netInfo.isInternetReachable) {
     global.formsSockets = useFiltering(global.location);

src/app/api/Websockets/SocketClient.js

@@ -1,71 +0,0 @@
-import { useEffect, useState } from "react";
-import { useFiltering } from "../../hooks/useFiltering";
-
-function createSocketObject(data, validos, response) {
-  //console.log("criando valuidos");
-  var socketObject = {
-    name: data.name,
-    socket: response,
-  };
-  validos.push(socketObject);
-  //  console.log(validos);
-}
-
-function isRequestedValue(item, renderOptions) {
-  if (
-    (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
-    (item.name == "automaticPluviometer" &&
-      renderOptions.oficial.automaticPluviometer) ||
-    (item.name == "rain" && renderOptions.citzen.rain) ||
-    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
-    (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
-    (item.name == "susceptibilityAreas" &&
-      renderOptions.oficial.susceptibilityAreas)
-  ) {
-    return true;
-  }
-}
-
-function verify_existingSockets(formType, renderOptions, validos) {
-  if (formType.response == null && isRequestedValue(formType, renderOptions)) {
-    //console.log("Criou socket: " + formType.name);
-    const socket = new WebSocket(
-      "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
-        formType.endpoint
-    );
-    formType.socketUrl = socket;
-    createSocketObject(formType, validos, socket);
-    return socket;
-  } else {
-    return null;
-  }
-}
-
-export default function SocketClient(dataOptionObject, focusChanged) {
-  const [data, setData] = useState(useFiltering().forms);
-  var validos = [];
-  const socket = verify_existingSockets(data[1], dataOptionObject, validos);  
-  const [dados, setDado] = useState();
-
-
-  useEffect(() => {
-    console.log(dados);
-    //  data.map((e) => verify_existingSockets(e, dataOptionObject, validos));
-    if (socket && dados != 'undefined') {
-    console.log("ESTÁ PASSANDO AQUI!!");
-      data[1].socketUrl.onmessage = ({ data }) => {
-       // data[1].response = data
-        setDado(data);
-        //   console.log("pegou espostas");
-      };
-    } else {
-      setDado(null);
-    }
-
-    //console.log(dados);
-  }, [dataOptionObject, focusChanged]);
-  return dados;
-  //
-  //console.log("data socket client: "+ JSON.stringify(data));
-  // return data.response;
-}

src/app/api/Websockets/webSocketClient.js

@@ -0,0 +1,4 @@
+const webSocketClient =
+  "ws://wpd.brazilsouth.cloudapp.azure.com:9090/hot/formsanswers?";
+
+export default webSocketClient;

src/app/components/MapModal.js

@@ -5,7 +5,11 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import SelfClosingModal from "../components/SelfClosingModal";
 import colors from "../config/colors";
 import { showMessage } from "react-native-flash-message";
-import { dimensions, scaleDimsFromWidth, screen_height } from "../config/dimensions";
+import {
+  dimensions,
+  scaleDimsFromWidth,
+  screen_height,
+} from "../config/dimensions";
 import { Svg, Image as ImageSvg } from "react-native-svg";
 import PluviometerGraphics from "./PluviometerGraphics";
 import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
@@ -36,7 +40,7 @@ function onCloseModal(setShowModal, setCurrentMarker) {
 function topBar(props, setShowModal, setCurrentMarker) {
   return (
     <View style={styles.topBar}>
-      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10}}>
+      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
         <Text style={[styles.bodyTitle, { color: "white" }]}>
           {props ? props.title : "Aguarde..."}
         </Text>
@@ -103,7 +107,11 @@ function iconInstitutionTextRow(props) {
   return (
     <View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
       <View alignSelf="flex-start" marginRight={10}>
-        <MaterialCommunityIcons name={props.name} size={25} color={colors.primary} />
+        <MaterialCommunityIcons
+          name={props.name}
+          size={25}
+          color={colors.primary}
+        />
       </View>
 
       <Text style={styles.text}>{props.description}</Text>
@@ -214,7 +222,6 @@ function moreInfo(props) {
 }
 
 function componentBody(props) {
-  
   const dims = scaleDimsFromWidth(95, 95, 16);
   // NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
   const pictures = JSON.parse(props.pictures);
@@ -279,19 +286,13 @@ function MapModal({ showModal, setShowModal, markers }) {
       const finalDate = moment().subtract(5, "days").format("YYYY-MM-DD");
 
       timeFilter = finalDate + "/" + initialDate;
-     // console.log(timeFilter);
-      
+      // console.log(timeFilter);
     }
 
     const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id);
     if (result.data && showModal && currentMarker == undefined) {
-      
-  
       setCurrentMarker(
-        AssembleModalObject(
-          JSON.stringify(result.data.responseData),
-          name
-        )
+        AssembleModalObject(JSON.stringify(result.data.responseData), name)
       );
     }
   };

src/app/hooks/useFiltering.js

@@ -1,12 +1,12 @@
 import moment from "moment";
+import webSocketClient from "../api/Websockets/webSocketClient";
 
 function useFiltering(location) {
-  const endpoint =
-    "ws://wpd.brazilsouth.cloudapp.azure.com:9090/hot/formsanswers?";
+  const endpoint = webSocketClient;
   const initialDate = moment().add(1, "days").format("YYYY-MM-DDTHH:mm:ss");
   const finalDate = moment().subtract(2, "days").format("YYYY-MM-DDTHH:mm:ss");
 
-   console.log(initialDate+"/"+finalDate);
+  //console.log(initialDate + "/" + finalDate);
 
   const filters = [
     {

src/app/hooks/useFormsAswers.js

@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from "react";
-import * as Location from "expo-location";
-import SocketClient from "../api/Websockets/SocketClient";
-import assets from "../config/assets";
-import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
-import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
-
-const custom_assets = {
-  pluviometer: assets.pluviometer,
-  officialPluviometer: assets.officialPluviometer,
-  floodZones: assets.floodZones,
-  riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
-    return assets.riverLevel[key];
-  }),
-  rainLevel: ["rain_0_5_pin", "rain_1_5_pin", "rain_2_5_pin", "rain_3_5_pin"].map((key) => {
-    return assets.rainLevel[key];
-  }),
-};
-const custom_assets_pin = {
-  pluviometer: assets.pluviometer_pin,
-  officialPluviometer: assets.officialPluviometer_pin,
-  floodZones: {
-    passable: PinTransitavel,
-    not_passable: PinIntransitavel,
-  },
-  riverLevel: ["low_pin", "normal_pin", "high_pin", "flooding_pin"].map(
-    (key) => {
-      return assets.riverLevel[key];
-    }
-  ),
-  rainLevel: [
-    "rain_0_5_pin",
-    "rain_1_5_pin",
-    "rain_2_5_pin",
-    "rain_3_5_pin",
-  ].map((key) => {
-    return assets.rainLevel[key];
-  }),
-};
-
-function getImage(name, situation) {
-  if (name == "automaticPluviometer") {
-    return custom_assets_pin.pluviometer;
-  }
-
-  if (name == "pluviometer") {
-    return custom_assets_pin.pluviometer;
-  }
-
-  if (name == "rain") {
-    if (situation == "sem chuva") {
-      return custom_assets_pin.rainLevel[0];
-    } else if (situation == "chuva fraca") {
-      return custom_assets_pin.rainLevel[1];
-    } else if (situation == "chuva moderada") {
-      return custom_assets_pin.rainLevel[2];
-    } else if (situation == "chuva forte") {
-      return custom_assets_pin.rainLevel[3];
-    }
-    return custom_assets_pin.rainLevel[3];
-  }
-
-  if (name == "riverFlood") {
-    if (situation == "baixo") {
-      return custom_assets_pin.riverLevel[0];
-    } else if (situation == "normal") {
-      return custom_assets_pin.riverLevel[1];
-    } else if (situation == "alto") {
-      return custom_assets_pin.riverLevel[2];
-    } else if (situation == "inundar") {
-      return custom_assets_pin.riverLevel[3];
-    }
-    return custom_assets_pin.riverLevel[0];
-  }
-  if (name == "floodZones") {
-    if (situation == "transitavel") {
-      return custom_assets_pin.floodZones.passable;
-    } else {
-      return custom_assets_pin.floodZones.not_passable;
-    }
-  }
-}
-
-function buildPolygonsObject(markers, response, name) {
-  var coordinate = [];
-  var formsanswersgeom = response.formsanswersgeom;
-  const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
-  var n = Object.keys(arrayCoordinates).length;
-
-  // console.log(arrayCoordinates);
-
-  for (let i = 0; i < n; i++) {
-    var lat = arrayCoordinates[i][1];
-    var lon = arrayCoordinates[i][0];
-    coordinate.push([lat, lon]);
-  }
-  //  console.log(coordinate);
-  var polygonObject = {
-    ID: response.formsanswersid,
-    name: name,
-    title: "Titulo", //response.fieldsanswerssituation
-    address: "Endereço", //response.fieldsanswerseventaddress,
-    coordinate: { coordinate },
-    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
-    description: "comentário", //response.fielsanswercomment,
-    logo: custom_assets.pluviometer,
-    pictures: null,
-    image: "", //getMarkerImage(answer.name),
-  };
-
-  markers.set(polygonObject.ID, polygonObject);
-}
-
-function buildMarkerObject(markers, response, name) {
-  //console.log(JSON.parse(response).responseData);
-  const resposta = JSON.parse(response).responseData.array_to_json[1].formsanswersgeom;
-//  console.log("\n\nresposta "+ (resposta.formsanswersid));
-  const formsanswersgeom = JSON.parse(resposta).coordinates;
- // console.log("\n\n ====================================\n"+JSON.stringify(formsanswersgeom));
-
-  var markerObject = {
-    ID: 3168,//response.formsanswersid,
-    name: name,
-    title: "Titulo", //response.fieldsanswerssituation
-    address: "Endereço", //response.fieldsanswerseventaddress,
-    coordinate: {
-      latitude: formsanswersgeom[1],
-      longitude:formsanswersgeom[0],
-    },
-    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
-    description: "comentário", //response.fielsanswercomment,
-    logo: custom_assets.pluviometer,
-    pictures: null,
-    image: getImage(name, "situação"), //getMarkerImage(answer.name),
-  };
-
-  markers.set(markerObject.ID, markerObject);
-
-}
-
-function verifyResponse(markers, data) {
-  // console.log(data.response);
-  if (data) {
-    // const response = JSON.parse(data).responseData.array_to_json;
-    response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, markers.name) :
-    buildMarkerObject(markers.markers, data, markers.name));
-  }
-}
-
-const getFormsAnswers = (dataOptionObject, focusChanged) => {
-  var markers = { markers: new Map() };
-  const answers = SocketClient(dataOptionObject, focusChanged);
-
-  //answers.forEach((r) =>
-  if (answers) {
-   // console.log("\n\nAnswers: " + answers);
-    verifyResponse(markers, answers); //buildMarkerObject(markers.markers, r));
-    //  return answers;
-  }
-  return markers;
-};
-
-export { getFormsAnswers };

src/app/hooks/usePluviometricStation.js

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
+import webSocketClient from "../api/Websockets/webSocketClient";
+
+async function getPluvStation_data(id) {
+  const result = await getFieldsAnswers.fieldsAnswers(null, id);
+  if (result.data) {
+    return result;
+  }
+  return null;
+}
+
+function assemblePluvStationObject(pluvData) {
+  var date = null;
+  var time = null;
+  var address = null;
+  var institutionType = null;
+  var institutionName = null;
+
+  pluvData.array_to_json.forEach(function (field) {
+    if (field.fieldname == "eventaddress") {
+      address = field.fieldsanswersvalue;
+    } else if (field.fieldname == "eventdate") {
+      date = field.fieldsanswersvalue;
+    } else if (field.fieldname == "eventtime") {
+      time = field.fieldsanswersvalue;
+    } else if (field.fieldname == "institutename") {
+      institutionName = field.fieldsanswersvalue;
+    } else if (field.fieldname == "institutetype") {
+      institutionType = field.institutionType;
+    }
+  });
+
+  return {
+    regiterDate: date + " | " + time,
+    address: address,
+    institutionType: institutionType,
+    institutionName: institutionName,
+    coordinates: {
+      lat: pluvData.formsanswerslatitude,
+      long: pluvData.formsanswerslongitude,
+    },
+  };
+}
+
+async function getPluviometerStation(userId, setPluviometerStation) {
+  const endpoint =
+    webSocketClient + `type=PLUVIOMETER_REGISTRATION&user=${userId}`;
+  const socketObject = new WebSocket(endpoint);
+
+  socketObject.onmessage = async ({ data }) => {
+    const dataObject = JSON.parse(data);
+    if (dataObject?.success) {
+      pluvStation_id = dataObject.responseData.array_to_json[0].formsanswersid;
+      pluvStation_data = await getPluvStation_data(pluvStation_id);
+      const pluvObject = assemblePluvStationObject(
+        pluvStation_data.data.responseData.array_to_json[0]
+      );
+      setPluviometerStation(pluvObject);
+    } else {
+      setPluviometerStation(false);
+    }
+  };
+
+  socketObject.onerror = (e) => {
+    console.log(e.message);
+    setPluviometerStation(null);
+  };
+
+  socketObject.close();
+
+  socketObject.onclose = () => {
+    console.log("FECHOU");
+  };
+}
+
+export default getPluviometerStation;

src/app/screens/AccountScreen.js

@@ -77,7 +77,7 @@ function AccountScreen(props) {
   const isRegistered = user?.username != null;
   const [showLog, setShowLog] = useState(false);
 
-  console.log(user);
+  //console.log(user);
   const logout = () => {
     setShowLog(false)
     setUser(true);
@@ -107,7 +107,7 @@ function AccountScreen(props) {
       icon: "account",
       show: isRegistered,
       IconProvider: MaterialCommunityIcons,
-      title: "Cadastrar pluviômetro",
+      title: user.pluviometer? "Dados do pluviômetro" : "Cadastrar pluviômetro",
       onPress: () => {
         props.navigation.navigate("PluviometerRegister");
       },

src/app/screens/MapFeedScreen.js

@@ -17,11 +17,11 @@ export default function MapFeedScreen(props) {
       susceptibilityAreas: false,
     },
     citzen: {
-      floodRisk: true,
+      floodRisk: false,
       pluviometer: true,
-      rain: true,
-      floodZones: true,
-      riverFlood: true,
+      rain: false,
+      floodZones: false,
+      riverFlood: false,
     },
   });  
 

src/app/screens/PluviometerRegisterScreen.js

@@ -9,6 +9,7 @@ import colors from "../config/colors/";
 import moment from "moment";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { AuthContext } from "../auth/context";
 import { Shadow } from "react-native-shadow-2";
 import { AssembleIngestionPluvRegistration } from "../components/forms/AssembleIngestionObject";
@@ -27,8 +28,8 @@ function Institution({ user }) {
   };
 
   return (
-    <View style={{ marginBottom: 24 }}>
-      <Text style={styles.label}>Tipo de instituição: </Text>
+    <View style={{ marginBottom: 24, flex: 1 }}>
+      <Text style={styles.labelTipoInst}>Tipo de instituição: </Text>
       <View style={{ flexDirection: "row", marginTop: 16 }}>
         <FontAwesome5 name="university" size={30} color={colors.primary} />
         <Text style={styles.subText}>
@@ -58,6 +59,7 @@ function LocationPicker({
   location,
   setLocationAddr,
   setGeoLocation,
+  pluviometer,
 }) {
   return (
     <View
@@ -68,43 +70,102 @@ function LocationPicker({
       }}
     >
       <MaterialIcons name="location-on" size={30} color={colors.primary} />
-      <View
-        style={{
-          marginLeft: 16,
-          flex: 1,
-        }}
-      >
-        <Shadow
-          viewStyle={{ width: "100%", height: 48 }}
-          offset={[0, 3]}
-          distance={3}
-          radius={4}
-          startColor="rgba(0, 0, 0, 0.15)"
-          paintInside={true}
+
+      {pluviometer && (
+        <View style={{ flexDirection: "row", marginTop: 16 }}>
+          <Text style={styles.subText}>
+            {pluviometer.address
+              ? pluviometer.address
+              : "Erro ao carregar endereço"}
+          </Text>
+        </View>
+      )}
+
+      {!pluviometer && (
+        <View
+          style={{
+            marginLeft: 16,
+            flex: 1,
+          }}
         >
-          <TouchableOpacity
-            onPress={() =>
-              navigation.navigate("FormMap", {
-                setLocationAddr: setLocationAddr,
-                setGeoLocation: setGeoLocation,
-              })
-            }
+          <Shadow
+            viewStyle={{ width: "100%", height: 48 }}
+            offset={[0, 3]}
+            distance={3}
+            radius={4}
+            startColor="rgba(0, 0, 0, 0.15)"
+            paintInside={true}
           >
-            <View
-              style={{
-                paddingLeft: 16,
-                backgroundColor: colors.white,
-                height: 48,
-                borderRadius: 5,
-                flexDirection: "row",
-                alignItems: "center",
-              }}
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate("FormMap", {
+                  setLocationAddr: setLocationAddr,
+                  setGeoLocation: setGeoLocation,
+                })
+              }
             >
-              <Text styles={styles.subText}>{location}</Text>
-            </View>
-          </TouchableOpacity>
-        </Shadow>
-      </View>
+              <View
+                style={{
+                  paddingLeft: 16,
+                  backgroundColor: colors.white,
+                  height: 48,
+                  borderRadius: 5,
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+              >
+                <Text styles={styles.subText}>{location}</Text>
+              </View>
+            </TouchableOpacity>
+          </Shadow>
+        </View>
+      )}
+    </View>
+  );
+}
+
+function PluvDateTimePicker({
+  onDateChange,
+  onTimeChange,
+  date,
+  time,
+  formTypeFace,
+  pluviometer,
+}) {
+  return (
+    <View style={{ flex: 1 }}>
+      {!pluviometer && (
+        <FormDatePicker
+          onDateChange={onDateChange}
+          onTimeChange={onTimeChange}
+          date={date}
+          time={time}
+          formTypeFace={formTypeFace}
+        />
+      )}
+
+      {pluviometer && (
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            alignContent: "center",
+          }}
+        >
+          <MaterialCommunityIcons
+            name="calendar-today"
+            size={30}
+            color={colors.primary}
+          />
+          <View style={styles.date}>
+            <Text style={styles.subTextDate}>
+              {pluviometer.regiterDate
+                ? pluviometer.regiterDate
+                : "Erro ao carregar a data"}
+            </Text>
+          </View>
+        </View>
+      )}
     </View>
   );
 }
@@ -120,16 +181,14 @@ function PluviometerRegisterScreen(props) {
   const [showMessageModal, setShowMessageModal] = useState(false);
   const [apiMessage, setApiMessage] = useState(null);
 
-  const sendForm = async (date,
-    time,
-    user,
-    address,
-    coordinates) => {
-    const isSent = await AssembleIngestionPluvRegistration(date,
+  const sendForm = async (date, time, user, address, coordinates) => {
+    const isSent = await AssembleIngestionPluvRegistration(
+      date,
       time,
       user,
       address,
-      coordinates);
+      coordinates
+    );
     if (isSent) {
       setApiMessage(isSent.ok);
     }
@@ -138,8 +197,8 @@ function PluviometerRegisterScreen(props) {
   };
 
   return (
-    <View style={{padding: 10, flex:1}}>
-     <OnSubmitAwaitModal show={showAwaitModal} />
+    <View style={{ padding: 10, flex: 1 }}>
+      <OnSubmitAwaitModal show={showAwaitModal} />
       <OnSubmitMessageModal
         show={showMessageModal}
         setShow={setShowMessageModal}
@@ -150,53 +209,73 @@ function PluviometerRegisterScreen(props) {
         initialValues={{}}
         onSubmit={async () => {
           setShowAwaitModal(true);
-          sendForm(
-            date,
-            time,
-            user,
-            location,
-            coordinates
-          ).then((isSent) => {
-              setShowAwaitModal(false);
-              setShowMessageModal(true);
-            });
+          sendForm(date, time, user, location, coordinates).then((isSent) => {
+            setShowAwaitModal(false);
+            setShowMessageModal(true);
+          });
         }}
       >
-        <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> 
-
-           <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}>
-            <LocationPicker
-              navigation={props.navigation}
-              location={location}
-              setLocationAddr={setLocationAddr}
-              setGeoLocation={setCoordinates}
-            />
+        <View
+          style={{
+            padding: 6,
+            flex: 1,
+            flexDirection: "column",
+            justifyContent: "space-evenly",
+          }}
+        >
+          <View style={{ flex: 0.05 }}>
+            <Text style={styles.title}>Cadastro do Pluviômetro</Text>
           </View>
+          <View style={{ flex: 0.95, justifyContent: "space-between" }}>
+            <View style={{ flex: 0.19 }}>
+              <Text
+                style={{
+                  marginTop: 24,
+                  marginBottom: 16,
+                  fontSize: dimensions.text.secondary,
+                  fontWeight: "bold",
+                  textAlign: "left",
+                  color: colors.secondary,
+                }}
+              >
+                Data do cadastro:
+              </Text>
 
-          <Institution user={user} />
-          <SubmitButton title="Cadastrar" paddingHorizontal={0} />
+              <PluvDateTimePicker
+                onDateChange={(value) => setDate(value)}
+                onTimeChange={(value) => setTime(value)}
+                date={date}
+                time={time}
+                formTypeFace={"pluviometerRegister"}
+                pluviometer={user.pluviometer}
+              />
+            </View>
+            <View style={{ flex: 0.19 }}>
+              <Text style={styles.label}>Endereço do pluviômetro*: </Text>
+
+              <View marginBottom={24}>
+                <LocationPicker
+                  navigation={props.navigation}
+                  location={location}
+                  setLocationAddr={setLocationAddr}
+                  setGeoLocation={setCoordinates}
+                  pluviometer={user.pluviometer}
+                />
+              </View>
+            </View>
+            <View style={{ flex: 0.38 }}>
+              <Institution user={user} />
+            </View>
+            <View style={{ flex: 0.19 }}>
+              {!user.pluviometer && (
+                <SubmitButton
+                  style={{ alignSelf: "" }}
+                  title="Cadastrar"
+                  paddingHorizontal={0}
+                />
+              )}
+            </View>
+          </View>
         </View>
       </Form>
     </View>
@@ -217,6 +296,12 @@ const styles = StyleSheet.create({
     textAlign: "left",
     color: colors.secondary,
   },
+  labelTipoInst: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.secondary,
+  },
   subText: {
     color: colors.subText,
     fontSize: 16,
@@ -224,13 +309,24 @@ const styles = StyleSheet.create({
     fontWeight: "500",
     paddingLeft: 16,
   },
+  subTextDate: {
+    color: colors.subText,
+    fontSize: 16,
+    alignSelf: "center",
+    fontWeight: "500",
+  },
   title: {
-    marginVertical: 24,
+    //   marginVertical: 24,
     fontSize: 18,
     fontWeight: "bold",
     textAlign: "center",
     color: colors.primary,
   },
+  date: {
+    paddingLeft: 12,
+    flexDirection: "column",
+    justifyContent: "center",
+  },
 });
 
 export default PluviometerRegisterScreen;