Browse Source

MapModal to new layout

master
GabrielTrettel 3 years ago
parent
commit
08ed4a5159
  1. 64
      src/app/components/MapModal.js

64
src/app/components/MapModal.js

@ -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 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,

Loading…
Cancel
Save