Skip to content

Commit

Permalink
fix: move distance function and driver request card position
Browse files Browse the repository at this point in the history
  • Loading branch information
@boy52hz
boy52hz committed Mar 29, 2024
1 parent 7a93fb6 commit 44c3ce6
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 124 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"dependencies": {
"@gorhom/bottom-sheet": "^4.6.1",
"@hookform/resolvers": "^3.3.2",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/netinfo": "9.3.10",
"@shopify/flash-list": "^1.6.4",
"@tanstack/react-query": "^5.22.2",
Expand Down
71 changes: 39 additions & 32 deletions src/app/(protected)/(tabs)/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {

import { useJob } from '@/contexts/JobContext'
import { SafeAreaView } from 'react-native-safe-area-context'
import { StyleSheet } from 'react-native'
import { Dimensions, StyleSheet } from 'react-native'
import { AntDesign } from '@expo/vector-icons'
import { MaterialIcons } from '@expo/vector-icons'
import { useDriverInfo } from '@/hooks/useDriverInfo'
Expand Down Expand Up @@ -54,37 +54,15 @@ export default function Home() {
<Text caption>วินหมายเลข {driverInfo.info.no}</Text>
</View>
</Card>
{driveRequest?.id ? (
<Card padding-15 onPress={() => router.push('/drive-request')}>
<View row spread centerV>
<Text bodyB>กำลังดำเนินการ</Text>
<DriveRequestStatusChip status={driveRequest.status!} />
</View>
<View gap-5 marginT-10>
<Waypoint
placeDetail={driveRequest.origin!}
color={Colors.blue40}
textProps={{ numberOfLines: 1, ellipsizeMode: 'tail' }}
/>
<Waypoint
placeDetail={driveRequest.destination!}
color={Colors.red40}
textProps={{ numberOfLines: 1, ellipsizeMode: 'tail' }}
/>
</View>
</Card>
) : (
<Card row spread padding-15 centerV>
<Text h5B>{isOnline ? 'กำลังรับงาน' : 'เริ่มรับงาน'}</Text>
<Switch
value={isOnline}
onValueChange={updateDriverOnlineStatus}
onColor={Colors.green30}
offColor={Colors.grey40}
/>
</Card>
)}

<Card row spread padding-15 centerV>
<Text h5B>{isOnline ? 'กำลังรับงาน' : 'เริ่มรับงาน'}</Text>
<Switch
value={isOnline}
onValueChange={updateDriverOnlineStatus}
onColor={Colors.green30}
offColor={Colors.grey40}
/>
</Card>
<GridView
numColumns={2}
items={[
Expand Down Expand Up @@ -129,6 +107,35 @@ export default function Home() {
},
]}
/>
{driveRequest?.id && (
<View
style={{
position: 'absolute',
bottom: 0,
width: Dimensions.get('window').width,
padding: 20,
}}
>
<Card style={{}} padding-15 onPress={() => router.push('/drive-request')}>
<View row spread centerV>
<Text bodyB>กำลังดำเนินการ</Text>
<DriveRequestStatusChip status={driveRequest.status!} />
</View>
<View gap-5 marginT-10>
<Waypoint
placeDetail={driveRequest.origin!}
color={Colors.blue40}
textProps={{ numberOfLines: 1, ellipsizeMode: 'tail' }}
/>
<Waypoint
placeDetail={driveRequest.destination!}
color={Colors.red40}
textProps={{ numberOfLines: 1, ellipsizeMode: 'tail' }}
/>
</View>
</Card>
</View>
)}
</SafeAreaView>
)
}
Expand Down
189 changes: 98 additions & 91 deletions src/app/(protected)/drive-request/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function DriveRequestDetail() {
}

return (
<View style={{ padding: 10, height: '100%', gap: 10 }}>
<>
<Stack.Screen
options={{
header: () => (
Expand All @@ -56,102 +56,109 @@ export default function DriveRequestDetail() {
),
}}
/>
<Card padding-15 gap-10>
<Text h4B>ข้อมูลเส้นทาง</Text>
<View flex spread style={{ padding: 10, gap: 10 }}>
<View gap-10>
<Waypoint
placeDetail={driveRequest.origin!}
styles={{ placeNameStyle: { fontSize: 18 } }}
color={Colors.blue40}
useDivider={false}
/>
<Card padding-15 gap-10>
<Text h4B>ข้อมูลเส้นทาง</Text>
<View gap-10>
<Waypoint
placeDetail={driveRequest.origin!}
styles={{ placeNameStyle: { fontSize: 18 } }}
color={Colors.blue40}
useDivider={false}
/>

<Waypoint
placeDetail={driveRequest.destination!}
styles={{ placeNameStyle: { fontSize: 18 } }}
color={Colors.red40}
useDivider={false}
/>
</View>
</Card>
<Waypoint
placeDetail={driveRequest.destination!}
styles={{ placeNameStyle: { fontSize: 18 } }}
color={Colors.red40}
useDivider={false}
/>
</View>
</Card>

<Card padding-15 gap-10>
<Text h4B>ข้อมูลการโดยสาร</Text>
<View>
<View row spread centerV>
<Text h5>รหัสเรียกรถ</Text>
<Text caption>{driveRequest.id}</Text>
</View>
<View row spread centerV>
<Text>วันที่</Text>
<Text>{moment(driveRequest.createdAt).format('DD/MM/YYYY HH:mm')}</Text>
</View>
</View>
<View>
<View row spread>
<Text>ค่าโดยสารตามอัตรา</Text>
<Text h4>{commonUtil.formatCurrency(driveRequest.priceByDistance)}</Text>
</View>
<View row spread>
<Text>ค่าเรียกรับบริการ</Text>
<Text>{commonUtil.formatCurrency(driveRequest.serviceCharge)}</Text>
</View>
<View row spread>
<Text>ทั้งหมด</Text>
<Text h4B>{commonUtil.formatCurrency(driveRequest.total)}</Text>
</View>
</View>
</Card>
<Card padding-15 gap-10>
<Text h4B>ข้อมูลการโดยสาร</Text>
<View>
<View row spread centerV>
<Text h5>รหัสเรียกรถ</Text>
<Text caption>{driveRequest.id}</Text>
</View>
<View row spread centerV>
<Text>วันที่</Text>
<Text>{moment(driveRequest.createdAt).format('DD/MM/YYYY HH:mm')}</Text>
</View>
</View>
<View>
<View row spread>
<Text>ค่าโดยสารตามอัตรา</Text>
<Text h4>{commonUtil.formatCurrency(driveRequest.priceByDistance)}</Text>
</View>
<View row spread>
<Text>ค่าเรียกรับบริการ</Text>
<Text>{commonUtil.formatCurrency(driveRequest.serviceCharge)}</Text>
</View>
<View row spread>
<Text>ทั้งหมด</Text>
<Text h4B>{commonUtil.formatCurrency(driveRequest.total)}</Text>
</View>
</View>
</Card>

<Card padding-15 gap-10>
<Text h4B>ข้อมูลผู้โดยสาร</Text>
<View row spread>
<View>
<Text bodyB>
{driveRequest.user.firstName} {driveRequest.user.lastName}
</Text>
<View row centerV gap-6>
<FontAwesome5 name="phone-alt" size={16} color="black" />
<Text>{commonUtil.formatPhoneNumber(driveRequest.user.phoneNumber)}</Text>
<Card padding-15 gap-10>
<Text h4B>ข้อมูลผู้โดยสาร</Text>
<View row spread>
<View>
<Text bodyB>
{driveRequest.user.firstName} {driveRequest.user.lastName}
</Text>
<View row centerV gap-6>
<FontAwesome5 name="phone-alt" size={16} color="black" />
<Text>{commonUtil.formatPhoneNumber(driveRequest.user.phoneNumber)}</Text>
</View>
</View>
<View>
<Ionicons
name="chatbubble-ellipses-outline"
size={32}
onPress={handleChatBubblePressed}
/>
{newMessageReceived && (
<View
style={{
position: 'absolute',
top: 0,
right: 0,
backgroundColor: 'red',
width: 10,
height: 10,
borderRadius: 5,
}}
/>
)}
</View>
</View>
</View>
<View>
<Ionicons
name="chatbubble-ellipses-outline"
size={32}
onPress={handleChatBubblePressed}
</Card>
</View>

<View paddingB-10>
{driveRequest.status === DriveRequestSessionStatus.ON_GOING && (
<Button
label="ถึงจุดรับผู้โดยสารแล้ว"
onPress={() => updateDriveRequestStatus(DriveRequestSessionStatus.ARRIVED)}
/>
{newMessageReceived && (
<View
style={{
position: 'absolute',
top: 0,
right: 0,
backgroundColor: 'red',
width: 10,
height: 10,
borderRadius: 5,
}}
/>
)}
</View>
)}
{driveRequest.status === DriveRequestSessionStatus.ARRIVED && (
<Button
label="รับผู้โดยสารแล้ว"
onPress={() => updateDriveRequestStatus(DriveRequestSessionStatus.PICKED_UP)}
/>
)}
{driveRequest.status === DriveRequestSessionStatus.PICKED_UP && (
<Button label="ส่งผู้โดยสารแล้ว" onPress={handleFinishDriveRequest} />
)}
</View>
</Card>
{driveRequest.status === DriveRequestSessionStatus.ON_GOING && (
<Button
label="ถึงจุดรับผู้โดยสารแล้ว"
onPress={() => updateDriveRequestStatus(DriveRequestSessionStatus.ARRIVED)}
/>
)}
{driveRequest.status === DriveRequestSessionStatus.ARRIVED && (
<Button
label="รับผู้โดยสารแล้ว"
onPress={() => updateDriveRequestStatus(DriveRequestSessionStatus.PICKED_UP)}
/>
)}
{driveRequest.status === DriveRequestSessionStatus.PICKED_UP && (
<Button label="ส่งผู้โดยสารแล้ว" onPress={handleFinishDriveRequest} />
)}
</View>
</View>
</>
)
}
7 changes: 6 additions & 1 deletion src/components/drive-request/DriveRequestStatusChip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,12 @@ export default function DriveRequestStatusChip({ status }: Props) {
const badgeStyles = getBadgeStyle(status)

return (
<View paddingH-10 paddingV-5 br100 backgroundColor={badgeStyles?.backgroundColor}>
<View
paddingH-10
paddingV-5
style={{ borderRadius: 100 }}
backgroundColor={badgeStyles?.backgroundColor}
>
<Text style={{ fontSize: 12 }} color={badgeStyles?.color}>
{driveRequestStatusText[status]}
</Text>
Expand Down
7 changes: 7 additions & 0 deletions src/utils/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ class CommonUtil {
formatPhoneNumber(value: string) {
return value.replace(/\+66/g, '0')
}

getDistanceText(distance: number) {
if (distance < 1000) {
return `${Math.floor(distance)} เมตร`
}
return `${Math.round(distance / 1000)} กม.`
}
}

export const commonUtil = new CommonUtil()
19 changes: 19 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1773,6 +1773,13 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-compose-refs" "1.0.0"

"@react-native-async-storage/[email protected]":
version "1.18.2"
resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.18.2.tgz#ec8fd487a0b6c9500b43ece4b8779d1561f12e91"
integrity sha512-dM8AfdoeIxlh+zqgr0o5+vCTPQ0Ru1mrPzONZMsr7ufp5h+6WgNxQNza7t0r5qQ6b04AJqTlBNixTWZxqP649Q==
dependencies:
merge-options "^3.0.4"

"@react-native-community/[email protected]":
version "11.3.10"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.10.tgz#70d14dd998ce8ad532266b36a0e5cafe22d300ac"
Expand Down Expand Up @@ -4787,6 +4794,11 @@ is-path-inside@^3.0.2:
resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==

is-plain-obj@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==

is-plain-object@^2.0.4:
version "2.0.4"
resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz"
Expand Down Expand Up @@ -5370,6 +5382,13 @@ memory-cache@~0.2.0:
resolved "https://registry.npmjs.org/memory-cache/-/memory-cache-0.2.0.tgz"
integrity sha512-OcjA+jzjOYzKmKS6IQVALHLVz+rNTMPoJvCztFaZxwG14wtAW7VRZjwTQu06vKCYOxh4jVnik7ya0SXTB0W+xA==

merge-options@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
dependencies:
is-plain-obj "^2.1.0"

merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
Expand Down

0 comments on commit 44c3ce6

Please sign in to comment.