Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2022_223_Digi Bus
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Gunasekara M.A.L.M
2022_223_Digi Bus
Commits
fa289a86
Commit
fa289a86
authored
Oct 07, 2022
by
Gunasekara M.A.L.M
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
create homescreen.js
parent
7163a3de
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
263 additions
and
0 deletions
+263
-0
digibus/src/screen/home_screen/homescreen.js
digibus/src/screen/home_screen/homescreen.js
+263
-0
No files found.
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment