Browse Source

preventing the user from registering more than one pluviometer station

master
analuizaff 3 years ago
parent
commit
0781256c4a
  1. 234
      src/app/screens/PluviometerRegisterScreen.js
  2. 3
      src/app/screens/RegisterScreen.js

234
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";
@ -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;

3
src/app/screens/RegisterScreen.js

@ -393,7 +393,8 @@ export default function RegisterScreen(props) {
institution: "", institution: "",
secQuestion: "", secQuestion: "",
secQuestionAns: "", secQuestionAns: "",
role: "",
role: "",
pluviometer: false,
consent: true, //ALTERAR P/ FALSE consent: true, //ALTERAR P/ FALSE
}} }}
onSubmit={(form, actions) => { onSubmit={(form, actions) => {

Loading…
Cancel
Save