Skip to content

S
safetcut-app
Commit fb727a6a by Tonk
Options

update createTime, meterDetail & change loading screen logo to logo2

parent 15a6d88c
Showing with 103 additions and 78 deletions
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
...@@ -13,6 +13,7 @@ const MainBreaker = { ...@@ -13,6 +13,7 @@ const MainBreaker = {
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.', description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
current: '10mA', current: '10mA',
status: true, status: true,
on: true,
Ecurrent: [ Ecurrent: [
{ name: 'AC Volt', number: 250, unit: 'V' }, { name: 'AC Volt', number: 250, unit: 'V' },
{ name: 'AC Current', number: 118, unit: 'A' }, { name: 'AC Current', number: 118, unit: 'A' },
...@@ -143,10 +144,19 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -143,10 +144,19 @@ export default class SmartMeterDetailScreen extends Component {
const Meter = props => { const Meter = props => {
return ( return (
<Card style={{ padding: 10, borderRadius: 6, flex: 1 }}> <Card style={{ padding: 10, borderRadius: 6, flex: 1 }}>
<Text style={{ fontSize: 9, color: '#9b9b9b' }}>{props.name}</Text> <Text style={{ fontSize: 9, color: '#9b9b9b', fontFamily: 'Avenir-Roman' }}>{props.name}</Text>
<Text style={{ fontSize: 20, color: color.grey3, textAlign: 'right', marginTop: 10 }}> <Text
{props.number} <Text style={{ fontSize: 10 }}>{props.unit}</Text> numberOfLines={1}
style={{
fontSize: 20,
color: color.grey3,
textAlign: 'right',
marginTop: 10,
fontFamily: 'Avenir-Roman',
}}
>
{props.number} <Text style={{ fontSize: 10, fontFamily: 'Avenir-Roman' }}>{props.unit}</Text>
</Text> </Text>
</Card> </Card>
); );
...@@ -165,7 +175,9 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -165,7 +175,9 @@ export default class SmartMeterDetailScreen extends Component {
} }
> >
<Left> <Left>
<Text style={{ fontSize: 14, color: '#4a4a4a' }}>{props.item.title}</Text> <Text style={{ fontSize: 14, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
{props.item.title}
</Text>
</Left> </Left>
<Right> <Right>
<Icon <Icon
...@@ -200,17 +212,16 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -200,17 +212,16 @@ export default class SmartMeterDetailScreen extends Component {
<Row> <Row>
<Left> <Left>
<View> <View>
<Text style={{ fontSize: 14, color: '#4a4a4a' }}>{props.title}</Text> <Text style={{ fontSize: 14, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
<Text style={{ fontSize: 12, color: '#9b9b9b' }}>{props.description}</Text> {props.title}
</Text>
<Text style={{ fontSize: 12, color: '#9b9b9b', fontFamily: 'Avenir-Roman' }}>
{props.description}
</Text>
</View> </View>
</Left> </Left>
<Right> <Right>
<Switch <Switch value={props.status} />
value={props.status}
trackColor={{ true: 'rgba(238,84,84,0.5)' }}
ios_backgroundColor={'#dfdfdf'}
thumbColor={'#ee5454'}
/>
</Right> </Right>
</Row> </Row>
</View> </View>
...@@ -224,9 +235,8 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -224,9 +235,8 @@ export default class SmartMeterDetailScreen extends Component {
<Card style={{ paddingHorizontal: 10, paddingVertical: 15, borderRadius: 10 }}> <Card style={{ paddingHorizontal: 10, paddingVertical: 15, borderRadius: 10 }}>
<Row> <Row>
<Left> <Left>
<Text style={{ fontSize: 18, color: color.grey3 }}> <Text style={{ fontSize: 18, color: color.grey3, fontFamily: 'Avenir-Roman' }}>
{MainBreaker.name}{' '} {MainBreaker.name}
<Text style={{ fontSize: 12, color: color.primary }}>({MainBreaker.current})</Text>
</Text> </Text>
</Left> </Left>
<Right> <Right>
...@@ -237,13 +247,32 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -237,13 +247,32 @@ export default class SmartMeterDetailScreen extends Component {
return (this.state.mbOn = !this.state.mbOn); return (this.state.mbOn = !this.state.mbOn);
}) })
} }
trackColor={{ true: 'rgba(238,84,84,0.5)' }}
ios_backgroundColor={'#dfdfdf'}
thumbColor={'#ee5454'}
/> />
</Right> </Right>
</Row> </Row>
<Text style={{ fontSize: 12, color: '#9b9b9b', marginTop: 10 }}>{MainBreaker.description}</Text> <Text style={{ fontSize: 12, color: '#9b9b9b', marginTop: 10, fontFamily: 'Avenir-Roman' }}>
{MainBreaker.description}
</Text>
<Row style={{ marginTop: 10 }}>
<Text style={{ fontSize: 12, marginRight: 5, fontFamily: 'Avenir-Roman' }}>
Status:{' '}
<Text
style={{
fontSize: 12,
fontFamily: 'Avenir-Roman',
color: MainBreaker.status ? color.powerOn : color.primary,
}}
>
{MainBreaker.status ? 'Online' : 'Offline'}
</Text>
</Text>
<Text style={{ fontSize: 12, fontFamily: 'Avenir-Roman' }}>
xxx:{' '}
<Text style={{ fontSize: 12, fontFamily: 'Avenir-Roman', color: color.primary }}>
({MainBreaker.current})
</Text>
</Text>
</Row>
</Card> </Card>
{/* Electric Current */} {/* Electric Current */}
<FlatList <FlatList
......
screens/Private/TimerScreen/TimerScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Fab, Icon, Text } from 'native-base'; import { Fab, Icon, Text } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView, TouchableHighlight, Modal, TextInput } from 'react-native'; import { View, StyleSheet, FlatList, ScrollView, TouchableHighlight, Modal, TextInput } from 'react-native';
import { Item, Label, Switch, Button } from 'native-base'; import { Switch, Button } from 'native-base';
import { Input } from 'react-native-elements';
import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons'; import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { color } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import { Badge } from 'react-native-elements'; import { Badge } from 'react-native-elements';
import SwipeableRow from '../../../components/SwipeableRow'; import SwipeableRow from '../../../components/SwipeableRow';
import DatePicker from 'react-native-date-picker'; import DatePicker from 'react-native-date-picker';
import { width, height } from '../../../constants/Layout'; import { height } from '../../../constants/Layout';
import InputField from '../../../components/InputField';
// mock data // mock data
const mockData = [ const mockData = [
...@@ -142,75 +142,40 @@ export default class TimerScreen extends Component { ...@@ -142,75 +142,40 @@ export default class TimerScreen extends Component {
backgroundColor: 'rgba(0, 0, 0,0.5)', backgroundColor: 'rgba(0, 0, 0,0.5)',
}} }}
> >
<ScrollView <ScrollView contentContainerStyle={styles.scrollContainer}>
contentContainerStyle={{ <Text style={theme.startTitle}>Create Timer</Text>
top: height * 0.1, <Text style={styles.subHeader}>Set Time</Text>
flex: 0.9,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
backgroundColor: '#fff',
paddingVertical: 30,
paddingHorizontal: 25,
justifyContent: 'space-between',
alignContent: 'space-between',
}}
>
<Text style={{ textAlign: 'left', fontSize: 22 }}>Create Timer</Text>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Set Time</Text>
<DatePicker <DatePicker
date={this.state.date} date={this.state.date}
onDateChange={date => this.setState({ date })} onDateChange={date => this.setState({ date })}
mode="time" mode="time"
/> />
<Text style={{ textAlign: 'left', fontSize: 16 }}>Name</Text> <Text style={styles.subHeader}>Name</Text>
<TextInput placeholder="Name" />
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} />
<Text style={{ textAlign: 'left', fontSize: 16 }}>Power</Text> <View style={styles.rowContainer}>
<Text style={styles.subHeader}>Power</Text>
<Switch /> <Switch />
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={styles.rowContainer}>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Active</Text> <Text style={styles.subHeader}>Active</Text>
<Switch /> <Switch />
</View> </View>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Repeat</Text> <Text style={styles.subHeader}>Repeat</Text>
<View <View style={styles.dayContainer}>
style={{ flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}
>
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => ( {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => (
<TouchableHighlight <TouchableHighlight
key={index + item} key={index + item}
style={{ style={[styles.dayBtn, { borderColor: color.primary }]}
width: 35,
height: 35,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#ee5454',
borderWidth: 1,
borderRadius: 18,
}}
>
<Text
style={{
justifyContent: 'center',
textAlign: 'center',
fontSize: 13,
color: '#ee5454',
}}
> >
{item} <Text style={[theme.subText, { color: color.primary }]}>{item}</Text>
</Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
<Button <Button
rounded transparent
style={{ style={{ flex: 1, justifyContent: 'center' }}
flex: 1,
backgroundColor: 'transaparent',
borderColor: 'transparent',
elevation: 0,
}}
onPress={() => this.setState({ isVisible: false })} onPress={() => this.setState({ isVisible: false })}
> >
<Text style={{ color: '#aeaeae' }}>Cancel</Text> <Text style={{ color: '#aeaeae' }}>Cancel</Text>
...@@ -219,9 +184,8 @@ export default class TimerScreen extends Component { ...@@ -219,9 +184,8 @@ export default class TimerScreen extends Component {
rounded rounded
style={{ style={{
flex: 1, flex: 1,
backgroundColor: '#ee5454', backgroundColor: color.primary,
borderColor: 'transparent', justifyContent: 'center',
elevation: 0,
}} }}
onPress={() => this.setState({ isVisible: false })} onPress={() => this.setState({ isVisible: false })}
> >
...@@ -243,4 +207,36 @@ const styles = StyleSheet.create({ ...@@ -243,4 +207,36 @@ const styles = StyleSheet.create({
height: StyleSheet.hairlineWidth, height: StyleSheet.hairlineWidth,
marginHorizontal: 10, marginHorizontal: 10,
}, },
subHeader: {
fontFamily: 'Avenir-Roman',
fontSize: 16,
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
dayContainer: {
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
},
dayBtn: {
width: 35,
height: 35,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderRadius: 18,
},
scrollContainer: {
top: height * 0.1,
flex: 0.9,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
backgroundColor: '#fff',
paddingVertical: 30,
paddingHorizontal: 25,
justifyContent: 'space-between',
alignContent: 'space-between',
},
}); });
screens/Public/AuthLoadingScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { ActivityIndicator, View, StatusBar, Image } from 'react-native'; import { ActivityIndicator, View, StatusBar, Image } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage'; //expo not yet support import AsyncStorage from '@react-native-community/async-storage'; //expo not yet support
import logo from '../../assets/images/logo.png'; import logo from '../../assets/images/logo2.png';
import { width } from '../../constants/Layout'; import { width } from '../../constants/Layout';
export default class AuthLoadingScreen extends Component { export default class AuthLoadingScreen extends Component {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment