Browse Source

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

master
analuizaff 3 years ago
parent
commit
bf6611dd3b
  1. 96
      src/app/components/MapDataMenu.js
  2. 8
      src/app/components/SelfClosingModal.js
  3. 4
      src/app/components/map/OpenStreetMap.js
  4. 2
      src/app/config/colors.js
  5. 12
      src/app/navigation/NewListingButton.js
  6. 1
      src/app/screens/MapFormScreen.js

96
src/app/components/MapDataMenu.js

@ -146,24 +146,34 @@ function Border() {
return ( return (
<View <View
style={{ style={{
width: 0.95 * screen_width,
width: 0.91 * screen_width,
alignSelf: "center", alignSelf: "center",
height: 2, height: 2,
borderRadius: 2, borderRadius: 2,
paddingHorizontal: 16, paddingHorizontal: 16,
backgroundColor: colors.lightestGray,
backgroundColor: colors.separatorGray,
}} }}
/> />
); );
} }
function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
function ListDataOptions(
dataOptionsToShow,
dataOriginToShow,
setDataOptionsToShow,
option
) {
const item = dataOptionsToShow[dataOriginToShow][option.code]; const item = dataOptionsToShow[dataOriginToShow][option.code];
const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]: {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
const dataOptionObject = {
...dataOptionsToShow,
[dataOriginToShow]: {
...dataOptionsToShow[dataOriginToShow],
[option.code]: !item,
},
};
return ( return (
<View>
<View key={option.code}>
<View <View
style={{ style={{
flex: 1, flex: 1,
@ -197,9 +207,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
)} )}
</View> </View>
<TouchableOpacity <TouchableOpacity
onPress={() => {setDataOptionsToShow(dataOptionObject)}}
onPress={() => {
setDataOptionsToShow(dataOptionObject);
}}
> >
<View <View
style={{ style={{
@ -211,9 +222,7 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
backgroundColor: item ? colors.activated : colors.notActivated, backgroundColor: item ? colors.activated : colors.notActivated,
}} }}
> >
<Text style={styles.text}>
{item ? "ADICIONAR" : "REMOVER"}
</Text>
<Text style={styles.text}>{item ? "ADICIONAR" : "REMOVER"}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -222,13 +231,32 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
); );
} }
function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
function DataOriginOptions({
dataOriginToShow,
dataOptionsToShow,
setDataOptionsToShow,
}) {
return ( return (
<View paddingTop={8} height={"100%"}>
<ScrollView >
<View
style={{
paddingTop: 8,
flexDirection: "column",
}}
>
<ScrollView
height={270}
automaticallyAdjustContentInsets={true}
>
<View>
{dataOptions[dataOriginToShow].map((option) => {dataOptions[dataOriginToShow].map((option) =>
ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
ListDataOptions(
dataOptionsToShow,
dataOriginToShow,
setDataOptionsToShow,
option
)
)} )}
</View>
</ScrollView> </ScrollView>
</View> </View>
); );
@ -249,13 +277,10 @@ function DataMenuBody({ setShowModal }) {
riverFlood: true, riverFlood: true,
}, },
}); });
console.log(dataOptionsToShow)
return ( return (
<View <View
style={{
height: "60%",
backgroundColor: colors.white,
}}
backgroundColor={colors.grayBG}
> >
<DataMenuHeader setShowModal={setShowModal} /> <DataMenuHeader setShowModal={setShowModal} />
<DataOriginSelector <DataOriginSelector
@ -271,15 +296,36 @@ function DataMenuBody({ setShowModal }) {
); );
} }
function ModalOpenBtn({setShowModal}) {
return (
<TouchableOpacity
onPress={() => setShowModal()}
>
<View
style={{
width: "100%",
height: 48,
backgroundColor: colors.primary,
justifyContent: "center",
alignItems: "center"
}}>
<Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text>
</View>
</TouchableOpacity>
);
}
export default function MapDataMenu(props) { export default function MapDataMenu(props) {
const [showModal, setShowModal] = useState(null); const [showModal, setShowModal] = useState(null);
return ( return (
<View>
<Button
title={"VISUALIZAR DADOS NO MAPA"}
onPress={() => setShowModal(true)}
/>
<View
>
<ModalOpenBtn
setShowModal={() => setShowModal(true)}/>
<SelfClosingModal <SelfClosingModal
style={{position:"absolute"}}
animationType="slide" animationType="slide"
transparent={true} transparent={true}
showModal={showModal} showModal={showModal}

8
src/app/components/SelfClosingModal.js

@ -5,12 +5,13 @@ import {
StyleSheet, StyleSheet,
TouchableWithoutFeedback, TouchableWithoutFeedback,
} from "react-native"; } from "react-native";
import { screen_height, screen_width } from "../config/dimensions";
import { screen_width } from "../config/dimensions";
import colors from "../config/colors";
export default function SelfClosingModal(props) { export default function SelfClosingModal(props) {
return ( return (
<View style={styles.centeredView}>
<View style={[styles.centeredView, props.style]}>
<Modal <Modal
animationType={props.animationType} animationType={props.animationType}
transparent={props.transparent} transparent={props.transparent}
@ -36,12 +37,13 @@ const styles = StyleSheet.create({
justifyContent: "flex-end", justifyContent: "flex-end",
alignItems: "center", alignItems: "center",
marginTop: 22, marginTop: 22,
marginBottom: 49,
}, },
modalView: { modalView: {
flexShrink: 1, flexShrink: 1,
margin: 20, margin: 20,
width: screen_width, width: screen_width,
backgroundColor: "white",
backgroundColor: colors.grayBG,
borderTopLeftRadius: 10, borderTopLeftRadius: 10,
borderTopRightRadius: 10, borderTopRightRadius: 10,
marginBottom: 0, marginBottom: 0,

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

@ -40,6 +40,7 @@ export default function OpenStreetMap({
markersList, markersList,
clickListener, clickListener,
moveEndListener, moveEndListener,
isForm=false
}) { }) {
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
const webviewContent = html_content; const webviewContent = html_content;
@ -82,6 +83,7 @@ export default function OpenStreetMap({
injectedJavaScript={viewFunction} injectedJavaScript={viewFunction}
/> />
)} )}
{!isForm && (
<View> <View>
<MapModal <MapModal
showModal={markerListener} showModal={markerListener}
@ -89,7 +91,7 @@ export default function OpenStreetMap({
markers={markersList} markers={markersList}
/> />
<MapDataMenu/> <MapDataMenu/>
</View>
</View>)}
</View> </View>
); );
} }

2
src/app/config/colors.js

@ -11,10 +11,12 @@ export default {
activated: "rgba(26, 138, 17, 0.63)", activated: "rgba(26, 138, 17, 0.63)",
lightGray: "#C4C4C4", lightGray: "#C4C4C4",
gray: "#999999", gray: "#999999",
separatorGray: "#D9D9D9",
subText: "#8B8C8C", subText: "#8B8C8C",
lightestGray: "#F0F0F0", lightestGray: "#F0F0F0",
lightBlue: "#1976D2", lightBlue: "#1976D2",
gold: "#ffd700", gold: "#ffd700",
toggle: "#e5eff4", toggle: "#e5eff4",
grayBG: "#EEECEC",
}; };

12
src/app/navigation/NewListingButton.js

@ -11,7 +11,7 @@ function NewListingButton({ onPress }) {
<MaterialCommunityIcons <MaterialCommunityIcons
name="plus-circle" name="plus-circle"
color={colors.white} color={colors.white}
size={40}
size={30}
/> />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@ -23,12 +23,12 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
backgroundColor: colors.primary, backgroundColor: colors.primary,
borderColor: colors.white, borderColor: colors.white,
borderRadius: 40,
borderWidth: 10,
bottom: 20,
height: 80,
borderRadius: 50,
borderWidth: 0,
bottom: -4,
height: 40,
justifyContent: "center", justifyContent: "center",
width: 80,
width: 40,
}, },
}); });

1
src/app/screens/MapFormScreen.js

@ -51,6 +51,7 @@ const MapFormScreen = (props) => {
<OpenStreetMap <OpenStreetMap
moveEndListener={(e) => moveLocation(e)} moveEndListener={(e) => moveLocation(e)}
centerUserLocation={true} centerUserLocation={true}
isForm={true}
/> />
<View style={styles.markerFixed}> <View style={styles.markerFixed}>
<Image <Image

Loading…
Cancel
Save