Browse Source

solving polygons issue

master
analuizaff 3 years ago
parent
commit
138a79b502
  1. 3
      src/App.js
  2. 18
      src/app/api/Websockets/SocketClient.js
  3. 1
      src/app/components/MapModal.js
  4. 8
      src/app/components/map/LeafLetMap.js
  5. 2
      src/app/components/map/Map.js
  6. 3
      src/app/components/map/OpenStreetMap.js
  7. 8
      src/app/hooks/useFiltering.js
  8. 87
      src/app/hooks/useFormsAswers.js
  9. 10
      src/app/screens/MapFeedScreen.js

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

18
src/app/api/Websockets/SocketClient.js

@ -4,10 +4,10 @@ import { useFiltering } from '../../hooks/useFiltering';
function isRequestedValue(item, renderOptions) { function isRequestedValue(item, renderOptions) {
if ( if (
(item.name == "pluviometer" && renderOptions.citzen.pluviometer) || (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
/*(item.name == "automaticPluviometer" &&
renderOptions.oficial.automaticPluviometer) ||*/
(item.name == "automaticPluviometer" &&
renderOptions.oficial.automaticPluviometer) ||
(item.name == "rain" && renderOptions.citzen.rain) || (item.name == "rain" && renderOptions.citzen.rain) ||
(item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
(item.name == "riverFlood" && renderOptions.citzen.riverFlood ) ||
(item.name == "floodZones" && renderOptions.citzen.floodRisk) || (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
(item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas) (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
) { ) {
@ -18,7 +18,7 @@ function isRequestedValue(item, renderOptions) {
function verify_existingSockets(formType, renderOptions) { function verify_existingSockets(formType, renderOptions) {
if (formType.response == null && isRequestedValue(formType, renderOptions)) { if (formType.response == null && isRequestedValue(formType, renderOptions)) {
// console.log("Resposta é null");
console.log("Criou socket: "+formType.name);
const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint); const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint);
socket.onmessage = ({ data }) => { socket.onmessage = ({ data }) => {
@ -31,14 +31,14 @@ function verify_existingSockets(formType, renderOptions) {
} }
export default function SocketClient(dataOptionObject, focusChanged) {
const [data, setData] = useState(useFiltering());
export default function SocketClient(dataOptionObject, focusChanged, data) {
useEffect(() => {
data.forms.map((e) => verify_existingSockets(e, dataOptionObject));
}, [dataOptionObject, focusChanged]);
// useEffect(() => {
data.map((e) => verify_existingSockets(e, dataOptionObject));
// }, []);
console.log("data socket client: "+ JSON.stringify(data));
return data; return data;
}; };

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

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

@ -86,11 +86,13 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
async function insertPolygon(mapRef, ID, coordinate) { async function insertPolygon(mapRef, ID, coordinate) {
// console.log("COORDENADAS: "+JSON.stringify(coordinate.coordinate)); // console.log("COORDENADAS: "+JSON.stringify(coordinate.coordinate));
var coordinates = JSON.stringify(coordinate.coordinate); var coordinates = JSON.stringify(coordinate.coordinate);
// console.log(ID);
// console.log(coordinates);
mapRef.injectJavaScript(` mapRef.injectJavaScript(`
polygons = (L.polygon(${coordinates}, { ID: ${ID}}));
if (!(${ID} in polygons)) {
polygons[${ID}] = L.polygon(${coordinates}, { ID: ${ID}});
polygons.addTo(map);
polygons[${ID}].addTo(map);
}
`); `);
/* mapRef.injectJavaScript(` /* mapRef.injectJavaScript(`

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

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

@ -56,7 +56,6 @@ export default function OpenStreetMap({
markers: markers, markers: markers,
renderOptions: dataOptionsToShow, renderOptions: dataOptionsToShow,
}); });
// console.log(markersList)
// markersList && // markersList &&
// mapRef && // mapRef &&
@ -74,7 +73,7 @@ export default function OpenStreetMap({
markersList.forEach((val, k) => { markersList.forEach((val, k) => {
// console.log(val); // console.log(val);
if (val[1].name == "susceptibilityAreas") { if (val[1].name == "susceptibilityAreas") {
console.log("FLOODZONES_OFFICIAL");
// console.log("floodzones")
insertPolygon(mapRef, val[1].ID, val[1].coordinate); insertPolygon(mapRef, val[1].ID, val[1].coordinate);
} }
else { else {

8
src/app/hooks/useFiltering.js

@ -3,12 +3,12 @@ function useFiltering() {
"forms": [ "forms": [
{ {
name: "floodZones", name: "floodZones",
endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
response: null, response: null,
}, { }, {
name: "rain", name: "rain",
endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
response: null, response: null,
}, },
{ {
@ -23,12 +23,12 @@ function useFiltering() {
}, },
{ {
name: "susceptibilityAreas", name: "susceptibilityAreas",
endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
response: null, response: null,
}, },
{ {
name: "automaticPluviometer", name: "automaticPluviometer",
endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
response: null, response: null,
} }
] ]

87
src/app/hooks/useFormsAswers.js

@ -28,8 +28,47 @@ const custom_assets_pin = {
}), }),
}; };
function getImage(name, situation){
//TODO
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) { function buildPolygonsObject(markers, response, name) {
@ -38,47 +77,52 @@ function buildPolygonsObject(markers, response, name) {
const arrayCoordinates = (JSON.parse(formsanswersgeom)["coordinates"][0]); const arrayCoordinates = (JSON.parse(formsanswersgeom)["coordinates"][0]);
var n = Object.keys(arrayCoordinates).length; var n = Object.keys(arrayCoordinates).length;
//console.log(arrayCoordinates);
// console.log(arrayCoordinates);
for (let i = 0; i < n; i++) { for (let i = 0; i < n; i++) {
var lat = arrayCoordinates[i][1]; var lat = arrayCoordinates[i][1];
var lon = arrayCoordinates[i][0]; var lon = arrayCoordinates[i][0];
coordinate.push([lat, lon]); coordinate.push([lat, lon]);
} }
// console.log(coordinate);
// console.log(coordinate);
var polygonObject = { var polygonObject = {
ID: response.formsanswersid, ID: response.formsanswersid,
name: name, name: name,
title: response.fias[0].fieldsanswersvalue ? response.fias[0].fieldsanswersvalue : "", //response.fieldsanswerssituation
address: response.fias[1].fieldsanswersvalue ? response.fias[1].fieldsanswersvalue : "",//response.fieldsanswerseventaddress,
title: "Titulo", //response.fieldsanswerssituation
address: "Endereço",//response.fieldsanswerseventaddress,
coordinate: { coordinate }, coordinate: { coordinate },
date: response.fias[2].fieldsanswersvalue + " | " + response.fias[3].fieldsanswersvalue, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: response.fias[4].fieldsanswersvalue, //response.fielsanswercomment,
date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: "comentário", //response.fielsanswercomment,
image: "",//getMarkerImage(answer.name), image: "",//getMarkerImage(answer.name),
} }
markers.set(polygonObject.ID, polygonObject); markers.set(polygonObject.ID, polygonObject);
} }
function buildMarkerObject(markers, response, name) { function buildMarkerObject(markers, response, name) {
const formsanswersgeom = JSON.parse(response.formsanswersgeom)["coordinates"];
var markerObject = { var markerObject = {
ID: response.formsanswersid, ID: response.formsanswersid,
name: name, name: name,
title: response.fias[0].fieldsanswersvalue ? response.fias[0].fieldsanswersvalue : "", //response.fieldsanswerssituation
address: response.fias[1].fieldsanswersvalue ? response.fias[1].fieldsanswersvalue : "",//response.fieldsanswerseventaddress,
title: "Titulo", //response.fieldsanswerssituation
address: "Endereço",//response.fieldsanswerseventaddress,
coordinate: { coordinate: {
latitude: response.formsanswerslatitude,
longitude: response.formsanswerslongitude,
latitude: formsanswersgeom[1],
longitude: formsanswersgeom[0],
}, },
date: response.fias[2].fieldsanswersvalue + " | " + response.fias[3].fieldsanswersvalue, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: response.fias[4].fieldsanswersvalue, //response.fielsanswercomment,
image: custom_assets_pin.pluviometer,//getMarkerImage(answer.name),
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); markers.set(markerObject.ID, markerObject);
} }
function verifyResponse(markers, data) { function verifyResponse(markers, data) {
// console.log(data.response); // console.log(data.response);
if (data.response) {
if (data.response != null) {
const response = JSON.parse(data.response).responseData.array_to_json; 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)); response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, data.name) : buildMarkerObject(markers.markers, r, data.name));
@ -86,13 +130,14 @@ function verifyResponse(markers, data) {
} }
const getFormsAnswers = (dataOptionObject, focusChanged) => {
const getFormsAnswers = (dataOptionObject, focusChanged, data) => {
var markers = { markers: new Map() }; var markers = { markers: new Map() };
const answers = SocketClient(dataOptionObject, focusChanged);
// console.log("\n\nAnswers: " + JSON.stringify(answers));
const answers = SocketClient(dataOptionObject, focusChanged, data);
// console.log("\n\nAnswers: " + JSON.stringify(answers));
answers.forms.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
//console.log("\n\nMarkers: " + JSON.stringify(markers));
answers.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
// console.log("\n\nMarkers: " + JSON.stringify(markers));
return markers; return markers;
} }

10
src/app/screens/MapFeedScreen.js

@ -8,6 +8,7 @@ import useMarkers from "../hooks/selectFromDB";
import HeaderBarMenu from "../components/HeaderBarMenu"; import HeaderBarMenu from "../components/HeaderBarMenu";
import { getFormsAnswers } from "../hooks/useFormsAswers"; import { getFormsAnswers } from "../hooks/useFormsAswers";
import SocketClient from "../api/Websockets/SocketClient"; 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);
@ -15,7 +16,8 @@ export default function MapFeedScreen(props) {
const focusChanged = attachFocusToQuery(); const focusChanged = attachFocusToQuery();
//const [error, setError] = useState(false); //const [error, setError] = useState(false);
const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado) const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
// console.log(markersdb);
const [data, _] = useState(useFiltering().forms);
//console.log(markersdb);
const [dataOptionsToShow, setDataOptionsToShow] = useState({ const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: { oficial: {
@ -30,7 +32,11 @@ export default function MapFeedScreen(props) {
riverFlood: false, riverFlood: false,
}, },
}); });
const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
const [markers, setMarkers] = useState(getFormsAnswers(dataOptionsToShow, focusChanged, data));
useEffect(() => {
setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
}, [dataOptionsToShow, focusChanged]);
console.log(markers);
// useEffect(() => { // useEffect(() => {

Loading…
Cancel
Save