Browse Source

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

master
GabrielTrettel 3 years ago
parent
commit
40ddf901fc
  1. 3
      package-lock.json
  2. 3
      src/App.js
  3. 45
      src/app/api/Websockets/SocketClient.js
  4. 8
      src/app/components/MapMarkerList.js
  5. 1
      src/app/components/MapModal.js
  6. 19
      src/app/components/map/LeafLetMap.js
  7. 1
      src/app/components/map/Map.html
  8. 2
      src/app/components/map/Map.js
  9. 24
      src/app/components/map/OpenStreetMap.js
  10. 41
      src/app/hooks/useFiltering.js
  11. 151
      src/app/hooks/useFormsAswers.js
  12. 31
      src/app/screens/MapFeedScreen.js

3
package-lock.json

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

3
src/App.js

@ -23,7 +23,8 @@ export default function App() {
const restoreUser = async () => { const restoreUser = async () => {
const user = await authStorage.getUser(); const user = await authStorage.getUser();
global.location = await getLocation();
global.location ={"lat":-10.0173780726763,
"long": -67.8170775249999} // await getLocation();
if (user) setUser(user); if (user) setUser(user);
}; };

45
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;
};

8
src/app/components/MapMarkerList.js

@ -1,17 +1,19 @@
function isRequestedValue(item, renderOptions) { function isRequestedValue(item, renderOptions) {
return ( return (
(item.name == "pluviometer" && renderOptions.citzen.pluviometer) || (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
(item.name == "officialPluviometer" &&
(item.name == "automaticPluviometer" &&
renderOptions.oficial.automaticPluviometer) || renderOptions.oficial.automaticPluviometer) ||
(item.name == "rain" && renderOptions.citzen.rain) || (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 }) { function MapMarkerList({ markers, renderOptions }) {
if (!markers) return null; if (!markers) return null;
return [...markers.markers].filter(([_, item]) => { return [...markers.markers].filter(([_, item]) => {
return isRequestedValue(item, renderOptions); return isRequestedValue(item, renderOptions);
}); });

1
src/app/components/MapModal.js

@ -231,6 +231,7 @@ function isPluviometer(name) {
function MapModal({ showModal, setShowModal, markers }) { function MapModal({ showModal, setShowModal, markers }) {
var currentMarker = undefined; var currentMarker = undefined;
//console.log(markers);
if (markers && showModal != null && markers.has(showModal)) { if (markers && showModal != null && markers.has(showModal)) {
currentMarker = markers.get(showModal); currentMarker = markers.get(showModal);
} }

19
src/app/components/map/LeafLetMap.js

@ -75,21 +75,36 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
html: \`<body>${icon}</body>\`, html: \`<body>${icon}</body>\`,
iconSize: 70 iconSize: 70
}); });
// Check if there is no other marker with same ID already in map // Check if there is no other marker with same ID already in map
if (!(${ID} in markers)) { if (!(${ID} in markers)) {
// Creates marker object // Creates marker object
markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}}); markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
// Add marker to map and bind callback event to its function // Add marker to map and bind callback event to its function
markers[${ID}].addTo(map).on('click', onPopupClick); 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 { export {
loadHTMLFile, loadHTMLFile,
handleEvent, handleEvent,
insertMarker, insertMarker,
insertPolygon,
goToRegion, goToRegion,
setViewCode, setViewCode,
deleteAllMarkers, deleteAllMarkers,

1
src/app/components/map/Map.html

@ -51,6 +51,7 @@
<script> <script>
var map = L.map("map").setView([-15.804627, -51.810855], 3.4); var map = L.map("map").setView([-15.804627, -51.810855], 3.4);
var markers = {}; var markers = {};
var polygons = {};
function setCustomView(lat, long, zoom) { function setCustomView(lat, long, zoom) {
map.setView([lat, long], zoom); map.setView([lat, long], zoom);

2
src/app/components/map/Map.js

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

24
src/app/components/map/OpenStreetMap.js

@ -6,6 +6,7 @@ import {
handleEvent, handleEvent,
insertMarker, insertMarker,
deleteAllMarkers, deleteAllMarkers,
insertPolygon,
} from "./LeafLetMap"; } from "./LeafLetMap";
import MapModal from "../MapModal"; import MapModal from "../MapModal";
import html_content from "./Map.js"; import html_content from "./Map.js";
@ -41,21 +42,10 @@ export default function OpenStreetMap({
markers, markers,
clickListener, clickListener,
moveEndListener, moveEndListener,
dataOptionsToShow,
setDataOptionsToShow,
isForm = false, 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 [mapRef, setMapRef] = useState(null);
const webviewContent = html_content; const webviewContent = html_content;
@ -66,7 +56,6 @@ export default function OpenStreetMap({
markers: markers, markers: markers,
renderOptions: dataOptionsToShow, renderOptions: dataOptionsToShow,
}); });
// console.log(markersList)
// markersList && // markersList &&
// mapRef && // mapRef &&
@ -82,7 +71,14 @@ export default function OpenStreetMap({
notEmpy(markersList) && notEmpy(markersList) &&
markersList.forEach((val, k) => { 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); insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
}
}); });
} }
}, [markersList, dataOptionsToShow]); }, [markersList, dataOptionsToShow]);

41
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 };

151
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 };

31
src/app/screens/MapFeedScreen.js

@ -6,13 +6,38 @@ import { MapMarkerList } from "../components/MapMarkerList";
import formsApi from "../api/getforms"; import formsApi from "../api/getforms";
import useMarkers from "../hooks/selectFromDB"; import useMarkers from "../hooks/selectFromDB";
import HeaderBarMenu from "../components/HeaderBarMenu"; 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) { export default function MapFeedScreen(props) {
HeaderBarMenu(props.navigation); HeaderBarMenu(props.navigation);
const focusChanged = attachFocusToQuery(); 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(() => { // useEffect(() => {
// loadForms(); // loadForms();
@ -34,6 +59,8 @@ export default function MapFeedScreen(props) {
<OpenStreetMap <OpenStreetMap
markers={markers} markers={markers}
centerUserLocation={true} centerUserLocation={true}
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}
/> />
</View> </View>
); );

Loading…
Cancel
Save