|
@ -6,7 +6,6 @@ import colors from "../config/colors"; |
|
|
import { showMessage } from "react-native-flash-message"; |
|
|
import { showMessage } from "react-native-flash-message"; |
|
|
import { dimensions, screen_height } from "../config/dimensions"; |
|
|
import { dimensions, screen_height } from "../config/dimensions"; |
|
|
import { Svg, Image as ImageSvg } from "react-native-svg"; |
|
|
import { Svg, Image as ImageSvg } from "react-native-svg"; |
|
|
import { ScrollView } from "react-native-gesture-handler"; |
|
|
|
|
|
import PluviometerGraphics from "./PluviometerGraphics"; |
|
|
import PluviometerGraphics from "./PluviometerGraphics"; |
|
|
|
|
|
|
|
|
const chartHeight = screen_height * 0.3; |
|
|
const chartHeight = screen_height * 0.3; |
|
@ -24,9 +23,16 @@ function notImplemented() { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function topBar(setShowModal) { |
|
|
|
|
|
|
|
|
function topBar(props, setShowModal) { |
|
|
return ( |
|
|
return ( |
|
|
<View style={styles.topBar}> |
|
|
<View style={styles.topBar}> |
|
|
|
|
|
<View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}> |
|
|
|
|
|
<Text style={[styles.bodyTitle, { color: "white" }]}> |
|
|
|
|
|
{props.title} |
|
|
|
|
|
</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
<View style={{ flexDirection: "row", alignSelf: "flex-end" }}> |
|
|
<TouchableOpacity |
|
|
<TouchableOpacity |
|
|
style={styles.topBarIcon} |
|
|
style={styles.topBarIcon} |
|
|
onPress={() => notImplemented()} |
|
|
onPress={() => notImplemented()} |
|
@ -34,7 +40,7 @@ function topBar(setShowModal) { |
|
|
<MaterialCommunityIcons |
|
|
<MaterialCommunityIcons |
|
|
name="pencil" |
|
|
name="pencil" |
|
|
size={20} |
|
|
size={20} |
|
|
color={colors.dark} |
|
|
|
|
|
|
|
|
color={colors.white} |
|
|
alignItems="center" |
|
|
alignItems="center" |
|
|
/> |
|
|
/> |
|
|
</TouchableOpacity> |
|
|
</TouchableOpacity> |
|
@ -46,7 +52,7 @@ function topBar(setShowModal) { |
|
|
<MaterialCommunityIcons |
|
|
<MaterialCommunityIcons |
|
|
name="trash-can" |
|
|
name="trash-can" |
|
|
size={20} |
|
|
size={20} |
|
|
color={colors.dark} |
|
|
|
|
|
|
|
|
color={colors.white} |
|
|
alignItems="center" |
|
|
alignItems="center" |
|
|
/> |
|
|
/> |
|
|
</TouchableOpacity> |
|
|
</TouchableOpacity> |
|
@ -58,11 +64,12 @@ function topBar(setShowModal) { |
|
|
<MaterialCommunityIcons |
|
|
<MaterialCommunityIcons |
|
|
name="close" |
|
|
name="close" |
|
|
size={20} |
|
|
size={20} |
|
|
color={colors.dark} |
|
|
|
|
|
|
|
|
color={colors.white} |
|
|
alignItems="center" |
|
|
alignItems="center" |
|
|
/> |
|
|
/> |
|
|
</TouchableOpacity> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
</View> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -73,7 +80,7 @@ function iconTextRow(props) { |
|
|
<MaterialCommunityIcons |
|
|
<MaterialCommunityIcons |
|
|
name={props.name} |
|
|
name={props.name} |
|
|
size={18} |
|
|
size={18} |
|
|
color={colors.dark} |
|
|
|
|
|
|
|
|
color={colors.primary} |
|
|
/> |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
|
|
@ -89,11 +96,12 @@ function iconImageRow(props) { |
|
|
<MaterialCommunityIcons |
|
|
<MaterialCommunityIcons |
|
|
name={props.name} |
|
|
name={props.name} |
|
|
size={18} |
|
|
size={18} |
|
|
color={colors.dark} |
|
|
|
|
|
|
|
|
color={colors.primary} |
|
|
/> |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
|
|
|
<View alignSelf="flex-start"> |
|
|
<View alignSelf="flex-start"> |
|
|
|
|
|
{props.pictures > 0 ? ( |
|
|
<Svg width={100} height={100}> |
|
|
<Svg width={100} height={100}> |
|
|
<ImageSvg |
|
|
<ImageSvg |
|
|
width="100%" |
|
|
width="100%" |
|
@ -102,6 +110,9 @@ function iconImageRow(props) { |
|
|
href={{ uri: props.pic[0] }} |
|
|
href={{ uri: props.pic[0] }} |
|
|
/> |
|
|
/> |
|
|
</Svg> |
|
|
</Svg> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<Text style={styles.text}>Não há foto</Text> |
|
|
|
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
); |
|
|
); |
|
@ -190,22 +201,35 @@ function componentBody(props) { |
|
|
<Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} /> |
|
|
<Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} /> |
|
|
|
|
|
|
|
|
<View style={styles.bodyInfo}> |
|
|
<View style={styles.bodyInfo}> |
|
|
<Text style={styles.bodyTitle}>{props.title}</Text> |
|
|
|
|
|
|
|
|
|
|
|
{iconTextRow({ name: "map-marker", description: address })} |
|
|
{iconTextRow({ name: "map-marker", description: address })} |
|
|
{iconTextRow({ name: "calendar", description: date })} |
|
|
{iconTextRow({ name: "calendar", description: date })} |
|
|
{iconTextRow({ name: "account", description: "Usuário ativo" })} |
|
|
{iconTextRow({ name: "account", description: "Usuário ativo" })} |
|
|
{pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })} |
|
|
|
|
|
|
|
|
{iconImageRow({ name: "camera", pic: pictures })} |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function userMessage(marker) { |
|
|
|
|
|
if (marker.description == "") return <></>; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
<View> |
|
|
|
|
|
<Text |
|
|
|
|
|
style={[styles.text, { color: colors.primary, fontWeight: "bold" }]} |
|
|
|
|
|
> |
|
|
|
|
|
Comentário: |
|
|
|
|
|
</Text> |
|
|
|
|
|
<Text style={styles.text}>{marker.description}</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function isPluviometer(name) { |
|
|
function isPluviometer(name) { |
|
|
return name === "pluviometer" || name === "officialPluviometer"; |
|
|
return name === "pluviometer" || name === "officialPluviometer"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function MapModal({showModal, setShowModal, markers}) { |
|
|
|
|
|
|
|
|
function MapModal({ showModal, setShowModal, markers }) { |
|
|
var currentMarker = undefined; |
|
|
var currentMarker = undefined; |
|
|
if (markers && showModal != null && markers.has(showModal)) { |
|
|
if (markers && showModal != null && markers.has(showModal)) { |
|
|
currentMarker = markers.get(showModal); |
|
|
currentMarker = markers.get(showModal); |
|
@ -220,13 +244,16 @@ function MapModal({showModal, setShowModal, markers}) { |
|
|
showModal={showModal} |
|
|
showModal={showModal} |
|
|
setShowModal={setShowModal} |
|
|
setShowModal={setShowModal} |
|
|
> |
|
|
> |
|
|
{topBar(setShowModal)} |
|
|
|
|
|
|
|
|
{topBar(currentMarker, setShowModal)} |
|
|
|
|
|
<View style={{ padding: 16 }}> |
|
|
{componentBody(currentMarker)} |
|
|
{componentBody(currentMarker)} |
|
|
{isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null} |
|
|
{isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null} |
|
|
{!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} |
|
|
|
|
|
|
|
|
{/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */} |
|
|
|
|
|
{userMessage(currentMarker)} |
|
|
|
|
|
</View> |
|
|
</SelfClosingModal> |
|
|
</SelfClosingModal> |
|
|
);} |
|
|
|
|
|
else { |
|
|
|
|
|
|
|
|
); |
|
|
|
|
|
} else { |
|
|
return null; |
|
|
return null; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -240,7 +267,6 @@ const styles = StyleSheet.create({ |
|
|
bodyTitle: { |
|
|
bodyTitle: { |
|
|
fontWeight: "700", |
|
|
fontWeight: "700", |
|
|
fontSize: dimensions.text.secondary, |
|
|
fontSize: dimensions.text.secondary, |
|
|
marginBottom: 5, |
|
|
|
|
|
}, |
|
|
}, |
|
|
bodyInfo: { |
|
|
bodyInfo: { |
|
|
flexDirection: "column", |
|
|
flexDirection: "column", |
|
@ -248,7 +274,7 @@ const styles = StyleSheet.create({ |
|
|
}, |
|
|
}, |
|
|
bodyIcon: { |
|
|
bodyIcon: { |
|
|
alignSelf: "flex-start", |
|
|
alignSelf: "flex-start", |
|
|
marginHorizontal: 20, |
|
|
|
|
|
|
|
|
marginRight: 20, |
|
|
height: 53, |
|
|
height: 53, |
|
|
width: 53, |
|
|
width: 53, |
|
|
}, |
|
|
}, |
|
@ -264,8 +290,10 @@ const styles = StyleSheet.create({ |
|
|
marginHorizontal: 10, |
|
|
marginHorizontal: 10, |
|
|
}, |
|
|
}, |
|
|
topBar: { |
|
|
topBar: { |
|
|
|
|
|
backgroundColor: colors.primary, |
|
|
flexDirection: "row", |
|
|
flexDirection: "row", |
|
|
alignSelf: "flex-end", |
|
|
|
|
|
|
|
|
width: "100%", |
|
|
|
|
|
alignItems: "center", |
|
|
}, |
|
|
}, |
|
|
topBarIcon: { |
|
|
topBarIcon: { |
|
|
margin: 10, |
|
|
margin: 10, |
|
|