Browse Source

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

master
GabrielTrettel 3 years ago
parent
commit
3bb744443b
  1. 25
      src/App.js
  2. 71
      src/app/api/Websockets/SocketClient.js
  3. 4
      src/app/api/Websockets/webSocketClient.js
  4. 23
      src/app/components/MapModal.js
  5. 6
      src/app/hooks/useFiltering.js
  6. 163
      src/app/hooks/useFormsAswers.js
  7. 77
      src/app/hooks/usePluviometricStation.js
  8. 4
      src/app/screens/AccountScreen.js
  9. 8
      src/app/screens/MapFeedScreen.js
  10. 140
      src/app/screens/PluviometerRegisterScreen.js

25
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 navigationTheme from "./app/navigation/navigationTheme";
import "./app/config/globals.js"; 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 FlashMessage from "react-native-flash-message";
import AppNavigator from "./app/navigation/AppNavigator"; import AppNavigator from "./app/navigation/AppNavigator";
import EventLocationProvider from "./app/context/EventLocationContext"; import EventLocationProvider from "./app/context/EventLocationContext";
@ -16,28 +16,37 @@ import { getLocation } from "./app/hooks/useLocation";
import { useFiltering } from "./app/hooks/useFiltering"; import { useFiltering } from "./app/hooks/useFiltering";
import NoInternetConnectionScreen from "./app/screens/NoInternetConnectionScreen"; import NoInternetConnectionScreen from "./app/screens/NoInternetConnectionScreen";
import NetInfo, { useNetInfo } from "@react-native-community/netinfo"; import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
import getPluviometerStation from "./app/hooks/usePluviometricStation";
export default function App() { export default function App() {
const [user, setUser] = useState(); const [user, setUser] = useState();
const [pluviometerStation, setPluviometerStation] = useState();
const [isReady, setIsReady] = useState(); const [isReady, setIsReady] = useState();
const netInfo = useNetInfo(); const netInfo = useNetInfo();
useEffect(() => { 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 restoreUser = async () => {
const storageUser = await authStorage.getUser(); const storageUser = await authStorage.getUser();
if (storageUser) setUser(storageUser); if (storageUser) setUser(storageUser);
global.location = await getLocation();
global.location = { lat: -9.97111566376452, long: -67.80984283755332 }; //await getLocation();
}; };
if (!isReady && netInfo.isInternetReachable) { if (!isReady && netInfo.isInternetReachable) {
return ( 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) { } else if (netInfo.isInternetReachable) {
global.formsSockets = useFiltering(global.location); global.formsSockets = useFiltering(global.location);

71
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;
}

4
src/app/api/Websockets/webSocketClient.js

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

23
src/app/components/MapModal.js

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

6
src/app/hooks/useFiltering.js

@ -1,12 +1,12 @@
import moment from "moment"; import moment from "moment";
import webSocketClient from "../api/Websockets/webSocketClient";
function useFiltering(location) { 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 initialDate = moment().add(1, "days").format("YYYY-MM-DDTHH:mm:ss");
const finalDate = moment().subtract(2, "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 = [ const filters = [
{ {

163
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 };

77
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;

4
src/app/screens/AccountScreen.js

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

8
src/app/screens/MapFeedScreen.js

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

140
src/app/screens/PluviometerRegisterScreen.js

@ -9,6 +9,7 @@ import colors from "../config/colors/";
import moment from "moment"; import moment from "moment";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import { FontAwesome5 } from "@expo/vector-icons"; import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { AuthContext } from "../auth/context"; import { AuthContext } from "../auth/context";
import { Shadow } from "react-native-shadow-2"; import { Shadow } from "react-native-shadow-2";
import { AssembleIngestionPluvRegistration } from "../components/forms/AssembleIngestionObject"; import { AssembleIngestionPluvRegistration } from "../components/forms/AssembleIngestionObject";
@ -27,8 +28,8 @@ function Institution({ user }) {
}; };
return ( 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 }}> <View style={{ flexDirection: "row", marginTop: 16 }}>
<FontAwesome5 name="university" size={30} color={colors.primary} /> <FontAwesome5 name="university" size={30} color={colors.primary} />
<Text style={styles.subText}> <Text style={styles.subText}>
@ -58,6 +59,7 @@ function LocationPicker({
location, location,
setLocationAddr, setLocationAddr,
setGeoLocation, setGeoLocation,
pluviometer,
}) { }) {
return ( return (
<View <View
@ -68,6 +70,18 @@ function LocationPicker({
}} }}
> >
<MaterialIcons name="location-on" size={30} color={colors.primary} /> <MaterialIcons name="location-on" size={30} color={colors.primary} />
{pluviometer && (
<View style={{ flexDirection: "row", marginTop: 16 }}>
<Text style={styles.subText}>
{pluviometer.address
? pluviometer.address
: "Erro ao carregar endereço"}
</Text>
</View>
)}
{!pluviometer && (
<View <View
style={{ style={{
marginLeft: 16, marginLeft: 16,
@ -105,6 +119,53 @@ function LocationPicker({
</TouchableOpacity> </TouchableOpacity>
</Shadow> </Shadow>
</View> </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> </View>
); );
} }
@ -120,16 +181,14 @@ function PluviometerRegisterScreen(props) {
const [showMessageModal, setShowMessageModal] = useState(false); const [showMessageModal, setShowMessageModal] = useState(false);
const [apiMessage, setApiMessage] = useState(null); 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, time,
user, user,
address, address,
coordinates);
coordinates
);
if (isSent) { if (isSent) {
setApiMessage(isSent.ok); setApiMessage(isSent.ok);
} }
@ -138,7 +197,7 @@ function PluviometerRegisterScreen(props) {
}; };
return ( return (
<View style={{padding: 10, flex:1}}>
<View style={{ padding: 10, flex: 1 }}>
<OnSubmitAwaitModal show={showAwaitModal} /> <OnSubmitAwaitModal show={showAwaitModal} />
<OnSubmitMessageModal <OnSubmitMessageModal
show={showMessageModal} show={showMessageModal}
@ -150,20 +209,25 @@ function PluviometerRegisterScreen(props) {
initialValues={{}} initialValues={{}}
onSubmit={async () => { onSubmit={async () => {
setShowAwaitModal(true); setShowAwaitModal(true);
sendForm(
date,
time,
user,
location,
coordinates
).then((isSent) => {
sendForm(date, time, user, location, coordinates).then((isSent) => {
setShowAwaitModal(false); setShowAwaitModal(false);
setShowMessageModal(true); setShowMessageModal(true);
}); });
}} }}
> >
<View style={{padding: 6, flex:1}}>
<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> <Text style={styles.title}>Cadastro do Pluviômetro</Text>
</View>
<View style={{ flex: 0.95, justifyContent: "space-between" }}>
<View style={{ flex: 0.19 }}>
<Text <Text
style={{ style={{
marginTop: 24, marginTop: 24,
@ -177,13 +241,16 @@ function PluviometerRegisterScreen(props) {
Data do cadastro: Data do cadastro:
</Text> </Text>
<FormDatePicker
<PluvDateTimePicker
onDateChange={(value) => setDate(value)} onDateChange={(value) => setDate(value)}
onTimeChange={(value) => setTime(value)} onTimeChange={(value) => setTime(value)}
date={date} date={date}
time={time} time={time}
formTypeFace={"pluviometerRegister"} formTypeFace={"pluviometerRegister"}
pluviometer={user.pluviometer}
/> />
</View>
<View style={{ flex: 0.19 }}>
<Text style={styles.label}>Endereço do pluviômetro*: </Text> <Text style={styles.label}>Endereço do pluviômetro*: </Text>
<View marginBottom={24}> <View marginBottom={24}>
@ -192,11 +259,23 @@ function PluviometerRegisterScreen(props) {
location={location} location={location}
setLocationAddr={setLocationAddr} setLocationAddr={setLocationAddr}
setGeoLocation={setCoordinates} setGeoLocation={setCoordinates}
pluviometer={user.pluviometer}
/> />
</View> </View>
</View>
<View style={{ flex: 0.38 }}>
<Institution user={user} /> <Institution user={user} />
<SubmitButton title="Cadastrar" paddingHorizontal={0} />
</View>
<View style={{ flex: 0.19 }}>
{!user.pluviometer && (
<SubmitButton
style={{ alignSelf: "" }}
title="Cadastrar"
paddingHorizontal={0}
/>
)}
</View>
</View>
</View> </View>
</Form> </Form>
</View> </View>
@ -217,6 +296,12 @@ const styles = StyleSheet.create({
textAlign: "left", textAlign: "left",
color: colors.secondary, color: colors.secondary,
}, },
labelTipoInst: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.secondary,
},
subText: { subText: {
color: colors.subText, color: colors.subText,
fontSize: 16, fontSize: 16,
@ -224,13 +309,24 @@ const styles = StyleSheet.create({
fontWeight: "500", fontWeight: "500",
paddingLeft: 16, paddingLeft: 16,
}, },
subTextDate: {
color: colors.subText,
fontSize: 16,
alignSelf: "center",
fontWeight: "500",
},
title: { title: {
marginVertical: 24,
// marginVertical: 24,
fontSize: 18, fontSize: 18,
fontWeight: "bold", fontWeight: "bold",
textAlign: "center", textAlign: "center",
color: colors.primary, color: colors.primary,
}, },
date: {
paddingLeft: 12,
flexDirection: "column",
justifyContent: "center",
},
}); });
export default PluviometerRegisterScreen; export default PluviometerRegisterScreen;
Loading…
Cancel
Save