Merge branch 'main' of github.com:IGSD-UoW/WPD-MobileApp

3 years ago · 40ddf901fc
12 changed files with 311 additions and 26 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
--- a/src/App.js
+++ b/src/App.js
@ -23,7 +23,8 @@ export default function App() {
  
  const restoreUser = async () => {
    const user = await authStorage.getUser();
-    global.location = await getLocation();
+    global.location ={"lat":-10.0173780726763,
+     "long": -67.8170775249999} // await getLocation();
    if (user) setUser(user);
  };

--- a/src/app/api/Websockets/SocketClient.js
+++ b/src/app/api/Websockets/SocketClient.js
@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { useFiltering } from '../../hooks/useFiltering';
+
+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) {
+  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);
+
+    socket.onmessage = ({ data }) => {
+      formType.response = data;
+    }
+  }
+ /* else {
+    console.log("\nresposta preenchida");
+  }*/
+}
+
+
+export default function SocketClient(dataOptionObject, focusChanged, data) {
+  
+
+ // useEffect(() => {
+    data.map((e) => verify_existingSockets(e, dataOptionObject));
+
+//  }, []);
+  console.log("data socket client: "+ JSON.stringify(data));
+  return data;
+};
+
+
--- a/src/app/components/MapMarkerList.js
+++ b/src/app/components/MapMarkerList.js
@ -1,17 +1,19 @@
 function isRequestedValue(item, renderOptions) {
  return (
    (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
-    (item.name == "officialPluviometer" &&
+    (item.name == "automaticPluviometer" &&
      renderOptions.oficial.automaticPluviometer) ||
    (item.name == "rain" && renderOptions.citzen.rain) ||
-    (item.name == "river" && renderOptions.citzen.riverFlood) ||
-    (item.name == "flood" && renderOptions.citzen.floodRisk)
+    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
+    (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
+    (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
  );
 }

 function MapMarkerList({ markers, renderOptions }) {
  if (!markers) return null;

+
  return [...markers.markers].filter(([_, item]) => {
    return isRequestedValue(item, renderOptions);
  });
--- a/src/app/components/MapModal.js
+++ b/src/app/components/MapModal.js
@ -231,6 +231,7 @@ function isPluviometer(name) {

 function MapModal({ showModal, setShowModal, markers }) {
  var currentMarker = undefined;
+  //console.log(markers);
  if (markers && showModal != null && markers.has(showModal)) {
    currentMarker = markers.get(showModal);
  }
--- a/src/app/components/map/LeafLetMap.js
+++ b/src/app/components/map/LeafLetMap.js
@ -75,21 +75,36 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
    html: \`<body>${icon}</body>\`,
    iconSize: 70
  });
-
  // Check if there is no other marker with same ID already in map
  if (!(${ID} in markers)) {
    // Creates marker object
    markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
-
    // Add marker to map and bind callback event to its function
    markers[${ID}].addTo(map).on('click', onPopupClick);
  }`);
 }
+async function insertPolygon(mapRef, ID, coordinate) {
+  // console.log("COORDENADAS: "+JSON.stringify(coordinate.coordinate));
+  var coordinates = JSON.stringify(coordinate.coordinate);
+ // console.log(coordinates);
+  mapRef.injectJavaScript(`
+  if (!(${ID} in polygons)) {
+    polygons[${ID}] = L.polygon(${coordinates}, { ID: ${ID}});     
+    
+    polygons[${ID}].addTo(map);
+  }
+  `);
+  /* mapRef.injectJavaScript(`
+   
+   var polygon = L.polygon(${coordinates}).addTo(map);
+   `);*/
+}

 export {
  loadHTMLFile,
  handleEvent,
  insertMarker,
+  insertPolygon,
  goToRegion,
  setViewCode,
  deleteAllMarkers,
--- a/src/app/components/map/Map.html
+++ b/src/app/components/map/Map.html
@ -51,6 +51,7 @@
    <script>
      var map = L.map("map").setView([-15.804627, -51.810855], 3.4);
      var markers = {};
+      var polygons = {};

      function setCustomView(lat, long, zoom) {
        map.setView([lat, long], zoom);
--- a/src/app/components/map/Map.js
+++ b/src/app/components/map/Map.js
@ -52,6 +52,8 @@ export default html_content = `
    <script>
      var map = L.map("map").setView([-15.804627, -51.810855], 3.4);
      var markers = {};
+      var polygons = {};
+

      function setCustomView(lat, long, zoom) {
        map.setView([lat, long], zoom);
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@ -6,6 +6,7 @@ import {
  handleEvent,
  insertMarker,
  deleteAllMarkers,
+  insertPolygon,
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import html_content from "./Map.js";
@ -41,21 +42,10 @@ export default function OpenStreetMap({
  markers,
  clickListener,
  moveEndListener,
+  dataOptionsToShow,
+  setDataOptionsToShow,
  isForm = false,
 }) {
-  const [dataOptionsToShow, setDataOptionsToShow] = useState({
-    oficial: {
-      automaticPluviometer: false,
-      susceptibilityAreas: false,
-    },
-    citzen: {
-      floodRisk: true,
-      pluviometer: true,
-      rain: false,
-      floodZones: true,
-      riverFlood: true,
-    },
-  });

  const [mapRef, setMapRef] = useState(null);
  const webviewContent = html_content;
@ -66,7 +56,6 @@ export default function OpenStreetMap({
    markers: markers,
    renderOptions: dataOptionsToShow,
  });
-  // console.log(markersList)

  // markersList &&
  //   mapRef &&
@ -80,10 +69,17 @@ export default function OpenStreetMap({
    if (markersList && mapRef) {
      deleteAllMarkers(mapRef);

-    notEmpy(markersList) &&
-      markersList.forEach((val, k) => {
-        insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
-      });
+      notEmpy(markersList) &&
+        markersList.forEach((val, k) => {
+          //  console.log(val);
+          if (val[1].name == "susceptibilityAreas") {
+          //  console.log("floodzones")
+            insertPolygon(mapRef, val[1].ID, val[1].coordinate);
+          }
+          else {
+            insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
+          }
+        });
    }
  }, [markersList, dataOptionsToShow]);

--- a/src/app/hooks/useFiltering.js
+++ b/src/app/hooks/useFiltering.js
@ -0,0 +1,41 @@
+function useFiltering() {
+    const filters = {
+        "forms": [
+            {
+                name: "floodZones",
+                endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+
+            }, {
+                name: "rain",
+                endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+            },
+            {
+                name: "riverFlood",
+                endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+            },
+            {
+                name: "pluviometer",
+                endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+            },
+            {
+                name: "susceptibilityAreas",
+                endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+            },
+            {
+                name: "automaticPluviometer",
+                endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+            }
+        ]
+
+    }
+
+    return filters;
+}
+
+export { useFiltering };
--- a/src/app/hooks/useFormsAswers.js
+++ b/src/app/hooks/useFormsAswers.js
@ -0,0 +1,151 @@
+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_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,
+    image: "",//getMarkerImage(answer.name),
+  }
+
+  markers.set(polygonObject.ID, polygonObject);
+}
+
+function buildMarkerObject(markers, response, name) {
+  const formsanswersgeom = JSON.parse(response.formsanswersgeom)["coordinates"];
+
+  var markerObject = {
+    ID: 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,
+    image: getImage(name, "situação"),//getMarkerImage(answer.name),
+  }
+
+  markers.set(markerObject.ID, markerObject);
+
+}
+
+function verifyResponse(markers, data) {
+  // console.log(data.response);
+  if (data.response != null) {
+    const response = JSON.parse(data.response).responseData.array_to_json;
+    response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, data.name) : buildMarkerObject(markers.markers, r, data.name));
+
+  }
+
+}
+
+const getFormsAnswers = (dataOptionObject, focusChanged, data) => {
+  var markers = { markers: new Map() };
+  const answers = SocketClient(dataOptionObject, focusChanged, data);
+  
+  // console.log("\n\nAnswers: " + JSON.stringify(answers));
+
+  answers.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
+ // console.log("\n\nMarkers: " + JSON.stringify(markers));
+  return markers;
+
+}
+
+
+
+
+
+
+
+export { getFormsAnswers };
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@ -6,13 +6,38 @@ import { MapMarkerList } from "../components/MapMarkerList";
 import formsApi from "../api/getforms";
 import useMarkers from "../hooks/selectFromDB";
 import HeaderBarMenu from "../components/HeaderBarMenu";
+import { getFormsAnswers } from "../hooks/useFormsAswers";
+import SocketClient from "../api/Websockets/SocketClient";
+import { useFiltering } from "../hooks/useFiltering";

 export default function MapFeedScreen(props) {
  HeaderBarMenu(props.navigation);

  const focusChanged = attachFocusToQuery();
-  const [error, setError] = useState(false);
-  const markers = useMarkers(focusChanged);
+  //const [error, setError] = useState(false);
+ const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
+ const [data, _] = useState(useFiltering().forms);
+ //console.log(markersdb);
+
+  const [dataOptionsToShow, setDataOptionsToShow] = useState({
+    oficial: {
+      automaticPluviometer: false,
+      susceptibilityAreas: false,
+    },
+    citzen: {
+      floodRisk: false,
+      pluviometer: false,
+      rain: true,
+      floodZones: false,
+      riverFlood: false,
+    },
+  });  
+  const [markers, setMarkers] = useState(getFormsAnswers(dataOptionsToShow, focusChanged, data));
+   useEffect(() => {
+    setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
+   }, [dataOptionsToShow, focusChanged]);
+  console.log(markers);
+

  // useEffect(() => {
  //   loadForms();
@ -34,6 +59,8 @@ export default function MapFeedScreen(props) {
      <OpenStreetMap
        markers={markers}
        centerUserLocation={true}
+        dataOptionsToShow={dataOptionsToShow}
+        setDataOptionsToShow={setDataOptionsToShow}
      />
    </View>
  );