Skip to content

S
safetcut-app
Commit e57d12e6 by Tonk
Options

Merge branch 'injectedFirebase' into ejectedExpo

parents bffba9d9 1f37ed1b
Showing with 95 additions and 103 deletions
components/MeterCard.js
import React, { Component } from 'react';
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';
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 {
render() {
return (
<TouchableOpacity onPress={this.props.onPressEachCard}>
<RectButton onPress={this.props.onPressEachCard}>
<Card style={[theme.rowContainer, { borderRadius: 8, marginBottom: 10, height: 136 }]}>
<View
style={[
......@@ -89,8 +50,48 @@ class MeterCard extends Component {
</Row>
</View>
</Card>
</TouchableOpacity>
</RectButton>
);
}
}
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) => {
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 }
)
)
);
......@@ -163,8 +166,8 @@ export const getTimers = () => async (dispatch, getState) => {
dispatch(getExistedDataAction(existedSubBreakers));
dispatch(getMainDeviceTImersAction(mainDeviceTimers));
dispatch(getSubBreakersTimersAction(subBreakersTimers));
// dispatch(getMainDeviceTImersAction(mainDeviceTimers));
// dispatch(getSubBreakersTimersAction(subBreakersTimers));
allTimersData = [...mainDeviceTimers, ...subBreakersTimers];
dispatch(getTimersAction(allTimersData));
......@@ -209,7 +212,7 @@ export const createNewTimer = (mcbLinkId, subBreakerId, settingTime) => async (d
await docRef.add(settingTime);
return true;
} else {
alert('This Breaker cannot have more than 5 timers.');
alert('Breaker cannot have more than 5 timers.');
return false;
}
} catch (e) {
......
reduxStore/reducers/timersReducer.js
......@@ -3,23 +3,21 @@ import {
GET_TIMERS_LOADING,
GET_TIMERS_ERROR,
GET_EXISTED_DATA,
GET_MAIN_DEVICE_TIMERS,
GET_SUBBREAKERS_TIMERS,
GET_SELECTED_TIMER_DATA,
SET_EDIT_MODAL_VISIBLE,
// GET_MCBLINKS_TIMERS,
// GET_MAIN_DEVICE_TIMERS,
// GET_SUBBREAKERS_TIMERS,
} from '../actions/timersAction';
const initState = {
allTimers: [],
mainDeviceTimers: [],
subBreakersTimers: [],
existedData: {},
selectedTimerData: null,
isEditVisible: false,
isLoading: true,
error: null,
// mcbLinksTimers: [],
// mainDeviceTimers: [],
// subBreakersTimers: [],
};
const timersReducer = (state = initState, action) => {
......@@ -28,10 +26,6 @@ const timersReducer = (state = initState, action) => {
return { ...state, existedData: action.existedData };
case GET_TIMERS:
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:
return { ...state, selectedTimerData: action.selectedTimerData };
case SET_EDIT_MODAL_VISIBLE:
......@@ -40,8 +34,11 @@ const timersReducer = (state = initState, action) => {
return { ...state, isLoading: action.isLoading };
case GET_TIMERS_ERROR:
return { ...state, error: action.error };
// case GET_MCBLINKS_TIMERS:
// return { ...state, mcbLinksTimers: action.mcbLinksTimers };
// case GET_MAIN_DEVICE_TIMERS:
// return { ...state, mainDeviceTimers: action.mainDeviceTimers };
// case GET_SUBBREAKERS_TIMERS:
// return { ...state, subBreakersTimers: action.subBreakersTimers };
default:
return state;
}
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -4,9 +4,7 @@ import { color, theme } from '../../../constants/Styles';
import { FlatList, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { connect } from 'react-redux';
import { fireStore } from '../../../firebase';
import firebase from 'firebase/app';
import 'firebase/firestore';
import { setCurrentSelected } from '../../../reduxStore/actions/currentSelectedAction';
// Main Breaker mock data
const MainBreaker = {
name: 'Main Breaker',
......@@ -106,9 +104,10 @@ class SmartMeterDetailScreen extends Component {
sb: this.expandState(),
data: this.props.allMainDeviceInfo.find(x => x.deviceId === this.props.selectedDeviceId),
};
componentDidMount() {
console.log('state', this.state);
console.log('props', this.props);
constructor(props) {
super(props);
this.props.setCurrentSelected(this.props.navigation.getParam('deviceId'));
}
renderCurrent(item, index) {
return (
......@@ -283,7 +282,14 @@ const mapStateToProps = state => ({
selectedDeviceId: state.currentSelectedDeviceReducer.selectedDeviceId,
});
export default connect(mapStateToProps)(SmartMeterDetailScreen);
const mapDispatchToProps = {
setCurrentSelected,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(SmartMeterDetailScreen);
const styles = StyleSheet.create({
currentCard: {
flex: 1,
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
......@@ -46,10 +46,13 @@ class SmartMeterScreen extends PureComponent {
description={item.description || ''}
img={item.img || null}
isOnline={item.isOnline || false}
isOn={item.switch || false}
onPressEachCard={async () => {
await this.props.setCurrentSelected(item.deviceId);
this.props.navigation.navigate('SmartMeterDetail', { name: item.name || '' });
isOn={item.isOn || false}
onPressEachCard={() => {
// this.props.setCurrentSelected(item.deviceId);
this.props.navigation.navigate('SmartMeterDetail', {
name: item.name || '',
deviceId: item.deviceId,
});
}}
/>
);
......@@ -70,35 +73,15 @@ class SmartMeterScreen extends PureComponent {
const { allMainDeviceInfo, isLoading, error } = this.props;
return !error ? (
<>
<View
style={{
padding: 15,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: color.defaultBg,
}}
>
<SearchBar
containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchBarInputContainer}
inputStyle={styles.searchBarInput}
round
lightTheme
placeholder="Search..."
onChangeText={text => this.updateSearch(text)}
value={this.state.search}
/>
</View>
<FlatList
removeClippedSubviews={true}
removeClippedSubviews={false}
refreshing={isLoading}
onRefresh={this.getData}
style={[theme.container, theme.containerWithPadding]}
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
data={allMainDeviceInfo}
extraData={allMainDeviceInfo}
keyExtractor={(item, index) => `Card${item.deviceId}`}
// extraData={this.props}
keyExtractor={(item, index) => item.deviceId}
ListEmptyComponent={() => (
<View>
<Text style={[theme.normalText, { marginTop: 20 }]}>
......@@ -111,7 +94,6 @@ class SmartMeterScreen extends PureComponent {
)}
renderItem={this.renderItem}
/>
</>
) : (
<View>
<Text>{error}</Text>
......
screens/Private/TimerScreen/TimerScreen.andriod.js
......@@ -38,9 +38,9 @@ initTime.setDate(0);
initTime.setSeconds(0);
const initTimeSetting = {
mcbLinkId: null,
id: null,
key: null,
// mcbLinkId: null,
// subBreakerId: null,
// key: null,
isActive: false,
isPowerOn: false,
timer: initTime,
......@@ -60,7 +60,6 @@ const initState = {
isAddVisible: false,
isfilterVisible: false,
checked: [],
search: '',
selectedBreaker: null, //Main or mcbLink
......@@ -84,6 +83,11 @@ class TimerScreen extends PureComponent {
subBreakerList: [],
};
constructor(props) {
super(props);
this.props.getTimers();
}
setPickerSelectData = () => {
let pickerSelectData = [{ label: 'Main Device', value: 'main' }];
......@@ -158,15 +162,15 @@ class TimerScreen extends PureComponent {
const isCreated = await this.props.createNewTimer(null, null, timerData);
if (isCreated) {
this.props.getTimers();
this.resetStateAndProps();
this.props.getTimers();
}
} else if (selectedBreaker && selectedSubBreaker) {
await this.props.createNewTimer(selectedBreaker, selectedSubBreaker.id, timerData);
this.resetStateAndProps();
this.props.getTimers();
} else {
alert('please select Sub Breaker');
alert('please select (Sub) Breaker');
}
} else if (isEditVisible) {
this.props.editTimer(timerData);
......@@ -214,7 +218,6 @@ class TimerScreen extends PureComponent {
</TouchableOpacity>
),
});
this.props.getTimers();
// this.setExistedSubBreaker();
// this.props.existedData && this.setPickerSelectData();
console.log('STATE', this.state);
......@@ -422,7 +425,7 @@ class TimerScreen extends PureComponent {
<FlatList
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }}
data={this.props.allTimers}
extraData={this.props.allTimers}
// extraData={this.props.allTimers}
refreshing={this.props.isLoading}
onRefresh={this.props.getTimers}
ListEmptyComponent={() => (
......@@ -434,7 +437,7 @@ class TimerScreen extends PureComponent {
renderItem={({ item, index }) => (
<SwipeableRow item={item} index={index} onSwipeOpen={this.autoCloseSwipeRow} />
)}
keyExtractor={(item, index) => `timer${index}`}
keyExtractor={(item, index) => `timer${item.key}`}
/>
{/* 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