forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
4 years ago
4 changed files with 173 additions and 2 deletions
-
3src/app/components/forms/FormDatePicker.js
-
151src/app/screens/PluviometerDiaryScreen.js
-
20src/package-lock.json
-
1src/package.json
@ -0,0 +1,151 @@ |
|||||
|
import React, { useState, useContext, useEffect } from "react"; |
||||
|
import { StyleSheet, Text, View } from "react-native"; |
||||
|
|
||||
|
import Screen from "../components/Screen"; |
||||
|
import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; |
||||
|
import colors from "../config/colors/"; |
||||
|
|
||||
|
import { FontAwesome5 } from '@expo/vector-icons'; |
||||
|
import { MaterialIcons } from "@expo/vector-icons"; |
||||
|
|
||||
|
const dims = scaleDimsFromWidth(85, 85, 25); |
||||
|
|
||||
|
function PluviometerDiaryScreen(props) { |
||||
|
//Substituir por dados vindos da API
|
||||
|
const school = "Escola registrada do pluviômetro"; |
||||
|
const profile = "Tipo de perfil do usuário"; |
||||
|
const local = "Endereço registrado do pluviômetro" |
||||
|
return ( |
||||
|
<Screen style={styles.container}> |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<Text style={{ textAlign: "center" }}> |
||||
|
Gráfico do pluviometro |
||||
|
</Text> |
||||
|
|
||||
|
</View> |
||||
|
<View |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
flexDirection: "column", |
||||
|
alignContent: "flex-start", |
||||
|
justifyContent: "space-between", |
||||
|
}}> |
||||
|
{/* Endereço */} |
||||
|
< View style={{ flex: 1 }}> |
||||
|
<View style={styles.location}> |
||||
|
<View style={styles.mapIcon}> |
||||
|
<MaterialIcons |
||||
|
name="location-on" |
||||
|
size={28} |
||||
|
color="white" |
||||
|
alignItems="center" |
||||
|
alignContent="center" |
||||
|
/> |
||||
|
</View> |
||||
|
<View style={styles.adressText}> |
||||
|
<Text style={{ |
||||
|
fontSize: dimensions.text.default, |
||||
|
}}> |
||||
|
{local} |
||||
|
</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
{/* Escola */} |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<View style={styles.location}> |
||||
|
<View style={styles.mapIcon}> |
||||
|
<FontAwesome5 |
||||
|
name="university" |
||||
|
size={28} |
||||
|
color="white" |
||||
|
alignItems="center" |
||||
|
alignContent="center" |
||||
|
/> |
||||
|
</View> |
||||
|
<View style={styles.adressText}> |
||||
|
<Text style={{ |
||||
|
fontSize: dimensions.text.default, |
||||
|
}}> |
||||
|
{ school } |
||||
|
</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
{/* Usuário */} |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<View style={styles.location}> |
||||
|
<View style={styles.mapIcon}> |
||||
|
<FontAwesome5 |
||||
|
name="user-alt" |
||||
|
size={28} |
||||
|
color="white" |
||||
|
alignItems="center" |
||||
|
alignContent="center" |
||||
|
/> |
||||
|
</View> |
||||
|
<View style={styles.adressText}> |
||||
|
<Text style={{ |
||||
|
fontSize: dimensions.text.default, |
||||
|
}}> |
||||
|
{ profile } |
||||
|
</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</Screen > |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
container: { |
||||
|
padding: 10, |
||||
|
flex: 1, |
||||
|
}, |
||||
|
image: { |
||||
|
width: dims.width * 0.8, |
||||
|
height: dims.height * 0.8, |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
}, |
||||
|
label: { |
||||
|
fontSize: dimensions.text.secondary, |
||||
|
fontWeight: "bold", |
||||
|
textAlign: "left", |
||||
|
color: colors.lightBlue, |
||||
|
}, |
||||
|
title: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: "bold", |
||||
|
textAlign: "center", |
||||
|
color: colors.primary, |
||||
|
}, |
||||
|
location: { |
||||
|
width: "100%", |
||||
|
flexDirection: "row", |
||||
|
alignItems: "flex-start", |
||||
|
justifyContent: "space-between", |
||||
|
}, |
||||
|
adressText: { |
||||
|
flex: 0.90, |
||||
|
height: "100%", |
||||
|
flexDirection: "column", |
||||
|
justifyContent: "center", |
||||
|
paddingLeft: 5, |
||||
|
}, |
||||
|
mapIcon: { |
||||
|
backgroundColor: colors.primary, |
||||
|
padding: 8, |
||||
|
width: 20, |
||||
|
alignItems: "center", |
||||
|
borderRadius: 5, |
||||
|
flex: 0.10, |
||||
|
marginTop: 8, |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
export default PluviometerDiaryScreen; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue