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