Browse Source

Forms data integrated with maps

master
GabrielTrettel 4 years ago
parent
commit
22c8c0e4f9
  1. 45
      src/app/database/databaseLoader.js
  2. 14
      src/app/database/db.js
  3. 72
      src/app/hooks/selectFromDB.js
  4. 2
      src/app/screens/MapFeedScreen.js
  5. 47
      src/app/screens/RainSharingDataScreen.js
  6. 55
      src/app/screens/RiverFloodSharingDataScreen.js

45
src/app/database/databaseLoader.js

@ -49,9 +49,52 @@ function insertPluviometerData({ pluviometer, images, date, location }) {
parseFloat(pluviometer),
];
transaction(global.userDataBase, query, values);
}
function insertRainData({ images, rain, location }) {
const query = `INSERT INTO RainLevel(RainIdx, Images, Latitude, Longitude) VALUES(?, ?, ?, ?);`;
if (location === undefined) {
console.debug("undefined location");
return;
}
const values = [
parseInt(rain),
JSON.stringify(images),
parseFloat(location["latitude"]),
parseFloat(location["longitude"]),
];
console.log(values);
transaction(global.userDataBase, query, values);
}
function insertRiverData({ images, riverScale, location }) {
const query = `INSERT INTO RiverLevel(RiverIdx, Images, Latitude, Longitude) VALUES(?, ?, ?, ?);`;
if (location === undefined) {
console.debug("undefined location");
return;
}
const values = [
parseInt(riverScale),
JSON.stringify(images),
parseFloat(location["latitude"]),
parseFloat(location["longitude"]),
];
console.log(values);
transaction(global.userDataBase, query, values);
}
export { insertFloodZone, insertPluviometerData };
export {
insertFloodZone,
insertPluviometerData,
insertRainData,
insertRiverData,
};

14
src/app/database/db.js

@ -17,6 +17,20 @@ const init_queries = [
Longitude real NOT NULL,
Precipitation real NOT NULL
);`,
`CREATE TABLE IF NOT EXISTS RainLevel (
Id integer PRIMARY KEY autoincrement,
RainIdx INTEGER NOT NULL,
Images text NOT NULL,
Latitude real NOT NULL,
Longitude real NOT NULL
);`,
`CREATE TABLE IF NOT EXISTS RiverLevel (
Id integer PRIMARY KEY autoincrement,
RiverIdx INTEGER NOT NULL,
Images text NOT NULL,
Latitude real NOT NULL,
Longitude real NOT NULL
);`,
];
// `CREATE TABLE IF NOT EXISTS Users (

72
src/app/hooks/selectFromDB.js

@ -1,22 +1,41 @@
import { useEffect, useReducer } from "react";
import "../config/globals";
const floodZoneAsset = require("../assets/pontos_alagamento_peq.png");
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"),
],
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"),
};
// NOTE: For debug pourposes
var offset = 0.001;
var displacement = 0;
var ID = 0;
function partsePluviometer(row) {
displacement += offset;
return {
key: 999,
title: "pluviometro",
key: ++ID,
title: "Pluviometro",
coordinate: {
latitude: row["Latitude"] + displacement,
longitude: row["Longitude"],
},
image: floodZoneAsset,
image: assets.pluviometer,
description: row["Pluviometer"],
};
}
@ -24,17 +43,56 @@ function partsePluviometer(row) {
function parseFloodZones(row) {
displacement += offset;
return {
key: row["Id"],
key: ++ID,
title: row["Passable"] == 0 ? "Transponível" : "Intransponível",
coordinate: {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: floodZoneAsset,
image: assets.floodZones,
description: row["Description"],
};
}
function parseRiverLevel(row) {
displacement += offset;
const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
const riverIdx = row["RiverIdx"];
return {
key: ++ID,
title: "Nível do rio",
coordinate: {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: assets.riverLevel[riverIdx],
description: riverLevel[riverIdx],
};
}
function parseRainLevel(row) {
displacement += offset;
const rainLevel = [
"Sem chuva",
"Chuva fraca",
"Chuva moderada",
"Chuva forte",
"Chuva muito forte",
"Pancada de chuva",
];
const rainIdx = row["RainIdx"];
return {
key: ++ID,
title: "Nível da chuva",
coordinate: {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: assets.rainLevel[rainIdx],
description: rainLevel[rainIdx],
};
}
function parseResult(db_result, parseRow) {
var warnings = [];
@ -70,6 +128,8 @@ function useMarkers() {
const queriesToParsersMapper = [
["SELECT * FROM FloodZones;", parseFloodZones],
["SELECT * FROM Pluviometer;", partsePluviometer],
["SELECT * FROM RiverLevel;", parseRiverLevel],
["SELECT * FROM RainLevel;", parseRainLevel],
];
queriesToParsersMapper.forEach(([query, parser]) => {

2
src/app/screens/MapFeedScreen.js

@ -11,6 +11,8 @@ function MapFeedScreen(props) {
const location = useLocation();
const markers = useMarkers();
console.log(markers.markers);
return (
<View style={styles.container}>
<MapView

47
src/app/screens/RainSharingDataScreen.js

@ -15,42 +15,45 @@ import useLocation from "../hooks/useLocation";
import { Image, Text, TouchableOpacity } from "react-native";
import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader";
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
description: Yup.string()
.label("Description")
.required("Por favor, forneça uma descrição"),
});
const borderWidth = 4;
function RainSharingDataScreen() {
const [passable, setPassable] = useState(0);
const [rain, setRain] = useState(0);
const location = useLocation();
return (
<Screen style={styles.container}>
<Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
<Text
style={{
fontSize: 18,
fontWeight: "bold",
color: "#1976D2",
textAlign: "center",
marginBottom: 30,
}}
>
Chuva
</Text>
<Form
initialValues={{
title: "",
price: "",
description: "",
category: null,
images: [],
}}
onSubmit={(values) => submitForm({ ...values, passable, location })}
onSubmit={(values) => insertRainData({ ...values, rain, location })}
validationSchema={validationSchema}
>
<View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
<TouchableNativeFeedback onPress={() => setRain(0)}>
<View
borderWidth={passable == 0 ? borderWidth : 0}
borderWidth={rain == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -61,9 +64,9 @@ function RainSharingDataScreen() {
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<TouchableNativeFeedback onPress={() => setRain(1)}>
<View
borderWidth={passable == 1 ? borderWidth : 0}
borderWidth={rain == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -74,9 +77,9 @@ function RainSharingDataScreen() {
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(2)}>
<TouchableNativeFeedback onPress={() => setRain(2)}>
<View
borderWidth={passable == 2 ? borderWidth : 0}
borderWidth={rain == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -91,9 +94,9 @@ function RainSharingDataScreen() {
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(3)}>
<TouchableNativeFeedback onPress={() => setRain(3)}>
<View
borderWidth={passable == 3 ? borderWidth : 0}
borderWidth={rain == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -104,9 +107,9 @@ function RainSharingDataScreen() {
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(4)}>
<TouchableNativeFeedback onPress={() => setRain(4)}>
<View
borderWidth={passable == 4 ? borderWidth : 0}
borderWidth={rain == 4 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -117,9 +120,9 @@ function RainSharingDataScreen() {
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(5)}>
<TouchableNativeFeedback onPress={() => setRain(5)}>
<View
borderWidth={passable == 5 ? borderWidth : 0}
borderWidth={rain == 5 ? borderWidth : 0}
style={styles.img_block}
>
<Image

55
src/app/screens/RiverFloodSharingDataScreen.js

@ -1,56 +1,55 @@
import React, { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
import { StyleSheet, View } from "react-native";
import * as Yup from "yup";
import {
Form,
FormField,
FormPicker as Picker,
SubmitButton,
} from "../components/forms";
import CategoryPickerItem from "../components/CategoryPickerItem";
import { Form, FormPicker as Picker, SubmitButton } from "../components/forms";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import { Image, Text, TouchableOpacity } from "react-native";
import { Image, Text } from "react-native";
import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRiverData } from "../database/databaseLoader";
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
description: Yup.string()
.label("Description")
.required("Por favor, forneça uma descrição"),
});
const borderWidth = 4;
function RiverFloodSharingDataScreen() {
const [passable, setPassable] = useState(0);
const [riverScale, setRiverScale] = useState(0);
const location = useLocation();
return (
<Screen style={styles.container}>
<Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
<Text
style={{
fontSize: 18,
fontWeight: "bold",
color: "#1976D2",
textAlign: "center",
marginBottom: 30,
}}
>
Nível da água do rio
</Text>
<Form
initialValues={{
title: "",
price: "",
description: "",
category: null,
images: [],
}}
onSubmit={(values) => submitForm({ ...values, passable, location })}
onSubmit={(values) =>
insertRiverData({ ...values, riverScale, location })
}
validationSchema={validationSchema}
>
<View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
<TouchableNativeFeedback onPress={() => setRiverScale(0)}>
<View
borderWidth={passable == 0 ? borderWidth : 0}
borderWidth={riverScale == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -61,9 +60,9 @@ function RiverFloodSharingDataScreen() {
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<TouchableNativeFeedback onPress={() => setRiverScale(1)}>
<View
borderWidth={passable == 1 ? borderWidth : 0}
borderWidth={riverScale == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -78,9 +77,9 @@ function RiverFloodSharingDataScreen() {
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(2)}>
<TouchableNativeFeedback onPress={() => setRiverScale(2)}>
<View
borderWidth={passable == 2 ? borderWidth : 0}
borderWidth={riverScale == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -91,9 +90,9 @@ function RiverFloodSharingDataScreen() {
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(3)}>
<TouchableNativeFeedback onPress={() => setRiverScale(3)}>
<View
borderWidth={passable == 3 ? borderWidth : 0}
borderWidth={riverScale == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
@ -123,7 +122,7 @@ const styles = StyleSheet.create({
borderStyle: "dotted",
borderColor: colors.primary,
alignItems: "center",
width:130,
width: 130,
},
floodingLogo: {
width: 85,

Loading…
Cancel
Save