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