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';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import IconMaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Overlay } from 'react-native-elements';
import { format } from 'date-fns';
const AnimatedIcon = Animated.createAnimatedComponent(IconMaterialIcons);
const Row = ({ data }) => (
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
<View style={{ flex: 1 }}>
<Text style={[theme.title]}>
{data.time} <Text style={[theme.description, theme.textDark]}>{data.period}</Text>
</Text>
<View style={theme.rowContainer}>
{data.day.map((item, index) => (
const Row = ({ data }) => {
console.log(data);
return (
<RectButton style={styles.rectButton} onPress={() => alert('hello ' + data.name)}>
<View style={{ flexDirection: 'row', paddingVertical: 5 }}>
<View style={{ flex: 1 }}>
<Text style={[theme.title]}>
{format(data.time, 'h:mm')}{' '}
<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
key={index}
style={[
theme.description,
theme.title,
{
color: data.active
? item.dayActive
? color.primary
: color.grey
: item.dayActive
? color.darkGrey
: color.grey,
color: data.active ? (data.power ? color.success : color.primary) : color.grey,
fontWeight: 'normal',
},
]}
>
{item.day}{' '}
{data.power ? 'ON' : 'OFF'}
</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
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>
<Text style={theme.description}>Power</Text>
</View>
</View>
</View>
</View>
</RectButton>
);
</RectButton>
);
};
class SwipeableRow extends Component {
selectedRow = null;
......@@ -91,17 +96,19 @@ class SwipeableRow extends Component {
isVisible={this.state.isVisible}
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>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button transparent style={{ width: '40%' }} onPress={this.cancel}>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button style={styles.delBtn} onPress={this.delete}>
<Text>Delete</Text>
</Button>
</View>
<>
<Text style={[theme.smallTitle, theme.textDark, theme.centerText, { marginHorizontal: 30 }]}>
Are you sure you want to delete this item?{' '}
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Button transparent style={{ width: '40%' }} onPress={this.cancel} rounded>
<Text style={{ color: color.grey }}>Cancel</Text>
</Button>
<Button style={styles.delBtn} onPress={this.delete} rounded>
<Text>Delete</Text>
</Button>
</View>
</>
</Overlay>
</>
);
......
package.json
......@@ -12,9 +12,12 @@
"dependencies": {
"@eva-design/eva": "^1.0.1",
"@react-native-community/async-storage": "^1.6.1",
"date-fns": "^1.30.1",
"firebase": "^6.3.5",
"lodash.set": "^4.3.2",
"native-base": "^2.12.2",
"react": "^16.9.0",
"react-addons-update": "^15.6.2",
"react-native": "^0.60.4",
"react-native-barcode-mask": "^1.0.5",
"react-native-camera": "^2.11.1",
......
screens/Private/CameraScreen.js
......@@ -33,7 +33,7 @@ class CameraScreen extends Component {
//short delay to increase frmaerate when open this screen
setTimeout(() => {
this.setState({ isWaiting: true });
}, 500);
}, 250);
};
handleBarCodeScanned = ({ type, data }) => {
......
screens/Private/TimerScreen/TimerScreen.js
import React, { Component } from 'react';
import { View, StyleSheet, FlatList, ScrollView, TouchableHighlight, Modal } from 'react-native';
import { Switch, Button, Tab, Tabs, ScrollableTab, Icon, Fab, Text } from 'native-base';
import { Fab, Icon, 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 IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
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 DatePicker from 'react-native-date-picker';
import { height } from '../../../constants/Layout';
import InputField from '../../../components/InputField';
import { isIphoneX } from '../../../utils/isPhoneX';
import RNPickerSelect from 'react-native-picker-select';
// import { TouchableOpacity } from 'react-native-gesture-handler';
// mock data
const MultipleMockData = [
{
tabName: 'Main MCB Link',
timer: [
{
time: '6:00',
period: 'AM',
name: 'Slot 1',
time: 1565762383,
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 },
repeatDays: [
{ day: 'S', isRepeat: true },
{ day: 'M', isRepeat: true },
{ day: 'T', isRepeat: true },
{ day: 'W', isRepeat: true },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: 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',
time: 1565762383,
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 },
repeatDays: [
{ day: 'S', isRepeat: true },
{ day: 'M', isRepeat: true },
{ day: 'T', isRepeat: true },
{ day: 'W', isRepeat: true },
{ day: 'T', isRepeat: false },
{ day: 'F', isRepeat: true },
{ day: 'S', isRepeat: true },
],
},
],
},
// {
// 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 = [
{
......@@ -153,34 +151,45 @@ export default class TimerScreen extends Component {
});
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,
filterOpen: false,
selectedBreaker: '',
checked: [],
};
// renderTimerFab = () => {
// return (
// <Fab
// containerStyle={{
// bottom: '15%',
// // right: '50%', // centerFAB
// // marginRight: -28,
// }}
// style={{ backgroundColor: color.primary }}
// position="bottomRight"
// onPress={() => this.setState({ isVisible: true })}
// >
// <Icon name="add" />
// </Fab>
// );
// };
_onSwipeOpen = swipeInstance => {
renderTimerFab = () => {
return (
<Fab
containerStyle={{
bottom: '15%',
// right: '50%', // centerFAB
// marginRight: -28,
}}
style={{ backgroundColor: color.primary }}
position="bottomRight"
onPress={() => this.setState({ isVisible: true })}
>
<Icon name="add" />
</Fab>
);
};
autoClose = swipeInstance => {
if (this.currentlyOpenSwipe && this.currentlyOpenSwipe !== swipeInstance) {
this.currentlyOpenSwipe.close();
}
this.currentlyOpenSwipe = swipeInstance;
};
onValueChange(value) {
......@@ -188,6 +197,31 @@ export default class TimerScreen extends Component {
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() {
return (
<>
......@@ -249,9 +283,9 @@ export default class TimerScreen extends Component {
ItemSeparatorComponent={() => <View style={styles.separator} />}
// ListFooterComponent={() => item.timer.length > 0 && <View style={styles.separator} />}
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 */}
......@@ -267,8 +301,8 @@ export default class TimerScreen extends Component {
<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
<DatePicker
date={this.state.currentTime}
onDateChange={date => this.setState({ currentTime: date })}
date={this.state.timer}
onDateChange={date => this.setState({ timer: date })}
mode="time"
style={{ height: 100 }}
/>
......@@ -278,23 +312,41 @@ export default class TimerScreen extends Component {
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Power</Text>
<Switch />
<Switch value={this.state.power} onValueChange={this.togglePower} />
</View>
<View style={[styles.rowContainer]}>
<Text style={[theme.normalText, theme.textDark]}>Active</Text>
<Switch />
<Switch value={this.state.active} onValueChange={this.toggleActive} />
</View>
<View>
<Text style={[theme.normalText, theme.textDark, { marginBottom: 10 }]}>Repeat</Text>
<View style={styles.dayContainer}>
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((item, index) => (
<TouchableHighlight
key={index + item}
style={[styles.dayBtn, { borderColor: color.primary }]}
{this.state.repeatDays.map((item, index) => (
<TouchableOpacity
key={`repeatDay${index}`}
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>
</TouchableHighlight>
<Text
style={[
theme.normalText,
{
color: this.state.repeatDays[index].isRepeat
? color.primary
: color.grey,
},
]}
>
{item.day}
</Text>
</TouchableOpacity>
))}
</View>
</View>
......@@ -315,38 +367,14 @@ export default class TimerScreen extends Component {
}}
onPress={() => {
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[1].timer.push({
time: `${hours}:${minutes}`,
period: suffix,
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 },
],
});
}
MultipleMockData[0].timer.push({
name: 'Slot 1',
time: this.state.timer,
active: this.state.active,
power: this.state.power,
repeatDays: this.state.repeatDays,
});
}}
>
<Text style={{ color: color.white }}>Confirm</Text>
......@@ -355,6 +383,7 @@ export default class TimerScreen extends Component {
</ScrollView>
</View>
</Modal>
{this.renderTimerFab()}
{/* Filter Modal */}
<Modal
......
yarn.lock
......@@ -2289,6 +2289,11 @@ data-urls@^1.0.0:
whatwg-mimetype "^2.2.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:
version "1.2.0"
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
......@@ -4491,6 +4496,11 @@ lodash.merge@^4.6.1:
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
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:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
......@@ -5858,6 +5868,14 @@ rc@^1.2.7:
minimist "^1.2.0"
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:
version "1.1.2"
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