cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

Forms data integrated with maps

master
GabrielTrettel 4 years ago
parent
6eea8e731a
commit
22c8c0e4f9
6 changed files with 263 additions and 142 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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,

Write Preview
Loading…
Cancel
Save