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