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 = {
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
current: '10mA',
status: true,
on: true,
Ecurrent: [
{ name: 'AC Volt', number: 250, unit: 'V' },
{ name: 'AC Current', number: 118, unit: 'A' },
......@@ -143,10 +144,19 @@ export default class SmartMeterDetailScreen extends Component {
const Meter = props => {
return (
<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 }}>
{props.number} <Text style={{ fontSize: 10 }}>{props.unit}</Text>
<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>
</Card>
);
......@@ -165,7 +175,9 @@ export default class SmartMeterDetailScreen extends Component {
}
>
<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>
<Right>
<Icon
......@@ -200,17 +212,16 @@ export default class SmartMeterDetailScreen extends Component {
<Row>
<Left>
<View>
<Text style={{ fontSize: 14, color: '#4a4a4a' }}>{props.title}</Text>
<Text style={{ fontSize: 12, color: '#9b9b9b' }}>{props.description}</Text>
<Text style={{ fontSize: 14, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
{props.title}
</Text>
<Text style={{ fontSize: 12, color: '#9b9b9b', fontFamily: 'Avenir-Roman' }}>
{props.description}
</Text>
</View>
</Left>
<Right>
<Switch
value={props.status}
trackColor={{ true: 'rgba(238,84,84,0.5)' }}
ios_backgroundColor={'#dfdfdf'}
thumbColor={'#ee5454'}
/>
<Switch value={props.status} />
</Right>
</Row>
</View>
......@@ -224,9 +235,8 @@ export default class SmartMeterDetailScreen extends Component {
<Card style={{ paddingHorizontal: 10, paddingVertical: 15, borderRadius: 10 }}>
<Row>
<Left>
<Text style={{ fontSize: 18, color: color.grey3 }}>
{MainBreaker.name}{' '}
<Text style={{ fontSize: 12, color: color.primary }}>({MainBreaker.current})</Text>
<Text style={{ fontSize: 18, color: color.grey3, fontFamily: 'Avenir-Roman' }}>
{MainBreaker.name}
</Text>
</Left>
<Right>
......@@ -237,13 +247,32 @@ export default class SmartMeterDetailScreen extends Component {
return (this.state.mbOn = !this.state.mbOn);
})
}
trackColor={{ true: 'rgba(238,84,84,0.5)' }}
ios_backgroundColor={'#dfdfdf'}
thumbColor={'#ee5454'}
/>
</Right>
</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>
{/* Electric Current */}
<FlatList
......
screens/Private/TimerScreen/TimerScreen.js
import React, { Component } from 'react';
import { Fab, Icon, Text } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView, TouchableHighlight, Modal, TextInput } from 'react-native';
import { Item, Label, Switch, Button } from 'native-base';
import { Input } from 'react-native-elements';
import { Switch, Button } from 'native-base';
import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { color } from '../../../constants/Styles';
import { color, theme } from '../../../constants/Styles';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Badge } from 'react-native-elements';
import SwipeableRow from '../../../components/SwipeableRow';
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
const mockData = [
......@@ -142,75 +142,40 @@ export default class TimerScreen extends Component {
backgroundColor: 'rgba(0, 0, 0,0.5)',
}}
>
<ScrollView
contentContainerStyle={{
top: height * 0.1,
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>
<ScrollView contentContainerStyle={styles.scrollContainer}>
<Text style={theme.startTitle}>Create Timer</Text>
<Text style={styles.subHeader}>Set Time</Text>
<DatePicker
date={this.state.date}
onDateChange={date => this.setState({ date })}
mode="time"
/>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Name</Text>
<TextInput placeholder="Name" />
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Power</Text>
<Text style={styles.subHeader}>Name</Text>
<InputField placeholder="Name" customStyle={[theme.input, { marginTop: 0 }]} />
<View style={styles.rowContainer}>
<Text style={styles.subHeader}>Power</Text>
<Switch />
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Active</Text>
<View style={styles.rowContainer}>
<Text style={styles.subHeader}>Active</Text>
<Switch />
</View>
<Text style={{ textAlign: 'left', fontSize: 16 }}>Repeat</Text>
<View
style={{ flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}
>
<Text style={styles.subHeader}>Repeat</Text>
<View style={styles.dayContainer}>
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => (
<TouchableHighlight
key={index + item}
style={{
width: 35,
height: 35,
alignItems: 'center',
justifyContent: 'center',
borderColor: '#ee5454',
borderWidth: 1,
borderRadius: 18,
}}
style={[styles.dayBtn, { borderColor: color.primary }]}
>
<Text
style={{
justifyContent: 'center',
textAlign: 'center',
fontSize: 13,
color: '#ee5454',
}}
>
{item}
</Text>
<Text style={[theme.subText, { color: color.primary }]}>{item}</Text>
</TouchableHighlight>
))}
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
<Button
rounded
style={{
flex: 1,
backgroundColor: 'transaparent',
borderColor: 'transparent',
elevation: 0,
}}
transparent
style={{ flex: 1, justifyContent: 'center' }}
onPress={() => this.setState({ isVisible: false })}
>
<Text style={{ color: '#aeaeae' }}>Cancel</Text>
......@@ -219,9 +184,8 @@ export default class TimerScreen extends Component {
rounded
style={{
flex: 1,
backgroundColor: '#ee5454',
borderColor: 'transparent',
elevation: 0,
backgroundColor: color.primary,
justifyContent: 'center',
}}
onPress={() => this.setState({ isVisible: false })}
>
......@@ -243,4 +207,36 @@ const styles = StyleSheet.create({
height: StyleSheet.hairlineWidth,
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 { ActivityIndicator, View, StatusBar, Image } from 'react-native';
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';
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