Skip to content

S
safetcut-app
Commit 7d3fab4c by HaOuiha
Options

update cards smartmeterpage

parent dd0b7c8b
Showing with 45 additions and 50 deletions
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -7,13 +7,13 @@ import { connect } from 'react-redux';
import { getCurrentSelectedData } from '../../../reduxStore/actions/currentSelectedAction';
import { getTimers } from '../../../reduxStore/actions/timersAction';
const LimitCurrent = [
{ name: 'AC Volt', limit: 1000 },
{ name: 'AC Current', limit: 1000 },
{ name: 'Watt', limit: 1000 },
{ name: 'Leakage Current', limit: 1000 },
{ name: 'Units/KWh', limit: 1000 },
{ name: 'Arcing Fault', limit: 1000 },
const MockData = [
{ name: 'AC Volt', limit: 1000, value: 100, unit: 'V' },
{ name: 'AC Current', limit: 1000, value: 100, unit: 'A' },
{ name: 'Watt', limit: 1000, value: 100, unit: 'V' },
{ name: 'Leakage Current', limit: 1000, value: 10000, unit: 'mA' },
{ name: 'Units/KWh', limit: 1000, value: 100, unit: '' },
{ name: 'Arcing Fault', limit: 1000, value: 100, unit: '' },
];
class SmartMeterDetailScreen extends Component {
......@@ -72,7 +72,7 @@ class SmartMeterDetailScreen extends Component {
renderMainDatailsCard = () => {
const { name, description, rcbo, isOnline, isPowerOn } = this.state;
return (
<Card style={[theme.containerWithPadding, { borderRadius: 10 }]}>
<Card style={[theme.containerWithPadding, { borderRadius: 10, marginBottom: 20 }]}>
<Row>
<Left>
<Text style={[theme.smallTitle, { color: color.darkGrey }]}>{name}</Text>
......@@ -97,25 +97,21 @@ class SmartMeterDetailScreen extends Component {
);
};
renderCurrent(item, index) {
renderCards(item, index) {
return (
<Card
style={[
styles.currentCard,
{
backgroundColor: item.number > LimitCurrent[index].limit ? color.primary : color.white,
backgroundColor: item.value > item.limit ? color.primary : color.white,
marginBottom: 8,
},
index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 },
]}
>
<Text
style={[
theme.smDescription,
{ color: item.number > LimitCurrent[index].limit ? color.white : color.grey },
]}
>
<Text style={[theme.smDescription, { color: item.value > item.limit ? color.white : color.grey }]}>
{item.name}
</Text>
<Text
numberOfLines={1}
style={[
......@@ -124,17 +120,17 @@ class SmartMeterDetailScreen extends Component {
theme.mt1,
{
textAlign: 'right',
color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
color: item.value > item.limit ? color.white : color.darkGrey,
},
]}
>
{item.number}{' '}
{item.value}{' '}
<Text
style={[
theme.smDescription,
theme.textDark,
{
color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
color: item.value > item.limit ? color.white : color.darkGrey,
},
]}
>
......@@ -144,6 +140,7 @@ class SmartMeterDetailScreen extends Component {
</Card>
);
}
renderMCBLink(item, index) {
const sb = this.state.sb;
......@@ -186,45 +183,38 @@ class SmartMeterDetailScreen extends Component {
);
}
// full incomplete row
formatGridData(unformatData) {
let data = unformatData;
const numberOfFullRows = Math.floor(data.length / 3);
let numberOfElementsLastRow = data.length - numberOfFullRows * 3;
while (numberOfElementsLastRow !== 3 && numberOfElementsLastRow !== 0) {
data.push({ name: 'empty', number: null, unit: null });
numberOfElementsLastRow = numberOfElementsLastRow + 1;
}
return data;
}
// // full incomplete row
// formatGridData(unformatData) {
// let data = unformatData;
// const numberOfFullRows = Math.floor(data.length / 3);
// let numberOfElementsLastRow = data.length - numberOfFullRows * 3;
// while (numberOfElementsLastRow !== 3 && numberOfElementsLastRow !== 0) {
// data.push({ name: 'empty', number: null, unit: null });
// numberOfElementsLastRow = numberOfElementsLastRow + 1;
// }
// return data;
// }
render() {
const { data } = this.state;
return (
<Content style={[theme.container, theme.containerWithPadding]}>
{this.renderMainDatailsCard()}
{/* <FlatList
data={this.formatGridData(MainBreaker.Ecurrent)}
renderItem={({ item, index }) => {
if (item.name == 'empty') {
return <Card transparent style={{ flex: 1, padding: 10 }} />;
} else {
return this.renderCurrent(item, index);
}
}}
<FlatList
data={MockData}
renderItem={({ item, index }) => this.renderCards(item, index)}
numColumns={3}
keyExtractor={(item, index) => index.toString()}
style={{ paddingTop: 20 }}
keyExtractor={(item, index) => item.name}
// style={{ paddingTop: 20, overflow: 'hidden' }}
/>
<Card style={{ borderRadius: 8, overflow: 'hidden', marginTop: 20, marginBottom: 40 }}>
{/* <Card style={{ borderRadius: 8, overflow: 'hidden', marginTop: 20, marginBottom: 40 }}>
<FlatList
data={[]}
renderItem={({ item, index }) => this.renderMCBLink(item, index)}
ListEmptyComponent={() => <Text style={[{ padding: 10 }, theme.normalText]}>No MCB Link</Text>}
/>
</Card>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} /> */}
</Card> */}
</Content>
);
}
......
screens/Private/TimerScreen/TimerScreen.android.js
......@@ -37,7 +37,6 @@ const initTimeSetting = {
isActive: false,
isPowerOn: false,
timer: new Date(),
repeatOn: [
{ id: 0, isRepeat: false, day: 'Sunday' },
{ id: 1, isRepeat: false, day: 'Monday' },
......@@ -90,10 +89,12 @@ class TimerScreen extends PureComponent {
};
setPickerSelectData = () => {
let pickerSelectData = [{ label: 'Main Device', value: 'main' }];
const { currentSelectedData } = this.props;
let pickerSelectData = [{ label: `Main Device [${currentSelectedData.name}]`, value: 'main' }];
if (this.props.existedData) {
this.props.existedData.map((mcbLink, index) => {
pickerSelectData.push({ label: `MCB Link ${index + 1}`, value: index + 1 });
pickerSelectData.push({ label: `MCB Link ${index + 1} `, value: index + 1 });
});
this.setState({ pickerSelectData });
}
......@@ -109,7 +110,10 @@ class TimerScreen extends PureComponent {
});
let subBreakerList = new Array(existedSubBreakerListLength).fill().map((el, index) => {
return { id: index + 1, selected: false };
return {
id: index + 1,
selected: false,
};
});
this.setState({ subBreakerList });
......@@ -305,7 +309,7 @@ class TimerScreen extends PureComponent {
containerStyle={styles.checkboxContainer}
fontFamily={'Avenir-Roman'}
textStyle={{ fontWeight: 'normal', color: color.darkGrey }}
title={'Sub breaker ' + item.id}
title={`Sub breaker ${item.id} `}
checked={this.state.subBreakerList[index].selected}
checkedIcon={
<Icon
......@@ -555,6 +559,7 @@ class TimerScreen extends PureComponent {
}
const mapStateToProps = state => ({
currentSelectedData: state.currentSelectedDeviceReducer.currentSelectedData,
existedData: state.timersReducer.existedData,
allTimers: state.timersReducer.allTimers,
selectedTimerData: state.timersReducer.selectedTimerData,
......
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