diff --git a/App.tsx b/App.tsx index 753aeb8..d0724d0 100644 --- a/App.tsx +++ b/App.tsx @@ -1,12 +1,3 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * Generated with the TypeScript template - * https://github.com/react-native-community/react-native-template-typescript - * - * @format - */ import React, {type PropsWithChildren} from 'react'; import { diff --git a/app/assets/Images/map.jpg b/app/assets/Images/map.jpg new file mode 100644 index 0000000..cdbf91a Binary files /dev/null and b/app/assets/Images/map.jpg differ diff --git a/app/assets/Images/satelite.jpg b/app/assets/Images/satelite.jpg new file mode 100644 index 0000000..7a67ff6 Binary files /dev/null and b/app/assets/Images/satelite.jpg differ diff --git a/app/assets/Svgs/MyBus.svg b/app/assets/Svgs/MyBus.svg new file mode 100644 index 0000000..ce7e217 --- /dev/null +++ b/app/assets/Svgs/MyBus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/Svgs/RightArrow.svg b/app/assets/Svgs/RightArrow.svg new file mode 100644 index 0000000..91049ab --- /dev/null +++ b/app/assets/Svgs/RightArrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/components/ActionBar/ActionItem.tsx b/app/components/ActionBar/ActionItem.tsx index 8e70044..429ceeb 100644 --- a/app/components/ActionBar/ActionItem.tsx +++ b/app/components/ActionBar/ActionItem.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {Image, StyleSheet, View,TouchableOpacity} from 'react-native'; import {moderateScale} from 'react-native-size-matters'; -// import { TouchableOpacity } from 'react-native-gesture-handler'; const ActionItem = ({children,onPress}) => { return ( diff --git a/app/components/BusPod.tsx b/app/components/BusPod.tsx index 7a3173c..ff0b0c3 100644 --- a/app/components/BusPod.tsx +++ b/app/components/BusPod.tsx @@ -87,16 +87,6 @@ const BusPod: FunctionComponent = ({ - {/* - - */} ); }; diff --git a/app/components/Buttons/TabButton.tsx b/app/components/Buttons/TabButton.tsx index 365cb43..8d9917d 100644 --- a/app/components/Buttons/TabButton.tsx +++ b/app/components/Buttons/TabButton.tsx @@ -8,7 +8,6 @@ export const TabButton = props => { return ( { @@ -26,29 +26,6 @@ const getBackgroundColor = (buttonType: any) => { } }; -// function LongButton(props: any) { -// return ( -// { -// props.onPress(); -// }}> -// -// -// {props.Label} -// -// -// -// ); -// } - const BaseButton = ({ width, height = moderateScale(40), @@ -58,7 +35,6 @@ const BaseButton = ({ children, style, }) => { - // const color = theme.colors.button?.text; const theme = useTheme(); const styles = makeStyles(theme.colors); return ( @@ -71,15 +47,16 @@ const BaseButton = ({ borderRadius: 5, width: width, height, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", paddingHorizontal: 2, }, - {...style}, + { ...style }, ]} onPress={() => { onPress(); - }}> + }} + > {children} @@ -134,37 +111,37 @@ export const Button = { Secondary, }; -const makeStyles = colors => +const makeStyles = (colors) => StyleSheet.create({ linearGradient: { - alignSelf: 'center', + alignSelf: "center", height: dim.height * 0.07, borderRadius: 30, - alignItems: 'center', + alignItems: "center", width: dim.width * 0.7, - justifyContent: 'center', + justifyContent: "center", marginTop: 10, }, viewTextInput: { - backgroundColor: 'white', + backgroundColor: "white", height: dim.height * 0.065, borderRadius: 30, - flexDirection: 'row', + flexDirection: "row", width: dim.width * 0.69, - alignItems: 'center', - justifyContent: 'center', + alignItems: "center", + justifyContent: "center", }, textCancel: { color: colors.primary, - textAlign: 'center', - alignSelf: 'center', - fontWeight: 'bold', + textAlign: "center", + alignSelf: "center", + fontWeight: "bold", fontSize: 18, }, continueContainer: { flex: 0.5, - justifyContent: 'center', - alignItems: 'flex-end', + justifyContent: "center", + alignItems: "flex-end", paddingRight: scale(30), }, continueButton: { @@ -173,39 +150,39 @@ const makeStyles = colors => borderRadius: 20, }, continueButtonTouchable: { - height: '100%', - width: '100%', + height: "100%", + width: "100%", zIndex: 1, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', + flexDirection: "row", + justifyContent: "center", + alignItems: "center", borderRadius: 40, }, continueButtonText: { fontSize: 16, - color: '#fafafa', + color: "#fafafa", }, continueButtonTextContainer: { - width: '80%', - justifyContent: 'center', - alignItems: 'center', - height: '100%', + width: "80%", + justifyContent: "center", + alignItems: "center", + height: "100%", }, continueButtonArrowContainer: { - width: '20%', - justifyContent: 'center', - alignItems: 'flex-start', - height: '100%', + width: "20%", + justifyContent: "center", + alignItems: "flex-start", + height: "100%", }, addmemberButton: { - height: '50%', - width: '40%', + height: "50%", + width: "40%", borderRadius: 40, borderWidth: 1, borderColor: colors.primary, zIndex: 1, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", }, addmemberButtonText: { fontSize: 16, @@ -217,9 +194,8 @@ const makeStyles = colors => width: dim.width, borderRadius: 0, elevation: 2, - justifyContent: 'center', - alignItems: 'center', - //padding3) }, + justifyContent: "center", + alignItems: "center", }, datebuttonLinear: { height: 38, @@ -227,68 +203,68 @@ const makeStyles = colors => borderRadius: 0, borderWidth: 0.75, borderColor: colors.primary, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", }, buttonTouchable: { height: 40, - width: '100%', + width: "100%", zIndex: 2, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", paddingHorizontal: 15, borderRadius: 10, }, buttonWhiteTouchable: { height: 40, - width: '49.9%', + width: "49.9%", zIndex: 2, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", paddingHorizontal: 15, borderRadius: 0, }, tabButtonContainer: { - width: '46%', - justifyContent: 'center', - alignItems: 'center', + width: "46%", + justifyContent: "center", + alignItems: "center", }, tabButtonText: { fontSize: moderateScale(14), - fontWeight: '500', - fontFamily: 'Poppins-Medium', + fontWeight: "500", + fontFamily: "Poppins-Medium", }, datebuttonWhiteTouchable: { - height: '97%', - width: '98.5%', + height: "97%", + width: "98.5%", zIndex: 2, - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", paddingHorizontal: moderateScale(15), - backgroundColor: 'white', + backgroundColor: "white", borderRadius: moderateScale(5), }, buttonTouchable1: { - height: '97%', - width: '99%', + height: "97%", + width: "99%", zIndex: 2, paddingHorizontal: moderateScale(15), - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#FAFAFA', + justifyContent: "center", + alignItems: "center", + backgroundColor: "#FAFAFA", borderRadius: moderateScale(5), }, buttonText: { fontSize: moderateScale(14), - fontFamily: 'Poppins-SemiBold', - fontWeight: '600', + fontFamily: "Poppins-SemiBold", + fontWeight: "600", }, buttonWhiteText: { fontSize: moderateScale(16), - fontWeight: '500', - color: 'white', - fontFamily: 'Poppins-Medium', + fontWeight: "500", + color: "white", + fontFamily: "Poppins-Medium", }, whitebuttonText: { fontSize: moderateScale(16), diff --git a/app/components/DateTab.tsx b/app/components/DateTab.tsx new file mode 100644 index 0000000..a6cd490 --- /dev/null +++ b/app/components/DateTab.tsx @@ -0,0 +1,192 @@ +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 dateComponent = []; +let unchangedDate; + +//YYYY-MM-DD FORMAT +const year = initialDate.getFullYear(); +const month = initialDate.getMonth() + 1; +const day = initialDate.getDate(); +const formattedMonth = month < 10 ? `0${month}` : month; // add leading zero if month is less than 10 +const formattedDate = `${year}-${formattedMonth}-${day}`; + +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")), + }; + }; + + const dateComparison = moment(selectedDate).isSame(initialDate, "date"); + 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( + + { + await onChangeDate(actualDate); + setSelectedDate(actualDate); + }} + > + {displayDate} + + + ); + } + const { displayDate, actualDate } = setMoment(1, true); + const activeDate = moment(selectedDate).isSame(actualDate, "date"); + + unchangedDate = ( + + { + await onChangeDate(actualDate); + setSelectedDate(actualDate); + }} + > + {displayDate} + + + ); + + return ( + + + + {unchangedDate} + {dateComponent} + + { + setOpenModal(true); + }} + > + + + + + { + setOpenModal(false); + await onChangeDate(date); + setSelectedDate(date); + }} + onCancel={() => { + setOpenModal(false); + }} + /> + + + ); +}; + +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", + }; + }, +}); diff --git a/app/components/DriverPod.tsx b/app/components/DriverPod.tsx index 4ffbac6..c07f6da 100644 --- a/app/components/DriverPod.tsx +++ b/app/components/DriverPod.tsx @@ -1,26 +1,24 @@ -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; -} - -const DriverPod: FunctionComponent = props => { - const {colors} = useTheme(); - const {data} = props; +const DriverPod: FunctionComponent = (props) => { + const { colors } = useTheme(); + const { data, vehicle } = props; if (!data) { return null; @@ -33,13 +31,24 @@ const DriverPod: FunctionComponent = props => { - {data.name} - - {data.plateNo} - - - {data.admission_class} - + + {data.name} + + + + Bus : {vehicle.name} + + + Plate : {vehicle.plate} + + ); @@ -50,18 +59,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%", }, }); diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 480e981..fe73bac 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,16 +1,16 @@ -import React, {FunctionComponent, ReactNode} from 'react'; +import React, { FunctionComponent, ReactNode } from "react"; import { View, SafeAreaView, 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 {moderateScale} from 'react-native-size-matters'; +} 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 { moderateScale } from "react-native-size-matters"; const dim = Dimensions.Screen; @@ -18,38 +18,29 @@ interface WithLogoHeaderProps { children: ReactNode; } -const Header: FunctionComponent = props => { - const {colors} = useTheme(); +const Header: FunctionComponent = (props) => { + const { colors } = useTheme(); const styles = makeStyles(colors); return ( - + + onPress={props.leftIconPress} + > {props.leftIcon} - + {props.title} + onPress={props.rightIconPress} + > {props.rightIcon} - {/* {props.rightIconProps && props.rightIconProps.notificationCount > 0 && ( - - - {props.rightIconProps.notificationCount} - - - )} */} ); @@ -60,62 +51,40 @@ export default Header; const makeStyles = (colors: any) => StyleSheet.create({ main: { - // height: moderateScale(70), - width: '100%', - alignItems: 'center', - justifyContent: 'center', - // paddingHorizontal: moderateScale(10), - paddingVertical: '3%', - // paddingBottom: moderateScale(20), - // elevation: 2, + width: "100%", + alignItems: "center", + justifyContent: "center", + paddingVertical: "3%", backgroundColor: colors.primary, }, contentContainer: { - width: '92%', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', + width: "92%", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", }, container: { - width: '92%', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', + width: "92%", + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", }, iconContainer: { - justifyContent: 'center', - alignItems: 'center', + justifyContent: "center", + alignItems: "center", }, headerTitle: { fontSize: moderateScale(18), - fontWeight: '600', + fontWeight: "600", color: colors.surfaceBackground, }, inputDataText: { - height: '65%', + height: "65%", elevation: moderateScale(2), - flexDirection: 'row', - justifyContent: 'space-between', - // marginBottom: moderateScale(20), - backgroundColor: colors.primary, // + flexDirection: "row", + justifyContent: "space-between", + backgroundColor: colors.primary, paddingHorizontal: moderateScale(15), borderRadius: moderateScale(3), }, - // notificationCount: { - // zindex: 10, - // height: moderateScale(11), - // width: moderateScale(11), - // top: moderateScale(3), - // right: metrics.SCREEN_WIDTH * 0.035, - // position: 'absolute', - // borderRadius: 100, - // alignItems: 'center', - // justifyContent: 'center', - // backgroundColor: AppStyles.colors.COLOR_RED, - // }, - // notificationCountText: { - // color: AppStyles.colors.COLOR_WHITE, - // fontFamily: 'Poppins-Bold', - // fontSize: moderateScale(6), - // }, }); diff --git a/app/components/MapViewBottomSheet.tsx b/app/components/MapViewBottomSheet.tsx index ffe84f5..f74dcb2 100644 --- a/app/components/MapViewBottomSheet.tsx +++ b/app/components/MapViewBottomSheet.tsx @@ -16,7 +16,7 @@ import { Typography } from "./Typography"; const dim = Dimensions.Screen; -const MapViewBottomSheet = ({ data, visible,onDismiss }) => { +const MapViewBottomSheet = ({ data, visible, onDismiss }) => { const [modalVisible, setModalVisible] = useState(false); const { colors } = useTheme(); @@ -26,14 +26,9 @@ const MapViewBottomSheet = ({ data, visible,onDismiss }) => { const styles = makeStyles(colors); useEffect(() => { - setModalVisible(visible); }, [visible]); - // const onDismiss = () => { - // setModalVisible(false); - // }; - return modalVisible ? ( <> @@ -56,22 +51,34 @@ const MapViewBottomSheet = ({ data, visible,onDismiss }) => { - + - - {markerData?.title} - - {moment(markerData?.eta, "HH:mm:ss").format("hh:mm A")} - + + + {markerData?.title} + + + {moment(markerData?.eta, "HH:mm:ss").format("hh:mm A")} + - {`${index}th`} - {"Stop"} + {`${index}th`} + {"Stop"} - {/* */} @@ -113,10 +120,10 @@ const makeStyles = (colors: any) => }, listContainer: { width: "100%", - flexDirection:'row', - alignItems:'center', - justifyContent:'space-between', - paddingTop: '2%' + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + paddingTop: "2%", }, header: { paddingVertical: moderateScale(2), @@ -142,7 +149,7 @@ const makeStyles = (colors: any) => line: { width: moderateScale(75), height: moderateScale(5), - backgroundColor: '#C4C4C4', + backgroundColor: "#C4C4C4", alignSelf: "center", marginVertical: 5, borderRadius: 2, diff --git a/app/components/MapViewPod.tsx b/app/components/MapViewPod.tsx new file mode 100644 index 0000000..171de1f --- /dev/null +++ b/app/components/MapViewPod.tsx @@ -0,0 +1,402 @@ +import React, { FunctionComponent, useEffect, useRef, useState } from "react"; + +import { + View, + Pressable, + Text, + Platform, + Image, + StyleSheet, +} from "react-native"; + +import { useTheme } from "react-native-paper"; +import MapView, { + PROVIDER_GOOGLE, + Polyline, + Circle, + Marker, + AnimatedRegion, +} from "react-native-maps"; +import satelliteMap from "../assets/Images/satelite.jpg"; +import defaultMap from "../assets/Images/map.jpg"; +import AppStyles from "../config/styles"; +import { moderateScale } from "react-native-size-matters"; + +import { + MovingCar, + StopwatchIcon, + CustomMarker, + ButtonStop, + Pause, + Play, + MarkerCircle, +} from "../components/svgComponents"; + +import MessageBox from "../components/MessageBox"; + +let i = 0; + +const LATITUDE_DELTA = 0.0003; +const LONGITUDE_DELTA = 0.0002; + +const MapViewPod: FunctionComponent = (props) => { + const { fullTrips, goingBack } = props; + const { colors } = useTheme(); + const markerRef = useRef(); + const mapRef = useRef(); + + let firstCoord = { + latitude: fullTrips[0] && JSON.parse(fullTrips[0].lat), + longitude: fullTrips[0] && JSON.parse(fullTrips[0].lang), + }; + let lastCoord = { + latitude: + fullTrips[fullTrips.length - 1] && + JSON.parse(fullTrips[fullTrips.length - 1].lat), + longitude: + fullTrips[fullTrips.length - 1] && + JSON.parse(fullTrips[fullTrips.length - 1].lang), + }; + + const [isPaused, setIsPaused] = useState(true); + const [expandAlarmBox, setExpandAlarmBox] = useState(false); + const [pressedAlarmDetails, setPressedAlarmDetails] = useState({}); + const [mapType, setMapType] = useState("standard"); + const [coordinatesState, setCoordinatesState] = useState([]); + const [alarmCoords, setAlarmCoords] = useState([]); + const [reachedEnd, setReachedEnd] = useState(false); + + let alarmCoordsArray = []; + let coordinatesArray = []; + + const [markerState, setMarkerState] = useState( + new AnimatedRegion({ + latitude: firstCoord.latitude, + longitude: firstCoord.longitude, + latitudeDelta: LATITUDE_DELTA, + longitudeDelta: LONGITUDE_DELTA, + }) + ); + + const [startAnimation, setStartAnimation] = useState(false); + const [coordsForAnimation, setCoordsForAnimation] = useState([]); + + useEffect(() => { + coordinatesArray = fullTrips.map((item) => { + if (item.alarmText !== "") { + const newAlarmCoord = { + latitude: parseFloat(item.lat), + longitude: parseFloat(item.lang), + ...item, + }; + alarmCoordsArray.push(newAlarmCoord); + } + return { + latitude: parseFloat(item.lat), + longitude: parseFloat(item.lang), + }; + }); + setCoordinatesState(coordinatesArray); + setAlarmCoords(alarmCoordsArray); + }, [fullTrips]); + + useEffect(() => { + if (startAnimation && !isPaused && i < coordinatesState?.length) { + const intervalId = setInterval(() => { + if (i < coordinatesState?.length) { + const newCoord = coordinatesState[i]; + setCoordsForAnimation((prev) => [...prev, newCoord]); + + animateMarker( + coordinatesState[i]?.latitude, + coordinatesState[i]?.longitude + ); + i += 1; + } else { + setStartAnimation(false); + setIsPaused(true); + setCoordsForAnimation([]); + setReachedEnd(true); + clearInterval(intervalId); + } + }, 400); + + return () => { + clearInterval(intervalId); + }; + } + }, [startAnimation]); + + const fitMapToView = async () => { + mapRef.current.fitToCoordinates(coordinatesState, { + edgePadding: { + top: 10, + right: 10, + bottom: 10, + left: 10, + }, + animated: false, + }); + }; + + useEffect(() => { + fitMapToView(); + }, [coordinatesState]); + + const animateMarker = (latitude, longitude) => { + const newCoordinate = { latitude, longitude }; + if (Platform.OS == "android") { + if (markerRef.current) { + markerRef.current.animateMarkerToCoordinate(newCoordinate, 400); + } + } else { + markerState.timing(newCoordinate).start(); + } + }; + + const viewTripHandler = () => { + fitMapToView(); + setIsPaused(false); + setStartAnimation(true); + }; + const pauseAnimationHandler = () => { + setStartAnimation(false); + setIsPaused(true); + }; + + const resetHandler = () => { + setStartAnimation(false); + setIsPaused(true); + setCoordsForAnimation([]); + setMarkerState( + new AnimatedRegion({ + latitude: firstCoord?.latitude, + longitude: firstCoord?.longitude, + latitudeDelta: LATITUDE_DELTA, + longitudeDelta: LONGITUDE_DELTA, + }) + ); + setReachedEnd(false); + i = 0; + }; + + const alarmPressHandler = (alarmCoord, fullAlarmDetails) => { + setStartAnimation(false); + setIsPaused(true); + + setPressedAlarmDetails((prev) => fullAlarmDetails); + setExpandAlarmBox(true); + }; + + const toggleMessageBox = () => { + setPressedAlarmDetails({}); + setExpandAlarmBox(false); + }; + + const toggleMapType = () => { + if (mapType === "standard") setMapType("satellite"); + if (mapType === "satellite") setMapType("standard"); + }; + + useEffect(() => { + resetHandler(); + }, [goingBack]); + + return ( + + { + if (coordinatesState.length > 0) { + + mapRef.current.fitToCoordinates(coordinatesState, { + edgePadding: { + top: 10, + right: 10, + bottom: 10, + left: 10, + }, + animated: true, + }); + } + }} + mapType={mapType} + + loadingEnabled={false} + provider={PROVIDER_GOOGLE} + initialRegion={{ + latitude: 25.155, + longitude: 55.409, + latitudeDelta: 0.0922, + longitudeDelta: 0.0421, + }} + mapPadding={{ top: 10, right: 10, bottom: 10, left: 10 }} + rotateEnabled={false} + > + { + 0 ? coordinatesState : []} + strokeColor={AppStyles.color.COLOR_SECONDARY_BLUE} + strokeWidth={5} + > + } + + + + + {alarmCoords?.length > 0 + ? alarmCoords.map((item, index) => ( + alarmPressHandler(alarmCoord, item)} + > + + + + + )) + : null} + + + + + + + + + + + + + {expandAlarmBox && ( + + )} + + + {((!startAnimation && fullTrips.length > 0) || reachedEnd) && ( + + + + + + )} + {startAnimation && ( + + + + + + + + )} + {startAnimation && ( + + + + + + + + )} + + + + + + + + + ); +}; + +export default MapViewPod; + +const styles = StyleSheet.create({ + buttonContainer: { + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + width: "100%", + marginBottom: moderateScale(10), + position: "absolute", + bottom: "2%", + }, + buttonStyle: { + padding: moderateScale(15), + backgroundColor: AppStyles.color.COLOR_DARK_BLUE, + borderRadius: moderateScale(25), + }, +}); diff --git a/app/components/Message.tsx b/app/components/Message.tsx index fede77e..bf2b7e6 100644 --- a/app/components/Message.tsx +++ b/app/components/Message.tsx @@ -46,7 +46,7 @@ export default function MessageBox({ > {message} - onButtonPress()}> + onButtonPress()} style={{paddingHorizontal:"5%"}}> {label} @@ -76,7 +76,6 @@ const makeStyles = (colors: any) => justifyContent: "space-around", backgroundColor: "white", alignItems: "center", - //flexDirection:'row', borderRadius: moderateScale(5), }, title: { color: "#000", numberOfLines: 1 }, diff --git a/app/components/MessageBox.tsx b/app/components/MessageBox.tsx new file mode 100644 index 0000000..dab742d --- /dev/null +++ b/app/components/MessageBox.tsx @@ -0,0 +1,107 @@ +import React from "react"; +import { + View, + ActivityIndicator, + Text, + TouchableOpacity, + Pressable, +} from "react-native"; +import { moderateScale } from "react-native-size-matters"; + +import metrics from "../config/metrics"; + +import { HalfButton } from "./button"; +import AppStyles from "../config/styles"; + +export default function MessageBox(props) { + const { alarmDetails } = props; + + return ( + + + + + STATUS + + + Alarm Details + + + Alarm : {alarmDetails?.alarmText} + + + Speed : {alarmDetails?.speed} km/hr + Direction : {alarmDetails?.sdirect} + Status : {alarmDetails?.statusText} + Driver Name : {alarmDetails?.driverid} + Date : {alarmDetails?.createtime} + + + + + {props.Label} + + + + + ); +} diff --git a/app/components/NoResourceFound.tsx b/app/components/NoResourceFound.tsx index 60718ba..38bf690 100644 --- a/app/components/NoResourceFound.tsx +++ b/app/components/NoResourceFound.tsx @@ -1,20 +1,15 @@ -import React from 'react'; -import {StyleSheet, View, Text} from 'react-native'; - -// import AppStyles from '../../config/styles'; -// import metrics from '../../config/metrics'; -import {useTheme} from 'react-native-paper'; -import Skelton from '../assets/Svgs/Skelton.svg'; -import NoResourceImg from '../assets/Svgs/NoResourceImg.svg'; - -import {moderateScale} from 'react-native-size-matters'; - -import Dimensions from '../utils/helper'; +import React from "react"; +import { StyleSheet, View, Text } from "react-native"; +import { useTheme } from "react-native-paper"; +import Skelton from "../assets/Svgs/Skelton.svg"; +import NoResourceImg from "../assets/Svgs/NoResourceImg.svg"; +import { moderateScale } from "react-native-size-matters"; +import Dimensions from "../utils/helper"; const dim = Dimensions.Screen; const NoResourceFound = (props: any) => { - const {colors} = useTheme(); + const { colors } = useTheme(); const styles = makeStyles(colors); const itemsNumber = Math.floor(dim.height / moderateScale(70)); const times = Array(itemsNumber).fill(0); @@ -23,12 +18,14 @@ const NoResourceFound = (props: any) => { return times.map((prop, key) => { return ( - + }} + > + ); }); @@ -37,18 +34,20 @@ const NoResourceFound = (props: any) => { {renderBackgroundSkelton()} + style={{ flex: 1, left: 0, bottom: 0, top: 0, right: 0 }} + position={"absolute"} + > - + alignItems: "center", + justifyContent: "flex-end", + width: "100%", + }} + > + - + {props.title} {props.subTitle} @@ -62,29 +61,28 @@ const makeStyles = (colors: any) => StyleSheet.create({ fullScreen: { flexGrow: 1, - height: '100%', - width: '100%', - backgroundColor: 'rgba(255, 255, 255, 0.4)', + height: "100%", + width: "100%", + backgroundColor: "rgba(255, 255, 255, 0.4)", }, imageBackground: { - width: '100%', + width: "100%", flexGrow: 1, - backgroundColor: 'red', + backgroundColor: "red", aspectRatio: 1, - // marginTop:-20 }, title: { - fontFamily: 'Poppins-SemiBold', - fontWeight: '600', + fontFamily: "Poppins-SemiBold", + fontWeight: "600", fontSize: moderateScale(20), - color: '#505050', - textAlign: 'center', + color: "#505050", + textAlign: "center", }, subTitle: { - fontFamily: 'Poppins-Medium', - fontWeight: '500', + fontFamily: "Poppins-Medium", + fontWeight: "500", fontSize: moderateScale(14), - color: '#909090', - textAlign: 'center', + color: "#909090", + textAlign: "center", }, }); diff --git a/app/components/RoutePod.tsx b/app/components/RoutePod.tsx index 91bc5a3..54a42d7 100644 --- a/app/components/RoutePod.tsx +++ b/app/components/RoutePod.tsx @@ -19,7 +19,7 @@ import UserIcon from "../assets/Svgs/UserIcon.svg"; import { moderateScale } from "react-native-size-matters"; import moment from "moment"; import TrackDetails from "../screens/Track/components/TrackDetails"; -import TrackPod from 'app/components/TrackPod'; +import TrackPod from "app/components/TrackPod"; import { storeHelpers } from "app/store"; const dim = Dimensions.Screen; @@ -45,26 +45,16 @@ const RoutePod: FunctionComponent = ({ return ( - {/* */} - {/* - - - - */} - + - - - - - {storeHelpers.getUserName()} - - - {/* */} - - + + + + + {storeHelpers.getUserName()} + + + @@ -84,7 +74,7 @@ const makeStyles = (colors: any) => borderTopRightRadius: 5, borderTopLeftRadius: 5, }, - detailsContainer: { width: "100%"}, + detailsContainer: { width: "100%" }, logoContainer: { width: "20%", justifyContent: "center", @@ -126,14 +116,14 @@ const makeStyles = (colors: any) => paddingHorizontal: "2%", paddingBottom: "2%", }, - driverNameContainer:{ - paddingTop:'1%', - flexDirection: "row", - paddingLeft:'3%', - paddingBottom:'2%', - width: '100%', - backgroundColor:'#fff', - borderBottomWidth: 1, - borderColor: 'rgba(202, 202, 202, 0.8)' - } + driverNameContainer: { + paddingTop: "1%", + flexDirection: "row", + paddingLeft: "3%", + paddingBottom: "2%", + width: "100%", + backgroundColor: "#fff", + borderBottomWidth: 1, + borderColor: "rgba(202, 202, 202, 0.8)", + }, }); diff --git a/app/components/SearchBox.tsx b/app/components/SearchBox.tsx index 32f776b..77e2e2f 100644 --- a/app/components/SearchBox.tsx +++ b/app/components/SearchBox.tsx @@ -9,7 +9,6 @@ import { SafeAreaView, TextInput } from 'react-native'; -// import TextInput from 'react-native-material-textinput'; import {moderateScale} from 'react-native-size-matters'; import Search from '../assets/Svgs/Search.svg'; import Dimensions from '../utils/helper'; @@ -49,8 +48,6 @@ const dim = Dimensions.Screen; alignItems: 'center', justifyContent: 'center', paddingLeft: '6%', - // backgroundColor:'red', - // flex:.5 }}> inputRef?.current = txt} height={moderateScale(40)} placeholderColor={colors.passive} color={colors.passive} @@ -78,19 +74,13 @@ const dim = Dimensions.Screen; color: colors.passive, width:'100%' }} - // value={'this.state.userName'} onChangeText={text => { props.onSearch(text); }} - // error={ - // this.state.userNameError && 'Enter Valid Username' - // } - // onEndEditing={() => this._onEndEditing(this.state.userName)} fontFamily={'Poppins-Regular'} /> - {/* */} ); @@ -101,21 +91,10 @@ export default SearchBox; const makeStyles = (colors: any) => StyleSheet.create({ main: { - // height: moderateScale(80), width: '100%', alignItems: 'center', justifyContent: 'center', paddingBottom: moderateScale(10), backgroundColor: colors.primary, }, -// inputDataText: { -// height: '65%', -// elevation: moderateScale(2), -// flexDirection: 'row', -// justifyContent: 'space-between', -// // marginBottom: moderateScale(20), -// backgroundColor: AppStyles.colors.COLOR_PRIMARY, // -// paddingHorizontal: moderateScale(15), -// borderRadius: moderateScale(3), -// }, }); diff --git a/app/components/SearchHeader.tsx b/app/components/SearchHeader.tsx new file mode 100644 index 0000000..15be4b8 --- /dev/null +++ b/app/components/SearchHeader.tsx @@ -0,0 +1,113 @@ +import React from "react"; +import { View, TouchableOpacity, StyleSheet } from "react-native"; +import { moderateScale } from "react-native-size-matters"; +import { SearchIcon } from "./svgComponents"; +import AppStyles from "app/config/styles"; +import { TextInput } from "react-native"; + +const SearchHeader = (props) => { + const { isClicked, setIsClicked, searchText, setSearchText, searchHandler } = + props; + + return ( + + + + + + + + searchHandler(text)} + onFocus={() => setIsClicked(true)} + /> + + + + ); +}; + +export default SearchHeader; + +const styles = StyleSheet.create({ + main: { + height: moderateScale(45), + + width: "92%", + + flexDirection: "row", + + justifyContent: "space-between", + + alignItems: "center", + + paddingHorizontal: moderateScale(15), + + elevation: 2, + + backgroundColor: AppStyles.color.COLOR_WHITE, + + borderRadius: 8, + }, + + container: { + minHeight: moderateScale(45), + + width: "100%", + + flexDirection: "row", + + justifyContent: "center", + + backgroundColor: AppStyles.color.COLOR_DARK_BLUE, + + paddingBottom: moderateScale(10), + }, + + inputDataText: { + flexDirection: "row", + + justifyContent: "space-between", + + alignItems: "center", + + flex: 1, + + paddingLeft: "2%", + + borderRadius: moderateScale(3), + + underlineColorAndroid: "transparent", + }, + + searchText: { + fontSize: moderateScale(14), + + color: AppStyles.color.COLOR_GREY, + + fontFamily: "Poppins-Regular", + + fontWeight: "400", + + backgroundColor: "transparent", + + width: "90%", + + borderColor: "transparent", + + borderBottomWidth: 0, + }, +}); diff --git a/app/components/StudentCount.tsx b/app/components/StudentCount.tsx index eb362b4..9b3cb6a 100644 --- a/app/components/StudentCount.tsx +++ b/app/components/StudentCount.tsx @@ -19,10 +19,6 @@ interface StudentCountProps { const StudentCount: FunctionComponent = ({boardedCount,notBoardedCount,yetBoardedCount}) => { const { colors } = useTheme(); - - // if (!data) { - // return null; - // } const styles = makeStyles(colors); return ( diff --git a/app/components/StudentCountBox.tsx b/app/components/StudentCountBox.tsx index e7f942a..4ad4a14 100644 --- a/app/components/StudentCountBox.tsx +++ b/app/components/StudentCountBox.tsx @@ -17,10 +17,6 @@ interface WithLogoHeaderProps { const StudentCountBox: FunctionComponent = props => { const {colors} = useTheme(); const {totalcount= 10} = props; - -// if (!data) { -// return null; -// } const styles = makeStyles(colors); return ( diff --git a/app/components/ThemeController.tsx b/app/components/ThemeController.tsx index 9b2e0cb..29085e4 100644 --- a/app/components/ThemeController.tsx +++ b/app/components/ThemeController.tsx @@ -23,7 +23,6 @@ const ThemeController: React.FC = () => { return ( - {/* */} ); diff --git a/app/components/TripDots.tsx b/app/components/TripDots.tsx new file mode 100644 index 0000000..0aff45a --- /dev/null +++ b/app/components/TripDots.tsx @@ -0,0 +1,28 @@ +import { View, StyleSheet } from "react-native"; +import React from "react"; +import { moderateScale } from "react-native-size-matters"; +import AppStyles from "../config/styles"; +const TripDots = ({ repeat }) => { + const newArr = new Array(repeat).fill(0); + + return ( + <> + {newArr.map((item, index) => ( + + ))} + + ); +}; + +const styles = StyleSheet.create({ + dash: { + width: moderateScale(2), + height: moderateScale(6), + backgroundColor: AppStyles.color.COLOR_SECONDARY_BLUE, + marginLeft: "auto", + marginRight: "auto", + marginBottom: moderateScale(3), + }, +}); + +export default TripDots; diff --git a/app/components/TripListViewPod.tsx b/app/components/TripListViewPod.tsx new file mode 100644 index 0000000..a64f8bd --- /dev/null +++ b/app/components/TripListViewPod.tsx @@ -0,0 +1,108 @@ +import { View, StyleSheet, Text } from "react-native"; +import React from "react"; +import { moderateScale } from "react-native-size-matters"; +import AppStyles from "../config/styles"; +import { + RoundOdo, + PartialOdo, + ClockIcon, + LiveLocation, + StartTrackIcon, +} from "../components/svgComponents"; + +const scaledWidth = moderateScale(10); +const scaledHeight = moderateScale(10); + +const TripListViewPod = (props) => { + const { + statusText, + speed, + createtime, + colors, + driverid, + lat, + lang, + alarmText, + } = props; + return ( + + + {driverid} + + + + Status : {statusText} + + + + + + Coords : {lat},{lang} + + + {alarmText && ( + + + Alarm : {alarmText} + + + )} + + + {speed} km/hr + + + + + {createtime?.split(" ")[1]}{" "} + + + + ); +}; + +const styles = StyleSheet.create({ + pod: { + backgroundColor: AppStyles.color.COLOR_WHITE, + padding: moderateScale(6), + width: "100%", + minHeight: 80, + marginVertical: "2%", + borderRadius: moderateScale(5), + }, + wrapper: { + flexDirection: "row", + alignItems: "center", + }, +}); + +export default TripListViewPod; diff --git a/app/components/TripSummaryPod.tsx b/app/components/TripSummaryPod.tsx new file mode 100644 index 0000000..b30c161 --- /dev/null +++ b/app/components/TripSummaryPod.tsx @@ -0,0 +1,128 @@ +import { StyleSheet, Text, View } from "react-native"; +import { useTheme } from "react-native-paper"; +import React from "react"; +import { moderateScale } from "react-native-size-matters"; +import AppStyles from "../config/styles"; +import StartTrackIcon from "../assets/Svgs/StartTrackIcon.svg"; +import Origin from "../assets/Svgs/El1.svg"; +import RightArrow from "../assets/Svgs/RightArrow.svg"; +import Bus from "../assets/Svgs/Bus.svg"; +import { SchoolBus, RoundOdo, PartialOdo } from "../components/svgComponents"; +import TripDots from "./TripDots"; + +export const TripSummaryPod = ({ data, showArrow = true }) => { + const { colors } = useTheme(); + + return ( + + + + {data.plate} + + + + + + + + + + + + + + + Destination :{" "} + + {data.startLat} / {data.startLang} + + + {data.endDate} + + + + + + {data.totalodo} Kms + + + + + + Max Speed: {data.maxspeed} Km/h + + + + + + No Of Alarms: {data.totalalarmcnt} + + + + {showArrow && } + + + Origin :{" "} + + {data.startLat} / {data.endLang} + + + {data.startDate} + + + + ); +}; + +const styles = StyleSheet.create({ + pod: { + backgroundColor: AppStyles.color.COLOR_WHITE, + padding: moderateScale(6), + width: "100%", + minHeight: 80, + marginVertical: "2%", + borderRadius: moderateScale(5), + }, + header: { + marginBottom: moderateScale(10), + display: "flex", + flexDirection: "row", + }, + headerText: { + fontWeight: "bold", + marginLeft: moderateScale(5), + }, + details: { + display: "flex", + flexDirection: "row", + }, + leftContainer: { + width: "10%", + }, + rightContainer: { + width: "85%", + }, + tripSpeedDetails: { + display: "flex", + flexDirection: "row", + alignItems: "center", + }, + tripSpeedDetailsContainer: { + marginVertical: moderateScale(8), + }, +}); diff --git a/app/components/Typography/Paragraph.tsx b/app/components/Typography/Paragraph.tsx index 2754d07..54fc4e7 100644 --- a/app/components/Typography/Paragraph.tsx +++ b/app/components/Typography/Paragraph.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {StyleSheet, Text} from 'react-native'; import {utils} from '../../utils'; -// import { colors, fonts } from '../../constants'; export interface TypographyProps { children: any; @@ -23,8 +22,6 @@ export function Paragraph({ text: { lineHeight: utils.device.s([20, 24]), fontSize: utils.device.s([13, 16]), - // fontFamily: fonts.medium, - // color: invert ? colors.black : colors.white, textShadowColor: textShadow === true ? 'rgba(0, 0, 0, 0.6)' : undefined, textShadowOffset: textShadow === true ? {width: 0.5, height: 0.5} : undefined, diff --git a/app/components/Typography/SectionTitle.tsx b/app/components/Typography/SectionTitle.tsx index 8310473..6f8e827 100644 --- a/app/components/Typography/SectionTitle.tsx +++ b/app/components/Typography/SectionTitle.tsx @@ -2,7 +2,6 @@ import React from 'react'; import {StyleSheet, Text} from 'react-native'; import {utils} from '../../utils'; import {fonts} from '../../config/fonts'; -// import { colors, fonts } from '../../constants'; export interface TypographyProps { children: any; @@ -29,7 +28,6 @@ export function SectionTitle({ fontSize: utils.device.s([20, 22]), fontFamily: fonts.medium, color: '#000', - // color: invert ? colors.black : colors.white, textShadowColor: textShadow === true ? 'rgba(0, 0, 0, 0.6)' : undefined, textShadowOffset: textShadow === true ? {width: 0.5, height: 0.5} : undefined, diff --git a/app/components/Typography/SubTitle.tsx b/app/components/Typography/SubTitle.tsx index 02125b6..900f480 100644 --- a/app/components/Typography/SubTitle.tsx +++ b/app/components/Typography/SubTitle.tsx @@ -20,7 +20,6 @@ export function SubTitle({ fontSize: utils.device.s([14, 18]), fontFamily: fonts.medium, color: '#000', - // color: invert ? colors.black : colors.white, textShadowColor: textShadow ? 'rgba(0, 0, 0, 0.6)' : null, textShadowOffset: textShadow ? {width: 0.5, height: 0.5} : null, textShadowRadius: textShadow ? 1 : null, diff --git a/app/components/Typography/Title.tsx b/app/components/Typography/Title.tsx index da3ec68..f3c0ad7 100644 --- a/app/components/Typography/Title.tsx +++ b/app/components/Typography/Title.tsx @@ -2,8 +2,6 @@ import React from 'react'; import {StyleSheet, Text} from 'react-native'; import {utils} from '../../utils'; import {fonts} from '../../config/fonts'; -// import { colors, fonts } from '../../constants'; -// import { TypographyProps } from '../../types'; export function Title({ children, @@ -18,9 +16,7 @@ export function Title({ }: any) { const styles = StyleSheet.create({ subTitle: { - // fontSize: utils.device.s([25, 35]), fontFamily: fonts.medium, - // color: invert ? colors.black : colors.white, color, textShadowColor: textShadow === true ? 'rgba(0, 0, 0, 0.6)' : undefined, textShadowOffset: diff --git a/app/components/Typography/index.tsx b/app/components/Typography/index.tsx index 9b465fb..6d4162b 100644 --- a/app/components/Typography/index.tsx +++ b/app/components/Typography/index.tsx @@ -3,12 +3,7 @@ import React from 'react'; import {View, Text} from 'react-native'; import {fonts} from '../../config/fonts'; import {utils} from '../../utils'; - import {Title} from './Title'; -// import {SectionTitle} from './SectionTitle'; -// import {SubTitle} from './SubTitle'; -// import {Paragraph} from './Paragraph'; -// import {DetailTitle, Detail, DetailSubTitle, DetailDescription} from './Detail'; const h1FontSize = utils.device.s([22, 24]); const h2FontSize = utils.device.s([18, 20]); @@ -34,7 +29,6 @@ const H = ({ { fontFamily: fonts.medium, color: '#000', - // color: invert ? colors.black : colors.white, fontSize, textShadowColor: textShadow === true ? 'rgba(0, 0, 0, 0.6)' : null, textShadowOffset: @@ -161,7 +155,6 @@ const Body = ({children, invert, style, allowFontScaling = true}) => ( style={[ { fontFamily: fonts.medium, - // color: invert ? colors.black : colors.white, fontSize: bodyFontSize, ...style, }, @@ -176,9 +169,7 @@ const Small = ({children, invert, style, allowFontScaling = true}) => ( style={[ { fontFamily: fonts.medium, - // letterSpacing: -0.3, lineHeight: 23, - // color: invert ? colors.black : colors.white, paddingBottom: 10, fontSize: smallFontSize, ...style, @@ -191,9 +182,6 @@ const Small = ({children, invert, style, allowFontScaling = true}) => ( export const Typography = { Title, - // SectionTitle, - // SubTitle, - // Paragraph, H1, H2, H3, @@ -209,8 +197,4 @@ export const Typography = { Body, Link, Small, - // DetailTitle, - // Detail, - // DetailSubTitle, - // DetailDescription, }; diff --git a/app/components/WithLogoMenuHeader.tsx b/app/components/WithLogoMenuHeader.tsx index 03f75b2..999379e 100644 --- a/app/components/WithLogoMenuHeader.tsx +++ b/app/components/WithLogoMenuHeader.tsx @@ -1,4 +1,4 @@ -import React, {FunctionComponent, ReactNode} from 'react'; +import React, {FunctionComponent, ReactNode, useEffect, useState} from 'react'; import { View, ImageBackground, @@ -14,6 +14,8 @@ import Logout from '../assets/Svgs/LogoutIcon.svg'; import {moderateScale} from 'react-native-size-matters'; import {useDispatch} from 'react-redux'; import {loginActions} from '../store/features/login/slice'; +import UserDetailsInfo from "../screens/Home/components/UserDetailsInfo"; +import { getDriverDetails } from 'app/services/driver'; const dim = Dimensions.Screen; @@ -22,12 +24,23 @@ interface WithLogoHeaderProps { } const WithLogoMenuHeader: FunctionComponent = props => { + const [schoolName,setSchoolName]=useState('') const theme = useTheme(); const dispatch = useDispatch(); const onLogout = () => { dispatch(loginActions.logoutRequest()); } + useEffect(() => { + const fetchData = async () => { + const driverDetails = await getDriverDetails(); + console.log("driverDetails", driverDetails); + console.log("school",driverDetails.body.schoolName); + setSchoolName(driverDetails.body.schoolName); + }; + fetchData(); + }, []); + return ( @@ -36,7 +49,7 @@ const WithLogoMenuHeader: FunctionComponent = props => { Your remote eye - Chempaka International + {schoolName} diff --git a/app/components/index.ts b/app/components/index.ts index 1812fdb..bc7249f 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -1,23 +1,25 @@ -import WithLogoHeader from './WithLogoHeader'; -import WithLogoMenuHeader from './WithLogoMenuHeader'; -import Header from './Header'; -import StudentPod from './StudentPod'; -import MessagePod from './MessagePod'; -import AttendanceBox from './AttendanceBox'; -import HolidayPod from './Holiday'; -import TrackPod from './TrackPod'; -import BusPod from './BusPod'; -import VehicleOdoInfo from './VehicleOdoInfo'; -import ActionBar from './ActionBar'; -import NoResourceFound from './NoResourceFound'; -import MessageBox from './Message'; -import HudView from './HudView'; -import StudentCountBox from './StudentCountBox'; -import StudentCount from './StudentCount'; -import SearchBox from './SearchBox'; -import DriverPod from './DriverPod'; -import RoutePod from './RoutePod'; -import MapViewBottomSheet from './MapViewBottomSheet'; +import WithLogoHeader from "./WithLogoHeader"; +import WithLogoMenuHeader from "./WithLogoMenuHeader"; +import Header from "./Header"; +import StudentPod from "./StudentPod"; +import MessagePod from "./MessagePod"; +import AttendanceBox from "./AttendanceBox"; +import HolidayPod from "./Holiday"; +import TrackPod from "./TrackPod"; +import BusPod from "./BusPod"; +import VehicleOdoInfo from "./VehicleOdoInfo"; +import ActionBar from "./ActionBar"; +import NoResourceFound from "./NoResourceFound"; +import MessageBox from "./Message"; +import HudView from "./HudView"; +import StudentCountBox from "./StudentCountBox"; +import StudentCount from "./StudentCount"; +import SearchBox from "./SearchBox"; +import DriverPod from "./DriverPod"; +import RoutePod from "./RoutePod"; +import MapViewBottomSheet from "./MapViewBottomSheet"; +import { DateTab } from "./DateTab"; +import MapViewPod from "./MapViewPod"; export { WithLogoHeader, WithLogoMenuHeader, @@ -38,5 +40,7 @@ export { StudentCountBox, StudentCount, SearchBox, - MapViewBottomSheet + MapViewBottomSheet, + DateTab, + MapViewPod, }; diff --git a/app/components/svgComponents.tsx b/app/components/svgComponents.tsx new file mode 100644 index 0000000..7a6b861 --- /dev/null +++ b/app/components/svgComponents.tsx @@ -0,0 +1,453 @@ +import React from "react"; +import { View } from "react-native"; +import Svg, { Path, Circle } from "react-native-svg"; +import { scale, verticalScale, moderateScale } from "react-native-size-matters"; + +export const DatePickerCalender = (props) => ( + + + + +); + +export const Bus = (props) => { + ; +}; + +export const SchoolBus = ({ width, height, color }) => { + return ( + + + + + + + + + + ); +}; + +export const TrackerHistoryIcon = (props) => ( + + + + +); + +export const MarkerStartIcon = (props) => ( + + + +); + +export const RoundOdo = (props) => ( + + + +); +export const PartialOdo = (props) => ( + + + + +); + +export const ClockIcon = (props) => ( + + + +); + +export const Location = (props) => ( + + + +); + +export const LiveLocation = (props) => ( + + + + +); + +export function MovingCar(props) { + return ( + + + + + ); +} + +export const NotificationBell = (props) => ( + + + + +); + +export const StopwatchIcon = (props) => ( + + + + +); + +export function ButtonStop(props) { + return ( + + + + ); +} +export function Pause(props) { + return ( + + + + + ); +} + +export function Play(props) { + return ( + + + + ); +} + +export function CustomMarker(props) { + return ( + + + + + ); +} + +export function MarkerCircle(props) { + return ( + + + + ); +} +export function Calendar(props) { + return ( + + + + ); +} +export function StartTrackIcon(props) { + return ( + + + + ); +} + +export const SearchIcon = (props) => ( + + + +); + +export const MessageIcon = (props) => ( + + + +); diff --git a/app/config/api-config.ts b/app/config/api-config.ts index d68bae5..63ef9aa 100644 --- a/app/config/api-config.ts +++ b/app/config/api-config.ts @@ -1,25 +1,27 @@ /* App config for apis */ const ApiConfig = { - BASE_URL_AUTH: 'http://3.23.232.201:5437/', - BASE_URL_API: 'http://3.23.232.201:5438/', - SUB_URL: 'apis/v1/', - SESSIONS: 'sessions/', - MY_PROFILE: 'users/profiles', - VEHICLE: 'vehicles/', - STOPS: '/stops', - CHILDRENS: '/students', - STUDENTS: 'students/', - PARENTS: 'parents/', - PARENT: '/parents', - HOLIDAYS: 'holidays', - EVENTS: 'events', - LEAVES: '/leaves', - VEHICLES: '/vehicles', - KEY: 'zaeemkey1', - PICKUP_ROUTES: '/vehicles/stops', - DRIVER: 'drivers/', - MESSAGES: 'notices' + BASE_URL_AUTH: "http://18.217.209.61:5437/", + BASE_URL_API: "http://18.217.209.61:5438/", + GTRACKIT_BASE_URL_API: "https://test.g-trackit.com:8090/", + SUB_URL: "apis/v1/", + SESSIONS: "sessions", + MY_PROFILE: "users/profiles", + VEHICLE: "vehicles", + STOPS: "stops", + CHILDRENS: "students", + STUDENTS: "students", + PARENTS: "parents", + HOLIDAYS: "holidays", + EVENTS: "events", + LEAVES: "leaves", + KEY: "zaeemkey1", + DRIVER: "drivers", + MESSAGES: "notices", + TRIPS: "trips", + TRIPHISTORY: "tripdetails", + PLATES: "plates", + USERS:"users/" }; export default ApiConfig; diff --git a/app/config/images.ts b/app/config/images.ts index d5f65c1..e9ef39a 100644 --- a/app/config/images.ts +++ b/app/config/images.ts @@ -2,7 +2,6 @@ */ const images = { icons: { - //logo: require('../assets/images/icons/logo.png'), }, }; diff --git a/app/config/styles.ts b/app/config/styles.ts index 579e359..5c8adb5 100644 --- a/app/config/styles.ts +++ b/app/config/styles.ts @@ -4,17 +4,35 @@ */ const AppStyles = { color: { - COLOR_PRIMARY: '#2ec7ab', - COLOR_SECONDARY: '#111', - COLOR_WHITE: '#FFFFFF', - COLOR_BLACK: '#000000', - COLOR_GREY: 'grey', - COLOR_GREEN: 'green', - COLOR_PLACEHOLDER: '#111111', - COLOR_GREY_WHITE: '#fafafa', - COLOR_DARK_SEPERATOR: '#d4d4d4', - COLOR_BLACK_TRANSP: 'rgba(0, 0, 0, 0.7)', - COLOR_GREY_TRANSP: 'rgba(67, 85, 85, 0.7)', + COLOR_PRIMARY: "#2ec7ab", + COLOR_SECONDARY: "#111", + + //whites, greys & blacks + COLOR_WHITE: "#FFFFFF", + COLOR_GREY: "grey", + COLOR_BLACK: "#000000", + COLOR_PLACEHOLDER: "#111111", + COLOR_GREY_WHITE: "#fafafa", + COLOR_DARK_SEPERATOR: "#d4d4d4", + COLOR_BLACK_TRANSP: "rgba(0, 0, 0, 0.7)", + COLOR_GREY_TRANSP: "rgba(67, 85, 85, 0.7)", + COLOR_MEDIUM_DARK_GREY: "#505050", + COLOR_DARK_GREY: "#4d4d4d", + + //greens + COLOR_GREEN: "green", + + //blues + COLOR_DARK_BLUE: "#144072", + COLOR_MEDIUM_DARK_BLUE: "#1A508D", + COLOR_LIGHT_BLUE: "#ccebff", + COLOR_SECONDARY_BLUE: "#0090D9", + + //reds + COLOR_SHADOW_RED: "#EF7371", + COLOR_RED: "#ff0000", + COLOR_DARK_RED: "#990000", + COLOR_RED_IDLE: "#FD8181" }, fonts: { // FONT_REGULAR: 'Roboto-Regular', diff --git a/app/config/theme-config.ts b/app/config/theme-config.ts index e6be374..b4b292d 100644 --- a/app/config/theme-config.ts +++ b/app/config/theme-config.ts @@ -24,7 +24,6 @@ export const PaperThemeDefault = { invertText: '#000000', }, }, - // fonts: configureFonts({config: fontConfig}), }; export const PaperThemeDark = { @@ -44,7 +43,6 @@ export const PaperThemeDark = { invertText: '#000000', }, }, - // fonts: configureFonts({config: fontConfig}), }; export const CombinedDefaultTheme = { diff --git a/app/i18n/translations/en.json b/app/i18n/translations/en.json index 6912923..dda4bae 100644 --- a/app/i18n/translations/en.json +++ b/app/i18n/translations/en.json @@ -14,7 +14,9 @@ "address": "Address", "holidays": "Holidays", "events": "Events", - "reason": "Reason" + "reason": "Reason", + "busNo":"Bus Number", + "schoolName":"School Name" }, "home": { "track": "Track", @@ -24,7 +26,9 @@ "messages": "Messages", "holidayList": "Holiday list", "applyLeave": "Apply Leave", - "busArrivalMsg": "will arrive in 10 mts" + "busArrivalMsg": "will arrive in 10 mts", + "trips": " Trip History", + "myBus":"My Bus" }, "track": { "title": "Bus Track", @@ -39,6 +43,9 @@ "children": { "title": "Children" }, + "myBus":{ + "title": "My Bus" + }, "childProfile": { "title": "Children profile", "busAttendance": "Bus Attendance", @@ -60,7 +67,9 @@ "admissionDate": "Date of Admission", "admissionNum": "Admission Number", "rollNumber": "Roll Number", - "dob": "Date of Birth" + "dob": "Date of Birth", + "schoolName":"School Name", + "busNo":"Bus Number" }, "profile": { "details": "My Details" @@ -72,5 +81,21 @@ "students": { "title": "Students", "searchDescription": "Search Student or Stop" + }, + "tripHistory": { + "title": "Trip History" + }, + "tripDetails": { + "title": "Trip Details" + }, + + "driver":{ + "empId":"Employee Id", + "rfid":"RFID" +}, + + "applyLeave":{ + "title":"Apply Leave" + } } diff --git a/app/navigation/NavigationService.tsx b/app/navigation/NavigationService.tsx index 4d2d0ac..480aad3 100644 --- a/app/navigation/NavigationService.tsx +++ b/app/navigation/NavigationService.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { NavigationContainerRef } from '@react-navigation/native'; -// NavigationContainer is referred here - Check NavigationStack export const navigationRef = React.createRef(); function navigate(name: string, params?: any) { diff --git a/app/navigation/NavigationStack.tsx b/app/navigation/NavigationStack.tsx index 944161f..1e01ef5 100644 --- a/app/navigation/NavigationStack.tsx +++ b/app/navigation/NavigationStack.tsx @@ -1,40 +1,42 @@ -import * as React from 'react'; -import {NavigationContainer, Theme} from '@react-navigation/native'; -import {createNativeStackNavigator} from '@react-navigation/native-stack'; -import {useSelector} from 'react-redux'; -import {loginSelector} from '../store/features/login/selectors'; +import * as React from "react"; +import { NavigationContainer, Theme } from "@react-navigation/native"; +import { createNativeStackNavigator } from "@react-navigation/native-stack"; +import { useSelector } from "react-redux"; +import { loginSelector } from "../store/features/login/selectors"; -import {navigationRef} from './NavigationService'; +import { navigationRef } from "./NavigationService"; -import Login from 'app/screens/Login'; -import Home from 'app/screens/Home'; -import ForgotPassword from 'app/screens/ForgotPassword'; -import PickupSchedule from 'app/screens/PickupSchedule'; -import Children from 'app/screens/Children'; -import HolidayList from 'app/screens/HolidayList'; -import Messages from 'app/screens/Messages'; -import MyProfile from 'app/screens/MyProfile'; -import ChildProfile from '../screens/ChildProfile'; -import ApplyLeave from '../screens/ApplyLeave'; -import AttendanceSheet from '../screens/AttendanceSheet'; -import AbsentDays from '../screens/AbsentDays'; -import Track from '../screens/Track'; -import FullMessage from '../screens/Messages/FullMessage'; -import BusList from '../screens/Track/BusList'; +import Login from "app/screens/Login"; +import Home from "app/screens/Home"; +import ForgotPassword from "app/screens/ForgotPassword"; +import PickupSchedule from "app/screens/PickupSchedule"; +import MyBus from 'app/screens/MyBus' +import HolidayList from "app/screens/HolidayList"; +import Messages from "app/screens/Messages"; +import MyProfile from "app/screens/MyProfile"; +import ChildProfile from "../screens/ChildProfile"; +import ApplyLeave from "../screens/ApplyLeave"; +import AttendanceSheet from "../screens/AttendanceSheet"; +import AbsentDays from "../screens/AbsentDays"; +import Track from "../screens/Track"; +import FullMessage from "../screens/Messages/FullMessage"; +import BusList from "../screens/Track/BusList"; +import TripHistory from "../screens/TripHistory"; +import TripDetails from "../screens/TripDetails"; -import ThemeController from '../components/ThemeController'; -import {StatusBar} from 'react-native'; -import {ILoginState} from 'app/models/reducers/login'; +import ThemeController from "../components/ThemeController"; +import { StatusBar } from "react-native"; +import { ILoginState } from "app/models/reducers/login"; const Stack = createNativeStackNavigator(); const AuthStack = createNativeStackNavigator(); const LoggedInStack = createNativeStackNavigator(); const homeOptions = { - title: 'Home', + title: "Home", headerShown: false, headerTitleStyle: { - fontWeight: 'bold', + fontWeight: "bold", }, headerRight: () => , }; @@ -58,7 +60,7 @@ const AuthNavigator = () => { // When logging out, a pop animation feels intuitive // You can remove this if you want the default 'push' animation headerShown: false, - animationTypeForReplace: isLoggedIn ? 'push' : 'pop', + animationTypeForReplace: isLoggedIn ? "push" : "pop", headerRight: () => , }} /> @@ -69,7 +71,7 @@ const AuthNavigator = () => { // When logging out, a pop animation feels intuitive // You can remove this if you want the default 'push' animation headerShown: false, - animationTypeForReplace: isLoggedIn ? 'push' : 'pop', + animationTypeForReplace: isLoggedIn ? "push" : "pop", headerRight: () => , }} /> @@ -84,12 +86,12 @@ const LoggedInNavigator = () => ( ); const App: React.FC = (props: IProps) => { - const {theme} = props; + const { theme } = props; const isLoggedIn = useSelector((state: any) => state.login?.isLoggedIn); return ( - + {isLoggedIn ? ( @@ -102,62 +104,72 @@ const App: React.FC = (props: IProps) => { + + ) : ( @@ -169,8 +181,8 @@ const App: React.FC = (props: IProps) => { // When logging out, a pop animation feels intuitive // You can remove this if you want the default 'push' animation headerShown: false, - title: 'My home', - animationTypeForReplace: isLoggedIn ? 'push' : 'pop', + title: "My home", + animationTypeForReplace: isLoggedIn ? "push" : "pop", headerRight: () => , }} /> diff --git a/app/screens/AbsentDays/index.tsx b/app/screens/AbsentDays/index.tsx index 88466bb..8fe467c 100644 --- a/app/screens/AbsentDays/index.tsx +++ b/app/screens/AbsentDays/index.tsx @@ -14,7 +14,7 @@ import {Calendar, CalendarList, Agenda} from 'react-native-calendars'; import moment from 'moment'; const AbsentDays: React.FC = ({route}) => { - const {leavesData,childData} = route.params; + const {leavesData,driverData} = route.params; const [isParentDetails, setIsParentDetails] = useState(false); const {colors} = useTheme(); @@ -30,7 +30,7 @@ const AbsentDays: React.FC = ({route}) => { /> - + diff --git a/app/screens/ApplyLeave/index.tsx b/app/screens/ApplyLeave/index.tsx index 1156567..138ee46 100644 --- a/app/screens/ApplyLeave/index.tsx +++ b/app/screens/ApplyLeave/index.tsx @@ -1,5 +1,12 @@ import React, { useState } from "react"; -import { View, ScrollView, TouchableOpacity, Text } from "react-native"; +import { + View, + ScrollView, + TouchableOpacity, + Text, + FlatList, + Alert, +} from "react-native"; import { TextInput, useTheme } from "react-native-paper"; import moment from "moment"; import NavigationService from "app/navigation/NavigationService"; @@ -12,47 +19,119 @@ import { makeStyles } from "./styles"; import { Button } from "../../components/Buttons/button"; import { Calendar, CalendarList, Agenda } from "react-native-calendars"; import { t } from "../../i18n"; -import { applyLeave } from "../../services/children"; import { loadingActions } from "../../store/features/loading/slice"; import { useDispatch, useSelector } from "react-redux"; +import { formatLeaveApiParams } from "../../utils/formatParams"; +import { Picker } from "@react-native-picker/picker"; +import { fonts } from "../../config/fonts"; +import { applyDriverLeave } from "../../services/driver"; const ApplyLeave: React.FC = ({ route }) => { - const { childData } = route.params; + const { driverData } = route.params; + console.log("driverData", driverData); + const dispatch = useDispatch(); const isLoading = useSelector((state: any) => state.loading?.isLoading); const [leaveReason, setLeaveReason] = useState(""); - const [selectedDate, seSelectedDate] = useState(""); + const [selectedDate, setSelectedDate] = useState(""); const [markedDates, setMarkedDates] = useState({}); const [showSuccess, setShowSuccess] = useState(false); + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); + const [absentType, setAbsentType] = useState("Sick"); + const [isFormValid, setIsFormValid] = useState(false); + const [showWarning, setShowWarning] = useState(false); + const [errorStatus, setErrorStatus] = useState(""); const { colors } = useTheme(); const styles = makeStyles(colors); + + function validationFunc() { + if ( + absentType && + leaveReason.length > 0 && + Object.keys(markedDates).length > 0 && + true + ) { + console.log("form is VALID"); + setIsFormValid(true); + return true; + } else { + console.log("form is still not valid"); + setIsFormValid(false); + return false; + } + } + const getSelectedDayEvents = (date) => { - let markedDates = {}; - markedDates[date] = { - selected: true, - selectedColor: "#00B0BF", - selectedTextColor: "#FFFFFF", - }; - let serviceDate = moment(date); - serviceDate = serviceDate.format("DD.MM.YYYY"); - seSelectedDate(serviceDate); - setMarkedDates(markedDates); - }; - const goBack = () => {NavigationService.goBack();} - const onApplyLeave = async() => { - - // dispatch(loadingActions.enableLoading()); - const resp = await applyLeave(childData?.guid, selectedDate, leaveReason); - // dispatch(loadingActions.disableLoading()); - if(resp?.status === 201){ - setShowSuccess(true); + if (!startDate || (startDate && endDate)) { + // if there's no start date selected, or if both start and end dates are selected + setStartDate(date); + setEndDate(null); + setMarkedDates({ + [date]: { startingDay: true, color: "#00BFFF", date: date }, + }); + } else { + // if there's already a start date selected + const range = { + // [startDate]: { startingDay: true, color: "#00BFFF" }, + }; + const endDateObj = new Date(date); + const startDateObj = new Date(startDate); + const days = + (endDateObj.getTime() - startDateObj.getTime()) / (1000 * 3600 * 24); + + for (let i = 1; i <= days; i++) { + const tempDate = new Date(startDateObj); + console.log("tempDate", tempDate); + tempDate.setDate(tempDate.getDate() + i); + console.log("tempDate after adding", tempDate); + const tempDateStr = tempDate.toISOString().slice(0, 10); + range[tempDateStr] = { color: "#00BFFF", date: tempDateStr }; + console.log("range", range); + } + + setEndDate(date); + setMarkedDates({ + ...markedDates, + ...range, + [date]: { endingDay: true, color: "#00BFFF", date: date }, + }); } }; - + console.log("markedDates", markedDates); + const goBack = () => { + NavigationService.goBack(); + }; + const onApplyLeave = async () => { + setShowWarning(false); + const validationResult = validationFunc(); + if (validationResult) { + dispatch(loadingActions.enableLoading()); + const formattedParams = formatLeaveApiParams( + markedDates, + driverData, + leaveReason, + absentType + ); + console.log("formattedParams", formattedParams); + const resp = await applyDriverLeave(driverData?.guid, formattedParams); + dispatch(loadingActions.disableLoading()); + console.log("ressppp==", resp); + if (resp?.status === 201) { + // console.log("ressppp==", resp); + setShowSuccess(true); + } else if (resp?.status === 409) { + setErrorStatus(resp?.body?.detail); + console.log("reached the error part"); + } + } else { + setShowWarning(true); + } + }; return (
{ leftIconPress={goBack} /> {isLoading && } + + {showWarning && ( + + )} + {errorStatus?.length > 0 && ( + + )} + - + { > { + console.log("selected day", day); getSelectedDayEvents(day.dateString); }} theme={{ - // backgroundColor: "#ffffff", - // calendarBackground: "#ffffff", - // todayTextColor: "#ffffff", - // dayTextColor: "#222222", - // textDisabledColor: "#d9e1e8", - // monthTextColor: "#222222", - // arrowColor: "#57B9BB", - // textDayFontWeight: "300", - // textMonthFontWeight: "bold", - // textDayHeaderFontWeight: "500", - // textDayFontSize: 16, - // textMonthFontSize: 18, selectedDayBackgroundColor: "#fff", selectedDayTextColor: "#222", }} @@ -122,24 +202,50 @@ const ApplyLeave: React.FC = ({ route }) => { }} > - Apply leave on : + Apply leave on *: + + ( + + {moment(item.date).format("DD-MMM-YYYY")} + + )} + /> + + + + Leave Type * : - { + setAbsentType(itemValue); + console.log("absent type selected is ", itemValue); + }} + mode={"dropdown"} style={{ - textAlign: "left", - paddingBottom: "2%", - paddingLeft: "20%", + backgroundColor: "white", + fontWeight: 600, + borderRadius: "2%", }} > - {moment(selectedDate, "DD.MM.YYYY").format("DD-MMM-YYYY")} - + + + + setLeaveReason(text)} + onChangeText={(text) => { + setLeaveReason(text); + // validationFunc(); + }} /> top: '-6%', }, textBoxContainer: { - // flex: 1, width: '100%', alignItems: 'center', - // justifyContent: 'space-between', }, textInput: { backgroundColor: '#fffff9', diff --git a/app/screens/AttendanceSheet/index.tsx b/app/screens/AttendanceSheet/index.tsx index a7eddf5..6647336 100644 --- a/app/screens/AttendanceSheet/index.tsx +++ b/app/screens/AttendanceSheet/index.tsx @@ -14,14 +14,14 @@ import {AttendanceBox} from '../../components'; import {Calendar, CalendarList, Agenda} from 'react-native-calendars'; const AttendanceSheet: React.FC = ({route}) => { - const {childData} = route.params; + const {driverData} = route.params; const [isParentDetails, setIsParentDetails] = useState(false); const {colors} = useTheme(); const styles = makeStyles(colors, isParentDetails); const goBack = () => NavigationService.goBack(); const gotoAbsentDays = () => - NavigationService.navigate('AbsentDays', {childData}); + NavigationService.navigate('AbsentDays', {driverData}); return (
{ /> - + { const {childeInfo} = route.params; const dispatch = useDispatch(); @@ -58,11 +60,11 @@ const ChildProfile: React.FC = ({route}) => { const goBack = () => NavigationService.goBack(); const gotoApplyLeave = () => - NavigationService.navigate('ApplyLeave', {childData: childeInfo}); + NavigationService.navigate('ApplyLeave', {driverData: childeInfo}); const gotoAttendanceSheet = () => - NavigationService.navigate('AttendanceSheet', {childData: childeInfo}); + NavigationService.navigate('AttendanceSheet', {driverData: childeInfo}); const gotoTrack = () => - NavigationService.navigate('ApplyLeave', {childData: childeInfo}); + NavigationService.navigate('ApplyLeave', {driverData: childeInfo}); const gotoAbsentDays = () => NavigationService.navigate('AbsentDays', { leavesData: leaves, diff --git a/app/screens/Children/index.tsx b/app/screens/Children/index.tsx index faaa70e..0b62ca9 100644 --- a/app/screens/Children/index.tsx +++ b/app/screens/Children/index.tsx @@ -1,23 +1,22 @@ -import React, {useEffect, useState} from 'react'; -import {View, FlatList, ActivityIndicator} from 'react-native'; -import {useTheme} from 'react-native-paper'; -import {useDispatch, useSelector} from 'react-redux'; -import NavigationService from 'app/navigation/NavigationService'; -import {Header,SearchBox} from '../../components'; -import LeftArrow from '../../assets/Svgs/LeftArrow.svg'; -import UserIcon from '../../assets/Svgs/UserIcon.svg'; -import {Typography} from '../../components/Typography'; -import {StudentPod, NoResourceFound,StudentCount} from '../../components'; -import {loadingActions} from '../../store/features/loading/slice'; -import {getChildrens} from '../../services/children'; +import React, { useEffect, useState } from "react"; +import { View, FlatList, ActivityIndicator } from "react-native"; +import { useTheme } from "react-native-paper"; +import { useDispatch, useSelector } from "react-redux"; +import NavigationService from "app/navigation/NavigationService"; +import { Header, SearchBox } from "../../components"; +import LeftArrow from "../../assets/Svgs/LeftArrow.svg"; +import UserIcon from "../../assets/Svgs/UserIcon.svg"; +import { Typography } from "../../components/Typography"; +import { StudentPod, NoResourceFound, StudentCount } from "../../components"; +import { loadingActions } from "../../store/features/loading/slice"; +import { getChildrens } from "../../services/children"; -import {makeStyles} from './styles'; -import {t} from 'i18next'; +import { makeStyles } from "./styles"; +import { t } from "i18next"; - -const Children: React.FC = ({route}) => { - const {navType} = route.params; - const {colors} = useTheme(); +const Children: React.FC = ({ route }) => { + const { navType } = route.params; + const { colors } = useTheme(); const styles = makeStyles(colors); const [childrensData, setChildrensData] = useState({}); const dispatch = useDispatch(); @@ -36,48 +35,46 @@ const Children: React.FC = ({route}) => { }, []); const goBack = () => NavigationService.goBack(); - - const gotoDetails = item =>{ - - switch(navType){ - case 'profile': - NavigationService.navigate('ChildProfile', {childeInfo: item}); - break; - case 'track': - NavigationService.navigate('BusList', {childeInfo: item}); - break; - case 'pickup': - NavigationService.navigate('PickupSchedule', {childeInfo: item}); - break; - } - - } - // if(childrensData?.length === 1){ - // gotoDetails(childrensData[0]) - // } + const gotoDetails = (item) => { + switch (navType) { + case "profile": + NavigationService.navigate("ChildProfile", { childeInfo: item }); + break; + case "track": + NavigationService.navigate("BusList", { childeInfo: item }); + break; + case "pickup": + NavigationService.navigate("PickupSchedule", { childeInfo: item }); + break; + } + }; return (
} leftIconPress={() => goBack()} /> - - + + {isLoading ? ( ) : ( - + {childrensData?.length > 0 ? ( ( + renderItem={({ item, index, separators }) => ( { const [holidayList, setHolidayList] = useState([]); @@ -33,11 +35,24 @@ const HolidayList: React.FC = () => { const [markedEvents, setMarkedEvents] = useState({}); const [holidayText, setHolidayText] = useState(""); const [eventText, setEventText] = useState(""); + const [selectedDate, setSelectedDate] = React.useState( + moment().format("YYYY-MM-DD") + ); const dispatch = useDispatch(); const isLoading = useSelector((state: any) => state.loading?.isLoading); const { colors } = useTheme(); const styles = makeStyles(colors); + const currentDay = moment().format("YYYY-MM-DD"); + const dateDisplay= moment().format("DD-MM-YYYY"); + + const markedCurrentDate = { + [currentDay]: { + selected: true, + selectedColor: AppStyles.color.COLOR_MEDIUM_DARK_BLUE, + selectedTextColor: "#FFFFFF", + }, + }; useEffect(() => { let markedEventDates: any = {}; @@ -46,7 +61,8 @@ const HolidayList: React.FC = () => { holidayList?.forEach((holiday) => { markedHolidayDates[holiday.holiday_on] = { selected: true, - selectedColor: "#00B0BF", + selectedColor: AppStyles.color.COLOR_RED_IDLE, + // selectedColor: "green", selectedTextColor: "#FFFFFF", selectedHolidayText: holiday?.text, }; @@ -57,7 +73,7 @@ const HolidayList: React.FC = () => { eventList?.forEach((event) => { markedEventDates[event.event_on] = { selected: true, - selectedColor: "#00B0BF", + selectedColor: AppStyles.color.COLOR_RED_IDLE, selectedTextColor: "#FFFFFF", selectedEventText: event?.text, }; @@ -75,7 +91,10 @@ const HolidayList: React.FC = () => { const fetchData = async () => { holidayResponse = await getHolidaysList(); + console.log("holidayResponse", holidayResponse); eventResponse = await getEventsList(); + console.log("eventResponse", eventResponse); + dispatch(loadingActions.disableLoading()); if ( Array.isArray(holidayResponse?.body) && @@ -95,6 +114,7 @@ const HolidayList: React.FC = () => { }, []); const goBack = () => NavigationService.goBack(); + return (
{ /> + {t("holidays.title")} @@ -112,11 +133,18 @@ const HolidayList: React.FC = () => { > {showHolidayCalender ? : } + + + {dateDisplay} + + + {showHolidayCalender ? ( { const holidayText = markedHolidays?.[day.dateString]?.selectedHolidayText; @@ -132,8 +160,6 @@ const HolidayList: React.FC = () => { selectedDayBackgroundColor: "#fff", selectedDayTextColor: "#222", }} - initialDate={moment().format("YYYY-MM-DD")} - // minDate={moment().format("YYYY-MM-DD")} /> ) : isLoading ? ( @@ -160,7 +186,7 @@ const HolidayList: React.FC = () => { {holidayText} )} - + {t("holidays.events")} @@ -173,7 +199,7 @@ const HolidayList: React.FC = () => { {showEventCalender ? ( { const eventText = markedEvents?.[day.dateString]?.selectedEventText; @@ -187,8 +213,7 @@ const HolidayList: React.FC = () => { selectedDayBackgroundColor: "#fff", selectedDayTextColor: "#222", }} - initialDate={moment().format("YYYY-MM-DD")} - // minDate={moment().format("YYYY-MM-DD")} + /> ) : isLoading ? ( @@ -196,7 +221,6 @@ const HolidayList: React.FC = () => { ) : ( ( diff --git a/app/screens/HolidayList/styles.ts b/app/screens/HolidayList/styles.ts index f9362bd..2fc552a 100644 --- a/app/screens/HolidayList/styles.ts +++ b/app/screens/HolidayList/styles.ts @@ -13,7 +13,8 @@ export const makeStyles = (colors: any) => height: '100%', }, contentContainer: {width: '100%', paddingHorizontal: '4%'}, - headerContainer: {flexDirection: 'row', alignItems: 'center'}, + headerContainer: {flexDirection: 'row', alignItems: 'center', justifyContent:"space-between"}, + headerContainerEvents:{flexDirection: 'row', alignItems: 'center'}, messageText: { width: "100%", backgroundColor: "white", @@ -21,5 +22,11 @@ export const makeStyles = (colors: any) => paddingLeft: "5%", marginVertical: "3%", paddingVertical: "3%", + }, + holidayHeader:{ + flexDirection: 'row', + // justifyContent:"space-between", + alignItems:"center" + } }); diff --git a/app/screens/Home/components/UserDetailsInfo.tsx b/app/screens/Home/components/UserDetailsInfo.tsx index 615347d..c1ab246 100644 --- a/app/screens/Home/components/UserDetailsInfo.tsx +++ b/app/screens/Home/components/UserDetailsInfo.tsx @@ -1,10 +1,10 @@ -import React, {FunctionComponent, ReactNode} from 'react'; -import {View, ImageBackground, StyleSheet, Text} from 'react-native'; -import {useTheme} from 'react-native-paper'; -import Dimensions from '../../../utils/helper'; -import {Typography} from '../../../components/Typography'; -import Logo from '../assets/Logo.svg'; -import moment from 'moment'; +import React, { FunctionComponent, ReactNode } from "react"; +import { View, ImageBackground, StyleSheet, Text } from "react-native"; +import { useTheme } from "react-native-paper"; +import Dimensions from "../../../utils/helper"; +import { Typography } from "../../../components/Typography"; +import Logo from "../assets/Logo.svg"; +import moment from "moment"; const dim = Dimensions.Screen; @@ -12,19 +12,21 @@ interface WithLogoHeaderProps { children: ReactNode; } -const UserDetailsInfo: FunctionComponent = props => { +const UserDetailsInfo: FunctionComponent = (props) => { const theme = useTheme(); return ( - Rajendran Nair - + + {props?.userName} + + {moment().format("dddd, MMMM D YYYY")} - - {moment().format('LT')} + + {moment().format("LT")} @@ -34,22 +36,22 @@ const UserDetailsInfo: FunctionComponent = props => { export default UserDetailsInfo; const styles = StyleSheet.create({ - container: theme => { + container: (theme) => { return { - flexDirection: 'row', - width: '100%', + flexDirection: "row", + width: "100%", paddingTop: dim.height * 0.02, }; }, - titleContainer: theme => { - return {width: '60%', padding: '4%'}; + titleContainer: (theme) => { + return { width: "60%", padding: "4%" }; }, - imageContainer: theme => { + imageContainer: (theme) => { return { - width: '40%', - justifyContent: 'center', - alignItems: 'flex-end', - paddingRight: '4%', + width: "40%", + justifyContent: "center", + alignItems: "flex-end", + paddingRight: "4%", }; }, }); diff --git a/app/screens/Home/index.tsx b/app/screens/Home/index.tsx index e8316d9..3100c83 100644 --- a/app/screens/Home/index.tsx +++ b/app/screens/Home/index.tsx @@ -1,126 +1,181 @@ -import React, { useEffect } from 'react'; -import {View, FlatList, Text, TouchableOpacity} from 'react-native'; +import React, { useEffect, useState } from "react"; +import { View, FlatList, Text, TouchableOpacity } from "react-native"; +import * as loginActions from "app/store/actions/loginActions"; +import NavigationService from "app/navigation/NavigationService"; +import styles from "./styles"; +import UserDetailsInfo from "./components/UserDetailsInfo"; +import WithLogoMenuHeader from "../../components/WithLogoMenuHeader"; +import Dimensions from "../../utils/helper"; +import { Typography } from "../../components/Typography"; +import Track from "../../assets/Svgs/Track.svg"; +import Schedule from "../../assets/Svgs/Schedule.svg"; +import MyProfile from "../../assets/Svgs/MyProfile.svg"; +import Children from "../../assets/Svgs/Children.svg"; +import Messages from "../../assets/Svgs/Messages.svg"; +import Holiday from "../../assets/Svgs/Holiday.svg"; +import MyBus from "../../assets/Svgs/MyBus.svg" +import { TrackerHistoryIcon } from "app/components/svgComponents"; +import { t } from "../../i18n"; +import { getDriverDetails } from "../../services/driver"; +import { profileActions } from "app/store/features/profile/slice"; +import { loadingActions } from "app/store/features/loading/slice"; +import AppStyles from "app/config/styles"; +import { useDispatch, useSelector } from "react-redux"; +import { getMyProfile } from "../../services/myProfile"; +import { moderateScale } from "react-native-size-matters"; -import {useDispatch} from 'react-redux'; -import * as loginActions from 'app/store/actions/loginActions'; -import NavigationService from 'app/navigation/NavigationService'; -import styles from './styles'; -import UserDetailsInfo from './components/UserDetailsInfo'; -import WithLogoMenuHeader from '../../components/WithLogoMenuHeader'; -import Dimensions from '../../utils/helper'; -import {Typography} from '../../components/Typography'; - -import Track from '../../assets/Svgs/Track.svg'; -import Schedule from '../../assets/Svgs/Schedule.svg'; -import MyProfile from '../../assets/Svgs/MyProfile.svg'; -import Children from '../../assets/Svgs/Children.svg'; -import Messages from '../../assets/Svgs/Messages.svg'; -import Holiday from '../../assets/Svgs/Holiday.svg'; -import {t} from '../../i18n'; -import {getDriverDetails} from '../../services/driver'; -import { profileActions } from 'app/store/features/profile/slice'; -import { loadingActions } from 'app/store/features/loading/slice'; const dim = Dimensions.Screen; +const scaledWidth = moderateScale(36); +const scaledHeight = moderateScale(36); const Home: React.FC = () => { - const dispatch = useDispatch(); const onLogout = () => dispatch(loginActions.logOut()); - useEffect(()=>{ + useEffect(() => { dispatch(loadingActions.enableLoading()); dispatch(profileActions.profileDetailsRequest()); - - },[]) + }, []); + + const dispatch = useDispatch(); + + const isLoading = useSelector((state: any) => state.loading?.isLoading); + + const [profileData, setProfileData] = useState({}); + + const goBack = () => NavigationService.goBack(); + + useEffect(() => { + let response = null; + const fetchData = async () => { + const response = await getDriverDetails(); + setProfileData(response?.body); + }; + fetchData(); + }, []); const MenuData = [ { - title: t('home.track'), - bgColor: '#FBE151', - iconBgColor: '#DAC241', - textColor: '#000', - onPress: () => NavigationService.navigate('BusList'), - iconName: 'Track', + title: t("home.track"), + bgColor: "#FBE151", + iconBgColor: "#DAC241", + textColor: "#000", + onPress: () => NavigationService.navigate("BusList"), + iconName: "Track", icon: , }, { - title: t('home.pickUpSchedule'), - bgColor: '#8E8E77', - iconBgColor: '#C6C6A0', - textColor: '#fff', - onPress: () => NavigationService.navigate('PickupSchedule',{navType: 'pickup'}), - iconName: 'Schedule', + title: t("home.pickUpSchedule"), + bgColor: "#8E8E77", + iconBgColor: "#C6C6A0", + textColor: "#fff", + onPress: () => + NavigationService.navigate("PickupSchedule", { navType: "pickup" }), + iconName: "Schedule", icon: , }, { - title: t('home.myProfile'), - bgColor: '#39CCC3', - iconBgColor: '#26ACA4', - textColor: '#fff', - onPress: () => NavigationService.navigate('MyProfile'), - iconName: 'MyProfile', + title: t("home.myProfile"), + bgColor: "#39CCC3", + iconBgColor: "#26ACA4", + textColor: "#fff", + onPress: () => + NavigationService.navigate("MyProfile", { profileInfo: profileData }), + iconName: "MyProfile", icon: , }, + { + title: t("home.myBus"), + bgColor: "#E97A73", + iconBgColor: "#CD6059", + textColor: "#fff", + onPress: () => NavigationService.navigate("MyBus"), + iconName: "MyBus", + icon: , + }, + { - title: t('home.children'), - bgColor: '#E97A73', - iconBgColor: '#CD6059', - textColor: '#fff', - onPress: () => NavigationService.navigate('Children',{navType:'profile'}), - iconName: 'Children', - icon: , - }, - { - title: t('home.messages'), - bgColor: '#4767BB', - iconBgColor: '#6F8FE1', - textColor: '#fff', - onPress: () => NavigationService.navigate('Messages'), - iconName: 'Messages', + title: t("home.messages"), + bgColor: "#4767BB", + iconBgColor: "#6F8FE1", + textColor: "#fff", + onPress: () => NavigationService.navigate("Messages"), + iconName: "Messages", icon: , }, { - title: t('home.holidayList'), - bgColor: '#5DD261', - iconBgColor: '#3EB843', - textColor: '#fff', - onPress: () => NavigationService.navigate('HolidayList'), - iconName: 'Holiday', + title: t("home.holidayList"), + bgColor: "#5DD261", + iconBgColor: "#3EB843", + textColor: "#fff", + onPress: () => NavigationService.navigate("HolidayList"), + iconName: "Holiday", icon: , }, + // { + // title: t("home.applyLeave"), + // bgColor: "#5DD261", + // iconBgColor: "#3EB843", + // textColor: "#fff", + // onPress: () => NavigationService.navigate("HolidayList"), + // iconName: "Holiday", + // icon: , + // }, + { + title: t("home.trips"), + bgColor: "#ad60d1", + iconBgColor: "#913eb8", + textColor: "#fff", + onPress: () => + NavigationService.navigate("TripHistory", { profileInfo: profileData }), + iconName: "TripHistory", + icon: ( + + ), + }, ]; return ( - - - - {`Your Bus ${t('home.busArrivalMsg')}`} - - NavigationService.navigate('Children',{navType:'profile'})}> - {t('home.applyLeave')} + + + + {`Your Bus ${t("home.busArrivalMsg")}`} + + + NavigationService.navigate("ApplyLeave",{driverData:profileData}) + } + > + {t("home.applyLeave")} ( + renderItem={({ item, index, separators }) => ( + style={[styles.menuTileStyle, { backgroundColor: item.bgColor }]} + onPress={item.onPress} + > + { backgroundColor: item.iconBgColor }, + ]} + > {item.icon} + paddingHorizontal: "2%", + }} + > {item.title} diff --git a/app/screens/Login/index.tsx b/app/screens/Login/index.tsx index 04c36db..fae2998 100644 --- a/app/screens/Login/index.tsx +++ b/app/screens/Login/index.tsx @@ -33,7 +33,7 @@ const Login: React.FC = () => { const isLoading = useSelector((state: any) => state.loading?.isLoading); const [userName, setUserName] = useState(''); const [password, setPassword] = useState(''); - + const [isValid, setIsValid] = useState({ userName: false, password: false }); const userNameRef = React.useRef(null); const passwordRef = React.useRef(null); // const {actions} = useLoginSlice(); @@ -44,14 +44,24 @@ const Login: React.FC = () => { // const handleUserNameChange = text => setUserName(text); const onLogin = () => { - // const userName = 'Demo1'; - // const password = '123'; - // if (userName && password) { + if(!userName){ + setIsValid((prev)=>{ + return {...prev,userName:true} + }) + } + + if(!password){ + setIsValid((prev)=>{ + return {...prev,password:true} + }) + } + + if (userName && password) { dispatch(loadingActions.enableLoading()); dispatch(loginActions.loginRequest({userName, password})); - // } - // return null; + } + return null; }; // const onForgot = () => NavigationService.navigate('ForgotPassword'); @@ -69,28 +79,30 @@ const Login: React.FC = () => { label={t('login.userName')} placeholder={t('login.userName')} style={styles.textInput} + error={isValid.userName} // value={userName} - onChangeText={text => { - + onChangeText={(text) => { setUserName(text); }} // left={()=> } - /> - - - - - - setPassword(text)} - // value={password} - right={} - /> - + /> + + + + + + setPassword(text)} + // value={password} + error={isValid.password} + right={} + secureTextEntry={true} + /> + {/* { ); }; -export default Login; +export default Login; \ No newline at end of file diff --git a/app/screens/Messages/FullMessage.tsx b/app/screens/Messages/FullMessage.tsx index e5021da..e3114fb 100644 --- a/app/screens/Messages/FullMessage.tsx +++ b/app/screens/Messages/FullMessage.tsx @@ -1,12 +1,13 @@ -import React from 'react'; -import {View, StyleSheet} from 'react-native'; -import {Button, TextInput, useTheme} from 'react-native-paper'; -import NavigationService from 'app/navigation/NavigationService'; -import {Header} from '../../components'; -import LeftArrow from '../../assets/Svgs/LeftArrow.svg'; -import {Typography} from '../../components/Typography'; -import {MessagePod} from '../../components'; -import {moderateScale} from 'react-native-size-matters'; +import React, { useEffect, useState } from "react"; +import { View, FlatList } from "react-native"; +import { Button, TextInput } from "react-native-paper"; + +import NavigationService from "app/navigation/NavigationService"; +import { Header } from "../../components"; +import LeftArrow from "../../assets/Svgs/LeftArrow.svg"; +import { Typography } from "../../components/Typography"; +import { MessagePod } from "../../components"; +import { getMessages } from "../../services/message"; import moment from 'moment'; import commonStyles from './styles'; @@ -17,11 +18,29 @@ const FullMessage: React.FC = (props:any) => { const styles = makeStyles(colors); const goBack = () => NavigationService.goBack(); + const [messages, setMessages] = useState([]); + + useEffect(() => { + const fetchMessages = async () => { + try { + const response = await getMessages(); + setMessages(response?.data); + } catch (error) { + console.error("Error fetching messages:", error); + } + }; + + fetchMessages(); + }, []); + + const onPressMessage = (item: any) => { + NavigationService.navigate("FullMessage", { data: item }); + }; return ( - +
} leftIconPress={() => goBack()} /> @@ -40,7 +59,6 @@ const FullMessage: React.FC = (props:any) => { ); }; - export default FullMessage; const makeStyles = (colors: any) => @@ -55,9 +73,8 @@ const makeStyles = (colors: any) => height: '80%' }, fullMessageConatiner: { - // alignItems: 'center', - // justifyContent: 'center', width: '100%', paddingHorizontal: '2%', }, }); + diff --git a/app/screens/Messages/index.tsx b/app/screens/Messages/index.tsx index 1a64aab..fa52d97 100644 --- a/app/screens/Messages/index.tsx +++ b/app/screens/Messages/index.tsx @@ -3,30 +3,84 @@ import { View, FlatList } from "react-native"; import { Button, TextInput } from "react-native-paper"; import NavigationService from "app/navigation/NavigationService"; -import { Header } from "../../components"; +import { Header, HudView, NoResourceFound } from "../../components"; import LeftArrow from "../../assets/Svgs/LeftArrow.svg"; import { Typography } from "../../components/Typography"; import { MessagePod } from "../../components"; import { getMessages } from "../../services/message"; -import moment from 'moment'; +import moment from "moment"; import styles from "./styles"; +import SearchHeader from "../../components/SearchHeader"; const Messages: React.FC = () => { const goBack = () => NavigationService.goBack(); const [messages, setMessages] = useState([]); - useEffect(() => { - const _getMessages = async () => { - const resp = await getMessages(); + const [searchText, setSearchText] = useState(""); + const [isClicked, setIsClicked] = useState(false); + const [filteredData, setFilteredData] = useState([]); + const [isLoading, setIsLoading] = useState(false); - setMessages(resp?.body); - }; + useEffect(() => { + async function fetchMessage() { + setIsLoading(true); + const response = await getMessages(); - _getMessages(); + //transforming data here to make search algo work + const transformedData = response?.body.map((item) => { + return { + subject: item.subject, + content: item.content, + created_on: moment(item.created_on).format("DD-MMM-YYYY h:mm A"), + }; + }); + setMessages(transformedData); + setFilteredData(transformedData); + setIsLoading(false); + } + fetchMessage(); }, []); - - const onPress = (item:any) => { - NavigationService.navigate("FullMessage",{data:item}); + // useEffect(() => { + // const _getMessages = async () => { + // setIsLoading(true); + // const resp = await getMessages(); + // console.log("getmessages", resp); + // setMessages(resp?.body); + // }; + + // _getMessages(); + // }, []); + + const onPress = (item) => { + NavigationService.navigate("FullMessage", { data: item }); + }; + + const searchHandler = (input) => { + if (input.length === 0) { + console.log("searchText", input); + setFilteredData(messages); + return; + } + + console.log("searchText", input); + + const filteredData = messages.filter((msg) => { + for (const detail in msg) { + if ( + msg[detail] + + .toLowerCase() + + .includes(input.toLowerCase().trim().replace(/\s/g, "")) + ) { + return msg; + } + } + }); + + console.log("filteredData", filteredData); + + setFilteredData(filteredData); }; return ( @@ -36,25 +90,39 @@ const Messages: React.FC = () => { leftIcon={} leftIconPress={() => goBack()} /> - - {messages?.length > 0 ? ( - ( - onPress(item)} - key={index} - messageTitle={item.subject} - messageType={"info"} - message={item.content} - date={moment(item.created_on,'HH:mm:ss').format('hh:mm A')} - /> - )} - /> - ) : null} - + + + {isLoading ? ( + + ) : ( + + {filteredData?.length > 0 ? ( + 0 ? filteredData : []} + renderItem={({ item, index, separators }) => ( + onPress(item)} + key={index} + messageTitle={item?.subject} + messageType={"info"} + message={item.content} + date={item?.created_on} + /> + )} + /> + ) : ( + + )} + + )} ); }; diff --git a/app/screens/MyBus/index.tsx b/app/screens/MyBus/index.tsx new file mode 100644 index 0000000..96c2a0c --- /dev/null +++ b/app/screens/MyBus/index.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { StyleSheet, View, Text, Button } from "react-native"; +import { useNavigation } from "@react-navigation/native"; + +const MyBus: React.FC = () => { + const navigation = useNavigation(); + + const handleGoBack = () => { + navigation.goBack(); + }; + + return ( + + This is my bus page +