From 42cd1dc6e97ad4cda0e324273adeba6a4ecaa9b9 Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Wed, 16 Dec 2020 11:49:43 -0300 Subject: [PATCH] Failed approach to view all four submitted values in map. --- src/App.js | 7 - src/app/database/databaseLoader.js | 20 +- src/app/database/db.js | 8 + src/app/hooks/selectFromDB.js | 29 ++- src/app/navigation/AppNavigator.js | 19 +- src/app/screens/MapFeedScreen.js | 10 +- .../screens/PluviometerSharingDataScreen.js | 223 ++++++++++-------- src/app/screens/SharingFloodZonesScreen.js | 25 +- 8 files changed, 214 insertions(+), 127 deletions(-) diff --git a/src/App.js b/src/App.js index 0338add..8c57e70 100644 --- a/src/App.js +++ b/src/App.js @@ -6,20 +6,13 @@ import AppNavigator from "./app/navigation/AppNavigator"; import "./app/config/globals.js"; import openDatabase from "./app/database/database-connection"; -import SharingFloodZonesScreen from "./app/screens/SharingFloodZonesScreen"; import initDatabase from "./app/database/database-init"; -import RainSharingDataScreen from "./app/screens/RainSharingDataScreen"; -import RainSharingDataNavigator from "./app/navigation/RainSharingDataNavigator"; -import PluviometerSharingDataScreen from "./app/screens/PluviometerSharingDataScreen"; export default function App() { global.userDataBase = openDatabase(); initDatabase(global.userDataBase); return ( - // - // - // diff --git a/src/app/database/databaseLoader.js b/src/app/database/databaseLoader.js index f2c1ab6..0562ed6 100644 --- a/src/app/database/databaseLoader.js +++ b/src/app/database/databaseLoader.js @@ -33,4 +33,22 @@ function insertFloodZone({ images, description, passable, location }) { transaction(global.userDataBase, query, values); } -export default insertFloodZone; +function insertPluviometerData({ pluviometer, images, date, location }) { + const query = `INSERT INTO Pluviometer(Date, Images, Latitude, Longitude, Precipitation) VALUES(?, ?, ?, ?, ?);`; + if (location === undefined) { + console.debug("undefined location"); + return; + } + + const values = [ + date, + JSON.stringify(images), + parseFloat(location["latitude"]), + parseFloat(location["longitude"]), + parseInt(pluviometer), + ]; + + transaction(global.userDataBase, query, values); +} + +export { insertFloodZone, insertPluviometerData }; diff --git a/src/app/database/db.js b/src/app/database/db.js index 56420a9..fbea196 100644 --- a/src/app/database/db.js +++ b/src/app/database/db.js @@ -9,6 +9,14 @@ const init_queries = [ Longitude real NOT NULL, Passable INTERGER NOT NULL );`, + `CREATE TABLE IF NOT EXISTS Pluviometer ( + Id integer PRIMARY KEY autoincrement, + Date text NOT NULL, + Images text NOT NULL, + Latitude real NOT NULL, + Longitude real NOT NULL, + Precipitation real NOT NULL + );`, ]; // `CREATE TABLE IF NOT EXISTS Users ( diff --git a/src/app/hooks/selectFromDB.js b/src/app/hooks/selectFromDB.js index 713b14e..e3686c2 100644 --- a/src/app/hooks/selectFromDB.js +++ b/src/app/hooks/selectFromDB.js @@ -3,6 +3,19 @@ import "../config/globals"; const floodZoneAsset = require("../assets/pontos_alagamento_peq.png"); +function partsePluviometer(row) { + return { + key: "999", + title: "pluviometro", + coordinate: { + latitude: row["Latitude"] + 0.5, + longitude: row["Longitude"], + }, + image: floodZoneAsset, + description: row["Pluviometer"], + }; +} + function parseFloodZones(row) { return { key: row["Id"], @@ -34,13 +47,21 @@ function genericSelect(setState, query, parseFunction) { }, []); } -function useSelect() { +function useFlood() { const [warnings, setWarnings] = useState([]); - const query = "SELECT * FROM FloodZones;"; + const queryFloodZones = "SELECT * FROM FloodZones;"; - genericSelect(setWarnings, query, parseFloodZones); + genericSelect(setWarnings, queryFloodZones, parseFloodZones); + + return warnings; +} + +function usePluviometer() { + const [warnings, setWarnings] = useState([]); + const queryPluviometer = "SELECT * FROM Pluviometer;"; + genericSelect(setWarnings, queryPluviometer, partsePluviometer); return warnings; } -export default useSelect; +export { useFlood, usePluviometer }; diff --git a/src/app/navigation/AppNavigator.js b/src/app/navigation/AppNavigator.js index 054eb76..6538b58 100644 --- a/src/app/navigation/AppNavigator.js +++ b/src/app/navigation/AppNavigator.js @@ -4,8 +4,8 @@ import { MaterialCommunityIcons } from "@expo/vector-icons"; import AccountNavigator from "./AccountNavigator"; import FeedNavigator from "./FeedNavigator"; -import MessagesNavigator from "./MessagesNavigator" -import OfficialMessagesNavigator from "./OfficialMessagesNavigator" +import MessagesNavigator from "./MessagesNavigator"; +import OfficialMessagesNavigator from "./OfficialMessagesNavigator"; import SharingDataScreen from "../screens/SharingDataScreen"; import NewListingButton from "./NewListingButton"; import routes from "./routes"; @@ -28,12 +28,16 @@ const AppNavigator = () => ( component={OfficialMessagesNavigator} options={{ tabBarIcon: ({ color, size }) => ( - + ), }} /> - ({ @@ -52,13 +56,16 @@ const AppNavigator = () => ( })} /> - ( - + ), }} /> diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 7ceacc8..beb1a0e 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -5,11 +5,12 @@ import MapView, { Marker } from "react-native-maps"; import colors from "../config/colors"; import useLocation from "../hooks/useLocation"; -import useSelect from "../hooks/selectFromDB"; +import { useFlood, usePluviometer } from "../hooks/selectFromDB"; function MapFeedScreen(props) { const location = useLocation(); - const warnings = useSelect(); + const markerFlood = useFlood(); + // const markerPluviometer = usePluviometer(); return ( @@ -28,9 +29,12 @@ function MapFeedScreen(props) { longitudeDelta: 0.0421, }} > - {warnings.map((val) => { + {markerFlood.map((val) => { return ; })} + {/* {markerPluviometer.map((val) => { + return ; + })} */} ); diff --git a/src/app/screens/PluviometerSharingDataScreen.js b/src/app/screens/PluviometerSharingDataScreen.js index 05e5eb6..3bccda3 100644 --- a/src/app/screens/PluviometerSharingDataScreen.js +++ b/src/app/screens/PluviometerSharingDataScreen.js @@ -4,116 +4,141 @@ import { StyleSheet, Text, View, Image } from "react-native"; import * as Yup from "yup"; import { - Form, - FormField, - FormPicker as Picker, - SubmitButton, + Form, + FormField, + FormPicker as Picker, + SubmitButton, } from "../components/forms"; import Screen from "../components/Screen"; -import DatePicker from 'react-native-datepicker'; +import DatePicker from "react-native-datepicker"; import useLocation from "../hooks/useLocation"; import FormImagePicker from "../components/forms/FormImagePicker"; +import { insertPluviometerData } from "../database/databaseLoader"; const validationSchema = Yup.object().shape({ - pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"), - images: Yup.array().min(1, "Por favor, selecione uma imagem."), + pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"), + images: Yup.array().min(1, "Por favor, selecione uma imagem."), }); - function PluviometerSharingDataScreen() { - const location = useLocation(); - - var day = new Date().getDate(); - var month = new Date().getMonth() + 1; - var year = new Date().getFullYear(); - - var currentDate = day + '/' + month + '/' + year - - const [date, setDate] = useState(currentDate); - - - return ( - - - - Pluviômetro - - -
console.log(location)} - validationSchema={validationSchema}> - - Quantidade de chuva: - - - - - Data da coleta: - { - setDate(date); - }} - /> - - - - - -
- ); + const location = useLocation(); + + var day = new Date().getDate(); + var month = new Date().getMonth() + 1; + var year = new Date().getFullYear(); + + var currentDate = day + "/" + month + "/" + year; + + const [date, setDate] = useState(currentDate); + + return ( + + + + + Pluviômetro + + + +
+ insertPluviometerData({ ...values, date, location }) + } + validationSchema={validationSchema} + > + + + Quantidade de chuva: + + + + + + + Data da coleta: + + { + setDate(date); + }} + /> + + + + + +
+ ); } const styles = StyleSheet.create({ - container: { - paddingHorizontal: 10, - }, - image: { - width: 85, - height: 85, - justifyContent: "center", - alignItems: "center", - - }, - datePickerStyle: { - width: 180, - } -}) + container: { + paddingHorizontal: 10, + }, + image: { + width: 85, + height: 85, + justifyContent: "center", + alignItems: "center", + }, + datePickerStyle: { + width: 180, + }, +}); export default PluviometerSharingDataScreen; diff --git a/src/app/screens/SharingFloodZonesScreen.js b/src/app/screens/SharingFloodZonesScreen.js index 241011b..f36814f 100644 --- a/src/app/screens/SharingFloodZonesScreen.js +++ b/src/app/screens/SharingFloodZonesScreen.js @@ -1,6 +1,12 @@ import React, { useState } from "react"; import { Dimensions } from "react-native"; -import { StyleSheet, Text, Image, View, KeyboardAvoidingView } from "react-native"; +import { + StyleSheet, + Text, + Image, + View, + KeyboardAvoidingView, +} from "react-native"; import * as Yup from "yup"; import { Form, SubmitButton, FormField } from "../components/forms"; @@ -9,7 +15,7 @@ import Screen from "../components/Screen"; import useLocation from "../hooks/useLocation"; import colors from "../config/colors"; import { TouchableNativeFeedback } from "react-native-gesture-handler"; -import insertFloodZone from "../database/databaseLoader"; +import { insertFloodZone } from "../database/databaseLoader"; function submitForm(props) { // console.log(props); @@ -31,10 +37,16 @@ function SharingFloodZonesScreen() { const location = useLocation(); return ( - - + + Pontos de alagamento
-
); }