Skip to content

2
2022_223_Digi Bus
Commit fa289a86 authored by Gunasekara M.A.L.M's avatar Gunasekara M.A.L.M
Browse files
Options

create homescreen.js

parent 7163a3de
Show whitespace changes
Inline Side-by-side
Showing with 263 additions and 0 deletions
digibus/src/screen/home_screen/homescreen.js 0 → 100644
View file @ fa289a86
import React, { PropTypes, Component, useState, useEffect, useCallback } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import DropDownPicker from 'react-native-dropdown-picker';
import { Actions } from 'react-native-router-flux';
import axios from 'axios';
const HomeScreen = () => {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [routeList, setRouteList] = useState([
{ label: 'Malabe', value: 'malabe' },
{ label: 'Kaduwela', value: 'kaduwela' },
{ label: 'Koswatte', value: 'koswatte' },
{ label: 'Baththramulla', value: 'baththramulla' },
{ label: 'Kotte', value: 'kotte' },
{ label: 'Rajagiriya', value: 'rajagiriya' },
{ label: 'Boralla', value: 'boralla' }
]);
const [open2, setOpen2] = useState(false);
const [value2, setValue2] = useState(null);
const [routeList2, setRouteList2] = useState([
{ label: 'Malabe', value: 'malabe' },
{ label: 'Kaduwela', value: 'kaduwela' },
{ label: 'Koswatte', value: 'koswatte' },
{ label: 'Baththramulla', value: 'baththramulla' },
{ label: 'Kotte', value: 'kotte' },
{ label: 'Rajagiriya', value: 'rajagiriya' },
{ label: 'Boralla', value: 'boralla' }
]);
const [open3, setOpen3] = useState(false);
const [value3, setValue3] = useState(null);
const [routes, setRoute] = useState([
{ label: 'Kaduwela - Kollupitiya 177', value: 'Kaduwela - Kollupitiya 177' },
{ label: 'Malabe - Maharagama 983', value: 'Malabe - Maharagama 983' }
]);
const OnFromOpen = useCallback(() => {
setOpen2(false);
setOpen3(false);
}, []);
const OnToOpen = useCallback(() => {
setOpen(false);
setOpen3(false);
}, []);
const OnToRote = useCallback(() => {
setOpen2(false);
setOpen(false);
}, []);
useEffect(() => {
});
const GetRouteInfo = () => {
try {
axios.get('http://54.151.172.165:8000/api/bus_routes').then((respo)=>{
if(respo.status == "200"){
setRouteList(respo.data);
}
}).catch((err)=>{
console.log("error on get Route Info "+err);
});
} catch (error) {
console.log("error happen get Route Info "+error)
}
}
const GetBusHoltInfo = () => {
try {
axios.get('http://54.151.172.165:8000/api/busHalts').then((respo)=>{
if(respo.status == "200"){
setRoute(respo.data);
}
}).catch((err)=>{
console.log("error on get Bus Stop Info "+err);
});
} catch (error) {
console.log("error happen get Bus Stop Info "+error)
}
}
const RouteToList = () => {
Actions.busRoute();
}
return (
<View style={styles.body}>
<View style={styles.container}>
<View style={styles.routeHolder}>
<View style={styles.routeContainer}>
<View style={styles.cardViews}>
<View style={styles.titelHolder}>
<Text style={styles.titelText}>Select the disired route for you</Text>
</View>
<View style={[styles.dropDownView, { zIndex: 3 }]}>
<DropDownPicker
schema={{
label: 'label',
value: 'value'
}}
open={open3}
value={value3}
items={routes}
onOpen={OnToRote}
setOpen={setOpen3}
setValue={setValue3}
setItems={setRoute}
labelProps={"Bus Route"}
style={{ backgroundColor: '#fff', }}
labelStyle={{ color: '#000' }}
zIndex={4000}
zIndexInverse={3000}
placeholder="Select your bus route"
/>
</View>
<View style={[styles.dropDownView, { zIndex: 2 }]}>
{/* <DropDownPicker
schema={{
label: 'label',
value: 'value'
}}
open={open}
value={value}
items={routeList}
onOpen={OnFromOpen}
setOpen={setOpen}
setValue={setValue}
setItems={setRouteList}
labelProps={"From"}
style={{ backgroundColor: '#fff', }}
labelStyle={{ color: '#fff' }}
zIndex={3000}
zIndexInverse={1000}
placeholder="Select From"
/> */}
</View>
<View style={[styles.dropDownView, { zIndex: 1 }]}>
{/* <DropDownPicker
schema={{
label: 'label',
value: 'value'
}}
open={open2}
value={value2}
items={routeList2}
onOpen={OnToOpen}
setOpen={setOpen2}
setValue={setValue2}
setItems={setRouteList2}
labelProps={"To"}
style={{ backgroundColor: '#fff' }}
labelStyle={{ color: '#fff' }}
zIndex={2000}
zIndexInverse={2000}
placeholder="Select To"
/> */}
</View>
<View style={styles.bittonStyle}>
<TouchableOpacity onPress={RouteToList}>
<View style={styles.btns}>
<Text style={styles.btnText}>Next</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#fff'
},
container: {
height: hp('100%'),
width: wp('100%'),
alignItems: 'center',
justifyContent: 'center',
},
routeHolder: {
height: hp('60%'),
width: wp('100%'),
alignItems: 'center'
},
routeContainer: {
height: hp('60%'),
width: wp('94%'),
alignItems: 'center',
},
cardViews: {
height: hp('60%'),
width: wp('94%'),
borderWidth: wp('0.1%'),
borderRadius: wp('5%'),
backgroundColor: '#00186C',
borderColor: '#00186C',
alignItems: 'center',
justifyContent: 'center'
},
dropDownView: {
height: hp('5%'),
width: wp('80%'),
borderWidth: wp('0.1%'),
borderRadius: wp('5%'),
backgroundColor: '#00186C',
borderColor : '#00186C',
marginBottom: 40,
},
bittonStyle: {
height: hp('8%'),
width: wp('60%'),
borderWidth: wp('0.1%'),
borderRadius: wp('5%'),
backgroundColor: '#F3890C',
borderColor:'#F3890C',
alignItems: 'center',
justifyContent: 'center',
marginTop: 50
},
btns: {
height: hp('8%'),
width: wp('60%'),
alignItems: 'center',
justifyContent: 'center',
},
btnText: {
fontSize: 24,
fontWeight: 'bold',
color: '#fff'
},
titelHolder: {
height: hp('10%'),
width: wp('60%'),
alignItems: 'center',
justifyContent: 'center'
},
titelText: {
fontSize: 16,
fontWeight: '500',
color: '#fff'
},
});
export default HomeScreen;
\ No newline at end of file
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