Skip to content

S
safetcut-app
Commit 435cb1a6 by HaOuiha
Options

subscribetion at mcbLinkPage && fix some bug

parent da24617a
Showing with 139 additions and 121 deletions
firebase.js
......@@ -12,7 +12,12 @@ const app = firebase.initializeApp({
messagingSenderId: '716807932076',
});
const fireStore = app.firestore();
let fireStore = null;
try {
fireStore = app.firestore();
} catch (e) {
alert(e);
}
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
......
reduxStore/actions/allMainDeviceAction.js
......@@ -88,20 +88,11 @@ export const getAllMainDeviceInfo = () => async (dispatch, getState) => {
const getBreakerStatus = async deviceId => {
try {
// const {
// data: {
// shadow: { data },
// },
// } = await apolloQuery(READ_SHADOW, { deviceid: deviceId });
const res1 = await apolloQuery(READ_SHADOW, { deviceid: deviceId });
const breakerStatusData = res1.data.shadow.data;
// const response = await apolloQuery(READ_SHADOW, { deviceid: deviceId });
// console.log(response);
const res2 = await apolloQuery(QUERY_ONLINE_STATUS, { deviceid: deviceId });
const onlineStatus = res2.data.device[0].status;
// console.log(onlineStatus);
const tempBreakerStatus = _.pick(breakerStatusData, ['SM1']);
const breakerStatus = tempBreakerStatus.SM1.BK_S;
......
reduxStore/actions/currentSelectedAction.js
......@@ -154,44 +154,35 @@ export const getCurrentSelectedData = (deviceId, showLoading) => async dispatch
export const updateSubscriptionToStore = subscriptionData => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { shadow, breakerStatus } = currentSelectedDeviceReducer;
// console.log('subscriptionData', subscriptionData);
console.log('subscriptionData', subscriptionData);
console.log('s', shadow);
console.log('b', breakerStatus);
['SM1', 'ML1', 'ML2', 'ML3', 'ML4'].map(item => subscriptionData.hasOwnProperty(item));
console.log(
['SM1', 'ML1', 'ML2', 'ML3', 'ML4']
const isPropertyofBreakerStatus = ['SM1', 'ML1', 'ML2', 'ML3', 'ML4']
.map(item => subscriptionData.hasOwnProperty(item))
.some(item => item === true)
);
.some(item => item === true);
const tempBreakersStatus = _.pick(newWholeShadow, ['SM1', 'ML1', 'ML2', 'ML3', 'ML4']);
const breakersStatus = { ...tempBreakersStatus, SM1: { BK_S: tempBreakersStatus.SM1.BK_S } };
let shadowTimers = [];
let shadowValue = null;
let subBreakerData = [];
for (let i = 1; i <= 4; i++) {
for (let j = 1; j <= 8; j++) {
shadowTimers.push(`L${i}B${j}T`);
shadowValue = _.omit(newWholeShadow, [
'CMD_MSG',
'TIME_NOW',
'TIME_ZONE',
'VERSION',
'ML1',
'ML2',
'ML3',
'ML4',
'MAB1T',
...shadowTimers,
]);
subBreakerData.push(`data_L${i}_B${j}`);
}
}
const isPropertyofShadow = ['MD_STA', 'MESSAGE', 'RMD9', 'SM1', 'RSSI', ...subBreakerData]
.map(item => subscriptionData.hasOwnProperty(item))
.some(item => item === true);
let newBreakerStatus = null;
let newShadow = null;
if (isPropertyofBreakerStatus) {
newBreakerStatus = { ...breakerStatus, ...subscriptionData };
const breakersStatus = { ...newBreakerStatus, SM1: { BK_S: newBreakerStatus.SM1.BK_S } };
dispatch(getBreakersStatusAction(breakersStatus));
dispatch(getCurrentSelectedShadowAction(shadowValue));
}
if (isPropertyofShadow) {
newShadow = { ...shadow, ...subscriptionData };
dispatch(getCurrentSelectedShadowAction(newShadow));
}
};
export const updateDetail = (type, value) => async (dispatch, getState) => {
......
reduxStore/actions/timersAction.js
......@@ -215,6 +215,9 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
const selectedDeviceId = currentSelectedData.deviceId;
const { allTimers, existedSubBreakersData } = timersReducer;
console.log('settingTime',settingTime)
const getDocRef = () => {
if (mcbLinkId && subBreakerId) {
const docRef = fireStore
......
screens/Private/NotificationScreen/NotificationScreen.js
import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base';
import { View, StyleSheet, ScrollView, Modal, TouchableOpacity } from 'react-native';
import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements';
import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay, getTime, endOfDay } from 'date-fns';
......@@ -10,7 +10,7 @@ import CalendarPicker from 'react-native-calendar-picker';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { withNavigationFocus } from 'react-navigation';
import dt2 from './notification.json';
import Modal2 from 'react-native-modalbox';
import Modal from 'react-native-modalbox';
import { isIphoneX } from '../../../utils/isPhoneX';
const tabHeader = [
......@@ -18,6 +18,7 @@ const tabHeader = [
{ type: 'notification', label: 'Notification' },
{ type: 'log', label: 'Logging' },
];
class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Notifications',
......@@ -29,9 +30,7 @@ class NotificationScreen extends React.Component {
</TouchableOpacity>
),
});
constructor(props) {
super(props);
this.state = {
state = {
search: '',
data: [],
filterData: [],
......@@ -42,22 +41,19 @@ class NotificationScreen extends React.Component {
filterBy: null,
toggleCalendar: false,
};
this.onDateChange = this.onDateChange.bind(this);
}
componentDidMount() {
componentDidMount = () => {
this.sortDate();
}
componentDidUpdate(prevProps) {
if (prevProps.isFocused !== this.props.isFocused) {
this.setState(state => {
const readed = state.data.map(item => (item.read = true));
return {
readed,
};
componentDidUpdate = prevProps => {
if (prevProps.isFocused !== this.props.isFocused) {
this.setState(prevState => {
const readed = prevState.data.map(item => (item.read = true));
return { readed };
});
}
}
sortDate() {
};
sortDate = () => {
const sortData = dt2.sort(function(a, b) {
var dateA = new Date(a.time),
dateB = new Date(b.time);
......@@ -67,8 +63,8 @@ class NotificationScreen extends React.Component {
data: sortData,
initial: sortData,
});
}
onDateChange(date, type) {
};
onDateChange = (date, type) => {
if (type === 'END_DATE') {
this.setState({
selectedEndDate: date,
......@@ -79,15 +75,15 @@ class NotificationScreen extends React.Component {
selectedEndDate: null,
});
}
}
clear() {
};
clear = () => {
this.setState({
selectedStartDate: null,
selectedEndDate: null,
filterBy: null,
toggleCalendar: false,
});
}
};
updateSearch = text => {
this.setState({ search: text });
......@@ -109,7 +105,7 @@ class NotificationScreen extends React.Component {
});
};
filterByDate() {
filterByDate = () => {
const { filterBy, initial, selectedStartDate, selectedEndDate } = this.state;
this.setState({ isfilterVisible: false, search: '' });
......@@ -166,10 +162,10 @@ class NotificationScreen extends React.Component {
} else if (filterBy === 'all') {
this.setState({ filterData: initial });
}
}
};
// render component -----------------------------------------------
renderActionCard(data, index) {
renderActionCard = (data, index) => {
return (
<View
style={[
......@@ -222,9 +218,9 @@ class NotificationScreen extends React.Component {
</View>
</View>
);
}
};
renderDayList(type) {
renderDayList = type => {
let data2render = [];
if (this.state.filterBy && !this.state.search) {
data2render.push(...this.state.filterData);
......@@ -240,17 +236,21 @@ class NotificationScreen extends React.Component {
let view = [];
let day;
if (data.length === 0) {
view.push(<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>No data</Text>);
view.push(
<Text key={data} style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
No data
</Text>
);
} else {
for (let i = 0; i < data.length; i++) {
if (isToday(data[i].time * 1000) && i === 0) {
view.push(
<>
<View key={`today${i}`}>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
Today
</Text>
{this.renderActionCard(data[i], i)}
</>
</View>
);
day = data[i].time * 1000;
} else if (isSameDay(day, data[i].time * 1000)) {
......@@ -258,23 +258,23 @@ class NotificationScreen extends React.Component {
day = data[i].time * 1000;
} else {
view.push(
<>
<View key={`past${i}`}>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
{isYesterday(data[i].time * 1000)
? 'Yesterday'
: format(data[i].time * 1000, 'DD/MM/YYYY')}
</Text>
{this.renderActionCard(data[i], i)}
</>
</View>
);
day = data[i].time * 1000;
}
}
}
return view;
}
return <View style={{ marginBottom: isIphoneX() ? 60 : 25 }}>{view}</View>;
};
renderCalendar() {
renderCalendar = () => {
const { selectedStartDate, selectedEndDate } = this.state;
const maxDate = new Date();
const startDate = selectedStartDate ? selectedStartDate.toString() : '';
......@@ -332,7 +332,7 @@ class NotificationScreen extends React.Component {
)}
</>
);
}
};
renderFilter = () => {
return (
......@@ -384,21 +384,23 @@ class NotificationScreen extends React.Component {
tabStyle: {
backgroundColor: 'transparent',
borderRadius: 100,
marginVertical: 10,
paddingHorizontal: 10,
width: width / 3,
marginVertical: 8,
paddingLeft: 0,
paddingRight: 0,
width: (width - 50) / 3,
},
activeTabStyle: {
backgroundColor: color.primary,
borderRadius: 100,
marginVertical: 10,
marginHorizontal: 5,
width: width / 3 - 10,
marginVertical: 8,
paddingLeft: 0,
paddingRight: 0,
width: (width - 50) / 3,
},
style: { backgroundColor: color.defaultBg },
};
return (
<View style={theme.container}>
<View style={[theme.container]}>
<Tabs
tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
renderTabBar={() => <ScrollableTab style={styles.scrollTab} />}
......@@ -430,24 +432,17 @@ class NotificationScreen extends React.Component {
))}
</Tabs>
<Modal
transparent
presentationStyle={'overFullScreen'}
animationType="fade"
visible={this.state.isfilterVisible}
>
<Modal2
coverScreen
swipeArea={45}
swipeThreshold={65}
animationDuration={360}
backdropPressToClose={false}
style={[styles.filterModal]}
position={'bottom'}
isOpen={this.state.isfilterVisible}
onClosed={() => {
this.setState({ isfilterVisible: false });
}}
onClosed={() => this.setState({ isfilterVisible: false })}
>
{this.renderFilter()}
</Modal2>
</Modal>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} />
......@@ -482,7 +477,7 @@ const styles = StyleSheet.create({
width: 50,
height: 5,
borderRadius: 3,
backgroundColor: color.grey,
backgroundColor: color.lightGrey,
display: 'flex',
alignSelf: 'center',
},
......@@ -549,6 +544,7 @@ const styles = StyleSheet.create({
backgroundColor: color.defaultBg,
borderWidth: 0,
marginTop: 10,
// marginHorizontal: 15,
},
tabContainer: {
padding: 15,
......
screens/Private/SmartMeterScreen/McbLinkScreen.js
import React from 'react';
import React, { Component } from 'react';
import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
import { connect } from 'react-redux';
import { StyleSheet, TextInput, Image, TouchableOpacity, Animated, Easing } from 'react-native';
......@@ -12,14 +12,16 @@ import {
setSubBreakerStatus,
deleteConnectedDevice,
addConnectedDevice,
updateSubscriptionToStore,
} from '../../../reduxStore/actions/currentSelectedAction';
import Modal from 'react-native-modalbox';
import { getDeviceIcon, listDeviceIcon } from '../../../components/deviceIcon';
import { isIphoneX } from '../../../utils/isPhoneX';
import { graphql } from '@apollo/react-hoc';
import { READ_SHADOW, SUBSCRIBE_SHADOW } from '../../../utils/apollo/apollo';
import { withNavigationFocus } from 'react-navigation';
let checkedTimes = 0;
class McbLinkScreen extends React.Component {
class McbLinkScreen extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('mcbLink').name || `MCB Link ${navigation.getParam('mcbIndex') + 1}`,
......@@ -43,10 +45,11 @@ class McbLinkScreen extends React.Component {
),
};
};
constructor(props) {
super(props);
this.shakeValue = new Animated.Value(0);
}
shakeValue = new Animated.Value(0);
unsubscribeShadow = null;
deviceId = this.props.navigation.getParam('deviceId');
state = {
subBreakersInfo: [],
subBreakerStatus: [],
......@@ -58,8 +61,20 @@ class McbLinkScreen extends React.Component {
deviceName: '',
deviceType: '',
};
subscribeToNewShadow = subscribeToMore => {
this.unsubscribeShadow = subscribeToMore({
document: SUBSCRIBE_SHADOW,
variables: { deviceid: this.deviceId },
updateQuery: (prev, { subscriptionData }) => {
this.props.updateSubscriptionToStore(subscriptionData.data.shadowUpdated.data);
},
});
};
componentDidMount = () => {
this.setSubBreakersState();
this.subscribeToNewShadow(this.props.data.subscribeToMore);
};
componentDidUpdate = (prevProps, prevState) => {
if (
......@@ -69,6 +84,10 @@ class McbLinkScreen extends React.Component {
) {
this.setSubBreakersState();
}
if (prevProps.isFocused !== this.props.isFocused) {
this.props.isFocused === true && this.subscribeToNewShadow(this.props.data.subscribeToMore);
this.props.isFocused === false && this.unsubscribeShadow && this.unsubscribeShadow();
}
};
handleAnimation = () => {
// A loop is needed for continuous animation
......@@ -117,7 +136,6 @@ class McbLinkScreen extends React.Component {
)
);
});
this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
};
addDevice = async () => {
......@@ -147,7 +165,6 @@ class McbLinkScreen extends React.Component {
const handleOnPressSubBreakerSwitch = async value => {
this.setState({ isWaiting: true });
await this.props.setSubBreakerStatus(value, mcbIndex, index);
await this.props.getCurrentSelectedShadow();
this.setState({ isWaiting: false });
};
const { subBreakerStatus, isWaiting } = this.state;
......@@ -160,9 +177,11 @@ class McbLinkScreen extends React.Component {
{item.name || `Sub Breaker ${index + 1}`}
</Text>
<Switch
disabled={isWaiting ? true : false}
thumbColor={subStatus ? '#10ca88' : color.grey}
trackColor={{ false: color.lightGrey, true: '#87E4C3' }}
// disabled={isWaiting ? true : false}
value={subStatus}
onValueChange={value => handleOnPressSubBreakerSwitch(value)}
onValueChange={handleOnPressSubBreakerSwitch}
/>
</View>
<Text style={[theme.description, theme.mt1]}>{item.description || 'No description'}</Text>
......@@ -536,7 +555,7 @@ const styles = StyleSheet.create({
color: color.lightGrey,
},
addModal: {
height: height * 0.8,
height: height * 0.9,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
},
......@@ -599,9 +618,16 @@ const mapDispatchToProps = {
getCurrentSelectedShadow,
deleteConnectedDevice,
addConnectedDevice,
updateSubscriptionToStore,
};
const WithSubscription = graphql(READ_SHADOW, {
options: props => ({ variables: { deviceid: props.navigation.getParam('deviceId') } }),
});
const enhancedScreen = WithSubscription(withNavigationFocus(McbLinkScreen));
export default connect(
mapStateToProps,
mapDispatchToProps
)(McbLinkScreen);
)(enhancedScreen);
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -67,9 +67,6 @@ class SmartMeterDetailScreen extends Component {
document: SUBSCRIBE_SHADOW,
variables: { deviceid: this.deviceId },
updateQuery: (prev, { subscriptionData }) => {
// this.setState((prevState, props) => ({
// shadow: { ...prevState.shadow, ...subscriptionData.data.shadowUpdated.data },
// }));
this.props.updateSubscriptionToStore(subscriptionData.data.shadowUpdated.data);
},
});
......@@ -119,7 +116,6 @@ class SmartMeterDetailScreen extends Component {
],
});
}
// console.log(this.state.shadow);
};
handleToggle = async value => {
......@@ -156,10 +152,8 @@ class SmartMeterDetailScreen extends Component {
setSubBreakersState = async () => {
const { existedSubBreakersData, breakerStatus } = this.props;
let subBreakersInfo = [];
const subBreakersStatus = _.pick(breakerStatus, ['ML1', 'ML2', 'ML3', 'ML4']);
// console.log('subBreakersStatus', subBreakersStatus);
existedSubBreakersData.map(mcbLink => {
subBreakersInfo.push(
mcbLink.map(subBreaker =>
......@@ -199,7 +193,7 @@ class SmartMeterDetailScreen extends Component {
{description || 'No description'}
</Text>
<Row style={theme.mt1}>
<Text style={[theme.description, theme.textDark, { marginRight: 5 }]}>
<Text style={[theme.description, theme.textDark, { marginRight: 16 }]}>
Status:{' '}
<Text style={[theme.description, { color: isOnline ? color.success : color.primary }]}>
{isOnline ? 'Online' : 'Offline'}
......@@ -284,17 +278,19 @@ class SmartMeterDetailScreen extends Component {
backgroundColor: 'rgba(216,216,216,0.1)',
}}
>
<Row
<Row>
<Left style={{ flex: 4, alignSelf: 'stretch' }}>
<View style={{ felx: 1, alignSelf: 'stretch' }}>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate('McbLink', {
deviceId: this.deviceId,
mcbLink: mcbLink,
mcbIndex: indexMcbLinks,
subIndex: indexSubBreakers,
})
}
>
<Left style={{ flex: 4 }}>
<View>
<Text style={[theme.normalText, theme.textDark]}>
{subBreaker.name !== `Sub Breaker ${indexSubBreakers + 1}`
? `Sub Breaker ${indexSubBreakers + 1} [${
......@@ -307,6 +303,7 @@ class SmartMeterDetailScreen extends Component {
<Text style={theme.description} numberOfLines={1}>
{subBreaker.description}
</Text>
</TouchableOpacity>
</View>
</Left>
<Right>
......@@ -338,7 +335,10 @@ class SmartMeterDetailScreen extends Component {
: `MCB Link ${indexMcbLinks + 1}`}
</Text>
</Left>
<Right>
<Right style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
<Text style={{ color: color.grey, marginRight: 10 }}>
{subBreakersInfo[indexMcbLinks] ? subBreakersInfo[indexMcbLinks].length : '0'}
</Text>
<Icon style={styles.mcbExpand} name={mcbLink.isExpand ? 'ios-arrow-up' : 'ios-arrow-down'} />
</Right>
</Row>
......
screens/Private/TimerScreen/TimerScreen.js
......@@ -209,6 +209,9 @@ class TimerScreen extends PureComponent {
.valueOf()
);
console.log('this.state.timer', this.state.timer);
console.log('saveTimer', saveTimer);
let timerData = {
isActive: this.state.isActive,
isPowerOn: this.state.isPowerOn,
......@@ -332,7 +335,10 @@ class TimerScreen extends PureComponent {
<DatePicker
date={new Date(this.state.timer)}
onDateChange={date => this.setState({ timer: date })}
onDateChange={date => {
console.log('date', date);
this.setState({ timer: date });
}}
mode="time"
style={{
marginTop: 10,
......
screens/Public/LoginScreen.js
......@@ -15,7 +15,7 @@ class LoginScreen extends Component {
};
state = {
isCheck: false,
isCheck: true,
pass: '',
passVisible: false,
isModalVisible: false,
......@@ -27,7 +27,7 @@ class LoginScreen extends Component {
const { email, password } = values;
try {
const userCredential = await app.auth().signInWithEmailAndPassword(email, password);
console.log(userCredential);
// console.log(userCredential);
if (userCredential) {
await this.props.getCurrentUser(userCredential.user);
if (this.props.emailVerified && this.props.emailVerified === true) {
......
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