Skip to content

S
safetcut-app
Commit a44a6e17 by OuiAtichat
Options

update

parent 3aa4cff0
Showing with 238 additions and 181 deletions
components/SwipeableRow.js
...@@ -6,61 +6,66 @@ import { RectButton } from 'react-native-gesture-handler'; ...@@ -6,61 +6,66 @@ import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable'; import Swipeable from 'react-native-gesture-handler/Swipeable';
import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons'; import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Overlay } from 'react-native-elements'; import { Overlay } from 'react-native-elements';
import { format } from 'date-fns';
const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons); const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
const Row = ({ data }) => ( const Row = ({ data }) => {
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}> console.log(data);
<View style={{ flexDirection: 'row', paddingVertical: 5 }}> return (
<View style={{ flex: 1 }}> <RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<Text style={[theme.title]}> <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
{data.time} <Text style={[theme.description, theme.textDark]}>{data.period}</Text> <View style={{ flex: 1 }}>
</Text> <Text style={[theme.title]}>
<View style={theme.rowContainer}> {format(data.time, 'h:mm')}{' '}
{data.day.map((item, index) => ( <Text style={[theme.description, theme.textDark]}>{format(data.time, 'A')}</Text>
</Text>
<View style={theme.rowContainer}>
{data.repeatDays.map((item, index) => (
<Text
key={index}
style={[
theme.description,
{
color: data.active
? item.isRepeat
? color.primary
: color.grey
: item.isRepeat
? color.darkGrey
: color.grey,
},
]}
>
{item.day}{' '}
</Text>
))}
</View>
</View>
<View style={{ flex: 1 }}>
<Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text>
<Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<View style={{ alignItems: 'center' }}>
<Text <Text
key={index}
style={[ style={[
theme.description, theme.title,
{ {
color: data.active color: data.active ? (data.power ? color.success : color.primary) : color.grey,
? item.dayActive fontWeight: 'normal',
? color.primary
: color.grey
: item.dayActive
? color.darkGrey
: color.grey,
}, },
]} ]}
> >
{item.day}{' '} {data.power ? 'ON' : 'OFF'}
</Text> </Text>
))} <Text style={theme.description}>Power</Text>
</View> </View>
</View>
<View style={{ flex: 1 }}>
<Text style={[theme.title, { fontWeight: 'normal' }]}>{data.name}</Text>
<Text style={theme.description}>{data.active ? 'Active' : 'Inactive'} </Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<View style={{ alignItems: 'center' }}>
<Text
style={[
theme.title,
{
color: data.active ? (data.power ? color.success : color.primary) : color.grey,
fontWeight: 'normal',
},
]}
>
{data.power ? 'ON' : 'OFF'}
</Text>
<Text style={theme.description}>Power</Text>
</View> </View>
</View> </View>
</View> </RectButton>
</RectButton> );
); };
class SwipeableRow extends Component { class SwipeableRow extends Component {
selectedRow = null; selectedRow = null;
...@@ -91,17 +96,19 @@ class SwipeableRow extends Component { ...@@ -91,17 +96,19 @@ class SwipeableRow extends Component {
isVisible={this.state.isVisible} isVisible={this.state.isVisible}
onBackdropPress={() => this.setState({ isVisible: false })} onBackdropPress={() => this.setState({ isVisible: false })}
> >
<Text style={[theme.smallTitle, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}> <>
Are you sure you want to delete this item?{' '} <Text style={[theme.smallTitle, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
</Text> Are you sure you want to delete this item?{' '}
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> </Text>
<Button transparent style={{ width: '40%' }} onPress={this.cancel}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ color: color.grey }}>Cancel</Text> <Button transparent style={{ width: '40%' }} onPress={this.cancel} rounded>
</Button> <Text style={{ color: color.grey }}>Cancel</Text>
<Button style={styles.delBtn} onPress={this.delete}> </Button>
<Text>Delete</Text> <Button style={styles.delBtn} onPress={this.delete} rounded>
</Button> <Text>Delete</Text>
</View> </Button>
</View>
</>
</Overlay> </Overlay>
</> </>
); );
......
package.json
...@@ -12,9 +12,12 @@ ...@@ -12,9 +12,12 @@
"dependencies": { "dependencies": {
"@eva-design/eva": "^1.0.1", "@eva-design/eva": "^1.0.1",
"@react-native-community/async-storage": "^1.6.1", "@react-native-community/async-storage": "^1.6.1",
"date-fns": "^1.30.1",
"firebase": "^6.3.5", "firebase": "^6.3.5",
"lodash.set": "^4.3.2",
"native-base": "^2.12.2", "native-base": "^2.12.2",
"react": "^16.9.0", "react": "^16.9.0",
"react-addons-update": "^15.6.2",
"react-native": "^0.60.4", "react-native": "^0.60.4",
"react-native-barcode-mask": "^1.0.5", "react-native-barcode-mask": "^1.0.5",
"react-native-camera": "^2.11.1", "react-native-camera": "^2.11.1",
......
screens/Private/CameraScreen.js
...@@ -33,7 +33,7 @@ class CameraScreen extends Component { ...@@ -33,7 +33,7 @@ class CameraScreen extends Component {
//short delay to increase frmaerate when open this screen //short delay to increase frmaerate when open this screen
setTimeout(() => { setTimeout(() => {
this.setState({ isWaiting: true }); this.setState({ isWaiting: true });
}, 500); }, 250);
}; };
handleBarCodeScanned = ({ type, data }) => { handleBarCodeScanned = ({ type, data }) => {
......
screens/Private/TimerScreen/TimerScreen.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, StyleSheet, FlatList, ScrollView, TouchableHighlight, Modal } from 'react-native'; import { Fab, Icon, Text } from 'native-base';
import { Switch, Button, Tab, Tabs, ScrollableTab, Icon, Fab, Text } from 'native-base'; import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity } from 'react-native';
import { Switch, Button } from 'native-base';
import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons'; import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { color, theme } from '../../../constants/Styles'; import { color, theme } from '../../../constants/Styles';
import { TouchableOpacity, TextInput } from 'react-native-gesture-handler';
import { Badge, CheckBox } from 'react-native-elements'; import { Badge } from 'react-native-elements';
import SwipeableRow from '../../../components/SwipeableRow'; import SwipeableRow from '../../../components/SwipeableRow';
import DatePicker from 'react-native-date-picker'; import DatePicker from 'react-native-date-picker';
import { height } from '../../../constants/Layout'; import { height } from '../../../constants/Layout';
import InputField from '../../../components/InputField'; import InputField from '../../../components/InputField';
import { isIphoneX } from '../../../utils/isPhoneX'; import { isIphoneX } from '../../../utils/isPhoneX';
import RNPickerSelect from 'react-native-picker-select'; // import { TouchableOpacity } from 'react-native-gesture-handler';
// mock data // mock data
const MultipleMockData = [ const MultipleMockData = [
{ {
tabName: 'Main MCB Link', tabName: 'Main MCB Link',
timer: [ timer: [
{ {
time: '6:00',
period: 'AM',
name: 'Slot 1', name: 'Slot 1',
time: 1565762383,
active: true, active: true,
power: true, power: true,
day: [ repeatDays: [
{ day: 'S', dayActive: true }, { day: 'S', isRepeat: true },
{ day: 'M', dayActive: true }, { day: 'M', isRepeat: true },
{ day: 'T', dayActive: true }, { day: 'T', isRepeat: true },
{ day: 'W', dayActive: true }, { day: 'W', isRepeat: true },
{ day: 'T', dayActive: false }, { day: 'T', isRepeat: false },
{ day: 'F', dayActive: true }, { day: 'F', isRepeat: true },
{ day: 'S', dayActive: true }, { day: 'S', isRepeat: true },
], ],
}, },
{ {
time: '7:00',
period: 'AM',
name: 'Slot 2', name: 'Slot 2',
active: true, time: 1565762383,
power: false,
day: [
{ day: 'S', dayActive: true },
{ day: 'M', dayActive: true },
{ day: 'T', dayActive: true },
{ day: 'W', dayActive: true },
{ day: 'T', dayActive: false },
{ day: 'F', dayActive: true },
{ day: 'S', dayActive: false },
],
},
],
},
{
tabName: 'Main MCB Link',
timer: [
{
time: '6:00',
period: 'AM',
name: 'Slot 1',
active: true, active: true,
power: true, power: true,
day: [ repeatDays: [
{ day: 'S', dayActive: true }, { day: 'S', isRepeat: true },
{ day: 'M', dayActive: true }, { day: 'M', isRepeat: true },
{ day: 'T', dayActive: true }, { day: 'T', isRepeat: true },
{ day: 'W', dayActive: true }, { day: 'W', isRepeat: true },
{ day: 'T', dayActive: false }, { day: 'T', isRepeat: false },
{ day: 'F', dayActive: true }, { day: 'F', isRepeat: true },
{ day: 'S', dayActive: true }, { day: 'S', isRepeat: true },
],
},
{
time: '7:00',
period: 'AM',
name: 'Slot 2',
active: true,
power: false,
day: [
{ day: 'S', dayActive: true },
{ day: 'M', dayActive: true },
{ day: 'T', dayActive: true },
{ day: 'W', dayActive: true },
{ day: 'T', dayActive: false },
{ day: 'F', dayActive: true },
{ day: 'S', dayActive: false },
], ],
}, },
], ],
}, },
// {
// tabName: 'Main MCB Link',
// timer: [
// {
// time: '6:00',
// period: 'AM',
// name: 'Slot 1',
// active: true,
// power: true,
// day: [
// { day: 'S', dayActive: true },
// { day: 'M', dayActive: true },
// { day: 'T', dayActive: true },
// { day: 'W', dayActive: true },
// { day: 'T', dayActive: false },
// { day: 'F', dayActive: true },
// { day: 'S', dayActive: true },
// ],
// },
// {
// time: '7:00',
// period: 'AM',
// name: 'Slot 2',
// active: true,
// power: false,
// day: [
// { day: 'S', dayActive: true },
// { day: 'M', dayActive: true },
// { day: 'T', dayActive: true },
// { day: 'W', dayActive: true },
// { day: 'T', dayActive: false },
// { day: 'F', dayActive: true },
// { day: 'S', dayActive: false },
// ],
// },
// ],
// },
]; ];
const breaker = [ const breaker = [
{ {
...@@ -153,34 +151,45 @@ export default class TimerScreen extends Component { ...@@ -153,34 +151,45 @@ export default class TimerScreen extends Component {
}); });
state = { state = {
currentTime: new Date(), timer: new Date(),
active: false,
power: false,
repeatDays: [
{ day: 'S', isRepeat: false },
{ day: 'M', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'W', isRepeat: false },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: false },
{ day: 'S', isRepeat: false },
],
// repeatDays: [{ S: false }, { M: false }, { T: false }, { W: false }, { T: false }, { F: false }, { S: false }],
isVisible: false, isVisible: false,
filterOpen: false, filterOpen: false,
selectedBreaker: '', selectedBreaker: '',
checked: [], checked: [],
}; };
// renderTimerFab = () => { renderTimerFab = () => {
// return ( return (
// <Fab <Fab
// containerStyle={{ containerStyle={{
// bottom: '15%', bottom: '15%',
// // right: '50%', // centerFAB // right: '50%', // centerFAB
// // marginRight: -28, // marginRight: -28,
// }} }}
// style={{ backgroundColor: color.primary }} style={{ backgroundColor: color.primary }}
// position="bottomRight" position="bottomRight"
// onPress={() => this.setState({ isVisible: true })} onPress={() => this.setState({ isVisible: true })}
// > >
// <Icon name="add" /> <Icon name="add" />
// </Fab> </Fab>
// ); );
// }; };
_onSwipeOpen = swipeInstance => { autoClose = swipeInstance => {
if (this.currentlyOpenSwipe && this.currentlyOpenSwipe !== swipeInstance) { if (this.currentlyOpenSwipe && this.currentlyOpenSwipe !== swipeInstance) {
this.currentlyOpenSwipe.close(); this.currentlyOpenSwipe.close();
} }
this.currentlyOpenSwipe = swipeInstance; this.currentlyOpenSwipe = swipeInstance;
}; };
onValueChange(value) { onValueChange(value) {
...@@ -188,6 +197,31 @@ export default class TimerScreen extends Component { ...@@ -188,6 +197,31 @@ export default class TimerScreen extends Component {
selected: value, selected: value,
}); });
} }
toggleActive = () => {
this.setState(prevState => ({
active: !prevState.active,
}));
};
togglePower = () => {
this.setState(prevState => ({
power: !prevState.power,
}));
};
toggleRepeatDays = index => {
this.setState(prevState => ({
repeatDays: prevState.repeatDays.map((element, elementIndex) =>
elementIndex === index ? { ...element, isRepeat: !prevState.repeatDays[index].isRepeat } : element
),
}));
};
componentDidUpdate = (prevProps, prevState) => {
if (prevState !== this.state) console.log(this.state);
};
render() { render() {
return ( return (
<> <>
...@@ -249,9 +283,9 @@ export default class TimerScreen extends Component { ...@@ -249,9 +283,9 @@ export default class TimerScreen extends Component {
ItemSeparatorComponent={() => <View style={styles.separator} />} ItemSeparatorComponent={() => <View style={styles.separator} />}
// ListFooterComponent={() => item.timer.length > 0 && <View style={styles.separator} />} // ListFooterComponent={() => item.timer.length > 0 && <View style={styles.separator} />}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<SwipeableRow item={item} index={index} onSwipeOpen={this._onSwipeOpen} /> <SwipeableRow item={item} index={index} onSwipeOpen={this.autoClose} />
)} )}
keyExtractor={(item, index) => `timer ${index}`} keyExtractor={(item, index) => `timer${index}`}
/> />
{/* Create & Update Timer Modal */} {/* Create & Update Timer Modal */}
...@@ -267,8 +301,8 @@ export default class TimerScreen extends Component { ...@@ -267,8 +301,8 @@ export default class TimerScreen extends Component {
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text> <Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
<DatePicker <DatePicker
date={this.state.currentTime} date={this.state.timer}
onDateChange={date => this.setState({ currentTime: date })} onDateChange={date => this.setState({ timer: date })}
mode="time" mode="time"
style={{ height: 100 }} style={{ height: 100 }}
/> />
...@@ -278,23 +312,41 @@ export default class TimerScreen extends Component { ...@@ -278,23 +312,41 @@ export default class TimerScreen extends Component {
</View> </View>
<View style={[styles.rowContainer]}> <View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text> <Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch /> <Switch value={this.state.power} onValueChange={this.togglePower} />
</View> </View>
<View style={[styles.rowContainer]}> <View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text> <Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch /> <Switch value={this.state.active} onValueChange={this.toggleActive} />
</View> </View>
<View> <View>
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text> <Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<View style={styles.dayContainer}> <View style={styles.dayContainer}>
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => ( {this.state.repeatDays.map((item, index) => (
<TouchableHighlight <TouchableOpacity
key={index + item} key={`repeatDay${index}`}
style={[styles.dayBtn, { borderColor: color.primary }]} style={[
styles.dayBtn,
{
borderColor: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
onPress={() => this.toggleRepeatDays(index)}
> >
<Text style={[theme.normalText, { color: color.primary }]}>{item}</Text> <Text
</TouchableHighlight> style={[
theme.normalText,
{
color: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
>
{item.day}
</Text>
</TouchableOpacity>
))} ))}
</View> </View>
</View> </View>
...@@ -315,38 +367,14 @@ export default class TimerScreen extends Component { ...@@ -315,38 +367,14 @@ export default class TimerScreen extends Component {
}} }}
onPress={() => { onPress={() => {
this.setState({ isVisible: false }); this.setState({ isVisible: false });
let hours = this.state.currentTime.getHours();
let minutes = this.state.currentTime.getMinutes();
if (minutes < 10) {
minutes = '0' + minutes;
}
let suffix = 'AM';
if (hours >= 12) {
suffix = 'PM';
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
{ MultipleMockData[0].timer.push({
MultipleMockData[1].timer.push({ name: 'Slot 1',
time: `${hours}:${minutes}`, time: this.state.timer,
period: suffix, active: this.state.active,
name: 'Slot 1', power: this.state.power,
active: true, repeatDays: this.state.repeatDays,
power: true, });
day: [
{ day: 'S', dayActive: true },
{ day: 'M', dayActive: true },
{ day: 'T', dayActive: true },
{ day: 'W', dayActive: true },
{ day: 'T', dayActive: false },
{ day: 'F', dayActive: true },
{ day: 'S', dayActive: true },
],
});
}
}} }}
> >
<Text style={{ color: color.white }}>Confirm</Text> <Text style={{ color: color.white }}>Confirm</Text>
...@@ -355,6 +383,7 @@ export default class TimerScreen extends Component { ...@@ -355,6 +383,7 @@ export default class TimerScreen extends Component {
</ScrollView> </ScrollView>
</View> </View>
</Modal> </Modal>
{this.renderTimerFab()}
{/* Filter Modal */} {/* Filter Modal */}
<Modal <Modal
......
yarn.lock
...@@ -2289,6 +2289,11 @@ data-urls@^1.0.0: ...@@ -2289,6 +2289,11 @@ data-urls@^1.0.0:
whatwg-mimetype "^2.2.0" whatwg-mimetype "^2.2.0"
whatwg-url "^7.0.0" whatwg-url "^7.0.0"
date-fns@^1.30.1:
version "1.30.1"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
debounce@^1.2.0: debounce@^1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
...@@ -4491,6 +4496,11 @@ lodash.merge@^4.6.1: ...@@ -4491,6 +4496,11 @@ lodash.merge@^4.6.1:
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.set@^4.3.2:
version "4.3.2"
resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=
lodash.sortby@^4.7.0: lodash.sortby@^4.7.0:
version "4.7.0" version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
...@@ -5858,6 +5868,14 @@ rc@^1.2.7: ...@@ -5858,6 +5868,14 @@ rc@^1.2.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" strip-json-comments "~2.0.1"
react-addons-update@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.2.tgz#e53753c5b34887974510c882d7fb075851d5e504"
integrity sha1-5TdTxbNIh5dFEMiC1/sHWFHV5QQ=
dependencies:
fbjs "^0.8.9"
object-assign "^4.1.0"
react-deep-force-update@^1.0.0: react-deep-force-update@^1.0.0:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
......
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