Skip to content

S
safetcut-app
Commit 4a48ea3c by HaOuiha
Options

update mainscreen

parent 3557838e
Showing with 66 additions and 23 deletions
android/app/src/main/java/com/rn_safetcutapp/MainApplication.java
...@@ -7,7 +7,6 @@ import com.facebook.react.PackageList; ...@@ -7,7 +7,6 @@ import com.facebook.react.PackageList;
import com.facebook.hermes.reactexecutor.HermesExecutorFactory; import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
import com.facebook.react.bridge.JavaScriptExecutorFactory; import com.facebook.react.bridge.JavaScriptExecutorFactory;
import com.facebook.react.ReactApplication; import com.facebook.react.ReactApplication;
import com.horcrux.svg.SvgPackage;
import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage; import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader; import com.facebook.soloader.SoLoader;
......
components/MeterCard.js
...@@ -13,10 +13,16 @@ class MeterCard extends Component { ...@@ -13,10 +13,16 @@ class MeterCard extends Component {
style={[ style={[
theme.rowContainer, theme.rowContainer,
{ {
borderRadius: 8,
marginBottom: 10, marginBottom: 10,
height: 136, height: 136,
borderRadius: 8, borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5, elevation: 5,
backgroundColor: '#fff', backgroundColor: '#fff',
}, },
...@@ -69,7 +75,6 @@ class MeterCard extends Component { ...@@ -69,7 +75,6 @@ class MeterCard extends Component {
style={[ style={[
theme.rowContainer, theme.rowContainer,
{ {
borderRadius: 8,
marginBottom: 10, marginBottom: 10,
height: 136, height: 136,
borderRadius: 8, borderRadius: 8,
...@@ -80,6 +85,7 @@ class MeterCard extends Component { ...@@ -80,6 +85,7 @@ class MeterCard extends Component {
}, },
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5,
backgroundColor: '#fff', backgroundColor: '#fff',
}, },
]} ]}
......
reduxStore/actions/currentSelectedAction.js
...@@ -46,7 +46,7 @@ export const updateDetail = (type, value) => async (dispatch, getState) => { ...@@ -46,7 +46,7 @@ export const updateDetail = (type, value) => async (dispatch, getState) => {
}; };
try { try {
const newData = getNewData(); const newData = getNewData();
dispatch(getCurrentSelectedData(newData)); dispatch(getCurrentSelectedDataAction(newData));
const ref = getRef(); const ref = getRef();
await ref.update(newData); await ref.update(newData);
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, Text, Content, Card, Row, Right, Left, Switch, Icon } from 'native-base'; import { View, Text, Content, Card, Row, Right, Left, Switch, Icon } from 'native-base';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { FlatList, StyleSheet, ActivityIndicator } from 'react-native'; import { FlatList, StyleSheet, ActivityIndicator, RefreshControl, ScrollView } from 'react-native';
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 { getCurrentSelectedData } from '../../../reduxStore/actions/currentSelectedAction'; import { getCurrentSelectedData } from '../../../reduxStore/actions/currentSelectedAction';
...@@ -42,15 +42,20 @@ class SmartMeterDetailScreen extends Component { ...@@ -42,15 +42,20 @@ class SmartMeterDetailScreen extends Component {
isPowerOn: false, isPowerOn: false,
mcbLinksInfo: [], mcbLinksInfo: [],
mcbLinksListMounted: false,
subBreakersInfo: [], subBreakersInfo: [],
}; };
constructor(props) { constructor(props) {
super(props); super(props);
this.getData();
}
getData = () => {
const currentSelectedDeviceData = this.props.navigation.getParam('currentSelectedDeviceData'); const currentSelectedDeviceData = this.props.navigation.getParam('currentSelectedDeviceData');
this.props.getCurrentSelectedData(currentSelectedDeviceData); this.props.getCurrentSelectedData(currentSelectedDeviceData);
this.props.getTimers(); this.props.getTimers();
} };
componentDidMount = () => {}; componentDidMount = () => {};
...@@ -60,11 +65,11 @@ class SmartMeterDetailScreen extends Component { ...@@ -60,11 +65,11 @@ class SmartMeterDetailScreen extends Component {
} }
if (prevProps.existedMcbLinksData !== this.props.existedMcbLinksData) { if (prevProps.existedMcbLinksData !== this.props.existedMcbLinksData) {
this.setMcbLinksState(); this.setMcbLinksState();
this.setState({ mcbLinksListMounted: true });
} }
if (prevProps.existedSubBreakersData !== this.props.existedSubBreakersData) { if (prevProps.existedSubBreakersData !== this.props.existedSubBreakersData) {
this.setSubBreakersState(); this.setSubBreakersState();
} }
console.log(this.state);
}; };
setMainCardData = async () => { setMainCardData = async () => {
...@@ -91,7 +96,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -91,7 +96,7 @@ class SmartMeterDetailScreen extends Component {
renderMainDatailsCard = () => { renderMainDatailsCard = () => {
const { name, description, rcbo, isOnline, isPowerOn } = this.state; const { name, description, rcbo, isOnline, isPowerOn } = this.state;
return ( return (
<Card style={[theme.containerWithPadding, { borderRadius: 10, marginBottom: 20 }]}> <Card style={{ padding: 15, marginBottom: 20, borderRadius: 10, borderColor: color.white }}>
<Row> <Row>
<Left> <Left>
<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{name}</Text> <Text style={[theme.smallTitle, { color: color.darkGrey }]}>{name}</Text>
...@@ -123,7 +128,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -123,7 +128,7 @@ class SmartMeterDetailScreen extends Component {
styles.currentCard, styles.currentCard,
{ {
backgroundColor: item.value > item.limit ? color.primary : color.white, backgroundColor: item.value > item.limit ? color.primary : color.white,
marginBottom: 8, borderColor: color.white,
}, },
index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 }, index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 },
]} ]}
...@@ -143,7 +148,17 @@ class SmartMeterDetailScreen extends Component { ...@@ -143,7 +148,17 @@ class SmartMeterDetailScreen extends Component {
}, },
]} ]}
> >
{item.value}{' '} {item.value}
{/* <AnimateNumber
value={item.value}
timing={1}
formatter={val => {
return parseInt(val);
}}
steps={10}
interval={1}
/> */}
<Text <Text
style={[ style={[
theme.smDescription, theme.smDescription,
...@@ -153,7 +168,7 @@ class SmartMeterDetailScreen extends Component { ...@@ -153,7 +168,7 @@ class SmartMeterDetailScreen extends Component {
}, },
]} ]}
> >
{item.unit} {` ${item.unit}`}
</Text> </Text>
</Text> </Text>
</Card> </Card>
...@@ -179,7 +194,11 @@ class SmartMeterDetailScreen extends Component { ...@@ -179,7 +194,11 @@ class SmartMeterDetailScreen extends Component {
<View> <View>
<Text style={[theme.normalText, theme.textDark]}> <Text style={[theme.normalText, theme.textDark]}>
{subBreaker.name {subBreaker.name
? `Sub Breaker ${indexSubBreakers + 1} [${subBreaker.name}]` ? `Sub Breaker ${indexSubBreakers + 1} [${
subBreaker.name.length < 20
? subBreaker.name
: `${subBreaker.name.substr(0, 17)}...`
}]`
: `Sub Breaker ${indexSubBreakers + 1}`} : `Sub Breaker ${indexSubBreakers + 1}`}
</Text> </Text>
<Text style={theme.description}>{subBreaker.description}</Text> <Text style={theme.description}>{subBreaker.description}</Text>
...@@ -199,12 +218,14 @@ class SmartMeterDetailScreen extends Component { ...@@ -199,12 +218,14 @@ class SmartMeterDetailScreen extends Component {
<Left style={{ flex: 4 }}> <Left style={{ flex: 4 }}>
<Text style={[theme.normalText, theme.textDark]}> <Text style={[theme.normalText, theme.textDark]}>
{mcbLink.name {mcbLink.name
? `MCB Link ${indexMcbLinks + 1} [${mcbLink.name}]` ? `MCB Link ${indexMcbLinks + 1} [${
mcbLink.name.length < 20 ? mcbLink.name : `${mcbLink.name.substr(0, 17)}...`
}]`
: `MCB Link ${indexMcbLinks + 1}`} : `MCB Link ${indexMcbLinks + 1}`}
</Text> </Text>
</Left> </Left>
<Right> <Right>
<Icon style={styles.mcbExpand} name={mcbLink.isExpand ? 'arrow-up' : 'arrow-down'} /> <Icon style={styles.mcbExpand} name={mcbLink.isExpand ? 'ios-arrow-up' : 'ios-arrow-down'} />
</Right> </Right>
</Row> </Row>
{mcbLink.isExpand && ( {mcbLink.isExpand && (
...@@ -220,47 +241,63 @@ class SmartMeterDetailScreen extends Component { ...@@ -220,47 +241,63 @@ class SmartMeterDetailScreen extends Component {
}; };
render() { render() {
const { mcbLinksInfo } = this.state; const { mcbLinksInfo, mcbLinksListMounted } = this.state;
const { isLoading } = this.props; const { isLoadingValues, isLoadingList } = this.props;
return ( return (
<Content style={[theme.container, theme.containerWithPadding]}> <ScrollView
style={[theme.container]}
contentContainerStyle={[theme.containerWithPadding]}
refreshControl={
<RefreshControl
refreshing={mcbLinksListMounted && (isLoadingValues || isLoadingList)}
onRefresh={this.getData}
title="Pull to refresh"
tintColor={color.primary}
titleColor={color.darkGrey}
colors={[color.primary]}
/>
}
>
{this.renderMainDatailsCard()} {this.renderMainDatailsCard()}
<FlatList <FlatList
data={MockData} data={MockData}
renderItem={({ item, index }) => this.renderCards(item, index)} renderItem={({ item, index }) => this.renderCards(item, index)}
contentContainerStyle={{ overflow: 'hidden' }}
numColumns={3} numColumns={3}
keyExtractor={(item, index) => `DeviceValues${item.name}`} keyExtractor={(item, index) => `DeviceValues${item.name}`}
/> />
{isLoading ? ( {isLoadingList && !mcbLinksListMounted ? (
<View style={{ marginTop: 20 }}> <View style={{ marginTop: 20 }}>
<ActivityIndicator color={color.primary} /> <ActivityIndicator color={color.primary} />
</View> </View>
) : ( ) : (
<Card <Card
style={{ style={{
borderColor: color.white,
borderRadius: 8, borderRadius: 8,
overflow: 'hidden',
marginTop: 20, marginTop: 20,
marginBottom: isIphoneX() ? 130 : 90, marginBottom: isIphoneX() ? 115 : 75,
}} }}
> >
<FlatList <FlatList
data={mcbLinksInfo} data={mcbLinksInfo}
extraData={this.state} extraData={this.state}
contentContainerStyle={{ overflow: 'hidden' }}
keyExtractor={(item, index) => `mcbLinkItem${item.name}`} keyExtractor={(item, index) => `mcbLinkItem${item.name}`}
renderItem={({ item, index }) => this.renderMCBLinksList(item, index)} renderItem={({ item, index }) => this.renderMCBLinksList(item, index)}
/> />
</Card> </Card>
)} )}
</Content> </ScrollView>
); );
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({
allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo, allMainDeviceInfo: state.allMainDeviceReducer.allMainDeviceInfo,
isLoading: state.timersReducer.isLoading, isLoadingValues: state.allMainDeviceReducer.isLoading,
isLoadingList: state.timersReducer.isLoading,
existedMcbLinksData: state.timersReducer.existedMcbLinksData, existedMcbLinksData: state.timersReducer.existedMcbLinksData,
existedSubBreakersData: state.timersReducer.existedSubBreakersData, existedSubBreakersData: state.timersReducer.existedSubBreakersData,
currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData, currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
......
screens/Private/TimerScreen/TimerScreen.android.js
...@@ -360,6 +360,7 @@ class TimerScreen extends PureComponent { ...@@ -360,6 +360,7 @@ class TimerScreen extends PureComponent {
<TouchableNativeFeedback <TouchableNativeFeedback
key={`repeatOn${index}`} key={`repeatOn${index}`}
onPress={() => this.toggleRepeatDays(index)} onPress={() => this.toggleRepeatDays(index)}
delayPressIn={0}
> >
<View style={[styles.dayBtn, { borderColor: dynamicColor }]}> <View style={[styles.dayBtn, { borderColor: dynamicColor }]}>
<Text style={[theme.normalText, { color: dynamicColor }]}> <Text style={[theme.normalText, { color: dynamicColor }]}>
...@@ -642,7 +643,7 @@ const styles = StyleSheet.create({ ...@@ -642,7 +643,7 @@ const styles = StyleSheet.create({
width: 35, width: 35,
height: 35, height: 35,
borderWidth: 1, borderWidth: 1,
borderRadius: 18, borderRadius: 50,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
......
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