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

src/app/api/RequestFieldsAnswers/getFieldsAnswers.js

@@ -1,7 +1,8 @@
 import apiClient from "../client";
 
-const endpoint = "/hot/fieldsanswers?&faid=";
+const endpoint = "/hot/fieldsanswers?";
 
-const fieldsAnswers = (id) => apiClient.get(endpoint+id);
+const fieldsAnswers = (time, id) =>
+  apiClient.get(endpoint + `time=${time}&faid=${id}`);
 
 export default { fieldsAnswers };

src/app/components/AssembleModalObject.js

@@ -1,86 +1,135 @@
-import moment from 'moment';
-import React from 'react'
-import { View, Text } from 'react-native'
+import moment from "moment";
+import React from "react";
+import { View, Text } from "react-native";
+import assets from "../config/assets";
+
+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", "rain_1_5", "rain_2_5", "rain_3_5"].map((key) => {
+    return assets.rainLevel[key];
+  }),
+};
 
 function getLogo(name, situation) {
-    if (name == "automaticPluviometer") {
-      return custom_assets.officialPluviometer;
-    }
-  
-    if (name == "pluviometer") {
-      return custom_assets.pluviometer;
-    }
-  
-    if (name == "rain") {
-      if (situation == "sem chuva") {
-        return custom_assets.rainLevel[0];
-      } else if (situation == "chuva fraca") {
-        return custom_assets.rainLevel[1];
-      } else if (situation == "chuva moderada") {
-        return custom_assets.rainLevel[2];
-      } else if (situation == "chuva forte") {
-        return custom_assets.rainLevel[3];
-      } else {
-        return custom_assets.rainLevel[3];
-      }
+  if (name == "automaticPluviometer") {
+    return custom_assets.officialPluviometer;
+  }
+
+  if (name == "pluviometer") {
+    return custom_assets.pluviometer;
+  }
+
+  if (name == "rain") {
+    if (situation == "sem chuva") {
+      return custom_assets.rainLevel[0];
+    } else if (situation == "chuva fraca") {
+      return custom_assets.rainLevel[1];
+    } else if (situation == "chuva moderada") {
+      return custom_assets.rainLevel[2];
+    } else if (situation == "chuva forte") {
+      return custom_assets.rainLevel[3];
+    } else {
+      return custom_assets.rainLevel[3];
     }
-  
-    if (name == "riverFlood") {
-      if (situation == "baixo") {
-        return custom_assets.riverLevel[0];
-      } else if (situation == "normal") {
-        return custom_assets.riverLevel[1];
-      } else if (situation == "alto") {
-        return custom_assets.riverLevel[2];
-      } else if (situation == "inundar") {
-        return custom_assets.riverLevel[3];
-      }
+  }
+
+  if (name == "riverFlood") {
+    if (situation == "baixo") {
       return custom_assets.riverLevel[0];
+    } else if (situation == "normal") {
+      return custom_assets.riverLevel[1];
+    } else if (situation == "alto") {
+      return custom_assets.riverLevel[2];
+    } else if (situation == "inundar") {
+      return custom_assets.riverLevel[3];
     }
-    if (name == "floodZones") {
-      return custom_assets.floodZones;
-    }
+    return custom_assets.riverLevel[0];
+  }
+  if (name == "floodZones") {
+    return custom_assets.floodZones;
+  }
+}
+
+function verifyMeasureDates(labels, measureDate) {
+  if (labels == null || !labels.find((f) => f == measureDate)) {
+    labels.push(measureDate);
   }
+}
 
 const AssembleModalObject = (response, name) => {
+  var situation = null;
+  var user = null;
+  var address = null;
+  var date = null;
+  var time = null;
+  var comments = null;
+  var pictures = null;
+  var data = {
+    values: [],
+    labels: [],
+  };
+
+  if (JSON.parse(response)) {
     const r = JSON.parse(response);
-  
-    var situation = null;
-    var address = null;
-    var date = null;
-    var time = null;
-    var comments = null;
-    var pictures = null;
-  
-    if (r[0].array_to_json) {
-      r[0].array_to_json.forEach(function (f) {
-        if (f.fieldname == "situation") {
-          situation = f.fieldsanswersvalue;
-        }
-        if (f.fieldname == "eventaddress") {
-          address = f.fieldsanswersvalue;
-        }
-        if (f.fieldname == "eventdate") {
-          date = f.fieldsanswersvalue;
-        }
-        if (f.fieldname == "eventtime") {
-          time = f.fieldsanswersvalue;
-        }
-        if (f.fieldname == "comments") {
-          comments = f.fieldsanswersvalue;
-        }
-      });
+
+    if (name == "automaticPluviometer") {
+      (situation = "PLUVIÔMETRO"),
+        r[0].array_to_json.forEach(function (f) {
+          if (f.fieldname == "medicao") {
+            verifyMeasureDates(
+              data.labels,
+              moment(f.fieldsanswersdtfilling).format("DD/MM")
+            ); //data.labels.push(moment(f.fieldsanswersdtfilling).format("DD/MM/YYYY"));
+            data.values.push(
+              f.fieldsanswersvalue ? parseFloat(f.fieldsanswersvalue) : null
+            );
+          }
+          if (f.fieldname == "siglarede") {
+            user = f.fieldsanswersvalue;
+          }
+          if (f.fieldname == "nome") {
+            address = f.fieldsanswersvalue;
+          }
+        });
+        
+    } else {
+      if (r[0].array_to_json) {
+        r[0].array_to_json.forEach(function (f) {
+          if (f.fieldname == "situation") {
+            situation = f.fieldsanswersvalue;
+          }
+          if (f.fieldname == "eventaddress") {
+            address = f.fieldsanswersvalue;
+          }
+          if (f.fieldname == "eventdate") {
+            date = f.fieldsanswersvalue;
+          }
+          if (f.fieldname == "eventtime") {
+            time = f.fieldsanswersvalue;
+          }
+          if (f.fieldname == "comments") {
+            comments = f.fieldsanswersvalue;
+          }
+        });
+      }
     }
-  
-    return {
-      "name": name,
-      "title": situation,
-      "address": address,
-      "date": date + " | " + time,
-      "description": comments,
-      "logo": getLogo(),
-      "pictures": pictures,
-    };
-}
+  }
+  return {
+    name: name,
+    title: situation,
+    user: user,
+    address: address,
+    date: date + " | " + time,
+    description: comments,
+    logo: getLogo(name, situation),
+    pictures: pictures,
+    data: data,
+  };
+};
 
-export default AssembleModalObject
+export default AssembleModalObject;

src/app/components/DatePicker.js

@@ -42,7 +42,6 @@ export default function DatePicker(props) {
   };
 
   const androidOnChange = (e, selectedDate) => {
-    console.log("selectedDate: " + selectedDate + " " + mode);
     setShow(false);
 
     if (selectedDate) {

src/app/components/MapModal.js

@@ -9,6 +9,7 @@ import { Svg, Image as ImageSvg } from "react-native-svg";
 import PluviometerGraphics from "./PluviometerGraphics";
 import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
 import AssembleModalObject from "./AssembleModalObject";
+import moment from "moment";
 
 const chartHeight = screen_height * 0.3;
 
@@ -170,6 +171,7 @@ function reviews(props) {
 
 function moreInfo(props) {
   const hasData = props.data.values.length > 0;
+
   return (
     <View
       style={{
@@ -179,7 +181,7 @@ function moreInfo(props) {
     >
       {!hasData ? (
         <Text style={{ ...styles.text, alignSelf: "center" }}>
-          Nenhum dado disponível
+          Não há dados para este pluviômetro
         </Text>
       ) : (
         <PluviometerGraphics
@@ -197,6 +199,7 @@ function componentBody(props) {
   const pictures = JSON.parse(props.pictures);
   const date = props.date ? props.date : "implementando...";
   const address = props.address ? props.address : "Erro ao carregar endereço";
+  const user = props.user ? props.user : "Usuário ativo";
 
   return (
     <View style={styles.bodyRow}>
@@ -204,9 +207,11 @@ function componentBody(props) {
 
       <View style={styles.bodyInfo}>
         {iconTextRow({ name: "map-marker", description: address })}
-        {iconTextRow({ name: "calendar", description: date })}
-        {iconTextRow({ name: "account", description: "Usuário ativo" })}
-        {iconImageRow({ name: "camera", pic: pictures })}
+        {!isPluviometer(props.name) &&
+          iconTextRow({ name: "calendar", description: date })}
+        {iconTextRow({ name: "account", description: user })}
+        {props.name != "automaticPluviometer" &&
+          iconImageRow({ name: "camera", pic: pictures })}
       </View>
     </View>
   );
@@ -228,15 +233,24 @@ function userMessage(marker) {
 }
 
 function isPluviometer(name) {
-  return name === "pluviometer" || name === "officialPluviometer";
+  return name === "pluviometer" || name === "automaticPluviometer";
 }
 
 function MapModal({ showModal, setShowModal, markers }) {
   const [currentMarker, setCurrentMarker] = useState(undefined);
+  var timeFilter = null;
 
   const getAnswers = async (id, name) => {
-    const result = await getFieldsAnswers.fieldsAnswers(id);
+    if (isPluviometer(name)) {
+      const initialDate = moment().format("YYYY-MM-DD");
+      const finalDate = moment().subtract(5, "days").format("YYYY-MM-DD");
+
+      timeFilter = finalDate + "/" + initialDate;
+    }
+
+    const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id);
     if (result.data) {
+      console.log(timeFilter);
       setCurrentMarker(
         AssembleModalObject(
           JSON.stringify(result.data.responseData.array_to_json),

src/app/components/PluviometerGraphics.js

@@ -17,6 +17,7 @@ function figure_config(labels, values) {
         data: values,
         color: () => colors.gold,
         strokeWidth: 2,
+
       },
     ],
 
@@ -24,6 +25,19 @@ function figure_config(labels, values) {
   };
 }
 
+const verifyNullData = (values) => {
+  var indexArray = [];
+  var i = 0;
+
+  for (i; i < values.length; i++) {
+    if (values[i] == null) {
+      indexArray.push(i);
+    }
+  }
+
+  return indexArray;
+};
+
 const chartConfig = {
   backgroundGradientFrom: 0,
   backgroundGradientFromOpacity: 0,
@@ -41,19 +55,21 @@ function PluviometerGraphics({ chartHeight, labels, values }) {
   return (
     <View
       style={{
-        padding: 10,
+        paddingHorizontal: 10,
         flex: 1,
         alignItems: "center",
         flexDirection: "column",
       }}
     >
       <LineChart
+        verticalLabelRotation={20}
         data={figure_config(labels, values)}
         width={screenWidth}
         height={chartHeight}
         chartConfig={chartConfig}
         withVerticalLines={false}
         yAxisSuffix="mm"
+        hidePointsAtIndex={verifyNullData(values)}
       />
       <Text style={{ textAlign: "center" }}>Data</Text>
     </View>

src/app/components/forms/AssembleIngestionObject.js

@@ -25,7 +25,7 @@ const AssembleIngestionObject = (
               fieldsanswerseventaddress: address,
               fieldsanswerseventdate: moment(date).format("DD-MM-YYYY"),
               fieldsanswerseventtime: moment(time).format("HH:mm"),
-              fieldsanswerscomment: description,
+              fieldsanswerscomments: description,
             },
           ],
         },

src/app/hooks/useFiltering.js

@@ -2,9 +2,7 @@ import moment from "moment";
 
 function useFiltering(location) {
   const initialDate = moment().format("YYYY-MM-DDTHH:mm:ss");
-  console.log("Inicio: "+ initialDate+"\n");
   const finalDate = moment().subtract(1, "days").format("YYYY-MM-DDTHH:mm:ss");
-  console.log("Fim  "+finalDate);
 
   const filters = [
     {
@@ -25,14 +23,14 @@ function useFiltering(location) {
       name: "riverFlood",
       socketUrl: new WebSocket(
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/formsanswers?" +
-          `type=RIVERFLOOD_FORM&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5`
+          `type=RIVERFLOOD_FORM&time=${finalDate}/${initialDate}&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5`
       ),
     },
     {
       name: "pluviometer",
       socketUrl: new WebSocket(
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/formsanswers?" +
-          `type=PLUVIOMETER_REGISTRATION&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5`
+          `type=PLUVIOMETER_REGISTRATION&time=${finalDate}/${initialDate}&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5`
       ),
     },
     {

src/app/hooks/useSocketMarkers.js

@@ -17,7 +17,7 @@ const custom_assets = {
 
 const custom_assets_pin = {
   pluviometer: assets.pluviometer_pin,
-  officialPluviometer: assets.officialPluviometer_pin,
+  officialPluviometer: assets.pluviometer_pin,//assets.officialPluviometer_pin,
   floodZones: {
     passable: PinTransitavel,
     not_passable: PinIntransitavel,

src/app/screens/RiverFloodSharingDataScreen.js

@@ -121,6 +121,7 @@ function RiverFloodSharingDataScreen(props) {
               <SvgLabeledButton
                 style={{ marginRight: 17 }}
                 onPress={() => {
+                  setRiverScale(2);
                   setRiverSituation("ALTO");
                 }}
                 SvgImage={assets.riverLevel.High}