Skip to content

S
safetcut-app
Commit 2071f726 by Tonk Committed by HaOuiha
Options

refactor smart detail and notification page

parent ad2a0e74
Showing with 60 additions and 78 deletions
screens/Private/NotificationScreen/NotificationScreen.js
...@@ -3,12 +3,13 @@ import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base'; ...@@ -3,12 +3,13 @@ import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView } from 'react-native'; import { View, StyleSheet, FlatList, ScrollView } from 'react-native';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements'; import { SearchBar } from 'react-native-elements';
import { format, sort } from 'date-fns';
const mockdata = [ const mockdata = [
{ time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1' }, { time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'notification' },
{ time: 1566207933, user: 'Sukanya161', log: 'Switch off sub breaker1' }, { time: 1566299471, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
{ time: 1566086400, user: 'Sukanya161', log: 'Switch on sub breaker1' }, { time: 1566271564, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'log' },
{ time: 1566086400, user: 'Sukanya161', log: 'Switch off sub breaker1' }, { time: 1573514603, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
]; ];
export default class NotificationScreen extends React.Component { export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
...@@ -18,17 +19,7 @@ export default class NotificationScreen extends React.Component { ...@@ -18,17 +19,7 @@ export default class NotificationScreen extends React.Component {
updateSearch = search => { updateSearch = search => {
this.setState({ search }); this.setState({ search });
}; };
render() { renderActivityCard(data) {
const TabStyle = {
textStyle: theme.description,
activeTextStyle: [theme.description, theme.textWhite],
tabStyle: { backgroundColor: color.white, borderRadius: 100, margin: 10 },
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg },
};
const ActivityCard = () => {
const { username, time, activity } = this.props;
return ( return (
<View <View
style={[ style={[
...@@ -59,16 +50,25 @@ export default class NotificationScreen extends React.Component { ...@@ -59,16 +50,25 @@ export default class NotificationScreen extends React.Component {
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}> <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}> <View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
{/* operate's username */} {/* operate's username */}
<Text style={[theme.smDescription]}>{username || 'Sukanya161'}</Text> <Text style={[theme.smDescription]}>{data.user || 'JohnDoe'}</Text>
{/* operate time */} {/* operate time */}
<Text style={[theme.smDescription]}>{time || '10:17 PM'}</Text> <Text style={[theme.smDescription]}>{format(data.time, 'hh:mm A') || '00:00 AM'}</Text>
</View> </View>
{/* operate activity. */} {/* operate activity. */}
<Text style={[theme.normalText, theme.textDark]}>{activity || 'Switch on sub breaker1'}</Text> <Text style={[theme.normalText, theme.textDark]}>{data.log || 'Unknown activity'}</Text>
</View> </View>
</View> </View>
); );
}
render() {
const TabStyle = {
textStyle: theme.description,
activeTextStyle: [theme.description, theme.textWhite],
tabStyle: { backgroundColor: color.white, borderRadius: 100, margin: 10 },
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg },
}; };
const today = new Date();
return ( return (
<View style={theme.container}> <View style={theme.container}>
<Tabs <Tabs
...@@ -108,14 +108,10 @@ export default class NotificationScreen extends React.Component { ...@@ -108,14 +108,10 @@ export default class NotificationScreen extends React.Component {
Today {/* Today/Yesterday/date.. */} Today {/* Today/Yesterday/date.. */}
</Text> </Text>
{/* >>log list */} {/* >>log list */}
<FlatList data={[1, 2]} renderItem={() => <ActivityCard />} /> <FlatList
</View> data={mockdata}
<View> renderItem={({ item, index }) => this.renderActivityCard(item)}
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}> />
Yesterday {/* Today/Yesterday/date.. */}
</Text>
{/* >>log list */}
<FlatList data={[1, 2, 3]} renderItem={() => <ActivityCard />} />
</View> </View>
</ScrollView> </ScrollView>
</Tab> </Tab>
......
screens/Private/SettingScreen/Setting.js
...@@ -57,6 +57,7 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -57,6 +57,7 @@ export default class SmartMeterDetailScreen extends Component {
style={theme.description} style={theme.description}
onChangeText={data => this.setState({ data })} onChangeText={data => this.setState({ data })}
value={data} value={data}
keyboardType={typeof data === 'number' ? 'number-pad' : 'default'}
/> />
</View> </View>
</Body> </Body>
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
...@@ -133,39 +133,23 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -133,39 +133,23 @@ export default class SmartMeterDetailScreen extends Component {
}, },
], ],
}; };
renderCurrent(item, index) {
// 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() {
// Electric Current card
const Current = props => {
return ( return (
<Card <Card
style={[ style={[
styles.currentCard, styles.currentCard,
{ {
backgroundColor: backgroundColor: item.number > LimitCurrent[index].limit ? color.primary : color.white,
props.number > LimitCurrent[props.index].limit ? color.primary : color.white,
}, },
]} ]}
> >
<Text <Text
style={[ style={[
theme.smDescription, theme.smDescription,
{ color: props.number > LimitCurrent[props.index].limit ? color.white : color.grey }, { color: item.number > LimitCurrent[index].limit ? color.white : color.grey },
]} ]}
> >
{props.name} {item.name}
</Text> </Text>
<Text <Text
...@@ -176,30 +160,28 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -176,30 +160,28 @@ export default class SmartMeterDetailScreen extends Component {
theme.mt1, theme.mt1,
{ {
textAlign: 'right', textAlign: 'right',
color: props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey, color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
}, },
]} ]}
> >
{props.number}{' '} {item.number}{' '}
<Text <Text
style={[ style={[
theme.smDescription, theme.smDescription,
theme.textDark, theme.textDark,
{ {
color: color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey,
}, },
]} ]}
> >
{props.unit} {item.unit}
</Text> </Text>
</Text> </Text>
</Card> </Card>
); );
}; }
// MCB Link renderMCBLink(item, index) {
const MCBLink = props => { const sb = this.state.sb;
const index = props.index;
return ( return (
<View> <View>
<Row <Row
...@@ -211,44 +193,49 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -211,44 +193,49 @@ export default class SmartMeterDetailScreen extends Component {
} }
> >
<Left> <Left>
<Text style={[theme.normalText, theme.textDark]}>{props.item.title}</Text> <Text style={[theme.normalText, theme.textDark]}>{item.title}</Text>
</Left> </Left>
<Right> <Right>
<Icon style={styles.mcbExpand} name={sb[index].expand ? 'arrow-up' : 'arrow-down'} /> <Icon style={styles.mcbExpand} name={sb[index].expand ? 'arrow-up' : 'arrow-down'} />
</Right> </Right>
</Row> </Row>
{sb[index].expand {sb[index].expand ? item.sub.map((subItem, index) => this.renderSubbreaker(subItem)) : null}
? props.item.sub.map((subItem, index) => (
<SubBreaker
key={index}
title={subItem.title}
description={subItem.description}
status={subItem.status}
/>
))
: null}
</View> </View>
); );
}; }
// Sub Breaker renderSubbreaker(item) {
const SubBreaker = props => {
return ( return (
<View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}> <View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}>
<Row> <Row>
<Left> <Left>
<View> <View>
<Text style={[theme.normalText, theme.textDark]}>{props.title}</Text> <Text style={[theme.normalText, theme.textDark]}>{item.title}</Text>
<Text style={[theme.description]}>{props.description}</Text> <Text style={[theme.description]}>{item.description}</Text>
</View> </View>
</Left> </Left>
<Right> <Right>
<Switch value={props.status} /> <Switch value={item.status} />
</Right> </Right>
</Row> </Row>
</View> </View>
); );
}; }
const sb = this.state.sb;
// 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() {
// Electric Current card
const Current = props => {};
return ( return (
<Content style={[theme.container, theme.containerWithPadding]}> <Content style={[theme.container, theme.containerWithPadding]}>
...@@ -295,7 +282,7 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -295,7 +282,7 @@ export default class SmartMeterDetailScreen extends Component {
if (item.name == 'empty') { if (item.name == 'empty') {
return <Card transparent style={{ flex: 1, padding: 10 }} />; return <Card transparent style={{ flex: 1, padding: 10 }} />;
} else { } else {
return <Current index={index} name={item.name} number={item.number} unit={item.unit} />; return this.renderCurrent(item, index);
} }
}} }}
numColumns={3} numColumns={3}
...@@ -304,9 +291,7 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -304,9 +291,7 @@ export default class SmartMeterDetailScreen extends Component {
/> />
{/* MCB Link */} {/* MCB Link */}
<Card style={{ borderRadius: 8, overflow: 'hidden', marginTop: 20, marginBottom: 40 }}> <Card style={{ borderRadius: 8, overflow: 'hidden', marginTop: 20, marginBottom: 40 }}>
{MainBreaker.MCB.map((item, index) => ( {MainBreaker.MCB.map((item, index) => this.renderMCBLink(item, index))}
<MCBLink item={item} key={index} index={index} />
))}
</Card> </Card>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} /> <Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} />
</Content> </Content>
......
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