|
@ -219,10 +219,10 @@ function ListDataOptions( |
|
|
height: 36, |
|
|
height: 36, |
|
|
justifyContent: "center", |
|
|
justifyContent: "center", |
|
|
borderRadius: 6, |
|
|
borderRadius: 6, |
|
|
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> |
|
@ -243,10 +243,7 @@ function DataOriginOptions({ |
|
|
flexDirection: "column", |
|
|
flexDirection: "column", |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<ScrollView |
|
|
|
|
|
height={270} |
|
|
|
|
|
automaticallyAdjustContentInsets={true} |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<ScrollView height={270} automaticallyAdjustContentInsets={true}> |
|
|
<View> |
|
|
<View> |
|
|
{dataOptions[dataOriginToShow].map((option) => |
|
|
{dataOptions[dataOriginToShow].map((option) => |
|
|
ListDataOptions( |
|
|
ListDataOptions( |
|
@ -262,26 +259,15 @@ function DataOriginOptions({ |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function DataMenuBody({ setShowModal }) { |
|
|
|
|
|
|
|
|
function DataMenuBody({ |
|
|
|
|
|
setShowModal, |
|
|
|
|
|
dataOptionsToShow, |
|
|
|
|
|
setDataOptionsToShow, |
|
|
|
|
|
}) { |
|
|
const [dataOriginToShow, setDataOriginToShow] = useState("oficial"); |
|
|
const [dataOriginToShow, setDataOriginToShow] = useState("oficial"); |
|
|
const [dataOptionsToShow, setDataOptionsToShow] = useState({ |
|
|
|
|
|
oficial: { |
|
|
|
|
|
automaticPluviometer: false, |
|
|
|
|
|
susceptibilityAreas: false, |
|
|
|
|
|
}, |
|
|
|
|
|
citzen: { |
|
|
|
|
|
floodRisk: false, |
|
|
|
|
|
pluviometer: true, |
|
|
|
|
|
rain: false, |
|
|
|
|
|
floodZones: true, |
|
|
|
|
|
riverFlood: true, |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View |
|
|
|
|
|
backgroundColor={colors.grayBG} |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<View backgroundColor={colors.grayBG}> |
|
|
<DataMenuHeader setShowModal={setShowModal} /> |
|
|
<DataMenuHeader setShowModal={setShowModal} /> |
|
|
<DataOriginSelector |
|
|
<DataOriginSelector |
|
|
dataOriginToShow={dataOriginToShow} |
|
|
dataOriginToShow={dataOriginToShow} |
|
@ -289,8 +275,8 @@ function DataMenuBody({ setShowModal }) { |
|
|
/> |
|
|
/> |
|
|
<DataOriginOptions |
|
|
<DataOriginOptions |
|
|
dataOptionsToShow={dataOptionsToShow} |
|
|
dataOptionsToShow={dataOptionsToShow} |
|
|
dataOriginToShow={dataOriginToShow} |
|
|
|
|
|
setDataOptionsToShow={setDataOptionsToShow} |
|
|
setDataOptionsToShow={setDataOptionsToShow} |
|
|
|
|
|
dataOriginToShow={dataOriginToShow} |
|
|
/> |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
); |
|
|
); |
|
@ -298,31 +284,30 @@ function DataMenuBody({ setShowModal }) { |
|
|
|
|
|
|
|
|
function ModalOpenBtn({ setShowModal }) { |
|
|
function ModalOpenBtn({ setShowModal }) { |
|
|
return ( |
|
|
return ( |
|
|
<TouchableOpacity |
|
|
|
|
|
onPress={() => setShowModal()} |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<TouchableOpacity onPress={() => setShowModal()}> |
|
|
<View |
|
|
<View |
|
|
style={{ |
|
|
style={{ |
|
|
width: "100%", |
|
|
width: "100%", |
|
|
height: 48, |
|
|
height: 48, |
|
|
backgroundColor: colors.primary, |
|
|
backgroundColor: colors.primary, |
|
|
justifyContent: "center", |
|
|
justifyContent: "center", |
|
|
alignItems: "center" |
|
|
|
|
|
}}> |
|
|
|
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
<Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text> |
|
|
<Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text> |
|
|
</View> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
</TouchableOpacity> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default function MapDataMenu(props) { |
|
|
|
|
|
|
|
|
export default function MapDataMenu({ |
|
|
|
|
|
dataOptionsToShow, |
|
|
|
|
|
setDataOptionsToShow, |
|
|
|
|
|
}) { |
|
|
const [showModal, setShowModal] = useState(null); |
|
|
const [showModal, setShowModal] = useState(null); |
|
|
return ( |
|
|
return ( |
|
|
<View |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
<ModalOpenBtn |
|
|
|
|
|
setShowModal={() => setShowModal(true)}/> |
|
|
|
|
|
|
|
|
<View> |
|
|
|
|
|
<ModalOpenBtn setShowModal={() => setShowModal(true)} /> |
|
|
|
|
|
|
|
|
<SelfClosingModal |
|
|
<SelfClosingModal |
|
|
style={{ position: "absolute" }} |
|
|
style={{ position: "absolute" }} |
|
@ -331,7 +316,11 @@ export default function MapDataMenu(props) { |
|
|
showModal={showModal} |
|
|
showModal={showModal} |
|
|
setShowModal={setShowModal} |
|
|
setShowModal={setShowModal} |
|
|
> |
|
|
> |
|
|
<DataMenuBody setShowModal={setShowModal} /> |
|
|
|
|
|
|
|
|
<DataMenuBody |
|
|
|
|
|
setShowModal={setShowModal} |
|
|
|
|
|
dataOptionsToShow={dataOptionsToShow} |
|
|
|
|
|
setDataOptionsToShow={setDataOptionsToShow} |
|
|
|
|
|
/> |
|
|
</SelfClosingModal> |
|
|
</SelfClosingModal> |
|
|
</View> |
|
|
</View> |
|
|
); |
|
|
); |
|
|