Browse Source

Refactoring code to use app/config/assets constant for all images

requires.
master
GabrielTrettel 4 years ago
parent
commit
b0830b2841
  1. 23
      src/app/config/assets.js
  2. 45
      src/app/hooks/selectFromDB.js
  3. 13
      src/app/screens/RainSharingDataScreen.js
  4. 164
      src/app/screens/RiverFloodSharingDataScreen.js
  5. 13
      src/app/screens/SharingDataScreen.js
  6. 5
      src/app/screens/SharingFloodZonesScreen.js

23
src/app/config/assets.js

@ -0,0 +1,23 @@
export default {
floodZones: {
floodIcon: require("../assets/pontos_alagamento_peq.png"),
passable: require("../assets/floodZonesAssets/passable_icon.png"),
notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
},
riverLevel: {
riverIcon: require("../assets/nivel_rio.png"),
low: require("../assets/rio_baixo.png"),
normal: require("../assets/rio_normal.png"),
high: require("../assets/rio_alto.png"),
flooding: require("../assets/rio_transbordando.png"),
},
rainLevel: {
rain_0_5: require("../assets/sem_chuva.png"),
rain_1_5: require("../assets/chuva_fraca.png"),
rain_2_5: require("../assets/chuva_peq.png"),
rain_3_5: require("../assets/chuva_forte.png"),
rain_4_5: require("../assets/chuva_muito_forte.png"),
rain_5_5: require("../assets/chuva_pancadas.png"),
},
pluviometer: require("../assets/diario_pluviometrico.png"),
};

45
src/app/hooks/selectFromDB.js

@ -1,27 +1,28 @@
import { useEffect, useReducer } from "react";
import "../config/globals";
const assets = {
floodZones: require("../assets/pontos_alagamento_peq.png"),
riverLevel: [
require("../assets/rio_baixo.png"),
require("../assets/rio_normal.png"),
require("../assets/rio_alto.png"),
require("../assets/rio_transbordando.png"),
],
import assets from "../config/assets";
const custom_assets = {
pluviometer: assets.pluviometer,
floodZones: assets.floodZones.floodIcon,
riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
return assets.riverLevel[key];
}),
rainLevel: [
require("../assets/sem_chuva.png"),
require("../assets/chuva_peq.png"),
require("../assets/chuva_peq.png"),
require("../assets/chuva_forte.png"),
require("../assets/chuva_muito_forte.png"),
require("../assets/chuva_pancadas.png"),
],
pluviometer: require("../assets/diario_pluviometrico.png"),
"rain_0_5",
"rain_1_5",
"rain_2_5",
"rain_3_5",
"rain_4_5",
"rain_5_5",
].map((key) => {
return assets.rainLevel[key];
}),
};
// NOTE: For debug pourposes
// NOTE: For debug pourposes, every icon will be placed some `offset` from
// another. In final release, offset must be assigned to 0.0
var offset = 0.001;
var displacement = 0;
@ -56,7 +57,7 @@ function partsePluviometer(row) {
latitude: row["Latitude"] + displacement,
longitude: row["Longitude"],
},
image: assets.pluviometer,
image: custom_assets.pluviometer,
description: row["Pluviometer"],
};
}
@ -74,7 +75,7 @@ function parseFloodZones(row) {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: assets.floodZones,
image: custom_assets.floodIcon,
description: row["Description"],
};
}
@ -94,7 +95,7 @@ function parseRiverLevel(row) {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: assets.riverLevel[riverIdx],
image: custom_assets.riverLevel[riverIdx],
description: riverLevel[riverIdx],
};
}
@ -121,7 +122,7 @@ function parseRainLevel(row) {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: assets.rainLevel[rainIdx],
image: custom_assets.rainLevel[rainIdx],
description: rainLevel[rainIdx],
};
}

13
src/app/screens/RainSharingDataScreen.js

@ -12,6 +12,7 @@ import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { scaleDimsFromWidth } from "../config/dimensions";
import assets from "../config/assets";
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -63,7 +64,7 @@ function RainSharingDataScreen(props) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/sem_chuva.png")}
source={assets.rainLevel.rain_0_5}
/>
<Text style={styles.text}>Sem chuva</Text>
</View>
@ -76,7 +77,7 @@ function RainSharingDataScreen(props) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_fraca.png")}
source={assets.rainLevel.rain_1_5}
/>
<Text style={styles.text}>Chuva fraca</Text>
</View>
@ -89,7 +90,7 @@ function RainSharingDataScreen(props) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
source={assets.rainLevel.rain_2_5}
/>
<Text style={styles.text}>Chuva moderada</Text>
</View>
@ -104,7 +105,7 @@ function RainSharingDataScreen(props) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_forte.png")}
source={assets.rainLevel.rain_3_5}
/>
<Text style={styles.text}>Chuva forte</Text>
</View>
@ -117,7 +118,7 @@ function RainSharingDataScreen(props) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")}
source={assets.rainLevel.rain_4_5}
/>
<Text style={styles.text}>Chuva muito forte</Text>
</View>
@ -130,7 +131,7 @@ function RainSharingDataScreen(props) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")}
source={assets.rainLevel.rain_5_5}
/>
<Text style={styles.text}>Pancada de chuva</Text>
</View>

164
src/app/screens/RiverFloodSharingDataScreen.js

@ -11,7 +11,8 @@ import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRiverData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import assets from "../config/assets";
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -37,91 +38,96 @@ function RiverFloodSharingDataScreen(props) {
Nível da água do rio
</Text>
<KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={true}>
<Form
initialValues={{
images: [],
}}
onSubmit={(values) => {
insertRiverData({ ...values, riverScale, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={true}
>
<View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRiverScale(0)}>
<View
borderWidth={riverScale == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/rio_baixo.png")}
/>
<Text style={styles.text}>Baixo</Text>
</View>
</TouchableNativeFeedback>
<Form
initialValues={{
images: [],
}}
onSubmit={(values) => {
insertRiverData({ ...values, riverScale, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
<View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRiverScale(0)}>
<View
borderWidth={riverScale == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.riverLevel.low}
/>
<Text style={styles.text}>Baixo</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRiverScale(1)}>
<View
borderWidth={riverScale == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/rio_normal.png")}
/>
<Text style={styles.text}>Rio normal</Text>
</View>
</TouchableNativeFeedback>
</View>
<TouchableNativeFeedback onPress={() => setRiverScale(1)}>
<View
borderWidth={riverScale == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.riverLevel.normal}
/>
<Text style={styles.text}>Rio normal</Text>
</View>
</TouchableNativeFeedback>
</View>
<View
style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRiverScale(2)}>
<View
borderWidth={riverScale == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/rio_alto.png")}
/>
<Text style={styles.text}>Alto</Text>
</View>
</TouchableNativeFeedback>
<View
style={{
marginTop: 10,
flexDirection: "row",
justifyContent: "space-around",
}}
>
<TouchableNativeFeedback onPress={() => setRiverScale(2)}>
<View
borderWidth={riverScale == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.riverLevel.high}
/>
<Text style={styles.text}>Alto</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRiverScale(3)}>
<View
borderWidth={riverScale == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/rio_transbordando.png")}
/>
<Text style={styles.text}>Transbordando</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRiverScale(3)}>
<View
borderWidth={riverScale == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={assets.riverLevel.flooding}
/>
<Text style={styles.text}>Transbordando</Text>
</View>
</TouchableNativeFeedback>
</View>
</View>
</View>
<FormImagePicker backgroundColor="#1976D2" name="images" />
<FormImagePicker backgroundColor="#1976D2" name="images" />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</KeyboardAwareScrollView>
</Screen>
);

13
src/app/screens/SharingDataScreen.js

@ -7,7 +7,7 @@ import RainSharingDataScreen from "../screens/RainSharingDataScreen";
import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
import PluviometerSharingDataScreen from "./PluviometerSharingDataScreen";
import RiverFloodSharingDataScreen from "./RiverFloodSharingDataScreen";
import assets from "../config/assets";
//1/3
function SharingDataScreen({ navigation }) {
@ -20,7 +20,7 @@ function SharingDataScreen({ navigation }) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/pontos_alagamento_peq.png")}
source={assets.floodZones.floodIcon}
/>
<Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
</TouchableOpacity>
@ -31,7 +31,7 @@ function SharingDataScreen({ navigation }) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
source={assets.rainLevel.rain_2_5}
/>
<Text style={styles.text}>Chuva</Text>
</TouchableOpacity>
@ -42,10 +42,7 @@ function SharingDataScreen({ navigation }) {
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("PluviometerSharingData")}
>
<Image
style={styles.floodingLogo}
source={require("../assets/diario_pluviometrico.png")}
/>
<Image style={styles.floodingLogo} source={assets.pluviometer} />
<Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
</TouchableOpacity>
@ -55,7 +52,7 @@ function SharingDataScreen({ navigation }) {
>
<Image
style={styles.floodingLogo}
source={require("../assets/nivel_rio.png")}
source={assets.riverLevel.riverIcon}
/>
<Text style={styles.text}>Nível de água {"\n"}no rio</Text>
</TouchableOpacity>

5
src/app/screens/SharingFloodZonesScreen.js

@ -12,6 +12,7 @@ import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Screen from "../components/Screen";
import assets from "../config/assets";
function submitForm(props) {
// console.log(props);
@ -72,7 +73,7 @@ function SharingFloodZonesScreen(props) {
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/passable_icon.png")}
source={assets.floodZones.passable}
/>
<Text style={styles.text}>Transitável</Text>
</View>
@ -85,7 +86,7 @@ function SharingFloodZonesScreen(props) {
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/not_passable_icon.png")}
source={assets.floodZones.notPassable}
/>
<Text style={styles.text}>Intransitável</Text>
</View>

Loading…
Cancel
Save