Browse Source

Change rain icons in forms to svg

master
GabrielTrettel 4 years ago
parent
commit
4468872c7d
  1. 10
      src/app/config/assets.js
  2. 74
      src/app/screens/RainSharingDataScreen.js

10
src/app/config/assets.js

@ -6,6 +6,11 @@ import RiverFlood from "../assets/river-extravasado.svg";
import RiverLow from "../assets/river_low.svg";
import RiverHigh from "../assets/river_high.svg";
import RiverNormal from "../assets/river_normal.svg";
import RainNot from "../assets/sem_chuva.svg";
import RainLow from "../assets/chuva_fraca.svg";
import RainMedium from "../assets/chuva_moderada.svg";
import RainHigh from "../assets/chuva_forte.svg";
import RainVeryHigh from "../assets/chuva_muito_forte.svg";
export default {
floodZones: {
@ -27,10 +32,15 @@ export default {
rainLevel: {
RainIcon: RainIcon,
rain_0_5: require("../assets/sem_chuva.png"),
Rain_0_5: RainNot,
rain_1_5: require("../assets/chuva_fraca.png"),
Rain_1_5: RainLow,
rain_2_5: require("../assets/chuva_peq.png"),
Rain_2_5: RainMedium,
rain_3_5: require("../assets/chuva_forte.png"),
Rain_3_5: RainHigh,
rain_4_5: require("../assets/chuva_muito_forte.png"),
Rain_4_5: RainVeryHigh,
rain_5_5: require("../assets/chuva_pancadas.png"),
},
pluviometer: require("../assets/diario_pluviometrico.png"),

74
src/app/screens/RainSharingDataScreen.js

@ -37,6 +37,8 @@ function RainSharingDataScreen(props) {
const [date, setDate] = useState(moment());
const [time, setTime] = useState(moment());
const dims = scaleDimsFromWidth(85, 85, 27);
return (
<Screen style={styles.container}>
<Text
@ -66,7 +68,7 @@ function RainSharingDataScreen(props) {
duration: 1950,
icon: "success",
type: "success",
onPress: () => { },
onPress: () => {},
});
props.navigation.navigate("Home");
}}
@ -79,11 +81,7 @@ function RainSharingDataScreen(props) {
borderColor={rain == 0 ? colors.primary : colors.white}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_0_5}
/>
<Text style={styles.text}>Sem chuva</Text>
<assets.rainLevel.Rain_0_5 {...dims} />
</View>
</TouchableNativeFeedback>
@ -92,11 +90,7 @@ function RainSharingDataScreen(props) {
borderColor={rain == 1 ? colors.primary : colors.white}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_1_5}
/>
<Text style={styles.text}>Chuva fraca</Text>
<assets.rainLevel.Rain_1_5 {...dims} />
</View>
</TouchableNativeFeedback>
@ -105,26 +99,18 @@ function RainSharingDataScreen(props) {
borderColor={rain == 2 ? colors.primary : colors.white}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_2_5}
/>
<Text style={styles.text}>Chuva moderada</Text>
<assets.rainLevel.Rain_2_5 {...dims} />
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.imgs_row}>
<View flexDirection="row" justifyContent="center">
<TouchableNativeFeedback onPress={() => setRain(3)}>
<View
borderColor={rain == 3 ? colors.primary : colors.white}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_3_5}
/>
<Text style={styles.text}>Chuva forte</Text>
<assets.rainLevel.Rain_3_5 {...dims} />
</View>
</TouchableNativeFeedback>
@ -133,15 +119,11 @@ function RainSharingDataScreen(props) {
borderColor={rain == 4 ? colors.primary : colors.white}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_4_5}
/>
<Text style={styles.text}>Chuva muito forte</Text>
<assets.rainLevel.Rain_4_5 {...dims} />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(5)}>
{/*<TouchableNativeFeedback onPress={() => setRain(5)}>
<View
borderColor={rain == 5 ? colors.primary : colors.white}
style={styles.img_block}
@ -152,7 +134,7 @@ function RainSharingDataScreen(props) {
/>
<Text style={styles.text}>Pancada de chuva</Text>
</View>
</TouchableNativeFeedback>
</TouchableNativeFeedback>*/}
</View>
</View>
@ -162,9 +144,21 @@ function RainSharingDataScreen(props) {
<FormImagePicker backgroundColor={colors.primary} name="images" />
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
}}
>
{/*Data da coleta:*/}
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<View
style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
@ -177,7 +171,9 @@ function RainSharingDataScreen(props) {
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</View>
@ -197,8 +193,6 @@ function RainSharingDataScreen(props) {
);
}
const dims = scaleDimsFromWidth(85, 85, 27);
const styles = StyleSheet.create({
container: {
padding: 10,
@ -207,26 +201,16 @@ const styles = StyleSheet.create({
img_block: {
flex: 1,
borderRadius: 5,
padding: 10,
borderStyle: "dotted",
borderColor: colors.white,
borderWidth: borderWidth,
alignItems: "center",
width: dims.width,
},
floodingLogo: {
width: dims.width * 0.8,
height: dims.height * 0.8,
},
imgs_row: {
flexDirection: "row",
justifyContent: "space-between",
},
text: {
fontSize: dimensions.text.default,
textAlign: "center",
marginTop: 10,
},
error_txt: {
fontSize: dimensions.text.default,
color: colors.danger,

Loading…
Cancel
Save