Forms data integrated with maps

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,
+};

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 (

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]) => {

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

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

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