-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New update #5
base: development
Are you sure you want to change the base?
New update #5
Changes from 6 commits
7ceee93
ae12eaa
747216d
85c78fa
c43069b
bb5cde6
6ac7fe5
419ee6f
bee54fd
b4d068f
12fcb64
64f4a9b
ea0c43a
5f3a3b1
6b68cba
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"version": 3, | ||
"artifactType": { | ||
"type": "APK", | ||
"kind": "Directory" | ||
}, | ||
"applicationId": "com.hawkeye_driver", | ||
"variantName": "release", | ||
"elements": [ | ||
{ | ||
"type": "SINGLE", | ||
"filters": [], | ||
"attributes": [], | ||
"versionCode": 1, | ||
"versionName": "1.0", | ||
"outputFile": "app-release.apk" | ||
} | ||
], | ||
"elementType": "File" | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,189 @@ | ||
import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; | ||
import React, { useEffect, useState } from "react"; | ||
// import { VehicleInfoStyles } from "./VehicleInfo"; | ||
import { moderateScale } from "react-native-size-matters"; | ||
import moment from "moment"; | ||
import { DatePickerCalender } from "./svgComponents"; | ||
// import {TouchableOpacity} from 'react-native-gesture-handler'; | ||
import DateTimePickerModal from "react-native-modal-datetime-picker"; | ||
|
||
const initialDate = new Date(); | ||
initialDate.setDate(initialDate.getDate() - 1); | ||
const formattedDate = `${initialDate.getFullYear()}-0${ | ||
initialDate.getMonth() + 1 | ||
}-${initialDate.getDate()}`; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not readable. Put code comment There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. rewrote in a readable format |
||
|
||
export const DateTab = ({ startDate, onChangeDate }) => { | ||
const [selectedDate, setSelectedDate] = useState(formattedDate); | ||
const [openModal, setOpenModal] = useState(false); | ||
|
||
useEffect(() => { | ||
if (startDate !== selectedDate) { | ||
setSelectedDate(startDate); | ||
} | ||
}, [startDate]); | ||
|
||
const setMoment = (noOfDays, previosDate) => { | ||
let subtractedDays = moment().subtract(noOfDays, "days"); | ||
if (!previosDate) { | ||
subtractedDays = moment(selectedDate).subtract(noOfDays, "days"); | ||
} else { | ||
} | ||
return { | ||
displayDate: subtractedDays.calendar(null, { | ||
sameDay: "[Today]", | ||
nextDay: "[Tomorrow]", | ||
nextWeek: "MMM DD", | ||
lastDay: "[Yesterday]", | ||
lastWeek: "MMM DD", | ||
sameElse: (now) => { | ||
if (now.year() === moment(selectedDate).year()) { | ||
return "MMM DD"; | ||
} else { | ||
return "MMM DD"; | ||
} | ||
}, | ||
}), | ||
actualDate: new Date(subtractedDays.format("YYYY-MM-DD")), | ||
}; | ||
}; | ||
|
||
let dateComponent = []; | ||
const dateComparison = moment(selectedDate).isSame(initialDate, "date"); | ||
console.log("date Comparison", dateComparison); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. remove console.og There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. removed console logs |
||
for (let i = 0; i <= 3; i++) { | ||
if (dateComparison && i === 0) { | ||
continue; | ||
} | ||
if (!dateComparison && i === 3) { | ||
continue; | ||
} | ||
const { displayDate, actualDate } = setMoment(i); | ||
|
||
const activeDate = moment(selectedDate).isSame(actualDate, "date"); | ||
|
||
dateComponent.push( | ||
<View | ||
style={styles.DateElementStyle({ activeDate, grow: true })} | ||
key={actualDate} | ||
> | ||
<Text | ||
style={styles.DateTextStyle(activeDate)} | ||
onPress={async () => { | ||
await onChangeDate(actualDate); | ||
setSelectedDate(actualDate); | ||
}} | ||
> | ||
{displayDate} | ||
</Text> | ||
</View> | ||
); | ||
} | ||
let unchangedDate; | ||
const { displayDate, actualDate } = setMoment(1, true); | ||
const activeDate = moment(selectedDate).isSame(actualDate, "date"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this code should be at the top There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. put the code at the top |
||
|
||
unchangedDate = ( | ||
<View | ||
style={styles.DateElementStyle({ activeDate, grow: true })} | ||
key={actualDate} | ||
> | ||
<Text | ||
style={styles.DateTextStyle(activeDate)} | ||
onPress={async () => { | ||
await onChangeDate(actualDate); | ||
setSelectedDate(actualDate); | ||
}} | ||
> | ||
{displayDate} | ||
</Text> | ||
</View> | ||
); | ||
|
||
return ( | ||
<View style={styles.MainContainer}> | ||
<View style={styles.DateContainer}> | ||
<View style={styles.DateBarContainer}> | ||
{unchangedDate} | ||
{dateComponent} | ||
<View style={styles.CalenderElementStyle}> | ||
<TouchableOpacity | ||
onPress={() => { | ||
setOpenModal(true); | ||
}} | ||
> | ||
<DatePickerCalender width={19} height={18} iconColor="#505050" /> | ||
</TouchableOpacity> | ||
</View> | ||
</View> | ||
<DateTimePickerModal | ||
isVisible={openModal} | ||
mode="date" | ||
date={new Date(selectedDate)} | ||
maximumDate={initialDate} | ||
customHeaderIOS="Pick a date" | ||
onConfirm={async (date) => { | ||
setOpenModal(false); | ||
await onChangeDate(date); | ||
setSelectedDate(date); | ||
}} | ||
onCancel={() => { | ||
setOpenModal(false); | ||
}} | ||
/> | ||
</View> | ||
</View> | ||
); | ||
}; | ||
|
||
const styles = StyleSheet.create({ | ||
MainContainer: { | ||
width: "100%", | ||
flexDirection: "column", | ||
alignItems: "center", | ||
paddingTop: moderateScale(11), | ||
paddingBottom: moderateScale(11), | ||
}, | ||
DateContainer: { | ||
width: "92%", | ||
overflow: "hidden", | ||
backgroundColor: "#FFFFFF", | ||
borderRadius: moderateScale(5), | ||
flexDirection: "column", | ||
alignItems: "center", | ||
}, | ||
|
||
DateBarContainer: { | ||
width: "100%", | ||
display: "flex", | ||
flexDirection: "row", | ||
alignItems: "center", | ||
justifyContent: "flex-start", | ||
}, | ||
DateElementStyle: ({ activeDate, grow }) => { | ||
return { | ||
paddingHorizontal: "2%", | ||
paddingVertical: moderateScale(8), | ||
borderRightWidth: moderateScale(1), | ||
borderRightColor: "#909090", | ||
backgroundColor: activeDate ? "#0090D9" : null, | ||
flexGrow: grow ? 1 : 0, | ||
alignItems: "center", | ||
}; | ||
}, | ||
CalenderElementStyle: { | ||
paddingHorizontal: moderateScale(11), | ||
paddingVertical: moderateScale(9), | ||
flexGrow: 1, | ||
alignSelf: "flex-end", | ||
alignItems: "center", | ||
}, | ||
DateTextStyle: (activeDate) => { | ||
return { | ||
fontFamily: "Poppins-Medium", | ||
fontSize: moderateScale(12), | ||
lineHeight: moderateScale(18), | ||
color: activeDate ? "#ffffff" : "#909090", | ||
}; | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,28 @@ | ||
import React, {FunctionComponent, ReactNode} from 'react'; | ||
import React, { FunctionComponent, ReactNode } from "react"; | ||
import { | ||
View, | ||
ImageBackground, | ||
StyleSheet, | ||
Text, | ||
TouchableOpacity, | ||
} from 'react-native'; | ||
import {useTheme} from 'react-native-paper'; | ||
import Dimensions from '../utils/helper'; | ||
import {Typography} from './Typography'; | ||
import Logo from '../assets/Logo.svg'; | ||
import UserIcon from '../assets/Svgs/UserIcon.svg'; | ||
} from "react-native"; | ||
import { useTheme } from "react-native-paper"; | ||
import Dimensions from "../utils/helper"; | ||
import { Typography } from "./Typography"; | ||
import Logo from "../assets/Logo.svg"; | ||
import UserIcon from "../assets/Svgs/UserIcon.svg"; | ||
import { moderateScale } from "react-native-size-matters"; | ||
import AppStyles from "app/config/styles"; | ||
|
||
const dim = Dimensions.Screen; | ||
|
||
interface WithLogoHeaderProps { | ||
children: ReactNode; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what is need of this? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is the typescript way of writing.. It determines the type of children.. Its not needed in this page.. So removed it. |
||
|
||
const DriverPod: FunctionComponent<any> = props => { | ||
const {colors} = useTheme(); | ||
const {data} = props; | ||
const DriverPod: FunctionComponent<any> = (props) => { | ||
const { colors } = useTheme(); | ||
const { data, vehicle } = props; | ||
|
||
if (!data) { | ||
return null; | ||
|
@@ -33,13 +35,24 @@ const DriverPod: FunctionComponent<any> = props => { | |
<UserIcon /> | ||
</View> | ||
<View style={styles.detailsContainer}> | ||
<Typography.H4 color={'#000'}>{data.name}</Typography.H4> | ||
<Typography.H6Light style={{color: '#000'}}> | ||
{data.plateNo} | ||
</Typography.H6Light> | ||
<Typography.H6Light style={{color: '#000'}}> | ||
{data.admission_class} | ||
</Typography.H6Light> | ||
<Typography.H3 color={AppStyles.color.COLOR_DARK_GREY}> | ||
{data.name} | ||
</Typography.H3> | ||
<View style={styles.busDetails}> | ||
<Typography.H5Light | ||
style={{ color: AppStyles.color.COLOR_DARK_GREY }} | ||
> | ||
Bus : {vehicle.name} | ||
</Typography.H5Light> | ||
<Typography.H5Light | ||
style={{ | ||
color: AppStyles.color.COLOR_DARK_GREY, | ||
marginLeft: moderateScale(20), | ||
}} | ||
> | ||
Plate : {vehicle.plate} | ||
</Typography.H5Light> | ||
</View> | ||
</View> | ||
</TouchableOpacity> | ||
); | ||
|
@@ -50,18 +63,24 @@ export default DriverPod; | |
const makeStyles = (colors: any) => | ||
StyleSheet.create({ | ||
container: { | ||
flexDirection: 'row', | ||
width: '100%', | ||
marginVertical: '1%', | ||
flexDirection: "row", | ||
width: "100%", | ||
marginVertical: "1%", | ||
backgroundColor: colors.surfaceBackground, | ||
elevaton: 30, | ||
paddingVertical: '3%', | ||
paddingVertical: "3%", | ||
borderRadius: 5, | ||
minHeight: 80, | ||
}, | ||
detailsContainer: {width: '50%'}, | ||
detailsContainer: { width: "70%" }, | ||
logoContainer: { | ||
width: '30%', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
width: "30%", | ||
justifyContent: "center", | ||
alignItems: "center", | ||
}, | ||
busDetails: { | ||
display: "flex", | ||
flexDirection: "row", | ||
width: "100%", | ||
}, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dont include commented code for merge
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
removed all commented codes and console logs