Skip to content

S
safetcut-app
Commit d5f142f7 by Tonk
Options

add timer screen & update camera not granted style

parent 9bb2ff15
Showing with 230 additions and 20 deletions
AppNavigation.js
......@@ -9,11 +9,14 @@ import {
} from 'react-navigation';
import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
// Smart meter
import SmartMeterScreen from './screens/Private/SmartMeterScreen/SmartMeterScreen';
import SmartMeterDetailScreen from './screens/Private/SmartMeterScreen/SmartMeterDetailScreen';
import CameraScreen from './screens/Private/CameraScreen';
import PageOne from './screens/Private/PageOne';
// Timer
import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
import PageTwo from './screens/Private/PageTwo';
import PageTree from './screens/Private/PageTree';
import PageFour from './screens/Private/PageFour';
......@@ -63,9 +66,9 @@ const CameraStack = createStackNavigator(
}
);
const FirstStack = createStackNavigator(
const TimerStack = createStackNavigator(
{
One: PageOne,
Timer: TimerScreen,
},
{
headerLayoutPreset: 'center',
......@@ -111,7 +114,7 @@ const BottomNavigationTabs = props => {
const BottomTabs = [
{ label: 'Smart Meter', icon: { name: 'home' } },
{ label: 'Time', icon: { name: 'md-time' } },
{ label: 'Timer', icon: { name: 'md-time' } },
{ label: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } },
{ label: 'Share', icon: { name: 'ios-share-alt' } },
{ label: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
......@@ -183,7 +186,7 @@ const BottomNavigationTabs = props => {
const WithBottomTabStack = createBottomTabNavigator(
{
SmartMeter: SmartMeterStack,
One: FirstStack,
Timer: TimerStack,
Two: SecondStack,
Tree: ThirdStack,
Four: FourthStack,
......
constants/Styles.js
......@@ -6,6 +6,8 @@ export const color = {
grey3: '#4a4a4a',
primary: '#f44c4c',
red1: '#fc3d3d',
camBg: 'rgba(51,51,61,0.65)',
defaultBg: '#f3f3f3',
};
export const theme = StyleSheet.create({
......@@ -57,4 +59,9 @@ export const theme = StyleSheet.create({
borderBottomWidth: 1,
paddingBottom: 5,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
screens/Private/CameraScreen.js
......@@ -5,6 +5,7 @@ import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
import * as Permissions from 'expo-permissions';
import { Camera } from 'expo-camera';
import { width } from '../../constants/Layout';
import { StyleSheet } from 'react-native';
export default class CameraScreen extends Component {
state = {
......@@ -42,14 +43,41 @@ export default class CameraScreen extends Component {
});
render() {
const { hasCameraPermission, scanned } = this.state;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(51,51,61,0.65)',
},
center: {
alignItems: 'center',
justifyContent: 'center',
},
torchBtn: {
width: 55,
height: 55,
borderRadius: 100,
backgroundColor: 'rgba(255,255,255,0.23)',
borderColor: 'rgba(255,255,255,0.25)',
borderWidth: 2,
alignSelf: 'center',
},
});
if (hasCameraPermission === null) {
return <Text>Requesting for camera permission</Text>;
return (
<View style={[styles.container, styles.center, { padding: 50 }]}>
<Text style={{ fontSize: 20, color: 'white' }}>Requesting for camera permission</Text>
</View>
);
}
if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
return (
<View style={[styles.container, styles.center, { padding: 50 }]}>
<Text style={{ fontSize: 20, color: 'white' }}>No access to camera</Text>
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'rgba(51,51,61,0.65)' }}>
<View style={styles.container}>
<View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 50 }}>
<Text style={{ fontSize: 18, color: 'white', textAlign: 'center', marginBottom: '5%' }}>
Scanning
......@@ -77,19 +105,9 @@ export default class CameraScreen extends Component {
flashMode={this.state.flashMode}
/>
</View>
<View style={{ flex: 1.7, justifyContent: 'center' }}>
<View style={[styles.center, { flex: 1.7 }]}>
<Button
style={{
width: 55,
height: 55,
borderRadius: 100,
backgroundColor: 'rgba(255,255,255,0.23)',
borderColor: 'rgba(255,255,255,0.25)',
borderWidth: 2,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
}}
style={[styles.torchBtn, styles.center]}
onPress={() => {
this.setState({
flashMode:
......
screens/Private/TimerScreen/TimerScreen.js 0 → 100644
import React, { Component } from 'react';
import { Text, Switch, Fab, Icon } from 'native-base';
import { View } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { color } from '../../../constants/Styles';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Badge } from 'react-native-elements';
import Swipeout from 'react-native-swipeout';
// Swipe button
var swipeoutBtns = [
{
text: <Icon name="trash" style={{ color: 'white' }} />,
backgroundColor: color.primary,
onPress: () => console.log('press deleted!'),
},
];
// mock data
const mockData = [
{
id: 1,
time: '6.00',
period: 'AM',
name: 'Slot 1',
active: true,
repeat: 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 },
],
},
{
id: 2,
time: '7.00',
period: 'AM',
name: 'Slot 2',
active: true,
repeat: 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 },
],
},
{
id: 3,
time: '8.00',
period: 'PM',
name: 'Slot 3',
active: false,
repeat: true,
day: [
{ day: 'S', dayActive: false },
{ day: 'M', dayActive: false },
{ day: 'T', dayActive: true },
{ day: 'W', dayActive: false },
{ day: 'T', dayActive: false },
{ day: 'F', dayActive: false },
{ day: 'S', dayActive: false },
],
},
];
export default class TimerScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Timer',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => console.log('menu')} />
</HeaderButtons>
),
headerRight: (
<TouchableOpacity onPress={() => console.log('clicked')}>
<View style={{ marginRight: 17 }}>
<Icon name="ios-notifications" style={{ color: '#fff' }} />
<Badge
badgeStyle={{
width: 12,
height: 12,
borderWidth: 2,
backgroundColor: '#f8e71c',
borderColor: color.primary,
borderRadius: 6,
}}
containerStyle={{ position: 'absolute', top: -2, right: -4 }}
/>
</View>
</TouchableOpacity>
),
});
render() {
const TimerCard = props => {
const data = props.data;
return (
<Swipeout right={swipeoutBtns} style={{ backgroundColor: 'transparent' }}>
<View style={{ paddingHorizontal: 20 }}>
<View
style={{
flexDirection: 'row',
paddingVertical: 15,
borderBottomColor: 'rgba(151,151,151,0.3)',
borderBottomWidth: 1,
}}
>
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 22, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
{data.time} <Text style={{ fontSize: 12 }}>{data.period}</Text>
</Text>
<View style={{ flexDirection: 'row' }}>
{data.day.map((item, index) => (
<Text
key={index}
style={{ fontSize: 12, color: item.dayActive ? color.primary : '#9b9b9b' }}
>
{item.day}{' '}
</Text>
))}
</View>
</View>
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 22, color: '#4a4a4a', fontFamily: 'Avenir-Roman' }}>
{data.name}
</Text>
<View style={{ flexDirection: 'row' }}>
<Text style={{ fontSize: 12, color: '#9b9b9b' }}>
Active: {data.active ? 'on' : 'off'}{' '}
</Text>
<Text style={{ fontSize: 12, color: '#9b9b9b' }}>
Repeat: {data.repeat ? 'on' : 'off'}
</Text>
</View>
</View>
<View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
<Switch
value={data.active}
trackColor={{ true: 'rgba(238,84,84,0.5)' }}
ios_backgroundColor={'#dfdfdf'}
thumbColor={'#ee5454'}
/>
</View>
</View>
</View>
</Swipeout>
);
};
const TimerFab = () => {
return (
<Fab
// active={this.state.active}
// direction="up"
containerStyle={{ marginBottom: 100 }}
style={{ backgroundColor: color.primary }}
position="bottomRight"
onPress={() => console.log('create new timer!')}
>
<Icon name="add" />
</Fab>
);
};
return (
<View style={{ flex: 1, backgroundColor: 'white', paddingVertical: 10 }}>
{mockData.map((item, index) => (
<TimerCard key={index} data={item} />
))}
<TimerFab />
</View>
);
}
}
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