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

72
src/app/screens/RainSharingDataScreen.js

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

Loading…
Cancel
Save