Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

34-the table has been improved #56

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+86 −47
Draft

34-the table has been improved #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f29ce54
34-the table has been improved
May 28, 2024
ec96e74
the table has been updated
joeljnq May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 74 additions & 41 deletions src/components/DirectionsTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@ import IconButton from '@mui/material/IconButton';
import EditIcon from '@mui/icons-material/Edit';
import ModalEditPoint from './ModalEditPoint';
import Box from '@mui/material/Box';

import StraightenIcon from '@mui/icons-material/Straighten';
import DirectionsRunIcon from '@mui/icons-material/DirectionsRun';
import DirectionsBikeIcon from '@mui/icons-material/DirectionsBike';
import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import {grey, red} from '@mui/material/colors';
import {lighten} from '@mui/material';

import {useTranslation} from 'react-i18next';

const DirectionsTable = ({calculatedRoutes, allPoints, onChangeHover, onChangeIdHoverPoint,onChangeNearestRedPoint, onChangePoints}) => {
const DirectionsTable = ({calculatedRoutes, allPoints, onChangeHover, onChangeIdHoverPoint,onChangeNearestRedPoint, onChangePoints, typeTransport}) => {

const{t} = useTranslation();
const [openModal,setOpenModal] = useState(null);
Expand Down Expand Up @@ -59,71 +64,98 @@ const DirectionsTable = ({calculatedRoutes, allPoints, onChangeHover, onChangeId
setOpenModal(false);
};
const rowNames = allPoints.red ? allPoints.red.map(point => point.name) : [];
const transportIcons = {
'foot-walking': <DirectionsRunIcon sx={{color:grey[700]}}/>,
'cycling-regular': <DirectionsBikeIcon sx={{color:grey[700]}}/>,
'driving-car': <DirectionsCarIcon sx={{color:grey[700]}}/>,
'driving-hgv': <DirectionsBusIcon sx={{color:grey[700]}}/>
};
return <>
{
calculatedRoutes && calculatedRoutes.length > 0 && allPoints.blue.length && allPoints.red.length &&
<Table sx={{minWidth: 300}} aria-label="simple table">
{calculatedRoutes && calculatedRoutes.length > 0 && allPoints.blue.length && allPoints.red.length && (
<Table sx={{ minWidth: 300 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell key={'empty'} align="right"></TableCell>
{
bluePoints.map((bluePoint, index) => <TableCell key={index} align="right">
<Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
<IconButton onClick={()=>handleClickIcon(index,'blue')} size='small'>
<EditIcon sx={{color: 'primary.main'}} fontSize='small'/>
<TableCell key="empty" align="right"></TableCell>
{bluePoints.map((bluePoint, index) => (
<TableCell key={index} align="right">
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
<IconButton onClick={() => handleClickIcon(index, 'blue')} size="small">
<EditIcon sx={{ color: 'primary.main' }} fontSize="small" />
</IconButton>
<Typography sx={{fontWeight: 'bold', color: 'primary.main'}}>
<Typography sx={{ fontWeight: 'bold', color: 'primary.main', wordWrap: 'break-word' , whiteSpace:'normal', maxWidth:200}}>
{bluePoint.name?.toUpperCase()}
</Typography>
</Box>
</TableCell>)
}
<TableCell key={'average'} align="right">{t('averageTime')}</TableCell>
</TableCell>
))}
<TableCell key="average" align="right">
<span style={{display:'flex', flexWrap:'wrap', alignContent:'center'}}>
{t('averageTime')}
{transportIcons[typeTransport]}

</span>

</TableCell>
</TableRow>
</TableHead>
<TableBody>
{calculatedRoutes.map((row, index) => (
<TableRow onMouseEnter={()=>handleCellHover(allPoints.red[index].id)} onMouseLeave={()=> handleCellLeave()}
<TableRow
key={index}
sx={{'&:hover': index === shortestRouteIndex ? {bgcolor: lighten(red[50],0.75)} : {bgcolor: 'grey.200'} , border: index === shortestRouteIndex ? theme => `2px solid ${theme.palette.secondary.dark}`: undefined}}
onMouseEnter={() => handleCellHover(allPoints.red[index].id)}
onMouseLeave={handleCellLeave}
sx={{
'&:hover': index === shortestRouteIndex
? { bgcolor: lighten(red[50], 0.75) }
: { bgcolor: 'grey.200' },
border: index === shortestRouteIndex
? theme => `2px solid ${theme.palette.secondary.dark}`
: undefined,
}}
>
<TableCell component="th" scope="row">
<Stack>
<Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
<IconButton onClick={()=>handleClickIcon(index,'red')} size='small'>
<EditIcon sx= {{ color: index=== shortestRouteIndex ? theme => theme.palette.secondary.dark : theme => theme.palette.secondary.main}} fontSize='small'/>
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<IconButton onClick={() => handleClickIcon(index, 'red')} size="small">
<EditIcon sx={{ color: index === shortestRouteIndex ? 'secondary.dark' : 'secondary.main' }} fontSize="small" />
</IconButton>
<Typography sx={{fontWeight: 'bold', color: index === shortestRouteIndex ? 'secondary.dark': 'secondary.main'}}>
<Typography sx={{ fontWeight: 'bold', color: index === shortestRouteIndex ? 'secondary.dark' : 'secondary.main' , wordBreak: 'break-word',
whiteSpace: 'normal',overflowWrap: 'break-word',
maxWidth: 200}}>
{rowNames[index]?.toUpperCase()}
</Typography>
</Box>
<Typography variant='body2' sx={{color: index === shortestRouteIndex ? 'secondary.dark': grey[500], fontStyle: 'italic'}}>{row.name}</Typography>
<Typography variant="body2" sx={{ color: index === shortestRouteIndex ? 'secondary.dark' : grey[500], fontStyle: 'italic' }}>
{row.name}
</Typography>
</Stack>
</TableCell>
{
row.data.map((data) => (
<TableCell key={data} align="right">{
data.map((value, index ) => (
<span key={value}>{value + (index === 0 ? 'km' : 'min')}<br/></span>
))
}</TableCell>
))
}
{row.data.map((d, i) => (
<TableCell key={i} align="center">
{d.map((x, i) => (
<span key={x} style={{ display: 'flex', alignItems: 'center',margin:'auto',width:100}}>
<span style={{ marginRight: 10, display: 'flex', alignItems: 'center',}}>
{i === 0 && <StraightenIcon sx={{color:grey[700]}}/>}
{i === 1 && <AccessTimeIcon sx={{color:grey[700]}}/>}
</span>
{x + (i === 0 ? 'km' : 'min')}
</span>
))}
</TableCell>
))}
<TableCell component="th" scope="row" align="center">
{row.data.avg} min
<span style={{display:'flex', alignItems:'center'}}>
{row.data.avg} min <AccessTimeIcon sx={{ fontSize: 30, marginLeft:1, color:grey[700] }} />
</span>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
}
{ openModal && <ModalEditPoint
allPoints={allPoints}
onChangePoints={onChangePoints}
indexPointSelect={indexSelectPoint}
onClose={handleCloseModal}
mode={modeEditPoint} />
}
)}
{openModal && (
<ModalEditPoint allPoints={allPoints} onChangePoints={onChangePoints} indexPointSelect={indexSelectPoint} onClose={handleCloseModal} mode={modeEditPoint} />
)}
</>;
};

Expand All @@ -146,7 +178,8 @@ DirectionsTable.propTypes = {
onChangeNearestRedPoint: PropTypes.func.isRequired,
onChangeHover: PropTypes.func.isRequired,
onChangeIdHoverPoint: PropTypes.func.isRequired,
onChangePoints: PropTypes.func.isRequired
onChangePoints: PropTypes.func.isRequired,
typeTransport: PropTypes.string.isRequired
};

export default DirectionsTable;
8 changes: 5 additions & 3 deletions src/views/Map/MainContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import ModalInfo from '../../components/ModalInfo';
import ModalAddPoint from '../../components/ModalAddPoint';
import { primaryColor, secondaryColor } from '../../theme';
import { v4 as uuid } from 'uuid';
const MainContent = ({mapStyle, mode, routes, calculatedRoutes, onChangePoints, allPoints, onChangeHover, hover, idHoverPoint, onChangeIdHoverPoint }) => {
const MainContent = ({mapStyle, mode, routes, calculatedRoutes, onChangePoints, allPoints, onChangeHover, hover, idHoverPoint, onChangeIdHoverPoint, typeTransport }) => {
const [viewport, setViewport] = useState(INITIAL_VIEWPORT);
const [openModal, setOpenModal] = useState(false);
const [nearestRedPoint,setNearestRedPoint] = useState(null);
Expand Down Expand Up @@ -354,7 +354,8 @@ const MainContent = ({mapStyle, mode, routes, calculatedRoutes, onChangePoints,
right: 18,
background: 'white'
}}>
<DirectionsTable calculatedRoutes={calculatedRoutes} allPoints={allPoints} onChangeNearestRedPoint={setNearestRedPoint} onChangeHover={onChangeHover} onChangeIdHoverPoint={onChangeIdHoverPoint} onChangePoints={onChangePoints}/>
<DirectionsTable calculatedRoutes={calculatedRoutes} allPoints={allPoints} onChangeNearestRedPoint={setNearestRedPoint}
onChangeHover={onChangeHover} onChangeIdHoverPoint={onChangeIdHoverPoint} onChangePoints={onChangePoints}typeTransport={typeTransport} />
</div>
</>;
};
Expand Down Expand Up @@ -386,7 +387,8 @@ MainContent.propTypes = {
PropTypes.string,
PropTypes.oneOf([null])
]),
onChangeIdHoverPoint: PropTypes.func.isRequired
onChangeIdHoverPoint: PropTypes.func.isRequired,
typeTransport: PropTypes.string.isRequired
};

export default MainContent;
4 changes: 3 additions & 1 deletion src/views/Map/MapView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ const Map = () => {
const [hover, setHover] = useState(false);
const [idHoverPoint,setIdHoverPoint] = useState(null);
const [allPoints,setAllPoints] = useState(localStorage.getItem('ThePerfectSpot') ? JSON.parse(localStorage.getItem('ThePerfectSpot')):{red: [], blue: []});

const [typeTransport, setTypeTransport] = useState('foot-walking');
const sidePanelContent = <SidePanelContent
onChangeModePoints={setMode}
onRoutesChange={setRoutes}
onChangeCalculatedRoutes={setCalculatedRoutes}
allPoints={allPoints}
onChangePoints={setAllPoints}
onChangeTypeTransport = {setTypeTransport}
/>;

const mainContent = <MainContent
Expand All @@ -35,6 +36,7 @@ const Map = () => {
onChangeHover={setHover}
idHoverPoint={idHoverPoint}
onChangeIdHoverPoint={setIdHoverPoint}
typeTransport={typeTransport}
/>;

return <Layout
Expand Down
6 changes: 4 additions & 2 deletions src/views/Map/SidePanelContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const ScrollableContent = styled(Box)({
padding: '8px',
});

const SidePanelContent = ({ onChangeModePoints, onRoutesChange, onChangeCalculatedRoutes, allPoints, onChangePoints}) => {
const SidePanelContent = ({ onChangeModePoints, onRoutesChange, onChangeCalculatedRoutes, allPoints, onChangePoints, onChangeTypeTransport}) => {
const requestError = http.getError();
const {t} = useTranslation();
const transportOptions = [
Expand Down Expand Up @@ -98,6 +98,7 @@ const SidePanelContent = ({ onChangeModePoints, onRoutesChange, onChangeCalculat
};

const handleTransportationType = (transportationType) => {
onChangeTypeTransport(transportationType);
setTransportation(transportationType);
if (allPoints.red?.length && allPoints.blue?.length) {
calculateDirectionsTable(transportationType);
Expand Down Expand Up @@ -155,7 +156,8 @@ SidePanelContent.propTypes = {
name: PropTypes.string
})).isRequired,
}).isRequired,
onChangePoints: PropTypes.func.isRequired
onChangePoints: PropTypes.func.isRequired,
onChangeTypeTransport: PropTypes.func.isRequired
};

export default SidePanelContent;