retrieving user's pluviometer station

src/App.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect} from "react";
-import { NavigationContainer } from '@react-navigation/native';
+import React, { useState, useEffect } from "react";
+import { NavigationContainer } from "@react-navigation/native";
 
 import navigationTheme from "./app/navigation/navigationTheme";
 import "./app/config/globals.js";
-import AppLoading from 'expo-app-loading';
+import AppLoading from "expo-app-loading";
 import FlashMessage from "react-native-flash-message";
 import AppNavigator from "./app/navigation/AppNavigator";
 import EventLocationProvider from "./app/context/EventLocationContext";
@@ -16,28 +16,37 @@ import { getLocation } from "./app/hooks/useLocation";
 import { useFiltering } from "./app/hooks/useFiltering";
 import NoInternetConnectionScreen from "./app/screens/NoInternetConnectionScreen";
 import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
+import getPluviometerStation from "./app/hooks/usePluviometricStation";
 
 export default function App() {
   const [user, setUser] = useState();
+  const [pluviometerStation, setPluviometerStation] = useState();
   const [isReady, setIsReady] = useState();
 
   const netInfo = useNetInfo();
 
   useEffect(() => {
-    user?.username != null && authStorage.setUser(user)
-  }, [user])
-
+    if (user?.username != null) {
+      getPluviometerStation(user.id, setPluviometerStation);
+      const pluv = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah"
+      authStorage.setUser({ ...user, pluviometer: pluviometerStation });
+    }
+  }, [user]);
 
   const restoreUser = async () => {
     const storageUser = await authStorage.getUser();
     if (storageUser) setUser(storageUser);
 
-    global.location = await getLocation();
+    global.location = { lat: -9.97111566376452, long: -67.80984283755332 }; //await getLocation();
   };
 
   if (!isReady && netInfo.isInternetReachable) {
     return (
-      <AppLoading startAsync={restoreUser} onFinish={() => setIsReady(true)} onError={(e) => console.log(e)} />
+      <AppLoading
+        startAsync={restoreUser}
+        onFinish={() => setIsReady(true)}
+        onError={(e) => console.log(e)}
+      />
     );
   } else if (netInfo.isInternetReachable) {
     global.formsSockets = useFiltering(global.location);

src/app/api/Websockets/SocketClient.js

@@ -1,71 +0,0 @@
-import { useEffect, useState } from "react";
-import { useFiltering } from "../../hooks/useFiltering";
-
-function createSocketObject(data, validos, response) {
-  //console.log("criando valuidos");
-  var socketObject = {
-    name: data.name,
-    socket: response,
-  };
-  validos.push(socketObject);
-  //  console.log(validos);
-}
-
-function isRequestedValue(item, renderOptions) {
-  if (
-    (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
-    (item.name == "automaticPluviometer" &&
-      renderOptions.oficial.automaticPluviometer) ||
-    (item.name == "rain" && renderOptions.citzen.rain) ||
-    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
-    (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
-    (item.name == "susceptibilityAreas" &&
-      renderOptions.oficial.susceptibilityAreas)
-  ) {
-    return true;
-  }
-}
-
-function verify_existingSockets(formType, renderOptions, validos) {
-  if (formType.response == null && isRequestedValue(formType, renderOptions)) {
-    //console.log("Criou socket: " + formType.name);
-    const socket = new WebSocket(
-      "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
-        formType.endpoint
-    );
-    formType.socketUrl = socket;
-    createSocketObject(formType, validos, socket);
-    return socket;
-  } else {
-    return null;
-  }
-}
-
-export default function SocketClient(dataOptionObject, focusChanged) {
-  const [data, setData] = useState(useFiltering().forms);
-  var validos = [];
-  const socket = verify_existingSockets(data[1], dataOptionObject, validos);  
-  const [dados, setDado] = useState();
-
-
-  useEffect(() => {
-    console.log(dados);
-    //  data.map((e) => verify_existingSockets(e, dataOptionObject, validos));
-    if (socket && dados != 'undefined') {
-    console.log("ESTÁ PASSANDO AQUI!!");
-      data[1].socketUrl.onmessage = ({ data }) => {
-       // data[1].response = data
-        setDado(data);
-        //   console.log("pegou espostas");
-      };
-    } else {
-      setDado(null);
-    }
-
-    //console.log(dados);
-  }, [dataOptionObject, focusChanged]);
-  return dados;
-  //
-  //console.log("data socket client: "+ JSON.stringify(data));
-  // return data.response;
-}

src/app/api/Websockets/webSocketClient.js

@@ -0,0 +1,4 @@
+const webSocketClient =
+  "ws://wpd.brazilsouth.cloudapp.azure.com:9090/hot/formsanswers?";
+
+export default webSocketClient;

src/app/api/auth.js

@@ -35,6 +35,7 @@ function signup({
     securityanswer: secQuestionAns,
     termsofusage: consent,
     roles: role !== "" ? [role] : ["ROLE_CLIENT"],
+    pluviometer: false,
   };
 
   Object.entries(body).forEach(([key, value]) => {

src/app/components/MapModal.js

@@ -5,7 +5,11 @@ import { FontAwesome5 } from "@expo/vector-icons";
 import SelfClosingModal from "../components/SelfClosingModal";
 import colors from "../config/colors";
 import { showMessage } from "react-native-flash-message";
-import { dimensions, scaleDimsFromWidth, screen_height } from "../config/dimensions";
+import {
+  dimensions,
+  scaleDimsFromWidth,
+  screen_height,
+} from "../config/dimensions";
 import { Svg, Image as ImageSvg } from "react-native-svg";
 import PluviometerGraphics from "./PluviometerGraphics";
 import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
@@ -36,7 +40,7 @@ function onCloseModal(setShowModal, setCurrentMarker) {
 function topBar(props, setShowModal, setCurrentMarker) {
   return (
     <View style={styles.topBar}>
-      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10}}>
+      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
         <Text style={[styles.bodyTitle, { color: "white" }]}>
           {props ? props.title : "Aguarde..."}
         </Text>
@@ -103,7 +107,11 @@ function iconInstitutionTextRow(props) {
   return (
     <View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
       <View alignSelf="flex-start" marginRight={10}>
-        <MaterialCommunityIcons name={props.name} size={25} color={colors.primary} />
+        <MaterialCommunityIcons
+          name={props.name}
+          size={25}
+          color={colors.primary}
+        />
       </View>
 
       <Text style={styles.text}>{props.description}</Text>
@@ -214,7 +222,6 @@ function moreInfo(props) {
 }
 
 function componentBody(props) {
-  
   const dims = scaleDimsFromWidth(95, 95, 16);
   // NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
   const pictures = JSON.parse(props.pictures);
@@ -279,19 +286,13 @@ function MapModal({ showModal, setShowModal, markers }) {
       const finalDate = moment().subtract(5, "days").format("YYYY-MM-DD");
 
       timeFilter = finalDate + "/" + initialDate;
-     // console.log(timeFilter);
-      
+      // console.log(timeFilter);
     }
 
     const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id);
     if (result.data && showModal && currentMarker == undefined) {
-      
-  
       setCurrentMarker(
-        AssembleModalObject(
-          JSON.stringify(result.data.responseData),
-          name
-        )
+        AssembleModalObject(JSON.stringify(result.data.responseData), name)
       );
     }
   };

src/app/hooks/useFiltering.js

@@ -1,12 +1,12 @@
 import moment from "moment";
+import webSocketClient from "../api/Websockets/webSocketClient";
 
 function useFiltering(location) {
-  const endpoint =
-    "ws://wpd.brazilsouth.cloudapp.azure.com:9090/hot/formsanswers?";
+  const endpoint = webSocketClient;
   const initialDate = moment().add(1, "days").format("YYYY-MM-DDTHH:mm:ss");
   const finalDate = moment().subtract(2, "days").format("YYYY-MM-DDTHH:mm:ss");
 
-   console.log(initialDate+"/"+finalDate);
+  //console.log(initialDate + "/" + finalDate);
 
   const filters = [
     {

src/app/hooks/useFormsAswers.js

@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from "react";
-import * as Location from "expo-location";
-import SocketClient from "../api/Websockets/SocketClient";
-import assets from "../config/assets";
-import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
-import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
-
-const custom_assets = {
-  pluviometer: assets.pluviometer,
-  officialPluviometer: assets.officialPluviometer,
-  floodZones: assets.floodZones,
-  riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
-    return assets.riverLevel[key];
-  }),
-  rainLevel: ["rain_0_5_pin", "rain_1_5_pin", "rain_2_5_pin", "rain_3_5_pin"].map((key) => {
-    return assets.rainLevel[key];
-  }),
-};
-const custom_assets_pin = {
-  pluviometer: assets.pluviometer_pin,
-  officialPluviometer: assets.officialPluviometer_pin,
-  floodZones: {
-    passable: PinTransitavel,
-    not_passable: PinIntransitavel,
-  },
-  riverLevel: ["low_pin", "normal_pin", "high_pin", "flooding_pin"].map(
-    (key) => {
-      return assets.riverLevel[key];
-    }
-  ),
-  rainLevel: [
-    "rain_0_5_pin",
-    "rain_1_5_pin",
-    "rain_2_5_pin",
-    "rain_3_5_pin",
-  ].map((key) => {
-    return assets.rainLevel[key];
-  }),
-};
-
-function getImage(name, situation) {
-  if (name == "automaticPluviometer") {
-    return custom_assets_pin.pluviometer;
-  }
-
-  if (name == "pluviometer") {
-    return custom_assets_pin.pluviometer;
-  }
-
-  if (name == "rain") {
-    if (situation == "sem chuva") {
-      return custom_assets_pin.rainLevel[0];
-    } else if (situation == "chuva fraca") {
-      return custom_assets_pin.rainLevel[1];
-    } else if (situation == "chuva moderada") {
-      return custom_assets_pin.rainLevel[2];
-    } else if (situation == "chuva forte") {
-      return custom_assets_pin.rainLevel[3];
-    }
-    return custom_assets_pin.rainLevel[3];
-  }
-
-  if (name == "riverFlood") {
-    if (situation == "baixo") {
-      return custom_assets_pin.riverLevel[0];
-    } else if (situation == "normal") {
-      return custom_assets_pin.riverLevel[1];
-    } else if (situation == "alto") {
-      return custom_assets_pin.riverLevel[2];
-    } else if (situation == "inundar") {
-      return custom_assets_pin.riverLevel[3];
-    }
-    return custom_assets_pin.riverLevel[0];
-  }
-  if (name == "floodZones") {
-    if (situation == "transitavel") {
-      return custom_assets_pin.floodZones.passable;
-    } else {
-      return custom_assets_pin.floodZones.not_passable;
-    }
-  }
-}
-
-function buildPolygonsObject(markers, response, name) {
-  var coordinate = [];
-  var formsanswersgeom = response.formsanswersgeom;
-  const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
-  var n = Object.keys(arrayCoordinates).length;
-
-  // console.log(arrayCoordinates);
-
-  for (let i = 0; i < n; i++) {
-    var lat = arrayCoordinates[i][1];
-    var lon = arrayCoordinates[i][0];
-    coordinate.push([lat, lon]);
-  }
-  //  console.log(coordinate);
-  var polygonObject = {
-    ID: response.formsanswersid,
-    name: name,
-    title: "Titulo", //response.fieldsanswerssituation
-    address: "Endereço", //response.fieldsanswerseventaddress,
-    coordinate: { coordinate },
-    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
-    description: "comentário", //response.fielsanswercomment,
-    logo: custom_assets.pluviometer,
-    pictures: null,
-    image: "", //getMarkerImage(answer.name),
-  };
-
-  markers.set(polygonObject.ID, polygonObject);
-}
-
-function buildMarkerObject(markers, response, name) {
-  //console.log(JSON.parse(response).responseData);
-  const resposta = JSON.parse(response).responseData.array_to_json[1].formsanswersgeom;
-//  console.log("\n\nresposta "+ (resposta.formsanswersid));
-  const formsanswersgeom = JSON.parse(resposta).coordinates;
- // console.log("\n\n ====================================\n"+JSON.stringify(formsanswersgeom));
-
-  var markerObject = {
-    ID: 3168,//response.formsanswersid,
-    name: name,
-    title: "Titulo", //response.fieldsanswerssituation
-    address: "Endereço", //response.fieldsanswerseventaddress,
-    coordinate: {
-      latitude: formsanswersgeom[1],
-      longitude:formsanswersgeom[0],
-    },
-    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
-    description: "comentário", //response.fielsanswercomment,
-    logo: custom_assets.pluviometer,
-    pictures: null,
-    image: getImage(name, "situação"), //getMarkerImage(answer.name),
-  };
-
-  markers.set(markerObject.ID, markerObject);
-
-}
-
-function verifyResponse(markers, data) {
-  // console.log(data.response);
-  if (data) {
-    // const response = JSON.parse(data).responseData.array_to_json;
-    response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, markers.name) :
-    buildMarkerObject(markers.markers, data, markers.name));
-  }
-}
-
-const getFormsAnswers = (dataOptionObject, focusChanged) => {
-  var markers = { markers: new Map() };
-  const answers = SocketClient(dataOptionObject, focusChanged);
-
-  //answers.forEach((r) =>
-  if (answers) {
-   // console.log("\n\nAnswers: " + answers);
-    verifyResponse(markers, answers); //buildMarkerObject(markers.markers, r));
-    //  return answers;
-  }
-  return markers;
-};
-
-export { getFormsAnswers };

src/app/hooks/usePluviometricStation.js

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
+import webSocketClient from "../api/Websockets/webSocketClient";
+
+async function getPluvStation_data(id) {
+  const result = await getFieldsAnswers.fieldsAnswers(null, id);
+  if (result.data) {
+    return result;
+  }
+  return null;
+}
+
+function assemblePluvStationObject(pluvData){
+    var date = null;
+    var time = null;
+    var address = null;
+    var institutionType = null;
+    var institutionName = null;
+
+    pluvData.array_to_json.forEach(function (field) {
+        if(field.fieldname == "eventaddress"){
+            address = field.fieldsanswersvalue;
+        }
+        else if (field.fieldname == "eventdate") {
+          date = field.fieldsanswersvalue;
+        }
+        else if (field.fieldname == "eventtime") {
+          time = field.fieldsanswersvalue;
+        }
+        else if(field.fieldname== "institutename"){
+            institutionName = field.fieldsanswersvalue;
+        }
+        else if(field.fieldname== "institutetype"){
+            institutionType = field.institutionType;
+        }
+    });
+
+    return{
+        regiterDate: date + " | " + time,
+        address: address,
+        institutionType: institutionType,
+        institutionName:institutionName,
+        coordinates:{lat: pluvData.formsanswerslatitude, long:pluvData.formsanswerslongitude}
+    }
+    
+}
+
+async function getPluviometerStation(userId, setPluviometerStation) {
+  const endpoint =
+    webSocketClient + `type=PLUVIOMETER_REGISTRATION&user=${userId}`;
+  const socketObject = new WebSocket(endpoint);
+
+  socketObject.onmessage = async ({ data }) => {
+    const dataObject = JSON.parse(data);
+    if (dataObject?.success) {
+      pluvStation_id =
+        dataObject.responseData.array_to_json[0].formsanswersid;
+      pluvStation_data = await getPluvStation_data(
+        pluvStation_id
+      );
+      const pluvObject = assemblePluvStationObject(pluvStation_data.data.responseData.array_to_json[0])
+      setPluviometerStation(pluvObject);
+
+    } else {
+      setPluviometerStation(false);
+    }
+  };
+
+  socketObject.onerror = (e) => {
+    console.log(e.message);
+    setPluviometerStation(null);
+  };
+
+  socketObject.close();
+
+  socketObject.onclose = () => {
+    console.log("FECHOU");
+  };
+}
+
+export default getPluviometerStation;

src/app/screens/MapFeedScreen.js

@@ -17,11 +17,11 @@ export default function MapFeedScreen(props) {
       susceptibilityAreas: false,
     },
     citzen: {
-      floodRisk: true,
+      floodRisk: false,
       pluviometer: true,
-      rain: true,
-      floodZones: true,
-      riverFlood: true,
+      rain: false,
+      floodZones: false,
+      riverFlood: false,
     },
   });  
 

src/app/screens/PluviometerRegisterScreen.js

@@ -115,6 +115,7 @@ function PluviometerRegisterScreen(props) {
   const [location, setLocationAddr] = useState("Defina o endereço no mapa");
   const [coordinates, setCoordinates] = useState(null);
   const { user, _ } = useContext(AuthContext);
+  console.log(user);
 
   const [showAwaitModal, setShowAwaitModal] = useState(false);
   const [showMessageModal, setShowMessageModal] = useState(false);