Skip to content

S
safetcut-app
Commit 826bd63e by Tonk
Options

add smart meter

parent cc55a818
Showing with 246 additions and 1 deletions
src/components/layout/MeterCard.js
......@@ -2,10 +2,11 @@ import React from 'react';
import { Card, View, Row, Icon, Text } from 'native-base';
import { Image, StyleSheet, TouchableOpacity } from 'react-native';
import { color } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux';
const MeterCard = props => {
return (
<TouchableOpacity onPress={() => console.log('Go to Smart meter ' + props.index + '!!')}>
<TouchableOpacity onPress={() => Actions.SmartMeter()}>
<Card style={[styles.cardContainer]}>
<View style={[styles.imgContainer]}>
{props.isOn ? (
......
src/navigation/AppRouter.js
......@@ -11,6 +11,7 @@ import Register from '../screens/public/register';
import ForgotPass from '../screens/public/forgotPassword';
import SendEmail from '../screens/public/sendEmail';
import StartPage from '../screens/public/startPage';
import SmartMeter from '../screens/private/SmartMeter';
class AppRouterComponent extends Component {
render() {
......@@ -26,6 +27,7 @@ class AppRouterComponent extends Component {
<Scene key="Register" component={Register} />
<Scene key="ForgotPass" component={ForgotPass} />
<Scene key="SendEmail" component={SendEmail} />
<Scene key="SmartMeter" component={SmartMeter} />
</Scene>
</Router>
</Provider>
......
src/screens/private/SmartMeter.js 0 → 100644
import React, { Component } from 'react';
import { View, Text, Container, Content, Card, Header, Row, Right, Left, Switch, Icon } from 'native-base';
import { color } from '../../constants/Styles';
import { FlatList } from 'react-native';
// Main Breaker mock data
const MainBreaker = {
name: 'Main Breaker',
description: 'Lorem ipsum dolorsit amet,consectetur adipiscing elit. Cras sagitti.',
current: '10mA',
status: true,
Ecurrent: [
{ name: 'AC Volt', number: 250, unit: 'V' },
{ name: 'AC Current', number: 118, unit: 'A' },
{ name: 'Watt', number: 5890, unit: 'V' },
{ name: 'Leakage Current', number: 25, unit: 'mA' },
{ name: 'Watthour', number: 999999, unit: 'mA' },
],
MCB: [
{
title: 'MCB Link 1',
sub: [
{ title: 'Sub Breaker 1-1', description: 'Description', status: false },
{ title: 'Sub Breaker 1-2', description: 'Description', status: true },
{ title: 'Sub Breaker 1-3', description: 'Description', status: false },
{ title: 'Sub Breaker 1-4', description: 'Description', status: true },
{ title: 'Sub Breaker 1-5', description: 'Description', status: false },
{ title: 'Sub Breaker 1-6', description: 'Description', status: true },
{ title: 'Sub Breaker 1-7', description: 'Description', status: false },
{ title: 'Sub Breaker 1-8', description: 'Description', status: true },
],
},
{
title: 'MCB Link 2',
sub: [
{ title: 'Sub Breaker 2-1', description: 'Description', status: false },
{ title: 'Sub Breaker 2-2', description: 'Description', status: true },
{ title: 'Sub Breaker 2-3', description: 'Description', status: false },
{ title: 'Sub Breaker 2-4', description: 'Description', status: true },
{ title: 'Sub Breaker 2-5', description: 'Description', status: false },
{ title: 'Sub Breaker 2-6', description: 'Description', status: true },
{ title: 'Sub Breaker 2-7', description: 'Description', status: false },
{ title: 'Sub Breaker 2-8', description: 'Description', status: true },
],
},
{
title: 'MCB Link 3',
sub: [
{ title: 'Sub Breaker 3-1', description: 'Description', status: false },
{ title: 'Sub Breaker 3-2', description: 'Description', status: true },
{ title: 'Sub Breaker 3-3', description: 'Description', status: false },
{ title: 'Sub Breaker 3-4', description: 'Description', status: true },
{ title: 'Sub Breaker 3-5', description: 'Description', status: false },
{ title: 'Sub Breaker 3-6', description: 'Description', status: true },
{ title: 'Sub Breaker 3-7', description: 'Description', status: false },
{ title: 'Sub Breaker 3-8', description: 'Description', status: true },
],
},
{
title: 'MCB Link 4',
sub: [
{ title: 'Sub Breaker 4-1', description: 'Description', status: false },
{ title: 'Sub Breaker 4-2', description: 'Description', status: true },
{ title: 'Sub Breaker 4-3', description: 'Description', status: false },
{ title: 'Sub Breaker 4-4', description: 'Description', status: true },
{ title: 'Sub Breaker 4-5', description: 'Description', status: false },
{ title: 'Sub Breaker 4-6', description: 'Description', status: true },
{ title: 'Sub Breaker 4-7', description: 'Description', status: false },
{ title: 'Sub Breaker 4-8', description: 'Description', status: true },
],
},
],
};
export default class SmartMeter extends Component {
constructor(props) {
super(props);
this.state = {
mbOn: false,
sb: [
{
expand: true,
},
{
expand: false,
},
{
expand: false,
},
{
expand: false,
},
],
};
}
// full incomplete row
formatGridData(unformatData) {
let data = unformatData;
const numberOfFullRows = Math.floor(data.length / 3);
let numberOfElementsLastRow = data.length - numberOfFullRows * 3;
while (numberOfElementsLastRow !== 3 && numberOfElementsLastRow !== 0) {
data.push({ name: 'empty', number: null, unit: null });
numberOfElementsLastRow = numberOfElementsLastRow + 1;
}
return data;
}
render() {
// Electric Current card
const Meter = props => {
return (
<Card style={{ padding: 10, borderRadius: 6, flex: 1 }}>
<Text style={{ fontSize: 9, color: '#9b9b9b' }}>{props.name}</Text>
<Text style={{ fontSize: 20, color: color.grey3, textAlign: 'right', marginTop: 10 }}>
{props.number} <Text style={{ fontSize: 10 }}>{props.unit}</Text>
</Text>
</Card>
);
};
// MCB Link
const MCBLink = props => {
const index = props.index;
return (
<View>
<Row
style={{ padding: 10 }}
onPress={() =>
this.setState(() => {
return (sb[index].expand = !sb[index].expand);
})
}
>
<Left>
<Text style={{ fontSize: 14, color: '#4a4a4a' }}>{props.item.title}</Text>
</Left>
<Right>
<Icon
style={{ fontSize: 18, color: '#5B5B5B' }}
name={sb[index].expand ? 'arrow-up' : 'arrow-down'}
/>
</Right>
</Row>
{sb[index].expand
? props.item.sub.map((subItem, index) => (
<SubBreaker
key={index}
title={subItem.title}
description={subItem.description}
status={subItem.status}
/>
))
: null}
</View>
);
};
// Sub Breaker
const SubBreaker = props => {
return (
<View
style={{
padding: 20,
paddingVertical: 20,
backgroundColor: 'rgba(216,216,216,0.3)',
}}
>
<Row>
<Left>
<View>
<Text style={{ fontSize: 14, color: '#4a4a4a' }}>{props.title}</Text>
<Text style={{ fontSize: 12, color: '#9b9b9b' }}>{props.description}</Text>
</View>
</Left>
<Right>
<Switch
value={props.status}
trackColor={{ true: 'rgba(238,84,84,0.5)' }}
ios_backgroundColor={'#dfdfdf'}
thumbColor={'#ee5454'}
/>
</Right>
</Row>
</View>
);
};
const sb = this.state.sb;
return (
<Container>
<Header />
<Content style={{ padding: 20, backgroundColor: '#fbfbfb' }}>
{/* Main Breaker */}
<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>
</Left>
<Right>
<Switch
value={this.state.mbOn}
onValueChange={() =>
this.setState(() => {
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>
</Card>
{/* Electric Current */}
<FlatList
data={this.formatGridData(MainBreaker.Ecurrent)}
renderItem={({ item }) => {
if (item.name == 'empty') {
return <Card transparent style={{ flex: 1, padding: 10 }} />;
} else {
return <Meter name={item.name} number={item.number} unit={item.unit} />;
}
}}
numColumns={3}
keyExtractor={(item, index) => index}
style={{ paddingTop: 20 }}
/>
{/* MCB Link */}
<Card style={{ borderRadius: 6, overflow: 'hidden', marginTop: 20 }}>
{MainBreaker.MCB.map((item, index) => (
<MCBLink item={item} key={index} index={index} />
))}
</Card>
</Content>
</Container>
);
}
}
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