Skip to content

S
safetcut-app
Commit 8ff86ee3 by Tonk
Options

add delete connected device function, update get connected device

parent 897d2eda
Showing with 172 additions and 109 deletions
components/Form/Input.js
...@@ -63,10 +63,10 @@ class Input extends Component { ...@@ -63,10 +63,10 @@ class Input extends Component {
</View> </View>
{touched && {touched &&
((error && ( ((error && (
<Text style={[theme.smDescription, theme.textDanger, styles.errPosition]}>{error}</Text> <Text style={[theme.description, theme.textDanger, styles.errPosition]}>{error}</Text>
)) || )) ||
(warning && ( (warning && (
<Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text> <Text style={[theme.description, theme.textWarning, styles.errPosition]}>{warning}</Text>
)))} )))}
</View> </View>
); );
......
components/InputField.js
...@@ -63,7 +63,7 @@ const InputField = ({ ...@@ -63,7 +63,7 @@ const InputField = ({
item.field === name && item.error ? ( item.field === name && item.error ? (
<Text <Text
key={`${index}`} key={`${index}`}
style={[theme.smDescription, theme.textDanger, { bottom: -15, position: 'absolute' }]} style={[theme.description, theme.textDanger, { bottom: -15, position: 'absolute' }]}
> >
{item.error} {item.error}
</Text> </Text>
......
components/MeterCard.js
...@@ -43,7 +43,7 @@ class MeterCard extends Component { ...@@ -43,7 +43,7 @@ class MeterCard extends Component {
{ backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' }, { backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]} ]}
> >
<Text style={[theme.smDescription, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text> <Text style={[theme.description, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
</View> </View>
<View style={[theme.centerContainer]}> <View style={[theme.centerContainer]}>
{item.img ? ( {item.img ? (
...@@ -63,7 +63,7 @@ class MeterCard extends Component { ...@@ -63,7 +63,7 @@ class MeterCard extends Component {
<Row style={{ alignItems: 'center' }}> <Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name || 'Untitled'}</Text> <Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name || 'Untitled'}</Text>
</Row> </Row>
<Text style={[theme.smDescription]} numberOfLines={2}> <Text style={[theme.description]} numberOfLines={2}>
{item.description} {item.description}
</Text> </Text>
<Row style={{ marginTop: 10 }}> <Row style={{ marginTop: 10 }}>
...@@ -89,7 +89,7 @@ class MeterCard extends Component { ...@@ -89,7 +89,7 @@ class MeterCard extends Component {
{ backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' }, { backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]} ]}
> >
<Text style={[theme.smDescription, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text> <Text style={[theme.description, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
</View> </View>
<View style={[theme.centerContainer]}> <View style={[theme.centerContainer]}>
{item.img ? ( {item.img ? (
...@@ -109,7 +109,7 @@ class MeterCard extends Component { ...@@ -109,7 +109,7 @@ class MeterCard extends Component {
<Row style={{ alignItems: 'center' }}> <Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name}</Text> <Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name}</Text>
</Row> </Row>
<Text style={[theme.smDescription]} numberOfLines={2}> <Text style={[theme.description]} numberOfLines={2}>
{item.description} {item.description}
</Text> </Text>
<Row style={{ marginTop: 10 }}> <Row style={{ marginTop: 10 }}>
......
constants/Styles.js
...@@ -74,11 +74,6 @@ export const theme = StyleSheet.create({ ...@@ -74,11 +74,6 @@ export const theme = StyleSheet.create({
fontFamily: 'Avenir-Roman', fontFamily: 'Avenir-Roman',
color: color.grey, color: color.grey,
}, },
smDescription: {
fontSize: 12,
fontFamily: 'Avenir-Roman',
color: color.grey,
},
input: { input: {
fontSize: 16, fontSize: 16,
paddingTop: 20, paddingTop: 20,
......
reduxStore/actions/currentSelectedAction.js
import app, { fireStore } from '../../firebase'; import app, { fireStore } from '../../firebase';
import axios from 'axios'; import axios from 'axios';
import _ from 'lodash'; import _ from 'lodash';
import { getExistedConnectedDeviceAction } from './timersAction';
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net'; const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
...@@ -240,6 +241,66 @@ export const setSubBreakerStatus = (value, MainIndex, SubIndex) => async (dispat ...@@ -240,6 +241,66 @@ export const setSubBreakerStatus = (value, MainIndex, SubIndex) => async (dispat
console.log(error); console.log(error);
} }
}; };
export const addConnectedDevice = (mcbLinkId, subBreakerId, deviceData) => async (dispatch, getState) => {
const { currentSelectedDeviceReducer, timersReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const { existedConnectedDevice } = timersReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const getDocRef = () => {
const docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId)
.collection('subBreakers')
.doc(subBreakerId);
return docRef;
};
const newConnectedDevice = existedConnectedDevice.map(
x => x.index + 1 === subBreakerId && [...x[index], deviceData]
);
try {
const docRef = getDocRef();
await docRef.add(deviceData);
dispatch(getExistedConnectedDeviceAction(newConnectedDevice));
} catch (error) {}
};
export const deleteConnectedDevice = data => async (dispatch, getState) => {
const { currentSelectedDeviceReducer, timersReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const { existedConnectedDevice } = timersReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const { mcbLinkId, subBreakerId, connectedDeviceId } = data;
console.log('action connected device', existedConnectedDevice);
const getDocRef = () => {
const docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId)
.collection('subBreakers')
.doc(subBreakerId)
.collection('electronicDevices')
.doc(connectedDeviceId);
return docRef;
};
const newConnectedDevice = existedConnectedDevice.map(x =>
x.filter(device => device.connectedDeviceId !== connectedDeviceId)
);
try {
dispatch(getExistedConnectedDeviceAction(newConnectedDevice));
const docRef = getDocRef();
await docRef.delete();
} catch (error) {
console.log(error);
}
};
// export const getCurrentSelectedData = (deviceId, mcbLinkId, subBreakerId) => (dispatch, getState) => { // export const getCurrentSelectedData = (deviceId, mcbLinkId, subBreakerId) => (dispatch, getState) => {
// const { currentSelectedDeviceReducer } = getState(); // const { currentSelectedDeviceReducer } = getState();
......
reduxStore/actions/timersAction.js
...@@ -151,6 +151,8 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -151,6 +151,8 @@ export const getTimers = () => async (dispatch, getState) => {
existedConnectedDevice.push( existedConnectedDevice.push(
connectedDevices.docs.map(connectedDevice => connectedDevices.docs.map(connectedDevice =>
Object.assign(connectedDevice.data(), { Object.assign(connectedDevice.data(), {
mcbLinkId: mcbLink.id,
subBreakerId: subBreaker.id,
connectedDeviceId: connectedDevice.id, connectedDeviceId: connectedDevice.id,
}) })
) )
......
screens/Private/NotificationScreen/NotificationScreen.js
...@@ -192,7 +192,7 @@ class NotificationScreen extends React.Component { ...@@ -192,7 +192,7 @@ class NotificationScreen extends React.Component {
)} )}
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}> <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 10 }]}> <View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 10 }]}>
<Text style={[theme.smDescription, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text> <Text style={[theme.description, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text>
{!data.read && ( {!data.read && (
<View <View
...@@ -207,7 +207,7 @@ class NotificationScreen extends React.Component { ...@@ -207,7 +207,7 @@ class NotificationScreen extends React.Component {
}, },
]} ]}
> >
<Text style={[theme.smDescription, theme.textWhite]}>New</Text> <Text style={[theme.description, theme.textWhite]}>New</Text>
</View> </View>
)} )}
</View> </View>
...@@ -215,7 +215,7 @@ class NotificationScreen extends React.Component { ...@@ -215,7 +215,7 @@ class NotificationScreen extends React.Component {
<Text style={[theme.normalText, theme.textDark]}> <Text style={[theme.normalText, theme.textDark]}>
{data.action} {data.device} {data.action} {data.device}
</Text> </Text>
<Text style={[theme.smDescription, { color: '#b9babc' }]}> <Text style={[theme.description, { color: '#b9babc' }]}>
{format(data.time * 1000, 'hh:mm A')} {format(data.time * 1000, 'hh:mm A')}
</Text> </Text>
</View> </View>
......
screens/Private/SmartMeterScreen/McbLinkScreen.js
import React from 'react'; import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base'; import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { StyleSheet } from 'react-native'; import { StyleSheet, TextInput } from 'react-native';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { Switch, FlatList, ScrollView, TouchableWithoutFeedback, TouchableOpacity } from 'react-native-gesture-handler'; import { Switch, FlatList, ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { width, height } from '../../../constants/Layout'; import { width, height } from '../../../constants/Layout';
import { getCurrentSelectedShadow, setSubBreakerStatus } from '../../../reduxStore/actions/currentSelectedAction'; import {
getCurrentSelectedShadow,
setSubBreakerStatus,
deleteConnectedDevice,
addConnectedDevice,
} from '../../../reduxStore/actions/currentSelectedAction';
import Modal from 'react-native-modalbox'; import Modal from 'react-native-modalbox';
const mockElec = [
{ name: 'elec1', icon: { type: 'Entypo', name: 'laptop' } },
{ name: 'elec2', icon: { type: '', name: '' } },
// { name: 'elec3', icon: { type: '', name: '' } },
// { name: 'elec4', icon: { type: '', name: '' } },
// { name: 'elec5', icon: { type: '', name: '' } },
// { name: 'elec1', icon: { type: '', name: '' } },
// { name: 'elec2', icon: { type: '', name: '' } },
{ name: 'elec1', icon: { type: 'Entypo', name: 'laptop' } },
{ name: 'elec2', icon: { type: '', name: '' } },
];
let checkedTimes = 0; let checkedTimes = 0;
class McbLinkScreen extends React.Component { class McbLinkScreen extends React.Component {
...@@ -53,7 +47,9 @@ class McbLinkScreen extends React.Component { ...@@ -53,7 +47,9 @@ class McbLinkScreen extends React.Component {
toggleDel: false, toggleDel: false,
isWaiting: false, isWaiting: false,
isAddElectronicVisible: false, isAddElectronicVisible: false,
currentTab: this.props.navigation.getParam('subIndex'), mcbIndex: this.props.navigation.getParam('mcbIndex'),
subBreakerIndex: this.props.navigation.getParam('subIndex'),
deviceName: '',
}; };
componentDidMount = () => { componentDidMount = () => {
this.setSubBreakersState(); this.setSubBreakersState();
...@@ -66,7 +62,6 @@ class McbLinkScreen extends React.Component { ...@@ -66,7 +62,6 @@ class McbLinkScreen extends React.Component {
) { ) {
this.setSubBreakersState(); this.setSubBreakersState();
} }
console.log('mcb screen props', this.props);
}; };
setSubBreakersState = () => { setSubBreakersState = () => {
...@@ -78,25 +73,34 @@ class McbLinkScreen extends React.Component { ...@@ -78,25 +73,34 @@ class McbLinkScreen extends React.Component {
existedSubBreakersData.map(mcbLink => { existedSubBreakersData.map(mcbLink => {
subBreakersInfo.push( subBreakersInfo.push(
mcbLink.map(subBreaker => mcbLink.map((subBreaker, index) =>
Object.assign(subBreaker, { Object.assign(subBreaker, {
connectedDevice: existedConnectedDevice[subBreaker.mcbLinkId * subBreaker.subBreakerId - 1], connectedDevice: existedConnectedDevice[mcbIndex * 8 + index],
}) })
) )
); );
}); });
this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status }); this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
console.log('set sb state', this.state, this.props); };
addDevice = async () => {
const { deviceName, mcbIndex, subIndex } = this.state;
let deviceData = { name: deviceName };
const mcbId = mcbIndex + 1;
const subId = subIndex + 1;
await this.props.addConnectedDevice(mcbId, subId, deviceData);
this.setState({ deviceName: '', isAddElectronicVisible: false });
}; };
formatData(start, end) { formatData(item, start, end) {
let data = mockElec; //Electronic devices data let data = [];
data.push({ name: 'add', icon: { type: 'Ionicons', name: 'ios-add-circle' } }); data.push(...item); //Electronic devices data
data.push({ name: 'add' });
const numberOfFullRows = Math.floor(data.length / 4); const numberOfFullRows = Math.floor(data.length / 4);
let numberOfElementsLastRow = data.length - numberOfFullRows * 4; let numberOfElementsLastRow = data.length - numberOfFullRows * 4;
while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) { while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) {
data.push({ name: 'empty', icon: { type: '', name: '' } }); data.push({ name: 'empty' });
numberOfElementsLastRow = numberOfElementsLastRow + 1; numberOfElementsLastRow = numberOfElementsLastRow + 1;
} }
return data.slice(start, end); return data.slice(start, end);
...@@ -104,18 +108,14 @@ class McbLinkScreen extends React.Component { ...@@ -104,18 +108,14 @@ class McbLinkScreen extends React.Component {
renderSubbreaker = (item, index) => { renderSubbreaker = (item, index) => {
const mcbIndex = this.props.navigation.getParam('mcbIndex'); const mcbIndex = this.props.navigation.getParam('mcbIndex');
console.log('sub breaker item', item);
const handleOnPressSubBreakerSwitch = async value => { const handleOnPressSubBreakerSwitch = async value => {
this.setState({ isWaiting: true }); this.setState({ isWaiting: true });
await this.props.setSubBreakerStatus(value, mcbIndex, index); await this.props.setSubBreakerStatus(value, mcbIndex, index);
await this.props.getCurrentSelectedShadow(); await this.props.getCurrentSelectedShadow();
const getShadowInterval = setInterval(async () => { const getShadowInterval = setInterval(async () => {
console.log('getShadow');
this.setState(() => { this.setState(() => {
if (this.props.desiredBreakerStatus === this.props.breakerStatus) { if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval HandletoggleSubBreaker');
clearInterval(getShadowInterval); clearInterval(getShadowInterval);
return { isWaiting: false }; return { isWaiting: false };
} else { } else {
...@@ -126,7 +126,6 @@ class McbLinkScreen extends React.Component { ...@@ -126,7 +126,6 @@ class McbLinkScreen extends React.Component {
return { isWaiting: false }; return { isWaiting: false };
} }
}); });
console.log('checkedTimes', checkedTimes);
++checkedTimes; ++checkedTimes;
await this.props.getCurrentSelectedShadow(); await this.props.getCurrentSelectedShadow();
this.setSubBreakersState(); this.setSubBreakersState();
...@@ -145,34 +144,35 @@ class McbLinkScreen extends React.Component { ...@@ -145,34 +144,35 @@ class McbLinkScreen extends React.Component {
onValueChange={value => handleOnPressSubBreakerSwitch(value)} onValueChange={value => handleOnPressSubBreakerSwitch(value)}
/> />
</View> </View>
<Text style={[theme.smDescription, theme.mt1]}>{item.description}</Text> <Text style={[theme.description, theme.mt1]}>{item.description}</Text>
</Card> </Card>
{this.renderElectronic()} {this.renderElectronic(item)}
<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
<Icon name="md-funnel" style={theme.normalText}></Icon>
</View>
</View> </View>
); );
}; };
renderElectronic = () => { renderElectronic = item => {
const { toggleDel } = this.state; const { toggleDel } = this.state;
const data = item.connectedDevice;
const renderScroll = () => { const renderScroll = () => {
const maxPage = Math.ceil(mockElec.length / 8); const maxPage = data.length ? Math.ceil(data.length / 8) : 1;
const item = []; const scrollPage = [];
for (let index = 0; index < maxPage; index++) { for (let index = 0; index < maxPage; index++) {
let start = index * 8; let start = index * 8;
let end = (index + 1) * 8; let end = (index + 1) * 8;
item.push( scrollPage.push(
<FlatList <FlatList
style={[theme.mt1, { width: width - 30, paddingTop: 5 }]} style={[theme.mt1, { width: width - 30, paddingTop: 5 }]}
data={this.formatData(start, end)} data={this.formatData(data, start, end)}
numColumns={4} numColumns={4}
renderItem={({ item, index }) => { renderItem={({ item, index }) => {
if (item.name == 'empty') { if (item.name == 'empty') {
return ( return <Card transparent style={[styles.electronicCard]} />;
<Card
transparent
style={[styles.electronicCard]} //(index + 1) % 4 ? 20 : 0
/>
);
} else if (item.name === 'add') { } else if (item.name === 'add') {
return ( return (
<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}> <Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
...@@ -183,7 +183,7 @@ class McbLinkScreen extends React.Component { ...@@ -183,7 +183,7 @@ class McbLinkScreen extends React.Component {
> >
<Icon <Icon
style={[styles.electronicIcon, { color: color.white }]} style={[styles.electronicIcon, { color: color.white }]}
name={item.icon.name} name={'ios-add-circle'}
/> />
<Text style={[styles.electronictext, { color: color.white }]}> <Text style={[styles.electronictext, { color: color.white }]}>
{item.name} {item.name}
...@@ -193,37 +193,35 @@ class McbLinkScreen extends React.Component { ...@@ -193,37 +193,35 @@ class McbLinkScreen extends React.Component {
); );
} else { } else {
return ( return (
<> <Card style={[styles.electronicCard]}>
<Card style={[styles.electronicCard]}> <TouchableOpacity
<TouchableOpacity onLongPress={() => this.setState({ toggleDel: true })}
onLongPress={() => this.setState({ toggleDel: true })} style={theme.centerContainer}
style={theme.centerContainer} >
> <Icon style={[styles.electronicIcon]} name={'md-help'} />
<Icon <Text style={styles.electronictext}>{item.name}</Text>
style={[styles.electronicIcon]} </TouchableOpacity>
type={item.icon.type || 'Ionicons'} {toggleDel && (
name={item.icon.name || 'md-help'} <Icon
/> name="cancel"
<Text style={styles.electronictext}>{item.name}</Text> type="MaterialIcons"
</TouchableOpacity> style={styles.delBtn}
{toggleDel && ( onPress={() => this.props.deleteConnectedDevice(data[index])}
<Icon />
name="cancel" )}
type="MaterialIcons" </Card>
style={styles.delBtn}
onPress={() => console.log('delete electronic device')}
/>
)}
</Card>
</>
); );
} }
}} }}
ItemSeparatorComponent={() => <View style={{ margin: 5 }}></View>} ItemSeparatorComponent={() => <View style={{ margin: 5 }}></View>}
keyExtractor={({ item, index }) => {
`elec${index}`;
}}
key={`scrollPage${index}`}
/> />
); );
} }
return <>{item}</>; return <>{scrollPage}</>;
}; };
return ( return (
<> <>
...@@ -234,10 +232,10 @@ class McbLinkScreen extends React.Component { ...@@ -234,10 +232,10 @@ class McbLinkScreen extends React.Component {
style={styles.doneDeleteBtn} style={styles.doneDeleteBtn}
onPress={() => this.setState({ toggleDel: false })} onPress={() => this.setState({ toggleDel: false })}
> >
<Text style={[theme.smDescription, { color: color.white }]}>Done</Text> <Text style={[theme.description, { color: color.white }]}>Done</Text>
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<Text style={theme.smDescription}>Edit</Text> <Text style={theme.description}>Edit</Text>
)} )}
</View> </View>
<View> <View>
...@@ -245,15 +243,11 @@ class McbLinkScreen extends React.Component { ...@@ -245,15 +243,11 @@ class McbLinkScreen extends React.Component {
{renderScroll()} {renderScroll()}
</ScrollView> </ScrollView>
</View> </View>
<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
<Icon name="md-funnel" style={theme.normalText}></Icon>
</View>
</> </>
); );
}; };
renderAddModal = () => { renderAddModal = () => {
const { deviceName } = this.state;
return ( return (
<> <>
<View style={styles.dragIndicator} /> <View style={styles.dragIndicator} />
...@@ -266,15 +260,25 @@ class McbLinkScreen extends React.Component { ...@@ -266,15 +260,25 @@ class McbLinkScreen extends React.Component {
Cancel Cancel
</Text> </Text>
<Text style={[theme.smallTitle, theme.textDark]}>Add device</Text> <Text style={[theme.smallTitle, theme.textDark]}>Add device</Text>
<Text <Text style={[theme.smallTitle, theme.textDanger]} onPress={this.addDevice}>
style={[theme.smallTitle, theme.textDanger]}
onPress={() => {
this.setState({ isAddElectronicVisible: false });
}}
>
Save Save
</Text> </Text>
</View> </View>
<View style={theme.mt2}>
<Text style={[theme.normalText]}>Enter Device’s name</Text>
<View style={styles.inputDeviceNameContainer}>
<TextInput
placeholder="Device name"
style={[theme.normalText, { width: '100%' }]}
onChangeText={text =>
this.setState({
deviceName: text,
})
}
value={deviceName}
/>
</View>
</View>
</View> </View>
</> </>
); );
...@@ -307,10 +311,10 @@ class McbLinkScreen extends React.Component { ...@@ -307,10 +311,10 @@ class McbLinkScreen extends React.Component {
renderTabBar={() => <ScrollableTab style={styles.scrollTab} />} renderTabBar={() => <ScrollableTab style={styles.scrollTab} />}
initialPage={subIndex} initialPage={subIndex}
locked locked
// onChangeTab={({ i }) => { onChangeTab={tab => {
// this.setState({ currentTab: i }); this.setState({ subIndex: tab.i });
// console.log(i); console.log(tab.i);
// }} }}
> >
{subBreakersInfo.map((item, index) => ( {subBreakersInfo.map((item, index) => (
<Tab heading={item.name} {...TabStyle} key={`tab${index}`}> <Tab heading={item.name} {...TabStyle} key={`tab${index}`}>
...@@ -397,6 +401,14 @@ const styles = StyleSheet.create({ ...@@ -397,6 +401,14 @@ const styles = StyleSheet.create({
borderBottomColor: 'rgba(189, 192, 200, 0.3)', borderBottomColor: 'rgba(189, 192, 200, 0.3)',
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
inputDeviceNameContainer: {
...theme.mt1,
borderWidth: 1,
borderRadius: 10,
borderColor: '#f2f2f2',
paddingHorizontal: 15,
paddingVertical: 10,
},
}); });
const mapStateToProps = state => ({ const mapStateToProps = state => ({
...@@ -411,6 +423,8 @@ const mapStateToProps = state => ({ ...@@ -411,6 +423,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = { const mapDispatchToProps = {
setSubBreakerStatus, setSubBreakerStatus,
getCurrentSelectedShadow, getCurrentSelectedShadow,
deleteConnectedDevice,
addConnectedDevice,
}; };
export default connect( export default connect(
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
...@@ -82,8 +82,6 @@ class SmartMeterDetailScreen extends Component { ...@@ -82,8 +82,6 @@ class SmartMeterDetailScreen extends Component {
) { ) {
this.setSubBreakersState(); this.setSubBreakersState();
} }
console.log('S', this.state);
console.log('PROPS', this.props);
}; };
handleToggle = async value => { handleToggle = async value => {
this.setState({ isWaiting: true }); this.setState({ isWaiting: true });
...@@ -92,12 +90,9 @@ class SmartMeterDetailScreen extends Component { ...@@ -92,12 +90,9 @@ class SmartMeterDetailScreen extends Component {
await this.props.setMainStatus(value); await this.props.setMainStatus(value);
const getShadowInterval = setInterval(async () => { const getShadowInterval = setInterval(async () => {
console.log('getShadow');
this.setState(() => { this.setState(() => {
const { currentSelectedData, breakerStatus } = this.props; const { currentSelectedData, breakerStatus } = this.props;
if (this.props.desiredBreakerStatus === this.props.breakerStatus) { if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval Handletoggle');
clearInterval(getShadowInterval); clearInterval(getShadowInterval);
return { return {
...@@ -226,7 +221,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -226,7 +221,7 @@ class SmartMeterDetailScreen extends Component {
index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 }, index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 },
]} ]}
> >
<Text style={[theme.smDescription, { color: item.value > item.limit ? color.white : color.grey }]}> <Text style={[theme.description, { color: item.value > item.limit ? color.white : color.grey }]}>
{item.name} {item.name}
</Text> </Text>
<Text <Text
...@@ -245,7 +240,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -245,7 +240,7 @@ class SmartMeterDetailScreen extends Component {
<Text <Text
style={[ style={[
theme.smDescription, theme.description,
theme.textDark, theme.textDark,
{ {
color: item.value > item.limit ? color.white : color.darkGrey, color: item.value > item.limit ? color.white : color.darkGrey,
...@@ -296,11 +291,8 @@ class SmartMeterDetailScreen extends Component { ...@@ -296,11 +291,8 @@ class SmartMeterDetailScreen extends Component {
await this.props.getCurrentSelectedShadow(); await this.props.getCurrentSelectedShadow();
const getShadowInterval = setInterval(async () => { const getShadowInterval = setInterval(async () => {
console.log('getShadow');
this.setState(() => { this.setState(() => {
if (this.props.desiredBreakerStatus === this.props.breakerStatus) { if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval HandletoggleSubBreaker');
clearInterval(getShadowInterval); clearInterval(getShadowInterval);
return { isWaiting: false }; return { isWaiting: false };
} else { } else {
...@@ -314,7 +306,6 @@ class SmartMeterDetailScreen extends Component { ...@@ -314,7 +306,6 @@ class SmartMeterDetailScreen extends Component {
return { isWaiting: false }; return { isWaiting: false };
} }
}); });
console.log('checkedTimes', checkedTimes);
++checkedTimes; ++checkedTimes;
await this.props.getCurrentSelectedShadow(); await this.props.getCurrentSelectedShadow();
this.setSubBreakersState(); this.setSubBreakersState();
......
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