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,139 +1,138 @@
 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"),
+  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
 });
 
 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 }}>
-                Nível da água do rio
-            </Text>
-            <Form
-                initialValues={{
-                    title: "",
-                    price: "",
-                    description: "",
-                    category: null,
-                    images: [],
-                }}
-                onSubmit={(values) => submitForm({ ...values, passable, location })}
-                validationSchema={validationSchema}
-            >
-                <View>
-                    <View
-                        style={{ flexDirection: "row", justifyContent: "space-around" }}
-                    >
-                        <TouchableNativeFeedback onPress={() => setPassable(0)}>
-                            <View
-                                borderWidth={passable == 0 ? borderWidth : 0}
-                                style={styles.img_block}
-                            >
-                                <Image
-                                    style={styles.floodingLogo}
-                                    source={require("../assets/rio_baixo.png")}
-                                />
-                                <Text style={styles.text}>Baixo</Text>
-                            </View>
-                        </TouchableNativeFeedback>
+  return (
+    <Screen style={styles.container}>
+      <Text
+        style={{
+          fontSize: 18,
+          fontWeight: "bold",
+          color: "#1976D2",
+          textAlign: "center",
+          marginBottom: 30,
+        }}
+      >
+        Nível da água do rio
+      </Text>
+      <Form
+        initialValues={{
+          images: [],
+        }}
+        onSubmit={(values) =>
+          insertRiverData({ ...values, riverScale, location })
+        }
+        validationSchema={validationSchema}
+      >
+        <View>
+          <View
+            style={{ flexDirection: "row", justifyContent: "space-around" }}
+          >
+            <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
+              <View
+                borderWidth={riverScale == 0 ? borderWidth : 0}
+                style={styles.img_block}
+              >
+                <Image
+                  style={styles.floodingLogo}
+                  source={require("../assets/rio_baixo.png")}
+                />
+                <Text style={styles.text}>Baixo</Text>
+              </View>
+            </TouchableNativeFeedback>
 
-                        <TouchableNativeFeedback onPress={() => setPassable(1)}>
-                            <View
-                                borderWidth={passable == 1 ? borderWidth : 0}
-                                style={styles.img_block}
-                            >
-                                <Image
-                                    style={styles.floodingLogo}
-                                    source={require("../assets/rio_normal.png")}
-                                />
-                                <Text style={styles.text}>Rio normal</Text>
-                            </View>
-                        </TouchableNativeFeedback>
-                    </View>
+            <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
+              <View
+                borderWidth={riverScale == 1 ? borderWidth : 0}
+                style={styles.img_block}
+              >
+                <Image
+                  style={styles.floodingLogo}
+                  source={require("../assets/rio_normal.png")}
+                />
+                <Text style={styles.text}>Rio normal</Text>
+              </View>
+            </TouchableNativeFeedback>
+          </View>
 
-                    <View
-                        style={{ flexDirection: "row", justifyContent: "space-around" }}
-                    >
-                        <TouchableNativeFeedback onPress={() => setPassable(2)}>
-                            <View
-                                borderWidth={passable == 2 ? borderWidth : 0}
-                                style={styles.img_block}
-                            >
-                                <Image
-                                    style={styles.floodingLogo}
-                                    source={require("../assets/rio_alto.png")}
-                                />
-                                <Text style={styles.text}>Alto</Text>
-                            </View>
-                        </TouchableNativeFeedback>
+          <View
+            style={{ flexDirection: "row", justifyContent: "space-around" }}
+          >
+            <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
+              <View
+                borderWidth={riverScale == 2 ? borderWidth : 0}
+                style={styles.img_block}
+              >
+                <Image
+                  style={styles.floodingLogo}
+                  source={require("../assets/rio_alto.png")}
+                />
+                <Text style={styles.text}>Alto</Text>
+              </View>
+            </TouchableNativeFeedback>
 
-                        <TouchableNativeFeedback onPress={() => setPassable(3)}>
-                            <View
-                                borderWidth={passable == 3 ? borderWidth : 0}
-                                style={styles.img_block}
-                            >
-                                <Image
-                                    style={styles.floodingLogo}
-                                    source={require("../assets/rio_transbordando.png")}
-                                />
-                                <Text style={styles.text}>Transbordando</Text>
-                            </View>
-                        </TouchableNativeFeedback>
-                    </View>
-                </View>
-                <FormImagePicker backgroundColor="#1976D2" name="images" />
+            <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
+              <View
+                borderWidth={riverScale == 3 ? borderWidth : 0}
+                style={styles.img_block}
+              >
+                <Image
+                  style={styles.floodingLogo}
+                  source={require("../assets/rio_transbordando.png")}
+                />
+                <Text style={styles.text}>Transbordando</Text>
+              </View>
+            </TouchableNativeFeedback>
+          </View>
+        </View>
+        <FormImagePicker backgroundColor="#1976D2" name="images" />
 
-                <SubmitButton title="Enviar" backgroundColor={colors.primary} />
-            </Form>
-        </Screen>
-    );
+        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+      </Form>
+    </Screen>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        padding: 10,
-    },
-    img_block: {
-        borderRadius: 5,
-        padding: 10,
-        borderStyle: "dotted",
-        borderColor: colors.primary,
-        alignItems: "center",
-        width:130,
-    },
-    floodingLogo: {
-        width: 85,
-        height: 85,
-    },
-    text: {
-        fontSize: 14,
-        textAlign: "center",
-        marginTop: 10,
-    },
+  container: {
+    padding: 10,
+  },
+  img_block: {
+    borderRadius: 5,
+    padding: 10,
+    borderStyle: "dotted",
+    borderColor: colors.primary,
+    alignItems: "center",
+    width: 130,
+  },
+  floodingLogo: {
+    width: 85,
+    height: 85,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: "center",
+    marginTop: 10,
+  },
 });
 
 export default RiverFloodSharingDataScreen;