diff --git a/src/locale/en.json b/src/locale/en.json index 8daae722..00ea3612 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -129,6 +129,30 @@ "coords": "coords", "hide_document": "Hide geeks data", "show_document": "Show geeks data", + "open_complaint": "Open complaint", + "close_complaint": "Close complaint", + "complaint": "Complaint", + "first_name": "First Name", + "last_name": "Last Name", + "id": "ID", + "email": "Email", + "phone": "Phone Number", + "complaint_type": "Complaint Type", + "other": "Other", + "no_stop": "No Stop at Station", + "no_ride": "No Ride", + "delay": "Delay", + "overcrowded": "Overcrowded", + "driver_behavior": "Driver Behavior", + "early": "Early Arrival", + "cleanliness": "Cleanliness and Condition of the Bus", + "fine_appeal": "Fine Appeal", + "route_change": "Route Change", + "line_switch": "Line Switch", + "station_signs": "Station Information Signs", + "description": "Description", + "submit_complaint": "Submit Complaint", + "lineProfile": { "title": "Profile for Line", "notFound": "We couldn't find the line you were looking for :(", diff --git a/src/locale/he.json b/src/locale/he.json index a752b01d..766b73d1 100644 --- a/src/locale/he.json +++ b/src/locale/he.json @@ -134,6 +134,29 @@ "coords": "נ.צ.", "hide_document": "הסתר מידע לגיקים", "show_document": "הצג מידע לגיקים", + "open_complaint": "פתח תלונה", + "close_complaint": "סגור תלונה", + "complaint": "תלונה", + "first_name": "שם פרטי", + "last_name": "שם משפחה", + "id": "מספר תעודת זהות", + "email": "דואר אלקטרוני", + "phone": "מספר טלפון", + "complaint_type": "סוג התלונה", + "other": "אחר", + "no_stop": "אי עצירה בתחנה", + "no_ride": "אי ביצוע נסיעה", + "delay": "איחור", + "overcrowded": "עומס נוסעים", + "driver_behavior": "התנהגות נהג", + "early": "הקדמה", + "cleanliness": "נקיות ותקינות האוטובוס", + "fine_appeal": "ערעור על קנס", + "route_change": "שינוי מסלול", + "line_switch": "מעבר בין קווים", + "station_signs": "תקינות שלטי מידע בתחנה", + "description": "תיאור", + "submit_complaint": "שלח תלונה", "lineProfile": { "title": "פרופיל קו", "notFound": "לא הצלחנו למצוא את הקו שחיפשת :(", diff --git a/src/pages/components/map-related/MapLayers/BusToolTip.tsx b/src/pages/components/map-related/MapLayers/BusToolTip.tsx index c964c6b7..a3a79487 100644 --- a/src/pages/components/map-related/MapLayers/BusToolTip.tsx +++ b/src/pages/components/map-related/MapLayers/BusToolTip.tsx @@ -8,8 +8,10 @@ import { useTranslation } from 'react-i18next' import CircularProgress from '@mui/material/CircularProgress' import cn from 'classnames' import CustomTreeView from '../../CustomTreeView' +import { EasterEgg } from '../../../EasterEgg/EasterEgg' +import ComplaintModal from './ComplaintModal' import { getSiriRideWithRelated } from 'src/api/siriService' -import { Point } from 'src/pages/timeBasedMap' +import type { Point } from 'src/pages/timeBasedMap' export type BusToolTipProps = { position: Point; icon: string; children?: ReactNode } @@ -18,6 +20,7 @@ export function BusToolTip({ position, icon, children }: BusToolTipProps) { const [isLoading, setIsLoading] = useState(false) const [showJson, setShowJson] = useState(false) const { t, i18n } = useTranslation() + const [modalOpen, setModalOpen] = useState(false) useEffect(() => { setIsLoading(true) @@ -93,6 +96,21 @@ export function BusToolTip({ position, icon, children }: BusToolTipProps) { onClick={() => setShowJson((showJson) => !showJson)}> {showJson ? t('hide_document') : t('show_document')} + + {/* Open Complaint Button */} + + + + + {/* Complaint Modal */} + + {showJson && (
e.stopPropagation()}> diff --git a/src/pages/components/map-related/MapLayers/ComplaintModal.tsx b/src/pages/components/map-related/MapLayers/ComplaintModal.tsx new file mode 100644 index 00000000..d93f94ba --- /dev/null +++ b/src/pages/components/map-related/MapLayers/ComplaintModal.tsx @@ -0,0 +1,194 @@ +import { useState, ChangeEvent, useEffect } from 'react' +import { + Box, + Button, + FormControl, + InputLabel, + MenuItem, + Modal, + Select, + TextField, + SelectChangeEvent, + CircularProgress, +} from '@mui/material' +import { useTranslation } from 'react-i18next' +import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client' +import { Point } from 'src/pages/timeBasedMap' +import { getSiriRideWithRelated } from 'src/api/siriService' + +interface ComplaintModalProps { + modalOpen: boolean + setModalOpen: (open: boolean) => void + position: Point +} + +const ComplaintModal = ({ modalOpen, setModalOpen, position }: ComplaintModalProps) => { + const { t, i18n } = useTranslation() + const [siriRide, setSiriRide] = useState() + const [isLoading, setIsLoading] = useState(false) + const [complaintData, setComplaintData] = useState({ + firstName: '', + lastName: '', + id: '', + email: '', + phone: '', + complaintType: '', + description: '', + }) + + useEffect(() => { + setIsLoading(true) + getSiriRideWithRelated( + position.point!.siri_route__id.toString(), + position.point!.siri_ride__vehicle_ref.toString(), + position.point!.siri_route__line_ref.toString(), + ) + .then((siriRideRes: SiriRideWithRelatedPydanticModel) => setSiriRide(siriRideRes)) + .finally(() => setIsLoading(false)) + }, [position]) + + const modalStyle = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 400, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, + textAlign: i18n.language === 'he' ? 'left' : 'right', + } as const + + const handleInputChange = (e: ChangeEvent) => { + const { name, value } = e.target + setComplaintData((prevData) => ({ ...prevData, [name]: value })) + } + + const handleSelectChange = (e: SelectChangeEvent) => { + const { name, value } = e.target + setComplaintData((prevData) => ({ ...prevData, [name]: value }) as const) + } + const handleSubmit = () => { + const complaintPayload = { + userData: complaintData, + databusData: { + operator: siriRide?.gtfsRideGtfsRouteId, + ...position, + }, + } + console.log(complaintPayload) + // Handle the form submission, e.g., send it to an API + setModalOpen(false) + } + + return ( +
+ {isLoading || !siriRide ? ( +
+ {t('loading_routes')} + +
+ ) : ( + setModalOpen(false)} + aria-labelledby="modal-modal-title" + aria-describedby="modal-modal-description"> + +

{t('complaint')}

+
+ + + + + + + {t('complaint_type')} + + + + + + +
+ + )} +
+ ) +} + +export default ComplaintModal