Browse Source

Failed approach to view all four submitted values in map.

master
GabrielTrettel 4 years ago
parent
commit
42cd1dc6e9
  1. 7
      src/App.js
  2. 20
      src/app/database/databaseLoader.js
  3. 8
      src/app/database/db.js
  4. 29
      src/app/hooks/selectFromDB.js
  5. 19
      src/app/navigation/AppNavigator.js
  6. 10
      src/app/screens/MapFeedScreen.js
  7. 67
      src/app/screens/PluviometerSharingDataScreen.js
  8. 25
      src/app/screens/SharingFloodZonesScreen.js

7
src/App.js

@ -6,20 +6,13 @@ import AppNavigator from "./app/navigation/AppNavigator";
import "./app/config/globals.js"; import "./app/config/globals.js";
import openDatabase from "./app/database/database-connection"; import openDatabase from "./app/database/database-connection";
import SharingFloodZonesScreen from "./app/screens/SharingFloodZonesScreen";
import initDatabase from "./app/database/database-init"; 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() { export default function App() {
global.userDataBase = openDatabase(); global.userDataBase = openDatabase();
initDatabase(global.userDataBase); initDatabase(global.userDataBase);
return ( return (
//<SharingFloodZonesScreen/>
//<RainSharingDataScreen/>
//<PluviometerSharingDataScreen/>
<NavigationContainer theme={navigationTheme}> <NavigationContainer theme={navigationTheme}>
<AppNavigator /> <AppNavigator />
</NavigationContainer> </NavigationContainer>

20
src/app/database/databaseLoader.js

@ -33,4 +33,22 @@ function insertFloodZone({ images, description, passable, location }) {
transaction(global.userDataBase, query, values); 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 };

8
src/app/database/db.js

@ -9,6 +9,14 @@ const init_queries = [
Longitude real NOT NULL, Longitude real NOT NULL,
Passable INTERGER 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 ( // `CREATE TABLE IF NOT EXISTS Users (

29
src/app/hooks/selectFromDB.js

@ -3,6 +3,19 @@ import "../config/globals";
const floodZoneAsset = require("../assets/pontos_alagamento_peq.png"); 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) { function parseFloodZones(row) {
return { return {
key: row["Id"], key: row["Id"],
@ -34,13 +47,21 @@ function genericSelect(setState, query, parseFunction) {
}, []); }, []);
} }
function useSelect() {
function useFlood() {
const [warnings, setWarnings] = useState([]); 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; return warnings;
} }
export default useSelect;
export { useFlood, usePluviometer };

19
src/app/navigation/AppNavigator.js

@ -4,8 +4,8 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
import AccountNavigator from "./AccountNavigator"; import AccountNavigator from "./AccountNavigator";
import FeedNavigator from "./FeedNavigator"; 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 SharingDataScreen from "../screens/SharingDataScreen";
import NewListingButton from "./NewListingButton"; import NewListingButton from "./NewListingButton";
import routes from "./routes"; import routes from "./routes";
@ -28,12 +28,16 @@ const AppNavigator = () => (
component={OfficialMessagesNavigator} component={OfficialMessagesNavigator}
options={{ options={{
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="check-circle" color={color} size={size} />
<MaterialCommunityIcons
name="check-circle"
color={color}
size={size}
/>
), ),
}} }}
/> />
<Tab.Screen
<Tab.Screen
name="SharingData" name="SharingData"
component={SharingDataScreen} component={SharingDataScreen}
options={({ navigation }) => ({ options={({ navigation }) => ({
@ -52,13 +56,16 @@ const AppNavigator = () => (
})} })}
/> />
<Tab.Screen <Tab.Screen
name="Notificação" name="Notificação"
component={MessagesNavigator} component={MessagesNavigator}
options={{ options={{
tabBarIcon: ({ color, size }) => ( tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell-outline" color={color} size={size} />
<MaterialCommunityIcons
name="bell-outline"
color={color}
size={size}
/>
), ),
}} }}
/> />

10
src/app/screens/MapFeedScreen.js

@ -5,11 +5,12 @@ import MapView, { Marker } from "react-native-maps";
import colors from "../config/colors"; import colors from "../config/colors";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import useSelect from "../hooks/selectFromDB";
import { useFlood, usePluviometer } from "../hooks/selectFromDB";
function MapFeedScreen(props) { function MapFeedScreen(props) {
const location = useLocation(); const location = useLocation();
const warnings = useSelect();
const markerFlood = useFlood();
// const markerPluviometer = usePluviometer();
return ( return (
<View style={styles.container}> <View style={styles.container}>
@ -28,9 +29,12 @@ function MapFeedScreen(props) {
longitudeDelta: 0.0421, longitudeDelta: 0.0421,
}} }}
> >
{warnings.map((val) => {
{markerFlood.map((val) => {
return <MapView.Marker {...val} />; return <MapView.Marker {...val} />;
})} })}
{/* {markerPluviometer.map((val) => {
return <MapView.Marker {...val} />;
})} */}
</MapView> </MapView>
</View> </View>
); );

67
src/app/screens/PluviometerSharingDataScreen.js

@ -10,16 +10,16 @@ import {
SubmitButton, SubmitButton,
} from "../components/forms"; } from "../components/forms";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import DatePicker from 'react-native-datepicker';
import DatePicker from "react-native-datepicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"), pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
images: Yup.array().min(1, "Por favor, selecione uma imagem."), images: Yup.array().min(1, "Por favor, selecione uma imagem."),
}); });
function PluviometerSharingDataScreen() { function PluviometerSharingDataScreen() {
const location = useLocation(); const location = useLocation();
@ -27,32 +27,44 @@ function PluviometerSharingDataScreen() {
var month = new Date().getMonth() + 1; var month = new Date().getMonth() + 1;
var year = new Date().getFullYear(); var year = new Date().getFullYear();
var currentDate = day + '/' + month + '/' + year
var currentDate = day + "/" + month + "/" + year;
const [date, setDate] = useState(currentDate); const [date, setDate] = useState(currentDate);
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignSelf: 'center' }}>
<Image style={styles.image} source={require("../assets/pluviometro.png")} />
<Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2' }}>Pluviômetro</Text>
<View style={{ alignSelf: "center" }}>
<Image
style={styles.image}
source={require("../assets/pluviometro.png")}
/>
<Text style={{ fontSize: 18, fontWeight: "bold", color: "#1976D2" }}>
Pluviômetro
</Text>
</View> </View>
<Form <Form
initialValues={{ initialValues={{
title: "",
pluviometer: "", pluviometer: "",
description: "",
category: null,
images: [], images: [],
}} }}
onSubmit={(values) => console.log(location)}
validationSchema={validationSchema}>
onSubmit={(values) =>
insertPluviometerData({ ...values, date, location })
}
validationSchema={validationSchema}
>
<View style={{ marginTop: 30 }}> <View style={{ marginTop: 30 }}>
<Text style={{
fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginTop: 10
}}>Quantidade de chuva:</Text>
<Text
style={{
fontSize: 16,
fontWeight: "bold",
textAlign: "left",
color: "#1976D2",
marginTop: 10,
}}
>
Quantidade de chuva:
</Text>
<FormField <FormField
keyboardType="pluviometer" keyboardType="pluviometer"
maxLength={200} maxLength={200}
@ -63,7 +75,17 @@ function PluviometerSharingDataScreen() {
</View> </View>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}> <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginBottom: 5 }}>Data da coleta:</Text>
<Text
style={{
fontSize: 16,
fontWeight: "bold",
textAlign: "left",
color: "#1976D2",
marginBottom: 5,
}}
>
Data da coleta:
</Text>
<DatePicker <DatePicker
style={styles.datePickerStyle} style={styles.datePickerStyle}
date={date} date={date}
@ -77,7 +99,7 @@ function PluviometerSharingDataScreen() {
customStyles={{ customStyles={{
dateIcon: { dateIcon: {
//display: 'none', //display: 'none',
position: 'absolute',
position: "absolute",
left: 0, left: 0,
top: 4, top: 4,
marginLeft: 0, marginLeft: 0,
@ -92,7 +114,11 @@ function PluviometerSharingDataScreen() {
}} }}
/> />
</View> </View>
<FormImagePicker backgroundColor="#1976D2" name="images" styles={{ width: 50 }} />
<FormImagePicker
backgroundColor="#1976D2"
name="images"
styles={{ width: 50 }}
/>
<SubmitButton title="Enviar" /> <SubmitButton title="Enviar" />
</Form> </Form>
@ -109,11 +135,10 @@ const styles = StyleSheet.create({
height: 85, height: 85,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
datePickerStyle: { datePickerStyle: {
width: 180, width: 180,
}
})
},
});
export default PluviometerSharingDataScreen; export default PluviometerSharingDataScreen;

25
src/app/screens/SharingFloodZonesScreen.js

@ -1,6 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Dimensions } from "react-native"; 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 * as Yup from "yup";
import { Form, SubmitButton, FormField } from "../components/forms"; import { Form, SubmitButton, FormField } from "../components/forms";
@ -9,7 +15,7 @@ import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import colors from "../config/colors"; import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import insertFloodZone from "../database/databaseLoader";
import { insertFloodZone } from "../database/databaseLoader";
function submitForm(props) { function submitForm(props) {
// console.log(props); // console.log(props);
@ -31,10 +37,16 @@ function SharingFloodZonesScreen() {
const location = useLocation(); const location = useLocation();
return ( return (
<KeyboardAvoidingView
behavior="padding"
style={styles.container}>
<Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<Text
style={{
fontSize: 18,
fontWeight: "bold",
color: "#1976D2",
textAlign: "center",
marginBottom: 30,
}}
>
Pontos de alagamento Pontos de alagamento
</Text> </Text>
<Form <Form
@ -83,7 +95,6 @@ function SharingFloodZonesScreen() {
/> />
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> <SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>
</KeyboardAvoidingView> </KeyboardAvoidingView>
); );
} }

Loading…
Cancel
Save