Skip to content

S
safetcut-app
Commit d7177405 by HaOuiha
Options

update detailsscreen

parent 48fae678
Showing with 141 additions and 81 deletions
App.js
...@@ -12,7 +12,7 @@ import { Provider } from 'react-redux'; ...@@ -12,7 +12,7 @@ import { Provider } from 'react-redux';
import rootStore from './reduxStore'; import rootStore from './reduxStore';
import { Root } from 'native-base'; import { Root } from 'native-base';
import { fixTimerWarning } from './utils/fixTimerWarning'; import { fixTimerWarning } from './utils/fixTimerWarning';
// import { default as customMapping } from './custom-mapping.json';
import { fireStore } from './firebase'; import { fireStore } from './firebase';
console.disableYellowBox = true; console.disableYellowBox = true;
......
reduxStore/actions/timersAction.js
...@@ -4,7 +4,8 @@ import _ from 'lodash'; ...@@ -4,7 +4,8 @@ import _ from 'lodash';
export const GET_TIMERS = 'GET_TIMERS'; export const GET_TIMERS = 'GET_TIMERS';
export const GET_TIMERS_LOADING = 'GET_TIMERS_LOADING'; export const GET_TIMERS_LOADING = 'GET_TIMERS_LOADING';
export const GET_TIMERS_ERROR = 'GET_TIMERS_ERROR'; export const GET_TIMERS_ERROR = 'GET_TIMERS_ERROR';
export const GET_EXISTED_DATA = 'GET_EXISTED_DATA'; export const GET_EXISTED_MCBLINKS_DATA = 'GET_EXISTED_MCBLINKS_DATA';
export const GET_EXISTED_SUBBREAKERS_DATA = 'GET_EXISTED_SUBBREAKERS_DATA';
// export const GET_MAIN_DEVICE_TIMERS = 'GET_MAIN_DEVICE_TIMERS'; // export const GET_MAIN_DEVICE_TIMERS = 'GET_MAIN_DEVICE_TIMERS';
// export const GET_SUBBREAKERS_TIMERS = 'GET_SUBBREAKERS_TIMERS'; // export const GET_SUBBREAKERS_TIMERS = 'GET_SUBBREAKERS_TIMERS';
...@@ -27,9 +28,14 @@ export const getTimersAction = allTimers => ({ ...@@ -27,9 +28,14 @@ export const getTimersAction = allTimers => ({
// subBreakersTimers, // subBreakersTimers,
// }); // });
export const getExistedDataAction = existedData => ({ export const getExistedMcbLinksDataAction = existedMcbLinksData => ({
type: GET_EXISTED_DATA, type: GET_EXISTED_MCBLINKS_DATA,
existedData, existedMcbLinksData,
});
export const getExistedSubBreakersDataAction = existedSubBreakersData => ({
type: GET_EXISTED_SUBBREAKERS_DATA,
existedSubBreakersData,
}); });
export const getSelectedTimerDataAction = selectedTimerData => ({ export const getSelectedTimerDataAction = selectedTimerData => ({
...@@ -61,7 +67,8 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -61,7 +67,8 @@ export const getTimers = () => async (dispatch, getState) => {
let allTimersData = []; let allTimersData = [];
let mainDeviceTimers = []; let mainDeviceTimers = [];
let subBreakersTimers = []; let subBreakersTimers = [];
let existedMcbLinksSubBreakers = []; let existedMcbLinks = [];
let existedSubBreakers = [];
//main device section //main device section
/*-------------------------------------*/ /*-------------------------------------*/
...@@ -101,6 +108,10 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -101,6 +108,10 @@ export const getTimers = () => async (dispatch, getState) => {
.collection('mcbLinks') .collection('mcbLinks')
.get(); .get();
selectedDeviceMcbLinksDetails.docs.map(mcbLink => {
existedMcbLinks.push(Object.assign(mcbLink.data(), { isExpand: false }));
});
await Promise.all( await Promise.all(
selectedDeviceMcbLinksDetails.docs.map(async mcbLink => { selectedDeviceMcbLinksDetails.docs.map(async mcbLink => {
if (mcbLink.exists) { if (mcbLink.exists) {
...@@ -114,9 +125,13 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -114,9 +125,13 @@ export const getTimers = () => async (dispatch, getState) => {
.collection('subBreakers') .collection('subBreakers')
.get(); .get();
existedMcbLinksSubBreakers.push( existedSubBreakers.push(
selectedDeviceSubBreakersDetails.docs.map(subBreaker => selectedDeviceSubBreakersDetails.docs.map(subBreaker =>
Object.assign(subBreaker.data(), { mcbLinkId: mcbLink.id, subBreakerId: subBreaker.id }) Object.assign(subBreaker.data(), {
mcbLinkId: mcbLink.id,
subBreakerId: subBreaker.id,
isPowerOn: false,
})
) )
); );
...@@ -154,7 +169,8 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -154,7 +169,8 @@ export const getTimers = () => async (dispatch, getState) => {
}) })
); );
dispatch(getExistedDataAction(existedMcbLinksSubBreakers)); dispatch(getExistedMcbLinksDataAction(existedMcbLinks));
dispatch(getExistedSubBreakersDataAction(existedSubBreakers));
allTimersData = [...mainDeviceTimers, ...subBreakersTimers]; allTimersData = [...mainDeviceTimers, ...subBreakersTimers];
dispatch(getTimersAction(allTimersData)); dispatch(getTimersAction(allTimersData));
...@@ -226,7 +242,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d ...@@ -226,7 +242,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
//assign more timers details //assign more timers details
if (mcbLinkId && subBreakerId) { if (mcbLinkId && subBreakerId) {
timerData = await Object.assign(settingTime, { timerData = Object.assign(settingTime, {
mcbLinkId: mcbLinkId, mcbLinkId: mcbLinkId,
subBreakerId: subBreakerId, subBreakerId: subBreakerId,
key: resRef.id, key: resRef.id,
...@@ -234,7 +250,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d ...@@ -234,7 +250,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
name: existedData[mcbLinkId - 1][subBreakerId - 1].name, name: existedData[mcbLinkId - 1][subBreakerId - 1].name,
}); });
} else { } else {
timerData = await Object.assign(settingTime, { timerData = Object.assign(settingTime, {
key: resRef.id, key: resRef.id,
type: 'main', type: 'main',
name: currentSelectedData.name, name: currentSelectedData.name,
...@@ -463,7 +479,7 @@ export const deleteTimer = selectedData => async (dispatch, getState) => { ...@@ -463,7 +479,7 @@ export const deleteTimer = selectedData => async (dispatch, getState) => {
// //subbreaker section // //subbreaker section
// /*-------------------------------------*/ // /*-------------------------------------*/
// let existedMcbLinksSubBreakers = []; // let existedSubBreakers = [];
// let selectedDeviceSubBreakersData = []; // let selectedDeviceSubBreakersData = [];
// selectedDeviceMcbLinksData.map(async mcbLink => { // selectedDeviceMcbLinksData.map(async mcbLink => {
...@@ -476,7 +492,7 @@ export const deleteTimer = selectedData => async (dispatch, getState) => { ...@@ -476,7 +492,7 @@ export const deleteTimer = selectedData => async (dispatch, getState) => {
// .get(); // .get();
// return selectedDeviceSubBreakers.docs.map(subBreaker => { // return selectedDeviceSubBreakers.docs.map(subBreaker => {
// existedMcbLinksSubBreakers.push([mcbLink.id, subBreaker.data().id]); // existedSubBreakers.push([mcbLink.id, subBreaker.data().id]);
// selectedDeviceSubBreakersData.push(subBreaker.data()); // selectedDeviceSubBreakersData.push(subBreaker.data());
// let subBreakerData = subBreaker.data(); // let subBreakerData = subBreaker.data();
...@@ -498,7 +514,7 @@ export const deleteTimer = selectedData => async (dispatch, getState) => { ...@@ -498,7 +514,7 @@ export const deleteTimer = selectedData => async (dispatch, getState) => {
// console.log('selectedDeviceMcbLinksData', selectedDeviceMcbLinksData); // console.log('selectedDeviceMcbLinksData', selectedDeviceMcbLinksData);
// const existedData = { existedMcbLinks, existedMcbLinksSubBreakers }; // const existedData = { existedMcbLinks, existedSubBreakers };
// // console.log(mainDeviceTimers, mcbLinksTimers, subBreakersTimers); // // console.log(mainDeviceTimers, mcbLinksTimers, subBreakersTimers);
// dispatch(getExistedDataAction(existedData)); // dispatch(getExistedDataAction(existedData));
......
reduxStore/reducers/timersReducer.js
...@@ -2,14 +2,16 @@ import { ...@@ -2,14 +2,16 @@ import {
GET_TIMERS, GET_TIMERS,
GET_TIMERS_LOADING, GET_TIMERS_LOADING,
GET_TIMERS_ERROR, GET_TIMERS_ERROR,
GET_EXISTED_DATA, GET_EXISTED_MCBLINKS_DATA,
GET_EXISTED_SUBBREAKERS_DATA,
GET_SELECTED_TIMER_DATA, GET_SELECTED_TIMER_DATA,
SET_EDIT_MODAL_VISIBLE, SET_EDIT_MODAL_VISIBLE,
} from '../actions/timersAction'; } from '../actions/timersAction';
const initState = { const initState = {
allTimers: [], allTimers: [],
existedData: [], existedMcbLinksData: [],
existedSubBreakersData: [],
selectedTimerData: null, selectedTimerData: null,
isEditVisible: false, isEditVisible: false,
isLoading: true, isLoading: true,
...@@ -18,8 +20,10 @@ const initState = { ...@@ -18,8 +20,10 @@ const initState = {
const timersReducer = (state = initState, action) => { const timersReducer = (state = initState, action) => {
switch (action.type) { switch (action.type) {
case GET_EXISTED_DATA: case GET_EXISTED_MCBLINKS_DATA:
return { ...state, existedData: action.existedData }; return { ...state, existedMcbLinksData: action.existedMcbLinksData };
case GET_EXISTED_SUBBREAKERS_DATA:
return { ...state, existedSubBreakersData: action.existedSubBreakersData };
case GET_TIMERS: case GET_TIMERS:
return { ...state, allTimers: action.allTimers }; return { ...state, allTimers: action.allTimers };
case GET_SELECTED_TIMER_DATA: case GET_SELECTED_TIMER_DATA:
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, Text, Content, Card, Footer, Row, Right, Left, Switch, Icon } from 'native-base'; import { View, Text, Content, Card, Row, Right, Left, Switch, Icon } from 'native-base';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { FlatList, StyleSheet } from 'react-native'; import { FlatList, StyleSheet, ActivityIndicator } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getCurrentSelectedData } from '../../../reduxStore/actions/currentSelectedAction'; import { getCurrentSelectedData } from '../../../reduxStore/actions/currentSelectedAction';
import { getTimers } from '../../../reduxStore/actions/timersAction'; import { getTimers } from '../../../reduxStore/actions/timersAction';
import { isIphoneX } from '../../../utils/isPhoneX';
const MockData = [ const MockData = [
{ name: 'AC Volt', limit: 1000, value: 100, unit: 'V' }, { name: 'AC Volt', limit: 1000, value: 100, unit: 'V' },
...@@ -33,19 +34,20 @@ class SmartMeterDetailScreen extends Component { ...@@ -33,19 +34,20 @@ class SmartMeterDetailScreen extends Component {
}; };
state = { state = {
data: [], //main
description: '', description: '',
name: '', name: '',
rcbo: '', rcbo: '',
isOnline: false, isOnline: false,
isPowerOn: false, isPowerOn: false,
mcbLinksInfo: [],
subBreakersInfo: [],
}; };
constructor(props) { constructor(props) {
super(props); super(props);
const currentSelectedDeviceData = this.props.navigation.getParam('currentSelectedDeviceData'); const currentSelectedDeviceData = this.props.navigation.getParam('currentSelectedDeviceData');
// this.props.setCurrentSelected(currentSelectedDeviceData.deviceId);
this.props.getCurrentSelectedData(currentSelectedDeviceData); this.props.getCurrentSelectedData(currentSelectedDeviceData);
this.props.getTimers(); this.props.getTimers();
} }
...@@ -56,6 +58,13 @@ class SmartMeterDetailScreen extends Component { ...@@ -56,6 +58,13 @@ class SmartMeterDetailScreen extends Component {
if (prevProps.currentSelectedData !== this.props.currentSelectedData) { if (prevProps.currentSelectedData !== this.props.currentSelectedData) {
this.setMainCardData(); this.setMainCardData();
} }
if (prevProps.existedMcbLinksData !== this.props.existedMcbLinksData) {
this.setMcbLinksState();
}
if (prevProps.existedSubBreakersData !== this.props.existedSubBreakersData) {
this.setSubBreakersState();
}
console.log(this.state);
}; };
setMainCardData = async () => { setMainCardData = async () => {
...@@ -69,6 +78,16 @@ class SmartMeterDetailScreen extends Component { ...@@ -69,6 +78,16 @@ class SmartMeterDetailScreen extends Component {
}); });
}; };
setMcbLinksState = () => {
const { existedMcbLinksData } = this.props;
this.setState({ mcbLinksInfo: existedMcbLinksData });
};
setSubBreakersState = () => {
const { existedSubBreakersData } = this.props;
this.setState({ subBreakersInfo: existedSubBreakersData });
};
renderMainDatailsCard = () => { renderMainDatailsCard = () => {
const { name, description, rcbo, isOnline, isPowerOn } = this.state; const { name, description, rcbo, isOnline, isPowerOn } = this.state;
return ( return (
...@@ -97,7 +116,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -97,7 +116,7 @@ class SmartMeterDetailScreen extends Component {
); );
}; };
renderCards(item, index) { renderCards = (item, index) => {
return ( return (
<Card <Card
style={[ style={[
...@@ -139,64 +158,71 @@ class SmartMeterDetailScreen extends Component { ...@@ -139,64 +158,71 @@ class SmartMeterDetailScreen extends Component {
</Text> </Text>
</Card> </Card>
); );
} };
renderMCBLink(item, index) { renderMCBLinksList = (mcbLink, indexMcbLinks) => {
const sb = this.state.sb; const { subBreakersInfo } = this.state;
const handleOnPressMcbLink = () =>
this.setState(prevState => (mcbLink.isExpand = !prevState.mcbLinksInfo[indexMcbLinks].isExpand));
const renderSubbreaker = (subBreaker, indexSubBreakers) => {
const handleOnPressSubBreakerSwitch = () =>
this.setState(
prevState =>
(subBreaker.isPowerOn = !prevState.subBreakersInfo[indexMcbLinks][indexSubBreakers].isPowerOn)
);
return (
<View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}>
<Row>
<Left style={{ flex: 4 }}>
<View>
<Text style={[theme.normalText, theme.textDark]}>
{subBreaker.name
? `Sub Breaker ${indexSubBreakers + 1} [${subBreaker.name}]`
: `Sub Breaker ${indexSubBreakers + 1}`}
</Text>
<Text style={theme.description}>{subBreaker.description}</Text>
</View>
</Left>
<Right>
<Switch value={subBreaker.isPowerOn} onChange={handleOnPressSubBreakerSwitch} />
</Right>
</Row>
</View>
);
};
return ( return (
<View> <View>
<Row <Row style={{ padding: 7 }} onPress={handleOnPressMcbLink}>
style={{ padding: 7 }} <Left style={{ flex: 4 }}>
onPress={() => <Text style={[theme.normalText, theme.textDark]}>
this.setState(() => { {mcbLink.name
return (sb[index].expand = !sb[index].expand); ? `MCB Link ${indexMcbLinks + 1} [${mcbLink.name}]`
}) : `MCB Link ${indexMcbLinks + 1}`}
} </Text>
>
<Left>
<Text style={[theme.normalText, theme.textDark]}>{item.name}</Text>
</Left>
<Right>
<Icon style={styles.mcbExpand} name={sb[index].expand ? 'arrow-up' : 'arrow-down'} />
</Right>
</Row>
{/* {sb[index].expand && item.subItem.map((subItem, index) => this.renderSubbreaker(subItem))} */}
</View>
);
}
renderSubbreaker(item) {
return (
<View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}>
<Row>
<Left>
<View>
<Text style={[theme.normalText, theme.textDark]}>{item.title}</Text>
<Text style={[theme.description]}>{item.description}</Text>
</View>
</Left> </Left>
<Right> <Right>
<Switch value={item.status} /> <Icon style={styles.mcbExpand} name={mcbLink.isExpand ? 'arrow-up' : 'arrow-down'} />
</Right> </Right>
</Row> </Row>
{mcbLink.isExpand && (
<FlatList
data={subBreakersInfo[indexMcbLinks]}
extraData={this.state}
keyExtractor={(item, index) => `subBreakerItem${item.mcbLinkId}${item.subBreakerId}`}
renderItem={({ item, index }) => renderSubbreaker(item, index)}
/>
)}
</View> </View>
); );
} };
// // 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() { render() {
const { data } = this.state; const { mcbLinksInfo } = this.state;
const { isLoading } = this.props;
return ( return (
<Content style={[theme.container, theme.containerWithPadding]}> <Content style={[theme.container, theme.containerWithPadding]}>
{this.renderMainDatailsCard()} {this.renderMainDatailsCard()}
...@@ -204,17 +230,29 @@ class SmartMeterDetailScreen extends Component { ...@@ -204,17 +230,29 @@ class SmartMeterDetailScreen extends Component {
data={MockData} data={MockData}
renderItem={({ item, index }) => this.renderCards(item, index)} renderItem={({ item, index }) => this.renderCards(item, index)}
numColumns={3} numColumns={3}
keyExtractor={(item, index) => item.name} keyExtractor={(item, index) => `DeviceValues${item.name}`}
// style={{ paddingTop: 20, overflow: 'hidden' }}
/> />
{isLoading ? (
{/* <Card style={{ borderRadius: 8, overflow: 'hidden', marginTop: 20, marginBottom: 40 }}> <View style={{ marginTop: 20 }}>
<FlatList <ActivityIndicator color={color.primary} />
data={[]} </View>
renderItem={({ item, index }) => this.renderMCBLink(item, index)} ) : (
ListEmptyComponent={() => <Text style={[{ padding: 10 }, theme.normalText]}>No MCB Link</Text>} <Card
/> style={{
</Card> */} borderRadius: 8,
overflow: 'hidden',
marginTop: 20,
marginBottom: isIphoneX() ? 130 : 90,
}}
>
<FlatList
data={mcbLinksInfo}
extraData={this.state}
keyExtractor={(item, index) => `mcbLinkItem${item.name}`}
renderItem={({ item, index }) => this.renderMCBLinksList(item, index)}
/>
</Card>
)}
</Content> </Content>
); );
} }
...@@ -222,6 +260,9 @@ class SmartMeterDetailScreen extends Component { ...@@ -222,6 +260,9 @@ class SmartMeterDetailScreen extends Component {
const mapStateToProps = state => ({ const mapStateToProps = state => ({
allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo, allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
isLoading: state.timersReducer.isLoading,
existedMcbLinksData: state.timersReducer.existedMcbLinksData,
existedSubBreakersData: state.timersReducer.existedSubBreakersData,
currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData, currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
}); });
......
screens/Public/AuthLoadingScreen.js
...@@ -36,7 +36,6 @@ class AuthLoadingScreen extends Component { ...@@ -36,7 +36,6 @@ class AuthLoadingScreen extends Component {
app.auth().onAuthStateChanged(async user => { app.auth().onAuthStateChanged(async user => {
if (user) { if (user) {
await this.props.getCurrentUser(user); await this.props.getCurrentUser(user);
// await this.props.getAllMainDeviceInfo();
this.props.navigation.navigate(RememberedLogin === 'true' ? 'Main' : 'Login'); this.props.navigation.navigate(RememberedLogin === 'true' ? 'Main' : 'Login');
} else { } else {
this.props.navigation.navigate(alreadyLaunched === 'true' ? 'Login' : 'Onboarding'); this.props.navigation.navigate(alreadyLaunched === 'true' ? 'Login' : 'Onboarding');
......
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