Skip to content

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

refactor smart detail and notification page

parent ad2a0e74
Showing with 141 additions and 159 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,6 +19,47 @@ export default class NotificationScreen extends React.Component { ...@@ -18,6 +19,47 @@ export default class NotificationScreen extends React.Component {
updateSearch = search => { updateSearch = search => {
this.setState({ search }); this.setState({ search });
}; };
renderActivityCard(data) {
return (
<View
style={[
theme.rowContainer,
{
paddingHorizontal: 30,
paddingVertical: 10,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
},
]}
>
<View
style={{
width: 16,
height: 16,
marginRight: 10,
borderRadius: 100,
backgroundColor: color.primary,
alignItems: 'center',
justifyContent: 'center',
}}
>
{/* first letter of operate's username */}
<Text style={{ color: color.white, fontSize: 8 }}>A</Text>
</View>
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
{/* operate's username */}
<Text style={[theme.smDescription]}>{data.user || 'JohnDoe'}</Text>
{/* operate time */}
<Text style={[theme.smDescription]}>{format(data.time, 'hh:mm A') || '00:00 AM'}</Text>
</View>
{/* operate activity. */}
<Text style={[theme.normalText, theme.textDark]}>{data.log || 'Unknown activity'}</Text>
</View>
</View>
);
}
render() { render() {
const TabStyle = { const TabStyle = {
textStyle: theme.description, textStyle: theme.description,
...@@ -26,49 +68,7 @@ export default class NotificationScreen extends React.Component { ...@@ -26,49 +68,7 @@ export default class NotificationScreen extends React.Component {
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 }, activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg }, style: { backgroundColor: color.defaultBg },
}; };
const today = new Date();
const ActivityCard = () => {
const { username, time, activity } = this.props;
return (
<View
style={[
theme.rowContainer,
{
paddingHorizontal: 30,
paddingVertical: 10,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
},
]}
>
<View
style={{
width: 16,
height: 16,
marginRight: 10,
borderRadius: 100,
backgroundColor: color.primary,
alignItems: 'center',
justifyContent: 'center',
}}
>
{/* first letter of operate's username */}
<Text style={{ color: color.white, fontSize: 8 }}>A</Text>
</View>
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}>
{/* operate's username */}
<Text style={[theme.smDescription]}>{username || 'Sukanya161'}</Text>
{/* operate time */}
<Text style={[theme.smDescription]}>{time || '10:17 PM'}</Text>
</View>
{/* operate activity. */}
<Text style={[theme.normalText, theme.textDark]}>{activity || 'Switch on sub breaker1'}</Text>
</View>
</View>
);
};
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,122 +133,109 @@ export default class SmartMeterDetailScreen extends Component { ...@@ -133,122 +133,109 @@ export default class SmartMeterDetailScreen extends Component {
}, },
], ],
}; };
renderCurrent(item, index) {
return (
<Card
style={[
styles.currentCard,
{
backgroundColor: item.number > LimitCurrent[index].limit ? color.primary : color.white,
},
]}
>
<Text
style={[
theme.smDescription,
{ color: item.number > LimitCurrent[index].limit ? color.white : color.grey },
]}
>
{item.name}
</Text>
// full incomplete row <Text
formatGridData(unformatData) { numberOfLines={1}
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 (
<Card
style={[ style={[
styles.currentCard, theme.smallTitle,
theme.textDark,
theme.mt1,
{ {
backgroundColor: textAlign: 'right',
props.number > LimitCurrent[props.index].limit ? color.primary : color.white, color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
}, },
]} ]}
> >
{item.number}{' '}
<Text <Text
style={[ style={[
theme.smDescription, theme.smDescription,
{ color: props.number > LimitCurrent[props.index].limit ? color.white : color.grey },
]}
>
{props.name}
</Text>
<Text
numberOfLines={1}
style={[
theme.smallTitle,
theme.textDark, theme.textDark,
theme.mt1,
{ {
textAlign: 'right', color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
color: props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey,
}, },
]} ]}
> >
{props.number}{' '} {item.unit}
<Text
style={[
theme.smDescription,
theme.textDark,
{
color:
props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey,
},
]}
>
{props.unit}
</Text>
</Text> </Text>
</Card> </Text>
); </Card>
}; );
// MCB Link }
const MCBLink = props => { renderMCBLink(item, index) {
const index = props.index;
return (
<View>
<Row
style={{ padding: 7 }}
onPress={() =>
this.setState(() => {
return (sb[index].expand = !sb[index].expand);
})
}
>
<Left>
<Text style={[theme.normalText, theme.textDark]}>{props.item.title}</Text>
</Left>
<Right>
<Icon style={styles.mcbExpand} name={sb[index].expand ? 'arrow-up' : 'arrow-down'} />
</Right>
</Row>
{sb[index].expand
? props.item.sub.map((subItem, index) => (
<SubBreaker
key={index}
title={subItem.title}
description={subItem.description}
status={subItem.status}
/>
))
: null}
</View>
);
};
// Sub Breaker
const SubBreaker = props => {
return (
<View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}>
<Row>
<Left>
<View>
<Text style={[theme.normalText, theme.textDark]}>{props.title}</Text>
<Text style={[theme.description]}>{props.description}</Text>
</View>
</Left>
<Right>
<Switch value={props.status} />
</Right>
</Row>
</View>
);
};
const sb = this.state.sb; const sb = this.state.sb;
return (
<View>
<Row
style={{ padding: 7 }}
onPress={() =>
this.setState(() => {
return (sb[index].expand = !sb[index].expand);
})
}
>
<Left>
<Text style={[theme.normalText, theme.textDark]}>{item.title}</Text>
</Left>
<Right>
<Icon style={styles.mcbExpand} name={sb[index].expand ? 'arrow-up' : 'arrow-down'} />
</Right>
</Row>
{sb[index].expand ? item.sub.map((subItem, index) => this.renderSubbreaker(subItem)) : null}
</View>
);
}
renderSubbreaker(item) {
return (
<View style={[theme.containerWithPadding, { backgroundColor: 'rgba(216,216,216,0.1)' }]}>
<Row>
<Left>
<View>
<Text style={[theme.normalText, theme.textDark]}>{item.title}</Text>
<Text style={[theme.description]}>{item.description}</Text>
</View>
</Left>
<Right>
<Switch value={item.status} />
</Right>
</Row>
</View>
);
}
// 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