Skip to content

S
safetcut-app
Commit 1f37ed1b by HaOuiha
Options

update

parent 4a7df4f1
Showing with 94 additions and 74 deletions
components/MeterCard.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Card, View, Row, Icon, Text } from 'native-base'; import { Card, View, Row, Icon, Text } from 'native-base';
import { Image, TouchableOpacity, StyleSheet } from 'react-native'; import { Image, StyleSheet } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import { color, theme } from '../constants/Styles'; import { color, theme } from '../constants/Styles';
const styles = StyleSheet.create({
meterOn: {
top: 7,
left: 5,
width: 35,
paddingVertical: 1,
borderRadius: 9.6,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
meterImgStyle: {
width: 50,
height: 80,
resizeMode: 'contain',
},
online: {
top: 27,
left: 0,
width: 8,
height: 8,
borderRadius: 10,
position: 'absolute',
backgroundColor: color.statusOn,
},
meterIconCover: {
width: 32,
height: 32,
marginRight: 20,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: color.defaultBg,
},
meterIconStyle: {
fontSize: 15,
color: color.grey,
},
});
class MeterCard extends Component { class MeterCard extends Component {
render() { render() {
return ( return (
<TouchableOpacity onPress={this.props.onPressEachCard}> <RectButton onPress={this.props.onPressEachCard}>
<Card style={[theme.rowContainer, { borderRadius: 8, marginBottom: 10, height: 136 }]}> <Card style={[theme.rowContainer, { borderRadius: 8, marginBottom: 10, height: 136 }]}>
<View <View
style={[ style={[
...@@ -90,8 +51,48 @@ class MeterCard extends Component { ...@@ -90,8 +51,48 @@ class MeterCard extends Component {
</Row> </Row>
</View> </View>
</Card> </Card>
</TouchableOpacity> </RectButton>
); );
} }
} }
export default MeterCard; export default MeterCard;
const styles = StyleSheet.create({
meterOn: {
top: 7,
left: 5,
width: 35,
paddingVertical: 1,
borderRadius: 9.6,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
meterImgStyle: {
width: 50,
height: 80,
resizeMode: 'contain',
},
online: {
top: 27,
left: 0,
width: 8,
height: 8,
borderRadius: 10,
position: 'absolute',
backgroundColor: color.statusOn,
},
meterIconCover: {
width: 32,
height: 32,
marginRight: 20,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: color.defaultBg,
},
meterIconStyle: {
fontSize: 15,
color: color.grey,
},
});
reduxStore/actions/timersAction.js
...@@ -123,7 +123,10 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -123,7 +123,10 @@ export const getTimers = () => async (dispatch, getState) => {
existedSubBreakers.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 }
)
) )
); );
...@@ -163,8 +166,8 @@ export const getTimers = () => async (dispatch, getState) => { ...@@ -163,8 +166,8 @@ export const getTimers = () => async (dispatch, getState) => {
dispatch(getExistedDataAction(existedSubBreakers)); dispatch(getExistedDataAction(existedSubBreakers));
dispatch(getMainDeviceTImersAction(mainDeviceTimers)); // dispatch(getMainDeviceTImersAction(mainDeviceTimers));
dispatch(getSubBreakersTimersAction(subBreakersTimers)); // dispatch(getSubBreakersTimersAction(subBreakersTimers));
allTimersData = [...mainDeviceTimers, ...subBreakersTimers]; allTimersData = [...mainDeviceTimers, ...subBreakersTimers];
dispatch(getTimersAction(allTimersData)); dispatch(getTimersAction(allTimersData));
...@@ -209,7 +212,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d ...@@ -209,7 +212,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
await docRef.add(settingTime); await docRef.add(settingTime);
return true; return true;
} else { } else {
alert('This Breaker cannot have more than 5 timers.'); alert('Breaker cannot have more than 5 timers.');
return false; return false;
} }
} catch (e) { } catch (e) {
......
reduxStore/reducers/timersReducer.js
...@@ -3,23 +3,21 @@ import { ...@@ -3,23 +3,21 @@ import {
GET_TIMERS_LOADING, GET_TIMERS_LOADING,
GET_TIMERS_ERROR, GET_TIMERS_ERROR,
GET_EXISTED_DATA, GET_EXISTED_DATA,
GET_MAIN_DEVICE_TIMERS,
GET_SUBBREAKERS_TIMERS,
GET_SELECTED_TIMER_DATA, GET_SELECTED_TIMER_DATA,
SET_EDIT_MODAL_VISIBLE, SET_EDIT_MODAL_VISIBLE,
// GET_MCBLINKS_TIMERS, // GET_MAIN_DEVICE_TIMERS,
// GET_SUBBREAKERS_TIMERS,
} from '../actions/timersAction'; } from '../actions/timersAction';
const initState = { const initState = {
allTimers: [], allTimers: [],
mainDeviceTimers: [],
subBreakersTimers: [],
existedData: {}, existedData: {},
selectedTimerData: null, selectedTimerData: null,
isEditVisible: false, isEditVisible: false,
isLoading: true, isLoading: true,
error: null, error: null,
// mcbLinksTimers: [], // mainDeviceTimers: [],
// subBreakersTimers: [],
}; };
const timersReducer = (state = initState, action) => { const timersReducer = (state = initState, action) => {
...@@ -28,10 +26,6 @@ const timersReducer = (state = initState, action) => { ...@@ -28,10 +26,6 @@ const timersReducer = (state = initState, action) => {
return { ...state, existedData: action.existedData }; return { ...state, existedData: action.existedData };
case GET_TIMERS: case GET_TIMERS:
return { ...state, allTimers: action.allTimers }; return { ...state, allTimers: action.allTimers };
case GET_MAIN_DEVICE_TIMERS:
return { ...state, mainDeviceTimers: action.mainDeviceTimers };
case GET_SUBBREAKERS_TIMERS:
return { ...state, subBreakersTimers: action.subBreakersTimers };
case GET_SELECTED_TIMER_DATA: case GET_SELECTED_TIMER_DATA:
return { ...state, selectedTimerData: action.selectedTimerData }; return { ...state, selectedTimerData: action.selectedTimerData };
case SET_EDIT_MODAL_VISIBLE: case SET_EDIT_MODAL_VISIBLE:
...@@ -40,8 +34,11 @@ const timersReducer = (state = initState, action) => { ...@@ -40,8 +34,11 @@ const timersReducer = (state = initState, action) => {
return { ...state, isLoading: action.isLoading }; return { ...state, isLoading: action.isLoading };
case GET_TIMERS_ERROR: case GET_TIMERS_ERROR:
return { ...state, error: action.error }; return { ...state, error: action.error };
// case GET_MCBLINKS_TIMERS: // case GET_MAIN_DEVICE_TIMERS:
// return { ...state, mcbLinksTimers: action.mcbLinksTimers }; // return { ...state, mainDeviceTimers: action.mainDeviceTimers };
// case GET_SUBBREAKERS_TIMERS:
// return { ...state, subBreakersTimers: action.subBreakersTimers };
default: default:
return state; return state;
} }
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
...@@ -7,6 +7,7 @@ import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; ...@@ -7,6 +7,7 @@ import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { Badge } from 'react-native-elements'; import { Badge } from 'react-native-elements';
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 { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
// Main Breaker mock data // Main Breaker mock data
const MainBreaker = { const MainBreaker = {
name: 'Main Breaker', name: 'Main Breaker',
...@@ -121,6 +122,11 @@ class SmartMeterDetailScreen extends Component { ...@@ -121,6 +122,11 @@ class SmartMeterDetailScreen extends Component {
sb: this.expandState(), sb: this.expandState(),
data: [], data: [],
}; };
constructor(props) {
super(props);
this.props.setCurrentSelected(this.props.navigation.getParam('deviceId'));
}
renderCurrent(item, index) { renderCurrent(item, index) {
return ( return (
<Card <Card
...@@ -296,7 +302,14 @@ const mapStateToProps = state => ({ ...@@ -296,7 +302,14 @@ const mapStateToProps = state => ({
allDeviceInfo: state.allMainDeviceReducer.allDeviceInfo, allDeviceInfo: state.allMainDeviceReducer.allDeviceInfo,
}); });
export default connect(mapStateToProps)(SmartMeterDetailScreen); const mapDispatchToProps = {
setCurrentSelected,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(SmartMeterDetailScreen);
const styles = StyleSheet.create({ const styles = StyleSheet.create({
currentCard: { currentCard: {
flex: 1, flex: 1,
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
...@@ -44,9 +44,12 @@ class SmartMeterScreen extends PureComponent { ...@@ -44,9 +44,12 @@ class SmartMeterScreen extends PureComponent {
img={item.img || null} img={item.img || null}
isOnline={item.isOnline || false} isOnline={item.isOnline || false}
isOn={item.isOn || false} isOn={item.isOn || false}
onPressEachCard={async () => { onPressEachCard={() => {
await this.props.setCurrentSelected(item.deviceId); // this.props.setCurrentSelected(item.deviceId);
this.props.navigation.navigate('SmartMeterDetail', { name: item.name || '' }); this.props.navigation.navigate('SmartMeterDetail', {
name: item.name || '',
deviceId: item.deviceId,
});
}} }}
/> />
); );
...@@ -68,8 +71,8 @@ class SmartMeterScreen extends PureComponent { ...@@ -68,8 +71,8 @@ class SmartMeterScreen extends PureComponent {
style={[theme.container, theme.containerWithPadding]} style={[theme.container, theme.containerWithPadding]}
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34 contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
data={allMainDeviceInfo} data={allMainDeviceInfo}
extraData={this.props} // extraData={this.props}
keyExtractor={(item, index) => `Card${item.deviceId}`} keyExtractor={(item, index) => item.deviceId}
ListEmptyComponent={() => ( ListEmptyComponent={() => (
<View> <View>
<Text style={[theme.normalText, { marginTop: 20 }]}> <Text style={[theme.normalText, { marginTop: 20 }]}>
......
screens/Private/TimerScreen/TimerScreen.andriod.js
...@@ -38,9 +38,9 @@ initTime.setDate(0); ...@@ -38,9 +38,9 @@ initTime.setDate(0);
initTime.setSeconds(0); initTime.setSeconds(0);
const initTimeSetting = { const initTimeSetting = {
mcbLinkId: null, // mcbLinkId: null,
id: null, // subBreakerId: null,
key: null, // key: null,
isActive: false, isActive: false,
isPowerOn: false, isPowerOn: false,
timer: initTime, timer: initTime,
...@@ -60,7 +60,6 @@ const initState = { ...@@ -60,7 +60,6 @@ const initState = {
isAddVisible: false, isAddVisible: false,
isfilterVisible: false, isfilterVisible: false,
checked: [],
search: '', search: '',
selectedBreaker: null, //Main or mcbLink selectedBreaker: null, //Main or mcbLink
...@@ -84,6 +83,11 @@ class TimerScreen extends PureComponent { ...@@ -84,6 +83,11 @@ class TimerScreen extends PureComponent {
subBreakerList: [], subBreakerList: [],
}; };
constructor(props) {
super(props);
this.props.getTimers();
}
setPickerSelectData = () => { setPickerSelectData = () => {
let pickerSelectData = [{ label: 'Main Device', value: 'main' }]; let pickerSelectData = [{ label: 'Main Device', value: 'main' }];
...@@ -158,15 +162,15 @@ class TimerScreen extends PureComponent { ...@@ -158,15 +162,15 @@ class TimerScreen extends PureComponent {
const isCreated = await this.props.createNewTimer(null, null, timerData); const isCreated = await this.props.createNewTimer(null, null, timerData);
if (isCreated) { if (isCreated) {
this.props.getTimers();
this.resetStateAndProps(); this.resetStateAndProps();
this.props.getTimers();
} }
} else if (selectedBreaker && selectedSubBreaker) { } else if (selectedBreaker && selectedSubBreaker) {
await this.props.createNewTimer(selectedBreaker, selectedSubBreaker.id, timerData); await this.props.createNewTimer(selectedBreaker, selectedSubBreaker.id, timerData);
this.resetStateAndProps(); this.resetStateAndProps();
this.props.getTimers(); this.props.getTimers();
} else { } else {
alert('please select Sub Breaker'); alert('please select (Sub) Breaker');
} }
} else if (isEditVisible) { } else if (isEditVisible) {
this.props.editTimer(timerData); this.props.editTimer(timerData);
...@@ -214,7 +218,6 @@ class TimerScreen extends PureComponent { ...@@ -214,7 +218,6 @@ class TimerScreen extends PureComponent {
</TouchableOpacity> </TouchableOpacity>
), ),
}); });
this.props.getTimers();
// this.setExistedSubBreaker(); // this.setExistedSubBreaker();
// this.props.existedData && this.setPickerSelectData(); // this.props.existedData && this.setPickerSelectData();
console.log('STATE', this.state); console.log('STATE', this.state);
...@@ -422,7 +425,7 @@ class TimerScreen extends PureComponent { ...@@ -422,7 +425,7 @@ class TimerScreen extends PureComponent {
<FlatList <FlatList
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }}
data={this.props.allTimers} data={this.props.allTimers}
extraData={this.props.allTimers} // extraData={this.props.allTimers}
refreshing={this.props.isLoading} refreshing={this.props.isLoading}
onRefresh={this.props.getTimers} onRefresh={this.props.getTimers}
ListEmptyComponent={() => ( ListEmptyComponent={() => (
...@@ -434,7 +437,7 @@ class TimerScreen extends PureComponent { ...@@ -434,7 +437,7 @@ class TimerScreen extends PureComponent {
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<SwipeableRow item={item} index={index} onSwipeOpen={this.autoCloseSwipeRow} /> <SwipeableRow item={item} index={index} onSwipeOpen={this.autoCloseSwipeRow} />
)} )}
keyExtractor={(item, index) => `timer${index}`} keyExtractor={(item, index) => `timer${item.key}`}
/> />
{/* Create & Update Timer Modal */} {/* Create & Update Timer Modal */}
......
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