Skip to content

S
safetcut-app
Commit f7048ccc by Tonk
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';
import { View, StyleSheet, FlatList, ScrollView } from 'react-native';
import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements';
import { format, sort } from 'date-fns';
const mockdata = [
{ time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1' },
{ time: 1566207933, user: 'Sukanya161', log: 'Switch off sub breaker1' },
{ time: 1566086400, user: 'Sukanya161', log: 'Switch on sub breaker1' },
{ time: 1566086400, user: 'Sukanya161', log: 'Switch off sub breaker1' },
{ time: 1566207933, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'notification' },
{ time: 1566299471, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
{ time: 1566271564, user: 'Sukanya161', log: 'Switch on sub breaker1', type: 'log' },
{ time: 1573514603, user: 'Sukanya161', log: 'Switch off sub breaker1', type: 'notification' },
];
export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
......@@ -18,6 +19,47 @@ export default class NotificationScreen extends React.Component {
updateSearch = 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() {
const TabStyle = {
textStyle: theme.description,
......@@ -26,49 +68,7 @@ export default class NotificationScreen extends React.Component {
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
style: { backgroundColor: color.defaultBg },
};
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>
);
};
const today = new Date();
return (
<View style={theme.container}>
<Tabs
......@@ -108,14 +108,10 @@ export default class NotificationScreen extends React.Component {
Today {/* Today/Yesterday/date.. */}
</Text>
{/* >>log list */}
<FlatList data={[1, 2]} renderItem={() => <ActivityCard />} />
</View>
<View>
<Text style={[theme.normalText, { paddingHorizontal: 30, paddingVertical: 10 }]}>
Yesterday {/* Today/Yesterday/date.. */}
</Text>
{/* >>log list */}
<FlatList data={[1, 2, 3]} renderItem={() => <ActivityCard />} />
<FlatList
data={mockdata}
renderItem={({ item, index }) => this.renderActivityCard(item)}
/>
</View>
</ScrollView>
</Tab>
......
screens/Private/SettingScreen/Setting.js
......@@ -57,6 +57,7 @@ export default class SmartMeterDetailScreen extends Component {
style={theme.description}
onChangeText={data => this.setState({ data })}
value={data}
keyboardType={typeof data === 'number' ? 'number-pad' : 'default'}
/>
</View>
</Body>
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -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
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 (
<Card
<Text
numberOfLines={1}
style={[
styles.currentCard,
theme.smallTitle,
theme.textDark,
theme.mt1,
{
backgroundColor:
props.number > LimitCurrent[props.index].limit ? color.primary : color.white,
textAlign: 'right',
color: item.number > LimitCurrent[index].limit ? color.white : color.darkGrey,
},
]}
>
{item.number}{' '}
<Text
style={[
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.mt1,
{
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}{' '}
<Text
style={[
theme.smDescription,
theme.textDark,
{
color:
props.number > LimitCurrent[props.index].limit ? color.white : color.darkGrey,
},
]}
>
{props.unit}
</Text>
{item.unit}
</Text>
</Card>
);
};
// MCB Link
const MCBLink = props => {
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>
);
};
</Text>
</Card>
);
}
renderMCBLink(item, index) {
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 (
<Content style={[theme.container, theme.containerWithPadding]}>
......@@ -295,7 +282,7 @@ export default class SmartMeterDetailScreen extends Component {
if (item.name == 'empty') {
return <Card transparent style={{ flex: 1, padding: 10 }} />;
} else {
return <Current index={index} name={item.name} number={item.number} unit={item.unit} />;
return this.renderCurrent(item, index);
}
}}
numColumns={3}
......@@ -304,9 +291,7 @@ export default class SmartMeterDetailScreen extends Component {
/>
{/* MCB Link */}
<Card style={{ borderRadius: 8, overflow: 'hidden', marginTop: 20, marginBottom: 40 }}>
{MainBreaker.MCB.map((item, index) => (
<MCBLink item={item} key={index} index={index} />
))}
{MainBreaker.MCB.map((item, index) => this.renderMCBLink(item, index))}
</Card>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} />
</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