Skip to content

2
240
Commit 48a4f9a7 authored by Malsha Rathnasiri's avatar Malsha Rathnasiri
Browse files
Options

add new integrations

parent 3a33a194
Show whitespace changes
Inline Side-by-side
Showing with 2025 additions and 148 deletions
MobileApp/navigation/index.jsx
View file @ 48a4f9a7
...@@ -28,6 +28,7 @@ import LinkingConfiguration from './LinkingConfiguration'; ...@@ -28,6 +28,7 @@ import LinkingConfiguration from './LinkingConfiguration';
import Small_logo from '../assets/images/Logo_small.jpeg' import Small_logo from '../assets/images/Logo_small.jpeg'
import { PRIMARY_COLOR } from '../util/styles'; import { PRIMARY_COLOR } from '../util/styles';
import InnerNavigator from '../screens/InnerNavigator'; import InnerNavigator from '../screens/InnerNavigator';
import Signup from '../screens/Signup';
export default function Navigation({ colorScheme }) { export default function Navigation({ colorScheme }) {
return ( return (
...@@ -79,6 +80,7 @@ function RootNavigator() { ...@@ -79,6 +80,7 @@ function RootNavigator() {
<Stack.Group screenOptions={{ presentation: 'modal' }}> <Stack.Group screenOptions={{ presentation: 'modal' }}>
<Stack.Screen name="Modal" component={ModalScreen} /> <Stack.Screen name="Modal" component={ModalScreen} />
</Stack.Group> </Stack.Group>
<Stack.Screen name="Signup" component={Signup} />
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
MobileApp/screens/Comment.js 0 → 100644
View file @ 48a4f9a7
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
const Comment = (props) => {
return (
<View style={styles.item}>
<View style={styles.itemLeft}>
<View style={styles.square}></View>
<Text style={styles.itemText}>{props.text}</Text>
</View>
<View style={styles.circular}></View>
</View>
)
}
const styles = StyleSheet.create({
item: {
backgroundColor: '#FFF',
padding: 15,
borderRadius: 10,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
},
itemLeft: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap'
},
square: {
width: 24,
height: 24,
backgroundColor: '#55BCF6',
opacity: 0.4,
borderRadius: 5,
marginRight: 15,
},
itemText: {
maxWidth: '80%',
},
circular: {
width: 12,
height: 12,
borderColor: '#55BCF6',
borderWidth: 2,
borderRadius: 5,
},
});
export default Comment;
\ No newline at end of file
MobileApp/screens/ConfirmPayment.js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { alignContent, flex, flexDirection, marginBottom, width } from 'styled-system';
import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors;
import { useRoute } from '@react-navigation/native';
function ConfirmPayment() {
const navigation = useNavigation();
const route = useRoute();
seatNo= 9;
const data= route.params.data;
const accData= data.split(/\r?\n/)
console.log(accData);
const [amount, setAmount] = useState('');
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
accNo = accData[1]
const conPayment = () => {
navigation.navigate('PaymentStatus', {
amount,accNo
});
};
return (
<View style={styles.container}>
<View style={styles.main}>
<View style={styles.Info} >
<Text style={{fontSize: 20 , marginTop: 20, color:'green'}}>payment amount </Text>
<TextInput style={styles.input}
onChangeText={(value) => setAmount(value)}
placeholder = " amount "
keyboardType="numeric"
/>
</View>
</View>
<View style={styles.weatherDetails}>
<View style={styles.weatherDetailsRow}>
<View style={{ ...styles.weatherDetailsBox, borderRightWidth: 1, borderRightColor: BORDER_COLOR }}>
<View style={styles.weatherDetailsRow}>
<MaterialCommunityIcons name="card-account-details-outline" size={25} color={PRIMARY_COLOR} />
<View style={styles.weatherDetailsItems}>
<Text>Acc Number</Text>
<Text style={styles.textSecondary}>{accData[1]}</Text>
</View>
</View>
</View>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<MaterialCommunityIcons name="bank" size={25} color={PRIMARY_COLOR} />
<View style={styles.weatherDetailsItems}>
<Text>Bank name</Text>
<Text style={styles.textSecondary}>{accData[2]}</Text>
</View>
</View>
</View>
</View>
<View style={{ ...styles.weatherDetailsRow, borderTopWidth: 1, borderTopColor: BORDER_COLOR }}>
<View style={{ ...styles.weatherDetailsBox, borderRightWidth: 1, borderRightColor: BORDER_COLOR }}>
<View style={styles.weatherDetailsRow}>
<MaterialCommunityIcons name="map-marker" size={30} color={PRIMARY_COLOR} />
<View style={styles.weatherDetailsItems}>
<Text>Branch name</Text>
<Text style={styles.textSecondary}>{accData[3]}</Text>
</View>
</View>
</View>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<MaterialCommunityIcons name="qrcode" size={30} color={PRIMARY_COLOR} />
<View style={styles.weatherDetailsItems}>
<Text>QR Tpye </Text>
<Text style={styles.textSecondary}>{route.params.type}</Text>
</View>
</View>
</View>
</View>
</View>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={conPayment}>
Confirm Payment
</Button>
</View>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={saveSeatNo}>
Cancel Payment
</Button>
</View>
</View>
);
}
export default () => {
return (
<NativeBaseProvider>
<ConfirmPayment />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
main: {
marginTop: 200,
justifyContent: 'center',
},
Icon: {
width: 100,
height: 100,
},
Info: {
alignItems: 'center',
},
weatherDetails: {
marginTop: 50,
margin: 5,
borderWidth: 1,
borderColor: BORDER_COLOR,
borderRadius: 10,
},
weatherDetailsRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
weatherDetailsBox: {
flex: 1,
padding: 20,
},
weatherDetailsItems: {
alignItems: 'flex-end',
justifyContent: 'flex-end',
},
textSecondary: {
fontSize: 15,
color: SECONDARY_COLOR,
fontWeight: '700',
margin: 7,
},
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd',
marginBottom: 12
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
input: {
height: 40,
marginTop: 12,
borderWidth: 1,
padding: 10,
},
})
\ No newline at end of file
MobileApp/screens/DriverInfo.js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Keyboard, KeyboardAvoidingView,TextInput } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import SQLite from 'react-native-sqlite-storage';
import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors
import Comment from './Comment';
import { marginBottom } from 'styled-system';
import { useRoute } from '@react-navigation/native';
function DriverInfo() {
const navigation = useNavigation();
seatNo= 9;
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
const [comment, setComment] = useState();
const [commentItems, setCcommentItems] = useState([]);
const handleAddComment = () => {
Keyboard.dismiss();
setCcommentItems([...commentItems, comment])
setComment(null);
}
const completeComment = (index) => {
let itemsCopy = [...commentItems];
itemsCopy.splice(index, 1);
setCcommentItems(itemsCopy)
}
return (
<View style={styles.container}>
<View style={styles.TopView}>
<Image style={styles.imageStyle} source={require('../assets/driver.png')} alt="image" />
</View>
<View style={styles.Middle}>
<Text style={styles.LoginText}>Gayan Peris</Text>
</View>
<View style={styles.weatherDetails}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<Text style={styles.textSecondary}>Years</Text>
<Text style={styles.textSecondary}>4+</Text>
</View>
</View>
</View>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<Text style={styles.textSecondary}>Rating</Text>
<Text style={styles.textSecondary}>4.8</Text>
</View>
</View>
</View>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<Text style={styles.textSecondary}>Vehicle</Text>
<Text style={{ marginTop:5,justifyContent:'flex-start', fontSize: 15, fontWeight: '700', color: SECONDARY_COLOR,}}>BDA - 0713</Text>
</View>
</View>
</View>
</View>
</View>
<ScrollView
contentContainerStyle={{ flexGrow: 1}} keyboardShouldPersistTaps='handled'
>
<View style={styles.tasksWrapper}>
<Text style={styles.sectionTitle}>feedback</Text>
<View style={styles.items}>
{/* This is where the tasks will go! */}
{
commentItems.map((item, index) => {
return (
<TouchableOpacity key={index} onPress={() => completeComment(index)}>
<Comment text={item} />
</TouchableOpacity>
)
})
}
</View>
</View>
</ScrollView>
{/* Write a task */}
{/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.writeTaskWrapper}
>
<TextInput style={styles.input} placeholder={'Write a comment'} value={comment} onChangeText={text => setComment(text)} />
<TouchableOpacity onPress={() => handleAddComment()}>
<View style={styles.addWrapper}>
<Text style={styles.addText}>+</Text>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
{/* Button */}
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={saveSeatNo}>
Home
</Button>
</View>
<StatusBar style="auto" />
</View>
);
}
export default () => {
return (
<NativeBaseProvider>
<DriverInfo />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
LoginText: {
marginTop:30,
fontSize:30,
fontWeight:'bold',
},
Middle:{
alignItems:'center',
justifyContent:'center',
},
text2:{
flexDirection:'row',
justifyContent:'center',
paddingTop:5
},
buttonStyle:{
marginLeft:15,
marginRight:15,
marginBottom:15,
},
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
lineStyle:{
flexDirection:'row',
marginTop:30,
marginLeft:15,
marginRight:15,
alignItems:'center'
},
imageStyle:{
width:80,
height:80,
marginLeft:20,
},
boxStyle:{
flexDirection:'row',
marginTop:30,
marginLeft:15,
marginRight:15,
justifyContent:'space-around'
},
TopView:{
width:'100%',
height:'30%',
display:'flex',
justifyContent:'center',
alignItems:'center',
},
imageStyle:{
width:'50%',
resizeMode:'contain',
alignItems:'center',
top: 50,
},
weatherDetails: {
marginTop: 30,
margin: 5,
borderWidth: 1,
borderColor: BORDER_COLOR,
borderRadius: 10,
},
weatherDetailsRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
weatherDetailsBox: {
flex: 1,
padding: 10,
},
weatherDetailsItems: {
alignItems: 'flex-end',
justifyContent: 'flex-end',
},
textSecondary: {
fontSize: 15,
color: SECONDARY_COLOR,
fontWeight: '700',
margin: 7,
},
tasksWrapper: {
paddingTop: 30,
paddingHorizontal: 10,
},
sectionTitle: {
fontSize: 24,
fontWeight: 'bold'
},
items: {
marginTop: 10,
},
writeTaskWrapper: {
position: 'absolute',
bottom: 60,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
input: {
paddingVertical: 15,
paddingHorizontal: 15,
backgroundColor: '#FFF',
borderRadius: 60,
borderColor: '#C0C0C0',
borderWidth: 1,
width: 250,
},
addWrapper: {
width: 60,
height: 60,
backgroundColor: '#FFF',
borderRadius: 60,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#C0C0C0',
borderWidth: 1,
},
addText: {},
});
MobileApp/screens/GenerateSeatNo.js 0 → 100644
View file @ 48a4f9a7
import { useNavigation } from '@react-navigation/native';
import React from 'react';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useRoute } from '@react-navigation/native';
import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors
function GenerateSeatNo() {
const navigation = useNavigation();
const route = useRoute();
seatNo= 'NA'
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
const confirmSeatNo = () => {
navigation.navigate('RegInfo', {
seatNo
});
};
const people = [
{'name':"ruwan",'age':26,'gender':"F",'job':"IT"},
{'name':"madush",'age':28,'gender':"F",'job':"HR"},
{'name':"gayan",'age':32,'gender':"M",'job':"IT"},
{'name':"yohan",'age':29,'gender':"F",'job':"Engineer"},
{'name':"rukshan",'age':34,'gender':"M",'job':"HR"},
{'name':"namal",'age':38,'gender':"F",'job':"IT"},
{'name':"kasun",'age':45,'gender':"M",'job':"Engineer"},
{'name':"nuwan",'age':55,'gender':"M",'job':"Engineer"}
]
const newPeople= {'name': route.params.username,'age':route.params.age,'gender':route.params.genderx,'job':route.params.selectedProfession.item}
console.log(newPeople);
const addPeople = [].concat(people, newPeople)
console.log(addPeople);
const age_30= addPeople.filter(function(element){
return element.age < 30 && element.age>0 ;
});
const sortedAge_30 = [...age_30].sort((a, b) => a.age - b.age || a.gender - b.gender);
/*console.log('sortedAge_30', sortedAge_30);*/
const age_40= addPeople.filter(function(element){
return element.age < 40 && element.age>30;
});
const sortedAge_40 = [...age_40].sort((a, b) => a.age - b.age || a.gender - b.gender);
/*console.log('sortedAge_40', sortedAge_40);*/
const age_50= addPeople.filter(function(element){
return element.age < 50 && element.age>40;
});
const sortedAge_50 = [...age_50].sort((a, b) => a.age - b.age || a.gender - b.gender);
/*console.log('sortedAge_50', sortedAge_50);*/
const age_60= addPeople.filter(function(element){
return element.age < 60 && element.age>50;
});
const sortedAge_60 = [...age_60].sort((a, b) => a.age - b.age || a.gender - b.gender);
/*console.log('sortedAge_60', sortedAge_60);*/
const merged = [].concat(sortedAge_30, sortedAge_40,sortedAge_50,sortedAge_60);
console.log('mm',merged);
const index = merged.findIndex(object => {
return object.name === route.params.username;
});
seatNo= index+1;
function GenSeatNo() {
console.log(final_list);
}
return (
<View style={styles.container}>
<View style={styles.lineStyle}>
<View>
<Text style={{width: 120, textAlign: 'left', fontWeight:'bold', fontSize:15, marginTop: 100}}>Your Data</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black', marginTop: 100}} />
</View>
<View style={styles.summeryDetails}>
<View style={styles.summeryDetailsRow}>
<View style={{ ...styles.summeryDetailsBox, borderRightWidth: 1, borderRightColor: BORDER_COLOR }}>
<View style={styles.summeryDetailsRow}>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Name :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.username}</Text>
</View>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Email :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.email}</Text>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Age :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.age}</Text>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Gender :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.genderx}</Text>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Job :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.selectedProfession.item}</Text>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Pickup :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.selectedPickLoc.item}</Text>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{color:'#8e8e8e',fontSize: 15 , textAlign: 'left',fontWeight:'bold',marginTop: 3}}>Pickup :</Text>
</View>
<View style={{ margin: 20, marginVertical: 20 }}>
<Text style={{color:'#8e8e8e',fontSize: 15 ,textAlign: 'right',fontWeight:'bold', marginTop: 3}}>{route.params.selectedDropLoc.item}</Text>
</View>
</View>
</View>
</View>
</View>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={confirmSeatNo}>
Save Reservation
</Button>
</View>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={saveSeatNo}>
Cancel Reservation
</Button>
</View>
</View>
)
}
export default () => {
return (
<NativeBaseProvider>
<GenerateSeatNo />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
TopView:{
width:'100%',
height:'30%',
display:'flex',
justifyContent:'center',
alignItems:'center',
},
summeryDetails: {
marginTop: 30,
margin: 15,
borderWidth: 1,
borderColor: BORDER_COLOR,
borderRadius: 10,
},
summeryDetailsRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
summeryDetailsBox: {
flex: 1,
padding: 20,
},
summeryDetailsItems: {
alignItems: 'flex-end',
justifyContent: 'flex-end',
},
lineStyle:{
flexDirection:'row',
marginTop:15,
marginLeft:15,
marginRight:15,
alignItems:'center'
},
imageStyle:{
width:80,
height:80,
marginLeft:20,
},
row: {
flexDirection: "row",
paddingRight: 12,
},
})
\ No newline at end of file
MobileApp/screens/Home (2).js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { alignContent, flex, flexDirection, width } from 'styled-system';
import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors
import { useRoute } from '@react-navigation/native';
function Home() {
const navigation = useNavigation();
const route = useRoute();
seatNo= route.params.seatNo;
console.log(seatNo);
const saveSeatNo = () => {
navigation.navigate('RegInfo', {
seatNo
});
};
return (
<View style={styles.container}>
<View style={styles.TopView}>
<Image style={styles.imageStyle} source={require('../assets/logo.jpg')} alt="image" />
</View>
<View style={styles.Info} >
<Text style={{fontSize: 20 , marginTop: 20, color:'#8e8e8e'}}>Keep a safe distance from vehicles!</Text>
</View>
<View style={styles.weatherDetails}>
<View style={styles.weatherDetailsRow}>
<View style={{ ...styles.weatherDetailsBox, borderRightWidth: 1, borderRightColor: BORDER_COLOR }}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<MaterialCommunityIcons name="seatbelt" size={30} color='#3366ff' />
<TouchableOpacity onPress={saveSeatNo} >
<Text style={styles.textSecondary}>Seat Reservation</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<FontAwesome5 name="route" size={25} color='#3366ff' />
<TouchableOpacity onPress={() => navigation.navigate("RouteInfo")} >
<Text style={styles.textSecondary}>Route Info</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View style={{ ...styles.weatherDetailsRow, borderTopWidth: 1, borderTopColor: BORDER_COLOR }}>
<View style={{ ...styles.weatherDetailsBox, borderRightWidth: 1, borderRightColor: BORDER_COLOR }}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<MaterialCommunityIcons name="comment-account-outline" size={30} color='#3366ff' />
<TouchableOpacity onPress={() => navigation.navigate("DriverInfo")} >
<Text style={styles.textSecondary}>Driver feedback</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.weatherDetailsBox}>
<View style={styles.weatherDetailsRow}>
<View style={styles.weatherDetailsItems}>
<MaterialCommunityIcons name="map-marker-radius-outline" size={30} color='#3366ff' />
<TouchableOpacity onPress={() => navigation.navigate("Location")} >
<Text style={styles.textSecondary}>Find Vehicle</Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={() => navigation.navigate("Login")}>
Logout
</Button>
</View>
</View>
);
}
export default () => {
return (
<NativeBaseProvider>
<Home />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
main: {
marginTop: 200,
justifyContent: 'center',
},
Icon: {
width: 100,
height: 100,
},
Info: {
alignItems: 'center',
},
weatherDetails: {
marginTop: 100,
margin: 15,
borderWidth: 1,
borderColor: BORDER_COLOR,
borderRadius: 10,
},
weatherDetailsRow: {
flexDirection: 'row',
alignItems: 'stretch'
},
weatherDetailsBox: {
flex: 1,
padding: 20,
},
weatherDetailsItems: {
alignItems: 'center',
justifyContent: 'stretch',
},
textSecondary: {
fontSize: 15,
color: SECONDARY_COLOR,
fontWeight: '700',
margin: 7,
alignItems:'center',
},
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
TopView:{
width:'100%',
height:'30%',
display:'flex',
justifyContent:'center',
alignItems:'center',
},
imageStyle:{
width:'60%',
resizeMode:'contain',
alignItems:'center',
top: 100,
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
})
\ No newline at end of file
MobileApp/screens/InnerNavigator.js
View file @ 48a4f9a7
import React from 'react'; import React from "react";
import RegInfo from './RegInfo';
import RouteInfo from './RouteInfo';
import Home from './Home';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import RegInfo from "./RegInfo";
import RouteInfo from "./RouteInfo";
import Home from "./Home";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import DriverInfo from "./DriverInfo";
import GenerateSeatNo from "./GenerateSeatNo";
import PaymentQR from "./PaymentQR";
import ConfirmPayment from "./ConfirmPayment";
import PaymentStatus from "./PaymentStatus";
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
function App() { function App() {
return ( return (
<Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={"Home"}>
<Stack.Screen name="Root" component={Home} /> {/* <Stack.Screen name="Root" component={Home} />
<Stack.Screen name="RegInfo" component={RegInfo} />
<Stack.Screen name="RouteInfo" component={RouteInfo} /> */}
{/* <Stack.Screen name="Login" component={Login} /> */}
<Stack.Screen name="RegInfo" component={RegInfo} /> <Stack.Screen name="RegInfo" component={RegInfo} />
<Stack.Screen name="RouteInfo" component={RouteInfo} /> <Stack.Screen name="RouteInfo" component={RouteInfo} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="DriverInfo" component={DriverInfo} />
<Stack.Screen name="Location" component={Location} />
<Stack.Screen name="GenerateSeatNo" component={GenerateSeatNo} />
<Stack.Screen name="PaymentQR" component={PaymentQR} />
<Stack.Screen name="ConfirmPayment" component={ConfirmPayment} />
<Stack.Screen name="PaymentStatus" component={PaymentStatus} />
</Stack.Navigator> </Stack.Navigator>
); );
} }
export default () => { export default () => {
return ( return (
<NavigationContainer independent> <NavigationContainer independent>
<App /> <App />
</NavigationContainer> </NavigationContainer>
) );
} };
MobileApp/screens/Location.js 0 → 100644
View file @ 48a4f9a7
import * as React from "react"
import { Dimensions, StyleSheet, Text, View } from "react-native"
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete"
import MapView, { Callout, Circle, Marker } from "react-native-maps" //library
import { Input, NativeBaseProvider, Button} from 'native-base';
import { useNavigation } from '@react-navigation/native';
function Location() {
const navigation = useNavigation();
const [ pin, setPin ] = React.useState({
latitude: 6.914879860168769, //curren loc
longitude: 79.97292303901023
})
const [ pin2, setPin2 ] = React.useState({
latitude: 6.935870750489668, // vehicle loc
longitude: 79.98420673859631
})
const [ region, setRegion ] = React.useState({
latitude: 6.914879860168769,
longitude: 79.97292303901023,
latitudeDelta: 0.0922, //map hight
longitudeDelta: 0.0421 // map width
})
return (
<View style={{ marginTop: 50, flex: 1 }}>
<GooglePlacesAutocomplete
placeholder='Search'
minLength={2} // minimum length of text to search
autoFocus={false}
returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
listViewDisplayed={false} // true/false/undefined
fetchDetails={true}
keyboardShouldPersistTaps='always'
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details)
setRegion({
latitude: details.geometry.location.lat,
longitude: details.geometry.location.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
})
}}
query={{
key: "KEY",
language: "en",
components: "country:us",
types: "establishment",
radius: 30000,
location: `${region.latitude}, ${region.longitude}`
}}
styles={{
container: { flex: 0, position: "absolute", width: "100%", zIndex: 1 },
listView: { backgroundColor: "white" }
}}
/>
<MapView
style={styles.map}
initialRegion={{
latitude: 6.914879860168769,
longitude: 79.97292303901023,
latitudeDelta: 0.00,
longitudeDelta: 0.04
}}
provider="google"
>
<Marker coordinate={{ latitude: region.latitude, longitude: region.longitude }} />
<Marker
coordinate={pin}
pinColor="red"
draggable={true}
onDragStart={(e) => {
console.log("Drag start", e.nativeEvent.coordinates)
}}
onDragEnd={(e) => {
setPin({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude
})
}}
>
<Callout tooltip={true}>
<Text style={{fontSize: 20 , fontWeight:'bold', color:'red'}}>I'm here</Text>
</Callout>
</Marker>
<Circle center={pin} radius={500} />
<Marker
coordinate={pin2}
pinColor="green"
draggable={true}
onDragStart={(e) => {
console.log("Drag start", e.nativeEvent.coordinates)
}}
onDragEnd={(e) => {
setPin2({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude
})
}}
>
<Callout>
<Text style={{fontSize: 20 , fontWeight:'bold', color:'green'}}>vehicle</Text>
</Callout>
</Marker>
<Circle center={pin2} radius={500} />
</MapView>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={() => navigation.navigate("Login")}>
Logout
</Button>
</View>
</View>
)
}
export default () => {
return (
<NativeBaseProvider>
<Location />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
map: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
})
\ No newline at end of file
MobileApp/screens/Login.js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5 } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import SQLite from 'react-native-sqlite-storage';
function Login() {
const navigation = useNavigation();
seatNo= 9;
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
return (
<View style={styles.container}>
<View style={styles.TopView}>
<Image style={styles.imageStyle}
source={require('../assets/logo.jpg')}
alt="image"
/>
</View>
<View style={styles.Middle}>
<Text style={styles.LoginText}>Login</Text>
</View>
<View style={styles.text2}>
<Text>Don't have an account? </Text>
<TouchableOpacity onPress={() => navigation.navigate("Signup")} ><Text style={styles.signupText}> Sign up</Text></TouchableOpacity>
</View>
{/* Username or Email Input Field */}
<View style={styles.buttonStyle}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<FontAwesome5 name="user-secret" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
placeholder="Username or Email"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
/>
</View>
</View>
{/* Password Input Field */}
<View style={styles.buttonStyleX}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<FontAwesome5 name="key" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
secureTextEntry={true}
placeholder="Password"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
/>
</View>
</View>
{/* Button */}
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={saveSeatNo}>
LOGIN
</Button>
</View>
<StatusBar style="auto" />
</View>
);
}
export default () => {
return (
<NativeBaseProvider>
<Login />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
LoginText: {
marginTop:100,
fontSize:30,
fontWeight:'bold',
},
Middle:{
alignItems:'center',
justifyContent:'center',
},
text2:{
flexDirection:'row',
justifyContent:'center',
paddingTop:5
},
signupText:{
fontWeight:'bold'
},
emailField:{
marginTop:30,
marginLeft:15
},
emailInput:{
marginTop:10,
marginRight:5
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
lineStyle:{
flexDirection:'row',
marginTop:30,
marginLeft:15,
marginRight:15,
alignItems:'center'
},
imageStyle:{
width:80,
height:80,
marginLeft:20,
},
boxStyle:{
flexDirection:'row',
marginTop:30,
marginLeft:15,
marginRight:15,
justifyContent:'space-around'
},
TopView:{
width:'100%',
height:'30%',
display:'flex',
justifyContent:'center',
alignItems:'center',
},
imageStyle:{
width:'60%',
resizeMode:'contain',
alignItems:'center',
top: 100,
},
});
MobileApp/screens/PaymentQR.js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useEffect } from 'react';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { useRoute } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
export default function PaymentQR () {
const navigation = useNavigation();
const [hasPermission, setHasPermission] = React.useState(false);
const [scanData, setScanData] = React.useState();
useEffect(() => {
(async() => {
const {status} = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
if (!hasPermission) {
return (
<View style={styles.container}>
<Text>Please grant camera permissions to app.</Text>
</View>
);
}
const handleBarCodeScanned = ({type, data}) => {
setScanData(data);
navigation.navigate('ConfirmPayment', {
data,type
});
};
return (
<View style={styles.container}>
<BarCodeScanner
style={StyleSheet.absoluteFillObject}
onBarCodeScanned={scanData ? undefined : handleBarCodeScanned}
/>
{scanData && <Button title='Scan Again?' onPress={() => setScanData(undefined)} />}
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
})
\ No newline at end of file
MobileApp/screens/PaymentStatus.js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { alignContent, flex, flexDirection, width } from 'styled-system';
import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors;
import { useRoute } from '@react-navigation/native';
function PaymentStatus() {
const navigation = useNavigation();
const route = useRoute();
seatNo= 9;
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
return (
<View style={styles.container}>
<View style={styles.main}>
<View style={styles.Info} >
<Image style={styles.Icon} source={require('../assets/successful.jpg')} alt="image" />
<Text style={{fontSize: 20 , marginTop: 20, color:'green'}}>Payment completed</Text>
<Text style={{fontSize: 12 , marginTop: 10, color:'#8e8e8e'}}>Ref# 837110243</Text>
<Text style={{fontSize: 20 , fontWeight:'bold', marginTop: 30, color:'green'}}>Paid Amount </Text>
<Text style={{fontSize: 45 , fontWeight:'bold', marginTop: 5, color:'#ff304f'}}>RS {route.params.amount}.00</Text>
<Text style={{fontSize: 12 , marginTop: 10, color:'#8e8e8e'}}>Account Number</Text>
<Text style={{fontSize: 20 , fontWeight:'bold', marginTop: 5, color:'#8e8e8e'}}>{route.params.accNo}</Text>
</View>
</View>
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={saveSeatNo}>
Home
</Button>
</View>
</View>
);
};
export default () => {
return (
<NativeBaseProvider>
<PaymentStatus />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
main: {
marginTop: 200,
justifyContent: 'center',
},
Icon: {
width: 100,
height: 100,
},
Info: {
alignItems: 'center',
},
textSecondary: {
fontSize: 15,
color: SECONDARY_COLOR,
fontWeight: '700',
margin: 7,
},
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
})
\ No newline at end of file
MobileApp/screens/RegInfo.js
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base'; import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons'; import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { colors } from '../util/index' import { alignContent, flex, flexDirection, width } from 'styled-system';
const { PRIMARY_COLOR, SECONDARY_COLOR, BORDER_COLOR } = colors import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors;
import { useRoute } from '@react-navigation/native';
function RegInfo() { function RegInfo() {
const navigation = useNavigation(); const navigation = useNavigation();
const route = useRoute();
seatNo= route.params.seatNo;
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.main}> <View style={styles.main}>
<View style={styles.Info} > <View style={styles.Info} >
<Image style={styles.Icon} source={require('../assets/successful.jpg')} alt="image" /> <Image style={styles.Icon} source={require('../assets/successful.jpg')} alt="image" />
<Text style={{ fontSize: 20, marginTop: 20, color: 'green' }}>Seat Reservation completed</Text> <Text style={{fontSize: 20 , marginTop: 20, color:'green'}}>Seat Reservation completed</Text>
<Text style={{ fontSize: 12, marginTop: 10, color: '#8e8e8e' }}>Ref# 837110243</Text> <Text style={{fontSize: 12 , marginTop: 10, color:'#8e8e8e'}}>Ref# 837110243</Text>
<Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 30, color: 'green' }}>Your Seat Number</Text> <Text style={{fontSize: 20 , fontWeight:'bold', marginTop: 30, color:'green'}}>Your Seat Number</Text>
<Text style={{ fontSize: 45, fontWeight: 'bold', marginTop: 5, color: '#ff304f' }}>25</Text> <Text style={{fontSize: 45 , fontWeight:'bold', marginTop: 5, color:'#ff304f'}}>{route.params.seatNo}</Text>
</View> </View>
</View> </View>
<View style={styles.weatherDetails}> <View style={styles.weatherDetails}>
...@@ -39,7 +47,7 @@ function RegInfo() { ...@@ -39,7 +47,7 @@ function RegInfo() {
<FontAwesome5 name="user-secret" size={25} color={PRIMARY_COLOR} /> <FontAwesome5 name="user-secret" size={25} color={PRIMARY_COLOR} />
<View style={styles.weatherDetailsItems}> <View style={styles.weatherDetailsItems}>
<Text>Driver name</Text> <Text>Driver name</Text>
<Text style={styles.textSecondary}>Anura Kumara</Text> <Text style={styles.textSecondary}>Gayan Peris</Text>
</View> </View>
</View> </View>
</View> </View>
...@@ -66,7 +74,7 @@ function RegInfo() { ...@@ -66,7 +74,7 @@ function RegInfo() {
</View> </View>
</View> </View>
<View style={styles.buttonStyle}> <View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={() => navigation.navigate("Root")}> <Button style={styles.buttonDesign} onPress={saveSeatNo}>
Home Home
</Button> </Button>
</View> </View>
...@@ -75,24 +83,24 @@ function RegInfo() { ...@@ -75,24 +83,24 @@ function RegInfo() {
); );
} }
export default () => { export default () => {
return ( return (
<NativeBaseProvider> <NativeBaseProvider>
<RegInfo /> <RegInfo />
</NativeBaseProvider> </NativeBaseProvider>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#fff', backgroundColor: '#fff',
}, },
main: { main: {
marginTop: 10, marginTop: 200,
justifyContent: 'center', justifyContent: 'center',
}, },
...@@ -104,7 +112,7 @@ const styles = StyleSheet.create({ ...@@ -104,7 +112,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
weatherDetails: { weatherDetails: {
marginTop: 60, marginTop: 100,
margin: 15, margin: 15,
borderWidth: 1, borderWidth: 1,
borderColor: BORDER_COLOR, borderColor: BORDER_COLOR,
...@@ -129,17 +137,17 @@ const styles = StyleSheet.create({ ...@@ -129,17 +137,17 @@ const styles = StyleSheet.create({
fontWeight: '700', fontWeight: '700',
margin: 7, margin: 7,
}, },
buttonStyleX: { buttonStyleX:{
marginTop: 12, marginTop:12,
marginLeft: 15, marginLeft:15,
marginRight: 15 marginRight:15
}, },
buttonDesign: { buttonDesign:{
backgroundColor: '#026efd' backgroundColor:'#026efd'
}, },
buttonStyle: { buttonStyle:{
marginTop: 30, marginTop:30,
marginLeft: 15, marginLeft:15,
marginRight: 15 marginRight:15
}, },
}) })
\ No newline at end of file \ No newline at end of file
MobileApp/screens/RouteInfo.js
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react'; import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base'; import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { colors } from '../util/index' import SelectBox from 'react-native-multi-selectbox';
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors import { xorBy } from 'lodash';
import RadioForm from 'react-native-radio-form';
import { colors } from '../utils/index'
const { PRIMARY_COLOR, SECONDARY_COLOR,BORDER_COLOR } = colors
import { useRoute } from '@react-navigation/native';
import { marginBottom } from 'styled-system';
import { collection, doc, setDoc, addDoc,getDocs,query ,where} from "firebase/firestore";
import {db} from './config';
function RouteInfo() { function RouteInfo() {
const navigation = useNavigation(); const navigation = useNavigation();
seatNo= 9;
const saveSeatNo = () => {
navigation.navigate('Home', {
seatNo
});
};
const memberAttendance = [];
const sortData= [];
//connect to db
async function readData(){
const q = query(collection(db, "member_attendance"), where("name", "==", 'shashini'));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
memberAttendance.push(doc.data());
});
console.log(memberAttendance)
return memberAttendance;
}
data= readData()
console.log(data)
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.Head}> <View style={styles.Head}>
...@@ -109,7 +137,10 @@ return ( ...@@ -109,7 +137,10 @@ return (
</View> </View>
{/* Button */} {/* Button */}
<View style={styles.buttonStyle}> <View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPress={() => navigation.navigate("Root")}> <Button style={styles.buttonDesign} onPress={()=>navigation.navigate('PaymentQR')}>
Payment
</Button>
<Button style={styles.buttonDesign} onPress={saveSeatNo}>
Home Home
</Button> </Button>
</View> </View>
...@@ -137,12 +168,12 @@ const styles = StyleSheet.create({ ...@@ -137,12 +168,12 @@ const styles = StyleSheet.create({
backgroundColor: '#fff', backgroundColor: '#fff',
}, },
HeadText: { HeadText: {
marginTop:10, marginTop:80,
fontSize:30, fontSize:30,
fontWeight:'bold', fontWeight:'bold',
}, },
Head:{ Head:{
// alignItems:'left', alignItems:'left',
justifyContent:'center', justifyContent:'center',
marginLeft:15, marginLeft:15,
...@@ -155,8 +186,8 @@ const styles = StyleSheet.create({ ...@@ -155,8 +186,8 @@ const styles = StyleSheet.create({
alignItems:'center' alignItems:'center'
}, },
summeryDetails: { summeryDetails: {
marginTop: 15, marginTop: 20,
margin: 15, margin: 10,
borderWidth: 1, borderWidth: 1,
borderColor: BORDER_COLOR, borderColor: BORDER_COLOR,
borderRadius: 10, borderRadius: 10,
...@@ -190,10 +221,11 @@ const styles = StyleSheet.create({ ...@@ -190,10 +221,11 @@ const styles = StyleSheet.create({
marginRight:15 marginRight:15
}, },
buttonDesign:{ buttonDesign:{
backgroundColor:'#026efd' backgroundColor:'#026efd',
marginBottom: 12
}, },
buttonStyle:{ buttonStyle:{
marginTop:20, marginTop:30,
marginLeft:15, marginLeft:15,
marginRight:15 marginRight:15
}, },
......
MobileApp/screens/Signup.js 0 → 100644
View file @ 48a4f9a7
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Input, NativeBaseProvider, Button, Icon, Box, Image, AspectRatio } from 'native-base';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import SelectBox from 'react-native-multi-selectbox';
import { xorBy } from 'lodash';
import RadioForm from 'react-native-radio-form';
import { collection, doc, setDoc, addDoc } from "firebase/firestore";
import {db} from './config';
function Signup({}) {
const navigation = useNavigation();
const goGenerateSeatNo = () => {
navigation.navigate('GenerateSeatNo', {
username,email,age,selectedPickLoc,selectedDropLoc,selectedProfession,genderx
});
};
const [username, SetUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [age, setAge] = useState('');
const genderx= 'M';
const [selectedPickLoc, setSelectedPickLoc] = useState({});
const [selectedDropLoc, setSelectedDropLoc] = useState({});
const [selectedProfession, setSelectedProfession] = useState('');
const location = [
{id:'1', item:'Borella'},
{id:'2', item:'Rajagiriya'},
{id:'3', item:'Ethul Kotte'},
{id:'4', item:'Battaramulla'},
{id:'5', item:'Koswatta'},
{id:'6', item:'Malabe'},
{id:'7', item:'SLIIT'},
{id:'8', item:'Kaduwela'},
];
const profession= [
{id:'1', item:'IT Professional'},
{id:'2', item:'Lecture'},
{id:'3', item:'Banker'},
{id:'4', item:'Engineer'},
{id:'5', item:'Doctor'},
{id:'6', item:'Lawyer'},
{id:'7', item:'Other'},
];
const gender = [
{label: 'Male', value: 0 },
{label: 'Female', value: 1 }
];
//db save data
function saveData(){
addDoc(collection(db, "members"), {
username: username,
email: email,
password: password,
age: age,
gender: "male",
job: selectedProfession,
pickup: selectedPickLoc,
drop: selectedDropLoc,
}).then(() =>{
console.log('data submitted')
}).catch((error)=>{
console.log(error)
});;
}
return (
<View style={styles.container}>
<View style={styles.Middle}>
<Text style={styles.LoginText}>Signup</Text>
</View>
<View style={styles.text2}>
<Text>Already have account? </Text>
<TouchableOpacity onPress={() => navigation.navigate("Login")} ><Text style={styles.signupText}> Login </Text></TouchableOpacity>
</View>
{/* Username or Email Input Field */}
<View style={styles.buttonStyle}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<FontAwesome5 name="user-secret" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
placeholder="Username"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
onChangeText={(value) => SetUsername(value)}
/>
</View>
</View>
{/* Username or Email Input Field */}
<View style={styles.buttonStyleX}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<MaterialCommunityIcons name="email" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
placeholder="Email"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
onChangeText={(value) => setEmail(value)}
/>
</View>
</View>
{/* Password Input Field */}
<View style={styles.buttonStyleX}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<FontAwesome5 name="key" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
secureTextEntry={true}
placeholder="Password"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
onChangeText={(value) => setPassword(value)}
/>
</View>
</View>
{/* Password Input Field */}
<View style={styles.buttonStyleX}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<FontAwesome5 name="key" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
secureTextEntry={true}
placeholder="Confirm Password"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
/>
</View>
</View>
<View style={styles.buttonStyleX}>
<View style={styles.emailInput}>
<Input
InputLeftElement={
<Icon
as={<FontAwesome5 name="key" />}
size="sm"
m={2}
_light={{
color: "black",
}}
_dark={{
color: "gray.300",
}}
/>
}
variant="outline"
secureTextEntry={false}
placeholder="Age"
_light={{
placeholderTextColor: "blueGray.400",
}}
_dark={{
placeholderTextColor: "blueGray.50",
}}
onChangeText={(value) => setAge(value)}
/>
</View>
</View>
<View style={styles.row}>
<View style={{ margin: 20}}>
<Text style={{fontSize: 12 , marginTop: 3, color:'#8e8e8e'}}>Gender</Text>
</View>
<View style={{ margin: 20, marginVertical: 10 }}>
<RadioForm
style={{ width: 200, color:'#8e8e8e', fontSize: 12, innerWidth:200 }}
dataSource={gender}
circleSize={12}
initial={1}
formHorizontal={true}
labelHorizontal={true}
onPress={(value) => {this.setState({value:value})}}
innerColor= '#8e8e8e'
outerColor= '#8e8e8e'
animation={true}
/>
</View>
</View>
<View style={{ marginTop: 10, marginLeft:20, marginRight:20}}>
<SelectBox
label="Profession"
options={profession}
value={selectedProfession}
onChange={onChangeProfession()}
hideInputFilter={false}
/>
</View>
<View style={styles.row}>
<View style={{ margin:20 , marginEnd:30}}>
<SelectBox width= '170%'
label="Pickup"
options={location}
value={selectedPickLoc}
onChange={onChangePick()}
hideInputFilter={false}
/>
</View>
<View style={{ margin: 20 , marginStart:70}}>
<SelectBox width= '170%'
label="Drop"
options={location}
value={selectedDropLoc}
onChange={onChangeDrop()}
hideInputFilter={false}
/>
</View>
</View>
{/* Button */}
<View style={styles.buttonStyle}>
<Button style={styles.buttonDesign} onPressIn= {() => { saveData(); }} onPress={goGenerateSeatNo}>
REGISTER NOW
</Button>
</View>
{/* Line */}
<View style={styles.lineStyle}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{width: 80, textAlign: 'center'}}>Safe Drive</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
<StatusBar style="auto" />
</View>
);
function onChangePick() {
return (val) => setSelectedPickLoc(val)
}
function onChangeDrop() {
return (val) => setSelectedDropLoc(val)
}
function onChangeProfession() {
return (val) => setSelectedProfession(val)
}
}
export default () => {
return (
<NativeBaseProvider>
<Signup />
</NativeBaseProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
LoginText: {
marginTop:100,
fontSize:30,
fontWeight:'bold',
},
Middle:{
alignItems:'center',
justifyContent:'center',
},
text2:{
flexDirection:'row',
justifyContent:'center',
paddingTop:5
},
signupText:{
fontWeight:'bold'
},
emailField:{
marginTop:30,
marginLeft:15
},
emailInput:{
marginTop:10,
marginRight:5
},
buttonStyle:{
marginTop:30,
marginLeft:15,
marginRight:15
},
buttonStyleX:{
marginTop:12,
marginLeft:15,
marginRight:15
},
buttonDesign:{
backgroundColor:'#026efd'
},
lineStyle:{
flexDirection:'row',
marginTop:30,
marginLeft:15,
marginRight:15,
alignItems:'center'
},
imageStyle:{
width:80,
height:80,
marginLeft:20,
},
boxStyle:{
flexDirection:'row',
marginTop:30,
marginLeft:15,
marginRight:15,
justifyContent:'space-around'
},
row: {
flexDirection: "row",
paddingRight: 12,
},
});
MobileApp/screens/SignupScreen.jsx deleted 100644 → 0
View file @ 3a33a194
import React from "react";
import { View, Button, Text } from 'react-native'
import { styles } from "../util/styles";
export const SignupScreen = ({ navigation }) => {
return (
<View style={styles.container}><Text style={{
padding: 10,
textAlign: 'center',
// fontWeight: 'bold',
fontSize: 40
}}>Sign up</Text>
<View style={{ flexDirection: 'row', padding: 10, justifyContent: 'center' }}>
<Text style={{ textAlign: 'center' }}>Already have an account? </Text>
<Text style={{ fontWeight: 'bold', textAlign: 'center', }} onPress={() => navigation.replace('Root')}>Login</Text>
</View>
<SignupForm />
</View>
)
}
const SignupForm = () => {
return(
<View>
</View>
)
}
\ No newline at end of file
MobileApp/screens/config.jsx 0 → 100644
View file @ 48a4f9a7
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import {getFirestore} from "firebase/firestore"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBclRBmE5oU1I4fcfFVySKR90tJ4Ddy29A",
authDomain: "safedrive-4fdc8.firebaseapp.com",
projectId: "safedrive-4fdc8",
storageBucket: "safedrive-4fdc8.appspot.com",
messagingSenderId: "577482229800",
appId: "1:577482229800:web:902b5a82915ee7c228cd1d",
measurementId: "G-HX3ZWKL2KQ"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
\ No newline at end of file
backend/db.sqlite3
View file @ 48a4f9a7
No preview for this file type
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