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

src/app/components/MapDataMenu.js

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+
+import { View, StyleSheet, Text, Button, TouchableOpacity } from "react-native";
+import SelfClosingModal from "./SelfClosingModal";
+import colors from "../config/colors";
+import { FontAwesome5 } from '@expo/vector-icons';
+import { MaterialIcons } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Shadow } from "react-native-shadow-2";
+
+function DataMenuHeader({ setShowModal }) {
+  return (
+    <View
+      style={{
+        backgroundColor: colors.primary,
+        height: 42,
+        justifyContent: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingHorizontal: 16,
+      }}
+    >
+      <Text style={styles.text}>DADOS</Text>
+
+      <TouchableOpacity
+        style={styles.topBarIcon}
+        onPress={() => setShowModal(null)}
+      >
+        <MaterialCommunityIcons name="close" size={24} color={colors.white} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function DataOriginSelector() {
+  const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
+  const bgToUse = (selected) => dataOriginToShow == selected ? colors.secondary : colors.gray;
+
+  return (
+    <Shadow
+      viewStyle={{ width: "100%", height: 40 }}
+      offset={[0, 4]}
+      distance={4}
+      radius={0}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
+      <View
+        style={{
+          height: 40,
+          justifyContent: "center",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          backgroundColor: colors.secondary,
+        }}
+      >
+        <TouchableOpacity
+          style={[styles.choicesBtn, {backgroundColor: bgToUse("oficial")}]}
+          onPress={() => setDataOriginToShow("oficial")}
+        >
+          <MaterialIcons
+            name="account-balance"
+            size={24}
+            color={colors.white}
+            alignItems="center"
+          />
+          <Text style={[styles.text, {marginLeft: 12}]}>OFICIAL</Text>
+        </TouchableOpacity>
+
+
+        <TouchableOpacity
+          style={[styles.choicesBtn, {backgroundColor: bgToUse("citzen")}]}
+          onPress={() => setDataOriginToShow("citzen")}
+        >
+          <FontAwesome5
+            name="user-alt"
+            size={22}
+            color={colors.white}
+            alignItems="center"
+          />
+          <Text style={[styles.text, {marginLeft: 12}]}>CIDADÃO</Text>
+        </TouchableOpacity>
+      </View>
+    </Shadow>
+  );
+}
+
+function DataMenuBody({ setShowModal }) {
+  return (
+    <View
+      style={{
+        height: "60%",
+        backgroundColor: colors.white,
+      }}
+    >
+      <DataMenuHeader setShowModal={setShowModal} />
+      <DataOriginSelector />
+    </View>
+  );
+}
+
+export default function MapDataMenu(props) {
+  const [showModal, setShowModal] = useState(null);
+  return (
+    <View>
+      <Button
+        title={"VISUALIZAR DADOS NO MAPA"}
+        onPress={() => setShowModal(true)}
+      />
+      <SelfClosingModal
+        animationType="slide"
+        transparent={true}
+        showModal={showModal}
+        setShowModal={setShowModal}
+      >
+        <DataMenuBody setShowModal={setShowModal} />
+      </SelfClosingModal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  choicesBtn: {
+    width: "50%",
+    backgroundColor: colors.secondary,
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexDirection: "row"
+  },
+  text: {
+    color: colors.white,
+    alignSelf: "center",
+    fontWeight: "500",
+    fontSize: 16,
+  },
+  topBarIcon: {
+    alignSelf: "center",
+  },
+});

src/app/components/MapModal.js

@@ -24,7 +24,7 @@ function notImplemented() {
   });
 }
 
-function topBar(setMarkerToRender) {
+function topBar(setShowModal) {
   return (
     <View style={styles.topBar}>
       <TouchableOpacity
@@ -53,7 +53,7 @@ function topBar(setMarkerToRender) {
 
       <TouchableOpacity
         style={styles.topBarIcon}
-        onPress={() => setMarkerToRender(null)}
+        onPress={() => setShowModal(null)}
       >
         <MaterialCommunityIcons
           name="close"
@@ -205,21 +205,21 @@ function isPluviometer(name) {
   return name === "pluviometer" || name === "officialPluviometer";
 }
 
-function MapModal({markerToRender, setMarkerToRender, markers}) {
+function MapModal({showModal, setShowModal, markers}) {
   var currentMarker = undefined;
-  if (markers && markerToRender != null && markers.has(markerToRender)) {
-    currentMarker = markers.get(markerToRender);
+  if (markers && showModal != null && markers.has(showModal)) {
+    currentMarker = markers.get(showModal);
   }
 
-  if (currentMarker != undefined && markerToRender != null) {
+  if (currentMarker != undefined && showModal != null) {
   return (
     <SelfClosingModal
       animationType="slide"
       transparent={true}
-      markerToRender={markerToRender}
-      setMarkerToRender={setMarkerToRender}
+      showModal={showModal}
+      setShowModal={setShowModal}
     >
-      {topBar(setMarkerToRender)}
+      {topBar(setShowModal)}
       {componentBody(currentMarker)}
       {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
       {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null}

src/app/components/SelfClosingModal.js

@@ -14,10 +14,10 @@ export default function SelfClosingModal(props) {
       <Modal
         animationType={props.animationType}
         transparent={props.transparent}
-        visible={props.markerToRender != null}
+        visible={props.showModal != null}
       >
         <TouchableWithoutFeedback
-          onPress={() => props.setMarkerToRender(null)}
+          onPress={() => props.setShowModal(null)}
         >
           <View style={styles.modalOverlay} />
         </TouchableWithoutFeedback>

src/app/components/map/OpenStreetMap.js

@@ -8,6 +8,7 @@ import {
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import html_content from "./Map.js";
+import MapDataMenu from "../MapDataMenu";
 
 
 function bindEventsToListeners(
@@ -83,10 +84,11 @@ export default function OpenStreetMap({
       )}
       <View>
         <MapModal
-          markerToRender={markerListener}
-          setMarkerToRender={setMarkerListener}
+          showModal={markerListener}
+          setShowModal={setMarkerListener}
           markers={markersList}
         />
+        <MapDataMenu/>
       </View>
     </View>
   );

src/app/config/colors.js

@@ -1,6 +1,6 @@
 export default {
   primary: "#006493",
-  secondary: "#4ecdc4",
+  secondary: "rgba(74, 141, 183, 0.87)",
   black: "#000",
   white: "#fff",
   medium: "#6e6969",

src/app/screens/ForecastScreen.js

@@ -114,7 +114,6 @@ function renderTodayForecast(forecast) {
   );
 }
 
-// FIXME: The border line must be in full wcreen width.
 function border() {
   return (
     <View
@@ -267,16 +266,33 @@ function renderScreen(forecast) {
 
 function renderErrorScreen() {
   return (
+    <View style={{
+      flex: 1,
+      padding: 17,
+      alignItems: "center",
+      justifyContent: "center"
+      }}>
     <Text
       style={{
+        paddingBottom: 20,
         textAlign: "center",
-        paddingTop: 30,
-        fontSize: dimensions.text.secondary,
+        fontSize: dimensions.text.header,
         fontWeight: "bold",
+        color: colors.primary,
       }}
     >
-      Previsão do tempo não disponível no momento
+      Ops, algo deu errado...
     </Text>
+
+      <Text
+        style={{
+          textAlign: "center",
+          fontSize: dimensions.text.secondary,
+          fontWeight: "bold",
+        }}
+      >Não conseguimos encontrar a previsão do tempo para sua localização</Text>
+      </View>
+
   );
 }