Skip to content

S
safetcut-app
Commit bb3838c6 by HaOuiha
Options

update detailscreen

parent b4f5ca9a
Showing with 263 additions and 125 deletions
components/MeterCard.js
......@@ -11,8 +11,8 @@ class MeterCard extends Component {
isPowerOn: false,
};
getShadow = () => {
const deviceId = this.props.item.deviceId;
this.props.getCurrentSelectedShadow(deviceId);
// const deviceId = this.props.item.deviceId;
this.props.getCurrentSelectedShadow();
};
componentDidMount = async () => {
console.log('meter props', this.props);
......
reduxStore/actions/currentSelectedAction.js
import app, { fireStore } from '../../firebase';
import axios from 'axios';
import _ from 'lodash';
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
......@@ -9,6 +10,9 @@ export const GET_CURRENT_SELECTED_DATA_ERROR = 'GET_CURRENT_SELECTED_DATA_ERROR'
export const GET_CURRENT_SELECTED_SHADOW = 'GET_CURRENT_SELECTED_SHADOW';
export const GET_BREAKERS_STATUS_SHADOW = 'GET_BREAKER_STATUS_SHADOW';
export const SET_DESIRED_BREAKERS_STATUS_SHADOW = 'SET_DESIRED_BREAKERS_STATUS_SHADOW';
export const getCurrentSelectedDataAction = currentSelectedData => ({
type: GET_CURRENT_SELECTED_DATA,
currentSelectedData,
......@@ -29,6 +33,16 @@ export const getCurrentSelectedShadowAction = shadow => ({
shadow,
});
export const getBreakersStatusAction = breakerStatus => ({
type: GET_BREAKERS_STATUS_SHADOW,
breakerStatus,
});
export const setDesiredSahdowAction = desiredBreakerStatus => ({
type: SET_DESIRED_BREAKERS_STATUS_SHADOW,
desiredBreakerStatus,
});
export const getCurrentSelectedShadow = () => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
......@@ -47,6 +61,10 @@ export const getCurrentSelectedShadow = () => async (dispatch, getState) => {
},
} = await axios(options);
const tempBreakersStatus = _.pick(value, ['CMD_MSG', 'SM1', 'MD_STA', 'ML0', 'ML1', 'ML2', 'ML3', 'ML4']);
const breakersStatus = { ...tempBreakersStatus, SM1: { BK_S: tempBreakersStatus.SM1.BK_S } };
dispatch(getBreakersStatusAction(breakersStatus));
dispatch(getCurrentSelectedShadowAction(value || null));
} catch (error) {
dispatch(errorAction(error.message || error || 'Error'));
......@@ -54,15 +72,36 @@ export const getCurrentSelectedShadow = () => async (dispatch, getState) => {
};
export const getCurrentSelectedData = deviceId => async dispatch => {
const URL = `${baseURL}/shadow/${deviceId}`;
const idToken = await app.auth().currentUser.getIdToken(true);
const options = {
headers: { Authorization: `Token ${idToken}` },
url: URL,
};
try {
//FIRESTORE
dispatch(loadingAction(true));
const currentSelectedDevice = await fireStore
.collection('device')
.doc(deviceId)
.get();
const currentSelectedDeviceData = await currentSelectedDevice.data();
const currentSelectedDeviceDataMoreInfo = { ...currentSelectedDeviceData, deviceId: currentSelectedDevice.id };
//CLOUD FUNCTION :: GET SHADOW
const {
data: {
shadow: { value },
},
} = await axios(options);
const tempBreakersStatus = _.pick(value, ['CMD_MSG', 'SM1', 'MD_STA', 'ML0', 'ML1', 'ML2', 'ML3', 'ML4']);
const breakersStatus = { ...tempBreakersStatus, SM1: { BK_S: tempBreakersStatus.SM1.BK_S } };
dispatch(getBreakersStatusAction(breakersStatus));
dispatch(getCurrentSelectedShadowAction(value || null));
dispatch(getCurrentSelectedDataAction(currentSelectedDeviceDataMoreInfo));
dispatch(loadingAction(false));
} catch (error) {
......@@ -70,7 +109,6 @@ export const getCurrentSelectedData = deviceId => async dispatch => {
dispatch(loadingAction(false));
}
};
export const updateDetail = (type, value) => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
......@@ -110,7 +148,7 @@ export const updateDetail = (type, value) => async (dispatch, getState) => {
export const setMainStatus = value => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData, shadow } = currentSelectedDeviceReducer;
const { currentSelectedData, breakerStatus } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const URL = `${baseURL}/shadow/${selectedDeviceId}`;
......@@ -133,6 +171,7 @@ export const setMainStatus = value => async (dispatch, getState) => {
};
try {
// await axios(options);
const {
data: {
writeShadow: {
......@@ -141,11 +180,11 @@ export const setMainStatus = value => async (dispatch, getState) => {
},
} = await axios(options);
console.log(value);
console.log('ori', shadow);
const newShadow = { ...shadow, CMD_MSG, SM1: { ...shadow.SM1, BK_S: value ? 1 : 0 } };
console.log('CMD_MSG', CMD_MSG);
const desiredBreakerStatus = { ...breakerStatus, CMD_MSG, SM1: { ...breakerStatus.SM1, BK_S: value ? 1 : 0 } };
console.log('new', newShadow);
dispatch(getCurrentSelectedShadowAction(newShadow));
console.log('new', desiredBreakerStatus);
dispatch(setDesiredSahdowAction(desiredBreakerStatus));
} catch (error) {
console.log(error);
}
......@@ -153,7 +192,7 @@ export const setMainStatus = value => async (dispatch, getState) => {
export const setSubBreakerStatus = (value, MainIndex, SubIndex) => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData, shadow } = currentSelectedDeviceReducer;
const { currentSelectedData, breakerStatus } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const URL = `${baseURL}/shadow/${selectedDeviceId}`;
......@@ -176,6 +215,7 @@ export const setSubBreakerStatus = (value, MainIndex, SubIndex) => async (dispat
};
try {
// await axios(options);
const {
data: {
writeShadow: {
......@@ -183,12 +223,19 @@ export const setSubBreakerStatus = (value, MainIndex, SubIndex) => async (dispat
},
},
} = await axios(options);
// console.log(value);
// console.log('ori', shadow);
// const newShadow = { ...shadow, CMD_MSG, SM1: { ...shadow.SM1, BK_S: value ? 1 : 0 } };
console.log(value);
console.log('CMD_MSG', CMD_MSG);
const desiredBreakerStatus = {
...breakerStatus,
CMD_MSG,
[`ML${MainIndex}`]: {
...breakerStatus[`ML${MainIndex}`],
[`L${MainIndex + 1}B${SubIndex + 1}`]: value ? 1 : 0,
},
};
// console.log('new', newShadow);
// dispatch(getCurrentSelectedShadowAction(newShadow));
console.log('new', desiredBreakerStatus);
dispatch(setDesiredSahdowAction(desiredBreakerStatus));
} catch (error) {
console.log(error);
}
......
reduxStore/actions/timersAction.js
......@@ -50,7 +50,7 @@ export const errorTimersAction = error => ({
export const getTimers = () => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const { currentSelectedData, shadow } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
try {
dispatch(loadingTimersAction(true));
......@@ -121,6 +121,8 @@ export const getTimers = () => async (dispatch, getState) => {
mcbLinkId: mcbLink.id,
subBreakerId: subBreaker.id,
isPowerOn: false,
// isPowerOn:
// shadow[`ML${mcbLink.id}`][`L${mcbLink.id}B${subBreaker.id}`] === 1 ? true : false,
})
)
);
......@@ -395,35 +397,32 @@ export const writeTimersToShadow = () => async (dispatch, getState) => {
);
const tempMainBreakerTimersData = { MAB1T: groupTypeData.main };
console.log('mainBreakerTimersData', mainBreakerTimersData);
console.log('tempSubBreakerTimersData', tempSubBreakerTimersData);
console.log(groupTypeData);
console.log('------------------------------');
console.log(tempMainBreakerTimersData);
console.log(tempSubBreakerTimersData);
//convert Timer to shadow format
const mainBreakerTimersData = tempMainBreakerTimersData.MAB1T.map((timer, index) => {
const mainBreakerTimersData = tempMainBreakerTimersData.MAB1T.reduce((accumulator, timer, index) => {
const isActive = timer.isActive ? '1' : '0';
const isPowerOn = timer.isPowerOn ? '1' : '0';
const repeatOn = () => {
let binaryFormat = timer.repeatOn
.map(item => {
return item.isRepeat ? +'1' : +'0';
})
.map(item => (item.isRepeat ? '1' : '0'))
.toString()
.replace(/\,/g, '');
const decimalFormat = parseInt(Number(binaryFormat), 2);
return decimalFormat;
};
const hour = moment(timer.timer).format('HH');
const minute = moment(timer.timer).format('mm');
console.log({ [`T${index + 1}`]: `${isActive},${isPowerOn},${repeatOn()},${hour},${minute}` });
let timerShadowFormat = { [`T${index + 1}`]: `${isActive},${isPowerOn},${repeatOn()},${hour},${minute}` };
return { ...accumulator, ...timerShadowFormat };
}, {});
const writingData = { [`T${index + 1}`]: `${isActive},${isPowerOn},${repeatOn()},${hour},${minute}` };
return writingData;
});
console.log(mainBreakerTimersData[0]);
console.log('mainBreakerTimersData', mainBreakerTimersData);
const data = { data: { L1B1T: { T1: '1,1,127,8,0' } } };
......@@ -435,8 +434,8 @@ export const writeTimersToShadow = () => async (dispatch, getState) => {
};
try {
// const response = await axios(options);
// console.log(response);
const response = await axios(options);
console.log(response);
} catch (error) {
console.log(error);
}
......
reduxStore/reducers/currentSelectedReducer.js
......@@ -3,6 +3,8 @@ import {
GET_CURRENT_SELECTED_DATA_LOADING,
GET_CURRENT_SELECTED_DATA_ERROR,
GET_CURRENT_SELECTED_SHADOW,
GET_BREAKERS_STATUS_SHADOW,
SET_DESIRED_BREAKERS_STATUS_SHADOW,
} from '../actions/currentSelectedAction';
const initState = {
......@@ -10,6 +12,8 @@ const initState = {
shadow: null,
isLoading: true,
error: null,
breakerStatus: null,
desiredBreakerStatus: null,
};
const currentSelectedDeviceReducer = (state = initState, action) => {
......@@ -22,6 +26,12 @@ const currentSelectedDeviceReducer = (state = initState, action) => {
return { ...state, isLoading: action.isLoading };
case GET_CURRENT_SELECTED_DATA_ERROR:
return { ...state, error: action.error };
case GET_BREAKERS_STATUS_SHADOW:
return { ...state, breakerStatus: action.breakerStatus };
case SET_DESIRED_BREAKERS_STATUS_SHADOW:
return { ...state, desiredBreakerStatus: action.desiredBreakerStatus };
default:
return state;
}
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -24,6 +24,8 @@ const MockData = [
{ name: 'Arcing Fault', limit: 1000, value: 100, unit: '' },
];
let checkedTimes = 0;
class SmartMeterDetailScreen extends Component {
static navigationOptions = ({ navigation }) => {
return {
......@@ -49,7 +51,6 @@ class SmartMeterDetailScreen extends Component {
mcbLinksInfo: [],
subBreakersInfo: [],
isWaiting: false,
prevShadow: [],
};
_mcbLinksListMounted = false;
......@@ -62,13 +63,12 @@ class SmartMeterDetailScreen extends Component {
componentDidMount = async () => {
await this.getData();
console.log('PROPS', this.props);
};
componentDidUpdate = (prevProps, prevState) => {
if (
prevProps.currentSelectedData !== this.props.currentSelectedData ||
prevProps.shadow !== this.props.shadow
prevProps.breakerStatus !== this.props.breakerStatus
) {
this.setMainCardData();
}
......@@ -76,35 +76,61 @@ class SmartMeterDetailScreen extends Component {
this.setMcbLinksState();
this._mcbLinksListMounted = true;
}
if (prevProps.existedSubBreakersData !== this.props.existedSubBreakersData) {
if (
prevProps.existedSubBreakersData !== this.props.existedSubBreakersData ||
prevProps.breakerStatus !== this.props.breakerStatus
) {
this.setSubBreakersState();
}
console.log('S', this.state);
console.log('PROPS', this.props);
};
handleToggle = async value => {
this.setState({ isWaiting: true, prevShadow: this.props.shadow });
const deviceId = this.props.navigation.getParam('deviceId');
this.setState({ isWaiting: true });
await this.props.getCurrentSelectedShadow();
await this.props.setMainStatus(value);
let test = setInterval(() => {
this.props.getCurrentSelectedShadow();
const getShadowInterval = setInterval(async () => {
console.log('getShadow');
}, 2000);
this.setState((prevState, props) => {
// console.log('props.shadow', props.shadow);
// console.log('this.props.shadow', this.props.shadow);
// console.log(props.shadow === this.props.shadow);
if (this.state.prevShadow !== props.shadow) {
clearInterval(test);
return { isWaiting: false };
} else {
setTimeout(() => {
clearInterval(test);
console.log('stop checking');
}, 6000);
return { isWaiting: false };
}
});
this.setState(() => {
const { currentSelectedData, breakerStatus } = this.props;
if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval Handletoggle');
clearInterval(getShadowInterval);
return {
isWaiting: false,
description: currentSelectedData.description,
name: currentSelectedData.name,
rcbo: currentSelectedData.rcbo,
isOnline: currentSelectedData.isOnline,
isPowerOn: breakerStatus ? breakerStatus.SM1.BK_S : false,
};
} else {
if (checkedTimes >= 2) {
clearInterval(getShadowInterval);
// if (this.props.desiredBreakerStatus !== this.props.breakerStatus) {
// alert('Something went wrong, Please check your smart device.');
// }
checkedTimes = 0;
}
return {
isWaiting: false,
description: currentSelectedData.description,
name: currentSelectedData.name,
rcbo: currentSelectedData.rcbo,
isOnline: currentSelectedData.isOnline,
isPowerOn: breakerStatus ? breakerStatus.SM1.BK_S : false,
};
}
});
++checkedTimes;
await this.props.getCurrentSelectedShadow();
this.setSubBreakersState();
}, 3000);
};
componentWillUnmount = () => {
......@@ -115,23 +141,40 @@ class SmartMeterDetailScreen extends Component {
};
setMainCardData = async () => {
const { currentSelectedData, shadow } = this.props;
const { currentSelectedData, breakerStatus } = this.props;
this.setState({
description: currentSelectedData.description,
name: currentSelectedData.name,
rcbo: currentSelectedData.rcbo,
isOnline: currentSelectedData.isOnline,
isPowerOn: shadow ? shadow.SM1.BK_S : false,
isPowerOn: breakerStatus ? breakerStatus.SM1.BK_S : false,
});
};
setMcbLinksState = () => {
setMcbLinksState = async () => {
const { existedMcbLinksData } = this.props;
this.setState({ mcbLinksInfo: existedMcbLinksData });
};
setSubBreakersState = () => {
const { existedSubBreakersData } = this.props;
setSubBreakersState = async () => {
const { existedSubBreakersData, breakerStatus } = this.props;
let subBreakersInfo = [];
existedSubBreakersData.map(mcbLink => {
subBreakersInfo.push(
mcbLink.map(subBreaker =>
Object.assign(subBreaker, {
isPowerOn:
breakerStatus[`ML${subBreaker.mcbLinkId}`][
`L${subBreaker.mcbLinkId}B${subBreaker.subBreakerId}`
] === 1
? true
: false,
})
)
);
});
this.setState({ subBreakersInfo: existedSubBreakersData });
};
......@@ -145,9 +188,11 @@ class SmartMeterDetailScreen extends Component {
</Left>
<Right>
<Switch
disabled={this.state.isWaiting}
// disabled={this.state.isWaiting}
value={isPowerOn === 1 ? true : false}
onValueChange={value => this.handleToggle(value)}
onValueChange={value => {
this.state.isWaiting ? null : this.handleToggle(value);
}}
/>
</Right>
</Row>
......@@ -221,31 +266,62 @@ class SmartMeterDetailScreen extends Component {
const renderSubBreaker = (subBreaker, indexSubBreakers) => {
const handleOnPressSubBreakerSwitch = async value => {
this.setState(
prevState =>
(subBreaker.isPowerOn = !prevState.subBreakersInfo[indexMcbLinks][indexSubBreakers].isPowerOn)
);
const deviceId = this.props.navigation.getParam('deviceId');
// this.setState({ isWaiting: true });
// await this.props.setSubBreakerStatus(value, indexMcbLinks, indexSubBreakers);
// await this.getData();
// let getShadowInterval = setInterval(() => {
// this.getData();
// console.log('getShadow');
// }, 2000);
// this.setState((prevState, props) => {
// if (props.shadow === this.props.shadow) {
// console.log('hello');
// clearInterval(getShadowInterval);
// return { isWaiting: false };
// } else {
// setTimeout(() => {
// clearInterval(getShadowInterval);
// }, 6000);
// return { isWaiting: false };
// }
// });
// this.setState(
// prevState =>
// (subBreaker.isPowerOn = !prevState.subBreakersInfo[indexMcbLinks][indexSubBreakers].isPowerOn)
// );
await this.props.setSubBreakerStatus(value, indexMcbLinks, indexSubBreakers);
await this.props.getCurrentSelectedShadow();
let test = setInterval(() => {
this.props.getCurrentSelectedShadow(deviceId);
const getShadowInterval = setInterval(async () => {
console.log('getShadow');
}, 2000);
if (this.state.prevShadow !== props.shadow) {
clearInterval(test);
return { isWaiting: false };
} else {
setTimeout(() => {
clearInterval(test);
}, 6000);
}
this.setState(() => {
if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval HandletoggleSubBreaker');
clearInterval(getShadowInterval);
return { isWaiting: false };
} else {
if (checkedTimes >= 2) {
clearInterval(getShadowInterval);
// if (this.props.desiredBreakerStatus !== this.props.breakerStatus) {
// alert('Something went wrong, Please check your smart device.');
// }
checkedTimes = 0;
}
return { isWaiting: false };
}
});
console.log('checkedTimes', checkedTimes);
++checkedTimes;
await this.props.getCurrentSelectedShadow();
this.setSubBreakersState();
}, 3000);
};
const isSubOn = this.props.shadow[`ML${indexMcbLinks + 1}`][
`L${indexMcbLinks + 1}B${indexSubBreakers + 1}`
];
// let isSubOn = this.props.shadow[`ML${indexMcbLinks + 1}`][`L${indexMcbLinks + 1}B${indexSubBreakers + 1}`];
return (
<View
style={{
......@@ -273,8 +349,10 @@ class SmartMeterDetailScreen extends Component {
<Right>
<Switch
disabled={this.props.shadow.SM1.BK_S === 0 ? true : false}
value={isSubOn === 1 ? true : false}
onValueChange={value => handleOnPressSubBreakerSwitch(value)}
value={subBreaker.isPowerOn}
onValueChange={value => {
this.state.isWaiting ? null : handleOnPressSubBreakerSwitch(value);
}}
/>
</Right>
</Row>
......@@ -309,7 +387,7 @@ class SmartMeterDetailScreen extends Component {
{mcbLink.isExpand && (
<FlatList
data={subBreakersInfo[indexMcbLinks]}
extraData={this.state}
extraData={this.state || this.props}
keyExtractor={(item, index) => `subBreakerItem${item.mcbLinkId}${item.subBreakerId}`}
renderItem={({ item, index }) => renderSubBreaker(item, index)}
/>
......@@ -393,6 +471,9 @@ const mapStateToProps = state => ({
existedMcbLinksData: state.timersReducer.existedMcbLinksData,
existedSubBreakersData: state.timersReducer.existedSubBreakersData,
shadow: state.currentSelectedDeviceReducer.shadow,
breakerStatus: state.currentSelectedDeviceReducer.breakerStatus,
desiredBreakerStatus: state.currentSelectedDeviceReducer.desiredBreakerStatus,
});
const mapDispatchToProps = {
......@@ -403,6 +484,7 @@ const mapDispatchToProps = {
getTimers,
setMainStatus,
errorTimersAction,
setSubBreakerStatus,
};
const withNavSmartMeterDetailScreen = withNavigationFocus(SmartMeterDetailScreen);
......
screens/Public/AuthLoadingScreen.js
......@@ -103,15 +103,15 @@ const createMockData = () => {
const mainRef = fireStore.doc(`device/${deviceId}`);
batch.set(mainRef, main);
for (let i = 1; i <= 2; i++) {
let mainTimerRef = fireStore
.collection('device')
.doc(deviceId)
.collection('Timers')
.doc();
batch.set(mainTimerRef, timer);
}
// for (let i = 1; i <= 2; i++) {
// let mainTimerRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('Timers')
// .doc();
// batch.set(mainTimerRef, timer);
// }
/*------------------------------*/
for (let i = 1; i <= 4; i++) {
const mcbLinks = {
......@@ -144,18 +144,18 @@ const createMockData = () => {
.collection('subBreakers')
.doc(j.toString());
for (let z = 1; z <= 1; z++) {
let subBreakerTimerRef = fireStore
.collection('device')
.doc(deviceId)
.collection('mcbLinks')
.doc(i.toString())
.collection('subBreakers')
.doc(j.toString())
.collection('Timers')
.doc();
batch.set(subBreakerTimerRef, timer);
}
// for (let z = 1; z <= 1; z++) {
// let subBreakerTimerRef = fireStore
// .collection('device')
// .doc(deviceId)
// .collection('mcbLinks')
// .doc(i.toString())
// .collection('subBreakers')
// .doc(j.toString())
// .collection('Timers')
// .doc();
// batch.set(subBreakerTimerRef, timer);
// }
batch.set(subBreakersRef, subBreakers);
}
......@@ -172,23 +172,23 @@ const main = {
rcbo: 10,
};
const initTime = new Date();
initTime.setFullYear(2019);
initTime.setMonth(0);
initTime.setDate(0);
initTime.setSeconds(0);
const timer = {
isActive: false,
isPowerOn: false,
timer: 0,
repeatOn: [
{ id: 0, isRepeat: false, day: 'Sunday' },
{ id: 1, isRepeat: false, day: 'Monday' },
{ id: 2, isRepeat: false, day: 'Tuesday' },
{ id: 3, isRepeat: false, day: 'Wednesday' },
{ id: 4, isRepeat: false, day: 'Thursday' },
{ id: 5, isRepeat: false, day: 'Friday' },
{ id: 6, isRepeat: false, day: 'Saturday' },
],
};
// const initTime = new Date();
// initTime.setFullYear(2019);
// initTime.setMonth(0);
// initTime.setDate(0);
// initTime.setSeconds(0);
// const timer = {
// isActive: false,
// isPowerOn: false,
// timer: 0,
// repeatOn: [
// { id: 0, isRepeat: false, day: 'Sunday' },
// { id: 1, isRepeat: false, day: 'Monday' },
// { id: 2, isRepeat: false, day: 'Tuesday' },
// { id: 3, isRepeat: false, day: 'Wednesday' },
// { id: 4, isRepeat: false, day: 'Thursday' },
// { id: 5, isRepeat: false, day: 'Friday' },
// { id: 6, isRepeat: false, day: 'Saturday' },
// ],
// };
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