Skip to content

S
safetcut-app
Commit 90fc125b by Tonk
Options

update filter notification by date

parent 28c3802d
Showing with 211 additions and 32 deletions
constants/Styles.js
......@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
export const color = {
white: '#fff',
defaultBg: '#f3f3f3',
defaultBg: 'rgba(243,243,243,0.5)',
lightGrey: '#cfd7db',
grey: '#9b9b9b',
darkGrey: '#4a4a4a',
......
package.json
......@@ -20,6 +20,7 @@
"react-addons-update": "^15.6.2",
"react-native": "^0.60.4",
"react-native-barcode-mask": "^1.0.5",
"react-native-calendar-picker": "^6.0.1",
"react-native-camera": "^2.11.1",
"react-native-date-picker": "^2.5.1",
"react-native-elements": "^1.1.0",
......
screens/Private/NotificationScreen/NotificationScreen.js
import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, Icon } from 'native-base';
import { View, StyleSheet, FlatList, ScrollView, Modal } from 'react-native';
import { Text, Tab, Tabs, ScrollableTab, Icon, Footer } from 'native-base';
import { View, StyleSheet, ScrollView, Modal } from 'react-native';
import { color, theme } from '../../../constants/Styles';
import { SearchBar } from 'react-native-elements';
import { format, isToday, isYesterday, isSameDay } from 'date-fns';
import { format, isToday, isYesterday, isSameDay, isThisMonth, startOfDay } from 'date-fns';
import SlideUpModal from '../../../components/SlideUpModal';
import FadeDimBG from '../../../components/FadeDimBG';
import { width, height } from '../../../constants/Layout';
import RNPickerSelect from 'react-native-picker-select';
import CalendarPicker from 'react-native-calendar-picker';
const tabHeader = [
{ type: 'all', label: 'All' },
......@@ -19,27 +20,116 @@ export default class NotificationScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: 'Notifications',
});
state = {
search: '',
data: [],
initial: [],
isfilterVisible: false,
};
constructor(props) {
super(props);
this.state = {
search: '',
data: [],
initial: [],
isfilterVisible: false,
selectedStartDate: null,
selectedEndDate: null,
filterBy: null,
toggleCalendar: false,
};
this.onDateChange = this.onDateChange.bind(this);
}
componentDidMount() {
this.sortDate();
}
sortDate() {
const sortData = dt2.sort(function(a, b) {
var dateA = new Date(a.time),
dateB = new Date(b.time);
return dateB - dateA;
});
this.setState({
data: sortData,
initial: sortData,
});
}
onDateChange(date, type) {
if (type === 'END_DATE') {
this.setState({
selectedEndDate: date,
});
} else {
this.setState({
selectedStartDate: date,
selectedEndDate: null,
});
}
}
updateSearch = text => {
this.setState({ search: text });
const newData = this.state.initial.filter(item => {
const { initial } = this.state;
const newData = initial.filter(item => {
const itemData = `${item.user.toUpperCase()} ${item.action.toUpperCase()} ${item.device.toUpperCase()}`;
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
this.setState({
data: newData,
});
};
clear() {
this.setState({
selectedStartDate: null,
selectedEndDate: null,
filterBy: null,
toggleCalendar: false,
});
}
filterByDate() {
const { filterBy, initial } = this.state;
this.setState({ isfilterVisible: false });
if (filterBy === 'today') {
console.log('filter today');
const newData = initial.filter(x => {
return isToday(x.time * 1000);
});
this.setState({ data: newData });
} else if (filterBy === 'yesterday') {
console.log('filter yesterday');
const newData = initial.filter(x => {
return isYesterday(x.time * 1000);
});
this.setState({ data: newData });
} else if (filterBy === '7days') {
console.log('filter 7 days');
const newData = initial.filter(x => {
const today = new Date();
const startDay = startOfDay(today);
const daysRange = startDay - 7 * 24 * 60 * 60 * 1000;
return x.time * 1000 >= daysRange && x.time * 1000 <= today;
});
this.setState({ data: newData });
} else if (filterBy === '30days') {
console.log('filter 30 days');
const newData = initial.filter(x => {
const today = new Date();
const startDay = startOfDay(today);
const daysRange = startDay - 30 * 24 * 60 * 60 * 1000;
return x.time * 1000 >= daysRange && x.time * 1000 <= today;
});
this.setState({ data: newData });
} else if (filterBy === 'month') {
console.log('filter this month');
const newData = initial.filter(x => {
return isThisMonth(x.time * 1000);
});
this.setState({ data: newData });
} else if (filterBy === 'lastMonth') {
console.log('filter last month');
} else if (filterBy === 'custom') {
console.log('filter custom');
}
}
renderActionCard(data) {
return (
<View style={[theme.rowContainer, styles.actionContainer]}>
......@@ -62,17 +152,7 @@ export default class NotificationScreen extends React.Component {
</View>
);
}
sortDate() {
const sortData = dt2.sort(function(a, b) {
var dateA = new Date(a.time),
dateB = new Date(b.time);
return dateB - dateA;
});
this.setState({
data: sortData,
initial: sortData,
});
}
renderDayList(type) {
const data =
type === 'all'
......@@ -82,6 +162,7 @@ export default class NotificationScreen extends React.Component {
});
let view = [];
let day;
for (let i = 0; i < data.length; i++) {
if (isToday(data[i].time * 1000) && i === 0) {
view.push(
......@@ -108,6 +189,65 @@ export default class NotificationScreen extends React.Component {
}
return view;
}
renderCalendar() {
const { selectedStartDate, selectedEndDate } = this.state;
const maxDate = new Date();
const startDate = selectedStartDate ? selectedStartDate.toString() : '';
const endDate = selectedEndDate ? selectedEndDate.toString() : '';
const { toggleCalendar } = this.state;
return (
<>
<View
style={[styles.pickerContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
>
<Text style={[theme.normalText, theme.textDark]}>
{format(startDate, 'DD-MM-YYYY')} - {format(endDate, 'DD-MM-YYYY')}
</Text>
<Icon
type="MaterialCommunityIcons"
name="calendar-range"
style={{ color: toggleCalendar ? color.primary : color.darkGrey, fontSize: 14 }}
onPress={() => this.setState({ toggleCalendar: !toggleCalendar })}
/>
</View>
{toggleCalendar && (
<View style={[theme.mt2, styles.pickerContainer]}>
<CalendarPicker
startFromMonday={true}
allowRangeSelection={true}
maxDate={maxDate}
textStyle={{ fontFamily: 'Avenir-Roman', color: color.darkGrey }}
todayBackgroundColor="rgba(238,84,84,0.45)"
selectedRangeStartStyle={[
styles.selectedRangeStyle,
{
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
},
]}
selectedRangeEndStyle={[
styles.selectedRangeStyle,
{
borderTopRightRadius: 8,
borderBottomRightRadius: 8,
},
]}
selectedRangeStyle={{
backgroundColor: 'rgba(238,84,84,0.15)',
color: color.darkGrey,
height: '90%',
}}
onDateChange={this.onDateChange}
width={width - 30}
previousTitle={<Icon type="Entypo" name="chevron-thin-left" style={{ fontSize: 14 }} />}
nextTitle={<Icon type="Entypo" name="chevron-thin-right" style={{ fontSize: 14 }} />}
/>
</View>
)}
</>
);
}
render() {
const TabStyle = {
textStyle: theme.description,
......@@ -162,35 +302,38 @@ export default class NotificationScreen extends React.Component {
<FadeDimBG />
<SlideUpModal ending={0.3} style={styles.filterModal}>
<View style={[theme.rowContainer, styles.filterHeader]}>
<Text style={[theme.smallTitle, theme.textDark]}>Reset</Text>
<Text style={[theme.smallTitle, theme.textDark]} onPress={() => this.clear()}>
Reset
</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Filters</Text>
<Text
style={[theme.smallTitle, theme.textDanger]}
onPress={() => this.setState({ isfilterVisible: false })}
>
<Text style={[theme.smallTitle, theme.textDanger]} onPress={() => this.filterByDate()}>
Done
</Text>
</View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text>
<View style={[theme.mt2, styles.pickerContainer]}>
<RNPickerSelect
onValueChange={value => console.log(value)}
onValueChange={value => this.setState({ filterBy: value })}
items={[
{ label: 'Today', value: 'today' },
{ label: 'Yesterday', value: 'yesterday' },
{ label: 'Last 7 days', value: '7days' },
{ label: 'Last 30days', value: '30days' },
{ label: 'Last 30 days', value: '30days' },
{ label: 'This month', value: 'month' },
{ label: 'Last month', value: 'lastMonth' },
{ label: 'Custom', value: 'custom' },
]}
useNativeAndroidPickerStyle={false}
value={this.state.filterBy}
style={pickerStyle}
Icon={() => <Icon name="ios-arrow-down" style={{ fontSize: 14, color: '#c8c8c8' }} />}
/>
</View>
{this.state.filterBy === 'custom' && this.renderCalendar()}
</SlideUpModal>
</Modal>
<Footer style={{ backgroundColor: 'transparent', borderColor: 'transparent' }} />
</View>
);
}
......@@ -237,7 +380,7 @@ const styles = StyleSheet.create({
},
actionContainer: {
paddingHorizontal: 30,
paddingVertical: 10,
paddingVertical: 15,
alignItems: 'flex-start',
backgroundColor: color.white,
width: '100%',
......@@ -273,4 +416,9 @@ const styles = StyleSheet.create({
borderRadius: 5,
padding: 10,
},
selectedRangeStyle: {
backgroundColor: color.primary,
color: color.white,
height: '90%',
},
});
screens/Private/NotificationScreen/notification.json
......@@ -10,6 +10,23 @@
},
{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" },
{ "type": "log", "user": "Sukanya161", "time": 1566374629, "action": "Switched on", "device": "sub breaker 3" },
{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Set timer", "device": "mcb link 1" },
{ "type": "notification", "user": "Tonk", "time": 1566438573, "action": "Set timer", "device": "mcb link 2" },
{ "type": "notification", "user": "Tonk", "time": 1565863930, "action": "???", "device": "???" },
{ "type": "notification", "user": "Tonk", "time": 1565777530, "action": "???", "device": "???" },
{ "type": "log", "user": "Sukanya161", "time": 1566467247, "action": "Switched on", "device": "sub breaker 4" },
{ "type": "log", "user": "Sukanya161", "time": 1564639200, "action": "Switched off", "device": "sub breaker 1" },
{
"type": "notification",
"user": "Sukanya161",
"time": 1566433810,
"action": "Switched on",
"device": "sub breaker 2"
},
{ "type": "log", "user": "Sukanya161", "time": 1566371305, "action": "Switched on", "device": "sub breaker 1" },
{ "type": "log", "user": "Sukanya161", "time": 1566374629, "action": "Switched on", "device": "sub breaker 3" },
{ "type": "notification", "user": "Tonk", "time": 1566317460, "action": "Leaved", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1566438573, "action": "Entered", "device": "office" }
{ "type": "notification", "user": "Tonk", "time": 1561975930, "action": "Entered", "device": "office" },
{ "type": "notification", "user": "Tonk", "time": 1564481530, "action": "ง่วง", "device": "มากๆ" },
{ "type": "notification", "user": "Tonk", "time": 1563790330, "action": "หิว", "device": "ข้าว" }
]
yarn.lock
......@@ -5771,7 +5771,7 @@ prompts@^2.0.1:
kleur "^3.0.2"
sisteransi "^1.0.0"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -5916,6 +5916,14 @@ react-native-barcode-mask@^1.0.5:
dependencies:
prop-types "^15.6.2"
react-native-calendar-picker@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/react-native-calendar-picker/-/react-native-calendar-picker-6.0.1.tgz#28e7fa06f7a08a35586084496950df142fa5b05a"
integrity sha512-c12Afk3i1vpdRSfI0ic/5+m2LdBLAYyiO4M67TyzEqw3tfsg2IcDkDKa/rBi6METKhd55/8IqBi8669sBCeNJA==
dependencies:
prop-types "^15.6.0"
uuid "3.2.1"
react-native-camera@^2.11.1:
version "2.11.2"
resolved "https://registry.yarnpkg.com/react-native-camera/-/react-native-camera-2.11.2.tgz#4936bb0a484e8ba7d0b3ecf28fa7c161833b1ac0"
......@@ -7367,6 +7375,11 @@ utils-merge@1.0.1:
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
uuid@3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
integrity sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==
uuid@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
......
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