|
@ -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"; |
|
@ -58,6 +59,7 @@ function LocationPicker({ |
|
|
location, |
|
|
location, |
|
|
setLocationAddr, |
|
|
setLocationAddr, |
|
|
setGeoLocation, |
|
|
setGeoLocation, |
|
|
|
|
|
pluviometer, |
|
|
}) { |
|
|
}) { |
|
|
return ( |
|
|
return ( |
|
|
<View |
|
|
<View |
|
@ -68,43 +70,96 @@ function LocationPicker({ |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<MaterialIcons name="location-on" size={30} color={colors.primary} /> |
|
|
<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", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<MaterialCommunityIcons |
|
|
|
|
|
name="calendar-today" |
|
|
|
|
|
size={30} |
|
|
|
|
|
color={colors.primary} |
|
|
|
|
|
/> |
|
|
|
|
|
<View style={{ flexDirection: "row", marginTop: 16 }}> |
|
|
|
|
|
<Text style={styles.subText}> |
|
|
|
|
|
{pluviometer.regiterDate ? pluviometer.regiterDate : "Erro ao carregar a data"} |
|
|
|
|
|
</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</View> |
|
|
|
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
@ -115,22 +170,19 @@ function PluviometerRegisterScreen(props) { |
|
|
const [location, setLocationAddr] = useState("Defina o endereço no mapa"); |
|
|
const [location, setLocationAddr] = useState("Defina o endereço no mapa"); |
|
|
const [coordinates, setCoordinates] = useState(null); |
|
|
const [coordinates, setCoordinates] = useState(null); |
|
|
const { user, _ } = useContext(AuthContext); |
|
|
const { user, _ } = useContext(AuthContext); |
|
|
console.log(user); |
|
|
|
|
|
|
|
|
|
|
|
const [showAwaitModal, setShowAwaitModal] = useState(false); |
|
|
const [showAwaitModal, setShowAwaitModal] = useState(false); |
|
|
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); |
|
|
} |
|
|
} |
|
@ -139,8 +191,8 @@ function PluviometerRegisterScreen(props) { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View style={{padding: 10, flex:1}}> |
|
|
|
|
|
<OnSubmitAwaitModal show={showAwaitModal} /> |
|
|
|
|
|
|
|
|
<View style={{ padding: 10, flex: 1 }}> |
|
|
|
|
|
<OnSubmitAwaitModal show={showAwaitModal} /> |
|
|
<OnSubmitMessageModal |
|
|
<OnSubmitMessageModal |
|
|
show={showMessageModal} |
|
|
show={showMessageModal} |
|
|
setShow={setShowMessageModal} |
|
|
setShow={setShowMessageModal} |
|
@ -149,55 +201,60 @@ function PluviometerRegisterScreen(props) { |
|
|
/> |
|
|
/> |
|
|
<Form |
|
|
<Form |
|
|
initialValues={{}} |
|
|
initialValues={{}} |
|
|
onSubmit={async () => { |
|
|
|
|
|
|
|
|
onSubmit={async () => { |
|
|
setShowAwaitModal(true); |
|
|
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}}> |
|
|
|
|
|
|
|
|
<View style={{ padding: 6, flex: 1, flexDirection:"column" }}> |
|
|
<Text style={styles.title}>Cadastro do Pluviômetro</Text> |
|
|
<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={{flex: 0.25}}> |
|
|
|
|
|
<Text |
|
|
|
|
|
style={{ |
|
|
|
|
|
marginTop: 24, |
|
|
|
|
|
marginBottom: 16, |
|
|
|
|
|
fontSize: dimensions.text.secondary, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
color: colors.secondary, |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
Data do cadastro: |
|
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
|
|
|
<PluvDateTimePicker |
|
|
|
|
|
onDateChange={(value) => setDate(value)} |
|
|
|
|
|
onTimeChange={(value) => setTime(value)} |
|
|
|
|
|
date={date} |
|
|
|
|
|
time={time} |
|
|
|
|
|
formTypeFace={"pluviometerRegister"} |
|
|
|
|
|
pluviometer={user.pluviometer} |
|
|
/> |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View style={{flex: 0.25}}> |
|
|
|
|
|
<Text style={styles.label}>Endereço do pluviômetro*: </Text> |
|
|
|
|
|
|
|
|
<Institution user={user} /> |
|
|
|
|
|
<SubmitButton title="Cadastrar" paddingHorizontal={0} /> |
|
|
|
|
|
|
|
|
<View marginBottom={24}> |
|
|
|
|
|
<LocationPicker |
|
|
|
|
|
navigation={props.navigation} |
|
|
|
|
|
location={location} |
|
|
|
|
|
setLocationAddr={setLocationAddr} |
|
|
|
|
|
setGeoLocation={setCoordinates} |
|
|
|
|
|
pluviometer={user.pluviometer} |
|
|
|
|
|
/> |
|
|
|
|
|
</View> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View style={{flex: 0.25}}> |
|
|
|
|
|
<Institution user={user} /> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View style={{flex: 0.25}}> |
|
|
|
|
|
{!user.pluviometer && ( |
|
|
|
|
|
<SubmitButton title="Cadastrar" paddingHorizontal={0} /> |
|
|
|
|
|
)} |
|
|
|
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</Form> |
|
|
</Form> |
|
|
</View> |
|
|
</View> |
|
@ -232,6 +289,11 @@ const styles = StyleSheet.create({ |
|
|
textAlign: "center", |
|
|
textAlign: "center", |
|
|
color: colors.primary, |
|
|
color: colors.primary, |
|
|
}, |
|
|
}, |
|
|
|
|
|
date: { |
|
|
|
|
|
paddingLeft: 12, |
|
|
|
|
|
flexDirection: "column", |
|
|
|
|
|
justifyContent: "center", |
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
export default PluviometerRegisterScreen; |
|
|
export default PluviometerRegisterScreen; |