cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
GabrielTrettel 3 years ago
parent
f4f6a5a8f5 138a79b502
commit
40ddf901fc
12 changed files with 311 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 32
      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
View File

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

3
src/App.js
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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);

32
src/app/components/map/OpenStreetMap.js
View File

@ -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 &&
@ -80,10 +69,17 @@ export default function OpenStreetMap({
if (markersList && mapRef) { if (markersList && mapRef) {
deleteAllMarkers(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]); }, [markersList, dataOptionsToShow]);

41
src/app/hooks/useFiltering.js
View File

@ -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
View File

@ -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
View File

@ -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>
); );

Write Preview
Loading…
Cancel
Save