Skip to content

S
safetcut-app
Commit 2390aad6 by HaOuiha
Options

some update

parent 1429360d
Showing with 161 additions and 248 deletions
AppNavigation.js
......@@ -42,11 +42,13 @@ import SendEmailScreen from './screens/Public/SendEmailScreen';
import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen';
const defaultNavigationOptions = {
headerStyle: {
backgroundColor: color.primary,
borderColor: 'transparent',
height: 80,
},
headerStyle: [
{
backgroundColor: color.primary,
borderColor: 'transparent',
},
Platform.OS === 'ios' && { height: 80 },
],
headerTintColor: '#fff',
headerTitleStyle: {
fontSize: 18,
......
components/MeterCard.js
import React, { Component } from 'react';
import React from 'react';
import { View, Row, Icon, Text } from 'native-base';
import { Image, StyleSheet, Platform } from 'react-native';
import { BaseButton, TouchableOpacity } from 'react-native-gesture-handler';
import { color, theme } from '../constants/Styles';
import { connect } from 'react-redux';
import { getCurrentSelectedShadow } from '../reduxStore/actions/currentSelectedAction';
class MeterCard extends Component {
state = {
isPowerOn: false,
};
getShadow = () => {
// const deviceId = this.props.item.deviceId;
this.props.getCurrentSelectedShadow();
};
componentDidMount = async () => {
console.log('meter props', this.props);
};
componentDidUpdate = async (prevProps, prevState) => {
if (prevProps.item !== this.props.item) {
this.getShadow();
}
if (prevProps.shadow !== this.props.shadow) {
this.setInitState();
}
};
setInitState = () => {
const { shadow } = this.props;
this.setState({
isPowerOn: shadow.SM1.BK_S,
});
};
render() {
const { item } = this.props;
const { isPowerOn } = this.state;
return Platform.OS === 'android' ? (
<BaseButton onPress={this.props.onPressEachCard} rippleColor={'#fcc5c5'} style={styles.cardContainer}>
<View
accessible
style={[
styles.meterOn,
{ backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]}
>
<Text style={[theme.description, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
{item.img ? (
<Image source={{ uri: this.props.img }} style={styles.meterImgStyle} />
) : (
<View
style={[
styles.meterImgStyle,
{ flex: 1, justifyContent: 'center', alignContent: 'center' },
]}
>
<Text style={{ fontSize: 10 }}>No Img</Text>
</View>
)}
</View>
<View style={[theme.containerWithPadding, { flex: 2 }]}>
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name || 'Untitled'}</Text>
</Row>
<Text style={[theme.description]} numberOfLines={2}>
{item.description}
</Text>
<Row style={{ marginTop: 10 }}>
<View style={[styles.meterIconCover]}>
<Icon name="ios-notifications-outline" style={styles.meterIconStyle} />
</View>
<View style={styles.meterIconCover}>
<Icon name="md-alarm" style={styles.meterIconStyle} />
</View>
</Row>
</View>
<View style={[theme.rowContainer, { position: 'absolute', top: 10, right: 5 }]}>
<Icon name="wifi" type="FontAwesome" style={styles.iconStyle} />
<Icon name={item.isSharing ? 'users' : 'user'} type="FontAwesome" style={styles.iconStyle} />
<View style={[styles.online, { backgroundColor: item.isOnline ? '#10ca88' : color.primary }]} />
</View>
</BaseButton>
) : (
<TouchableOpacity onPress={this.props.onPressEachCard} style={styles.cardContainer}>
<View
style={[
styles.meterOn,
{ backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]}
>
<Text style={[theme.description, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
{item.img ? (
<Image source={{ uri: item.img }} style={styles.meterImgStyle} />
) : (
<View
style={[
styles.meterImgStyle,
{ flex: 1, justifyContent: 'center', alignContent: 'center' },
]}
>
<Text style={{ fontSize: 10 }}>No Img</Text>
</View>
)}
</View>
<View style={[theme.containerWithPadding, { flex: 2 }]}>
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name}</Text>
</Row>
<Text style={[theme.description]} numberOfLines={2}>
{item.description}
</Text>
<Row style={{ marginTop: 10 }}>
<View style={[styles.meterIconCover]}>
<Icon name="ios-notifications-outline" style={styles.meterIconStyle} />
</View>
<View style={styles.meterIconCover}>
<Icon name="md-alarm" style={styles.meterIconStyle} />
</View>
</Row>
</View>
<View style={[theme.rowContainer, { position: 'absolute', top: 10, right: 5 }]}>
<Icon name="wifi" type="FontAwesome" style={styles.iconStyle} />
<Icon name={item.isSharing ? 'users' : 'user'} type="FontAwesome" style={styles.iconStyle} />
<View style={[styles.online, { backgroundColor: item.isOnline ? '#10ca88' : color.primary }]} />
</View>
</TouchableOpacity>
);
}
}
const mapStateToProps = state => ({
shadow: state.currentSelectedDeviceReducer.shadow,
});
const MeterCard = ({ item, onPressEachCard }) => {
const renderContent = () => (
<>
<View
style={[
styles.meterOn,
{
backgroundColor: item.breakerStatus === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)',
},
]}
>
<Text style={[theme.description, theme.textWhite]}>{item.breakerStatus === 1 ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
{item.img ? (
<Image source={{ uri: item.img }} style={styles.meterImgStyle} />
) : (
<View style={[styles.meterImgStyle, { flex: 1, justifyContent: 'center', alignContent: 'center' }]}>
<Text style={{ fontSize: 10 }}>No Img</Text>
</View>
)}
</View>
<View style={[theme.containerWithPadding, { flex: 2 }]}>
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name || 'Untitled'}</Text>
</Row>
<Text style={[theme.description]} numberOfLines={2}>
{item.description}
</Text>
<Row style={{ marginTop: 10 }}>
<View style={[styles.meterIconCover]}>
<Icon name="ios-notifications-outline" style={styles.meterIconStyle} />
</View>
<View style={styles.meterIconCover}>
<Icon name="md-alarm" style={styles.meterIconStyle} />
</View>
</Row>
</View>
<View style={[theme.rowContainer, { position: 'absolute', top: 10, right: 5 }]}>
<Icon name="wifi" type="FontAwesome" style={styles.iconStyle} />
<Icon name={item.isSharing ? 'users' : 'user'} type="FontAwesome" style={styles.iconStyle} />
<View style={[styles.online, { backgroundColor: item.isOnline ? '#10ca88' : color.primary }]} />
</View>
</>
);
const mapDispatchToProps = {
getCurrentSelectedShadow,
return Platform.OS === 'android' ? (
<BaseButton onPress={onPressEachCard} rippleColor={'#fcc5c5'} style={styles.cardContainer}>
{renderContent()}
</BaseButton>
) : (
<TouchableOpacity onPress={onPressEachCard} style={styles.cardContainer}>
{renderContent()}
</TouchableOpacity>
);
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(MeterCard);
export default MeterCard;
const styles = StyleSheet.create({
meterOn: {
......
firebase.js
......@@ -12,8 +12,9 @@ const app = firebase.initializeApp({
messagingSenderId: '716807932076',
});
export default app;
const fireStore = app.firestore();
export { fireStore };
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
export default app;
export { fireStore, baseURL };
reduxStore/actions/allMainDeviceAction.js
import { fireStore } from '../../firebase';
import app, { fireStore, baseURL } from '../../firebase';
import axios from 'axios';
import _ from 'lodash';
export const GET_ALL_MAIN_DEVICE_INFO = 'GET_ALL_MAIN_DEVICE_INFO';
export const GET_ALL_MAIN_DEVICE_INFO_LOADING = 'GET_ALL_MAIN_DEVICE_INFO_LOADING';
......@@ -47,8 +49,11 @@ export const getAllMainDeviceInfo = () => async (dispatch, getState) => {
.get();
let ownerDeviceInfoData = await ownerDeviceInfo.data();
const breakerStatus = await getBreakerStatus(deviceId);
allMainDeviceInfoData.push(Object.assign(ownerDeviceInfoData, { deviceId, isSharing: false }));
allMainDeviceInfoData.push(
Object.assign(ownerDeviceInfoData, { deviceId, isSharing: false, breakerStatus })
);
})
);
......@@ -60,14 +65,46 @@ export const getAllMainDeviceInfo = () => async (dispatch, getState) => {
.get();
let sharingDeviceInfoData = await sharingDeviceInfo.data();
const breakerStatus = await getBreakerStatus(deviceId);
allMainDeviceInfoData.push(Object.assign(sharingDeviceInfoData, { deviceId, isSharing: true }));
allMainDeviceInfoData.push(
Object.assign(sharingDeviceInfoData, { deviceId, isSharing: true, breakerStatus })
);
})
);
dispatch(getAllMainDeviceInfoAction(allMainDeviceInfoData));
const sortedAllMainDeviceInfoData = _.orderBy(
allMainDeviceInfoData,
['breakerStatus', 'name', 'isSharing'],
['desc', 'asc', 'asc']
);
dispatch(getAllMainDeviceInfoAction(sortedAllMainDeviceInfoData));
} catch (error) {
dispatch(errorAction(error.message || error || 'Error'));
}
dispatch(loadingAction(false));
};
const getBreakerStatus = async deviceId => {
const URL = `${baseURL}/shadow/${deviceId}`;
const idToken = await app.auth().currentUser.getIdToken(true);
const options = {
headers: { Authorization: `Token ${idToken}` },
url: URL,
};
try {
const {
data: {
shadow: { value },
},
} = await axios(options);
const tempBreakerStatus = _.pick(value, ['SM1']);
const breakerStatus = tempBreakerStatus.SM1.BK_S;
return breakerStatus;
} catch (e) {
// console.log(e || 'error');
return 0;
}
};
reduxStore/actions/currentSelectedAction.js
import app, { fireStore } from '../../firebase';
import app, { fireStore, baseURL } from '../../firebase';
import axios from 'axios';
import _ from 'lodash';
import { getExistedConnectedDeviceAction } from './timersAction';
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
export const GET_CURRENT_SELECTED_DATA = 'GET_CURRENT_SELECTED_DATA';
export const GET_CURRENT_SELECTED_DATA_LOADING = 'GET_CURRENT_SELECTED_DATA_LOADING';
export const GET_CURRENT_SELECTED_DATA_ERROR = 'GET_CURRENT_SELECTED_DATA_ERROR';
......@@ -44,12 +42,12 @@ export const setDesiredSahdowAction = desiredBreakerStatus => ({
desiredBreakerStatus,
});
export const getCurrentSelectedShadow = () => async (dispatch, getState) => {
export const getCurrentSelectedShadow = deviceId => async (dispatch, getState) => {
const { currentSelectedDeviceReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const URL = `${baseURL}/shadow/${selectedDeviceId}`;
const URL = `${baseURL}/shadow/${deviceId || selectedDeviceId}`;
const idToken = await app.auth().currentUser.getIdToken(true);
const options = {
headers: { Authorization: `Token ${idToken}` },
......
screens/Private/ProfileScreen/ProfileScreen.js
......@@ -5,7 +5,6 @@ import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { theme, color } from '../../../constants/Styles';
import { connect } from 'react-redux';
import { hidden } from 'ansi-colors';
import { width } from '../../../constants/Layout';
import { isIphoneX } from '../../../utils/isPhoneX';
......
screens/Private/SettingScreen/Setting.js
......@@ -52,7 +52,7 @@ class updateDetailScreen extends Component {
toggleModal = visible => this.setState({ isVisible: visible });
confirm = () => {
handleConfirm = () => {
this.props.updateDetail(this.state.field, this.state.data);
this.toggleModal(false);
this.props.navigation.navigate('Setting');
......@@ -65,17 +65,7 @@ class updateDetailScreen extends Component {
<Text style={[theme.description, theme.mt2, { marginLeft: 25, color: '#a8a8a8' }]}>
{breaker.toUpperCase()}
</Text>
<View
style={[
{
backgroundColor: color.white,
paddingHorizontal: 30,
paddingTop: 10,
paddingBottom: 20,
},
theme.mt2,
]}
>
<View style={[styles.editFieldContainer, theme.mt2]}>
<Text style={[theme.normalText, theme.textDark]}>{field}</Text>
{this.state.field === 'RCBO' ? (
<>
......@@ -85,12 +75,7 @@ class updateDetailScreen extends Component {
minimumValue={0}
maximumValue={2}
step={1}
thumbStyle={{
width: 20,
height: 20,
borderWidth: 3,
borderColor: 'rgba(238, 84, 84, 0.2)',
}}
thumbStyle={styles.thumbStyle}
trackStyle={{ height: 2, backgroundColor: color.lightGrey }}
minimumTrackTintColor={color.lightRed}
maximumTrackTintColor={color.lightGrey}
......@@ -98,16 +83,7 @@ class updateDetailScreen extends Component {
onSlidingComplete={value => this.setState({ indexData: value })}
/>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 8,
marginHorizontal: 15,
}}
>
<View style={styles.labelContainer}>
{this.state.rcboOptions.map((item, index) => (
<Text
key={`label${item.value}`}
......@@ -125,15 +101,7 @@ class updateDetailScreen extends Component {
</View>
</>
) : (
<View
style={{
marginHorizontal: Platform.OS === 'android' ? -5 : 0,
paddingTop: Platform.OS === 'android' ? 0 : 10,
paddingBottom: Platform.OS === 'android' ? 0 : 10,
borderBottomWidth: 1,
borderColor: '#efefef',
}}
>
<View style={styles.textInputContainer}>
<TextInput
multiline={true}
style={[theme.description, { fontSize: 14 }]}
......@@ -143,17 +111,7 @@ class updateDetailScreen extends Component {
</View>
)}
</View>
<Button
full
style={{
backgroundColor: color.primary,
width: width * 0.75,
alignSelf: 'center',
borderRadius: 100,
marginTop: 40,
}}
onPress={() => this.toggleModal(true)}
>
<Button full style={styles.saveButton} onPress={() => this.toggleModal(true)}>
<Text style={[theme.normalText, theme.textWhite]}>SAVE</Text>
</Button>
<Overlay
......@@ -172,7 +130,7 @@ class updateDetailScreen extends Component {
<Button transparent style={{ width: '40%' }} onPress={() => this.toggleModal(false)}>
<Text style={{ color: color.grey }}>CANCEL</Text>
</Button>
<Button style={styles.saveBtn} rounded onPress={() => this.confirm()}>
<Button style={styles.saveButtonModal} rounded onPress={() => this.handleConfirm()}>
<Text>SAVE</Text>
</Button>
</View>
......@@ -198,27 +156,40 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'space-around',
},
saveBtn: {
saveButtonModal: {
width: '40%',
backgroundColor: color.primary,
color: color.white,
justifyContent: 'center',
borderRadius: 100,
},
container: {
editFieldContainer: {
backgroundColor: color.white,
paddingHorizontal: 30,
paddingTop: 10,
paddingBottom: 20,
},
thumbStyle: { width: 20, height: 20, borderWidth: 3, borderColor: 'rgba(238, 84, 84, 0.2)' },
labelContainer: {
flex: 1,
justifyContent: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 8,
marginHorizontal: 15,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
textInputContainer: {
marginHorizontal: Platform.OS === 'android' ? -5 : 0,
paddingTop: Platform.OS === 'android' ? 0 : 10,
paddingBottom: Platform.OS === 'android' ? 0 : 10,
borderBottomWidth: 1,
borderColor: '#efefef',
},
saveButton: {
backgroundColor: color.primary,
width: width * 0.75,
alignSelf: 'center',
borderRadius: 100,
marginTop: 40,
},
snapsliderContainer: {},
snapslider: {},
snapsliderItemWrapper: {},
snapsliderItem: {},
});
screens/Private/SettingScreen/SettingScreen.js
import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { View, StyleSheet, TouchableOpacity, TouchableHighlight } from 'react-native';
import { ListItem, Body, Text, Icon, Right, Switch, List } from 'native-base';
import { theme, color } from '../../../constants/Styles';
import { connect } from 'react-redux';
import { Overlay } from 'react-native-elements';
import { TouchableHighlight } from 'react-native-gesture-handler';
import { updateDetail } from '../../../reduxStore/actions/currentSelectedAction';
// import { TouchableHighlight } from 'react-native-gesture-handler';
class SettingScreen extends Component {
static navigationOptions = ({ navigation }) => ({
......
screens/Private/SettingScreen/ShareEmailScreen.js
import React, { Component } from 'react';
import { Text, List, ListItem, Body, Button } from 'native-base';
import { Text, Button } from 'native-base';
import { color, theme } from '../../../constants/Styles';
import { View, StyleSheet, TextInput } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
......@@ -25,20 +25,18 @@ export default class ShareEmailScreen extends Component {
email: '',
};
toggleModal(visible) {
this.setState({
isVisible: visible,
});
}
submitSuccess() {
toggleModal = visible => this.setState({ isVisible: visible });
submitSuccess = () => {
console.log('Submit Success!');
this.toggleModal(true);
}
};
submit = values => {
this.submitSuccess();
this.setState({ email: values.email });
};
render() {
const { email, isVisible } = this.state;
return (
......@@ -51,22 +49,15 @@ export default class ShareEmailScreen extends Component {
width={'90%'}
overlayStyle={styles.overlayStyle}
isVisible={isVisible}
onBackdropPress={() => {
this.toggleModal(!isVisible);
}}
onBackdropPress={() => this.toggleModal(false)}
>
<>
<Text style={[theme.normalText, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Are you sure to share this device with {email}?
{`Are you sure to share this device
with ${email}?`}
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button
transparent
style={{ width: '40%' }}
onPress={() => {
this.toggleModal(!isVisible);
}}
>
<Button transparent style={{ width: '40%' }} onPress={() => this.toggleModal(false)}>
<Text style={{ color: color.grey }}>CANCEL</Text>
</Button>
<Button style={styles.saveBtn} onPress={this.save} rounded>
......
screens/Private/SmartMeterScreen/McbLinkScreen.js
......@@ -153,7 +153,7 @@ class McbLinkScreen extends React.Component {
<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
<Icon name="md-funnel" style={theme.normalText}></Icon>
<Icon name="md-funnel" style={theme.normalText} />
</View>
</View>
);
......@@ -228,7 +228,7 @@ class McbLinkScreen extends React.Component {
);
}
}}
ItemSeparatorComponent={() => <View style={{ margin: 5 }}></View>}
ItemSeparatorComponent={() => <View style={{ margin: 5 }} />}
keyExtractor={({ item, index }) => {
`elec${index}`;
}}
......@@ -415,11 +415,7 @@ class McbLinkScreen extends React.Component {
style={[styles.addModal]}
position={'bottom'}
isOpen={this.state.isAddElectronicVisible}
onClosed={() =>
this.setState({
isAddElectronicVisible: false,
})
}
onClosed={() => this.setState({ isAddElectronicVisible: false })}
>
{this.renderAddModal()}
</Modal>
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
......@@ -41,9 +41,7 @@ class SmartMeterScreen extends PureComponent {
componentDidMount = async () => {
await this.getData();
this._isMounted = true;
this.setState({
data: this.props.allMainDeviceInfo,
});
this.setState({ data: this.props.allMainDeviceInfo });
};
componentDidUpdate = (prevProps, prevState) => {
......@@ -120,7 +118,7 @@ class SmartMeterScreen extends PureComponent {
style={[theme.container]}
contentContainerStyle={[theme.containerWithPadding, { paddingBottom: isIphoneX() ? 90 : 55 }]} //iPhoneX BottomSpace = 34
data={data}
extraData={this.props}
extraData={this.props || this.state}
keyExtractor={(item, index) => item.deviceId}
ItemSeparatorComponent={() => <View style={theme.mt1} />}
ListEmptyComponent={() => (
......
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