An app using Dijkstra algorithm to find the shortest path between different cities. https://dijkstra.ruihildt.xyz
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

294 lines
6.5 KiB

import React, { useState, useEffect } from 'react';
import { Layout, Select, Button } from 'antd';
import styled from 'styled-components';
import { fetchRoads, fetchCities, getShortestPath } from '../utils/requests';
import Map from './Map';
import 'antd/dist/antd.css';
import arrow from '../assets/arrow-right.png';
const { Header, Content } = Layout;
const { Option } = Select;
let highlightInitial = {
bruges: '#00856E',
ghent: '#00856E',
antwerp: '#00856E',
mechelen: '#00856E',
tournai: '#00856E',
brussels: '#00856E',
mons: '#00856E',
namur: '#00856E',
liege: '#00856E',
arlon: '#00856E',
};
function HomeView() {
const [startingPoint, setStartingPoint] = useState(1);
const [destination, setDestination] = useState(9);
const [errorSelect, setError] = useState({ message: '', flag: false });
const [shortestPath, setShortestPath] = useState();
const [cities, setCities] = useState([]);
const [highlighted, setHighlighted] = useState(highlightInitial);
useEffect(() => {
fetchCities()
.then((data) => setCities(data))
.catch((error) => console.log(error));
}, []);
const [roads, setRoads] = useState([]);
useEffect(() => {
fetchRoads()
.then((data) => setRoads(data))
.catch((error) => console.log(error));
}, []);
const [graph, setGraph] = useState({ nodes: [], edges: [] });
useEffect(() => {
let nodes = cities.map((node) => ({
id: node.id,
label: node.name,
title: node.name,
}));
let edges = roads.map((edge) => ({
from: edge.start_city_id,
to: edge.end_city_id,
length: edge.distance * 2,
}));
setGraph({ nodes, edges });
}, [cities, roads, shortestPath]);
function handleStart(city_id) {
// eslint-disable-next-line
let [startingPoint] = cities.filter((city) => city.id == city_id);
setStartingPoint(startingPoint);
// Check if start and destination are the same
if (startingPoint === destination) {
setError({
message: 'The start and destination must be different.',
flag: true,
});
return;
}
// Reset the error message and shown path
setHighlighted(highlightInitial);
setShortestPath();
setError({ flag: false });
}
function handleDestination(city_id) {
// eslint-disable-next-line
let [destination] = cities.filter((city) => city.id == city_id);
setDestination(destination);
// Check if start and destination are the same
if (startingPoint === destination) {
setError({
message: 'The start and destination must be different.',
flag: true,
});
return;
}
// Reset the error message and shown path
setHighlighted(highlightInitial);
setShortestPath();
setError({ flag: false });
}
function handleSubmit() {
if (startingPoint === destination) {
setError({
message: 'Please select a start and a destination',
flag: true,
});
} else if (startingPoint && destination) {
getShortestPath(startingPoint.id, destination.id)
.then((data) => {
setShortestPath(data);
// Add cities to highlight
let updatedgHighlighted = {};
data.path.forEach((city) => {
updatedgHighlighted[city.name] = '#E63318';
});
setHighlighted(updatedgHighlighted);
})
.catch((error) => console.log(error));
setError({ flag: false });
} else {
setError({
message: 'Please select a start and a destination',
flag: true,
});
}
}
return (
<>
<Header style={{ backgroundColor: '#ededed' }}>
<div style={{ margin: '0 auto', maxWidth: '800px' }}>
<InlineH1>Dijkstra | </InlineH1>
<InlineP>
Find the shortest path between different cities
</InlineP>
<InlineH1> | </InlineH1>
<InlineP>
GIT{' '}
<a href='https://git.ruihildt.xyz/ruihildt/dijkstra-backend'>
backend
</a>{' '}
&{' '}
<a href='https://git.ruihildt.xyz/ruihildt/dijkstra-frontend'>
frontend
</a>{' '}
</InlineP>
</div>
</Header>
<Content>
<Main
style={{
display: 'flex',
flexFlow: 'row wrap',
justifyContent: 'space-between',
}}
>
<div style={{ margin: '150px 20px' }}>
<Section>
<h2>Starting Point</h2>
<div>
<StyledSelect
defaultValue='Belgium'
disabled
></StyledSelect>
<Select
defaultValue='Select a city'
onChange={handleStart}
style={{ width: 139 }}
>
{cities.map((city) => (
<Option key={city.id}>
{city.name}
</Option>
))}
</Select>
</div>
</Section>
<Section>
<h2>Destination</h2>
<div>
<StyledSelect
defaultValue='Belgium'
disabled
></StyledSelect>
<Select
defaultValue='Select a city'
onChange={handleDestination}
style={{ width: 139 }}
>
{cities.map((city) => (
<Option key={city.id}>
{city.name}
</Option>
))}
</Select>
</div>
</Section>
<Section>
<Button type='primary' onClick={handleSubmit}>
Get shortest path between the cities
</Button>
{errorSelect.flag && <p>{errorSelect.message}</p>}
</Section>
</div>
<div>
{graph.nodes.length > 0 && (
<div>
<div style={{ width: '600px' }}>
<Map highlighted={highlighted} />
</div>
</div>
)}
{shortestPath && (
<Section>
<h2>
Shortest path from {startingPoint.name} to{' '}
{destination.name} ({shortestPath.distance}
km)
</h2>
<StyledP>
{shortestPath.path.map((city) => (
<StyledSpan
key={city.id}
className='cityPath'
>
{city.name}
</StyledSpan>
))}
</StyledP>
</Section>
)}
</div>
</Main>
</Content>
</>
);
}
export default HomeView;
// STYLED COMPONENTS
const InlineP = styled.p`
display: inline;
`;
const InlineH1 = styled.h1`
display: inline;
`;
const Main = styled.main`
padding-top: 20px;
max-width: 1000px;
margin: 0 auto;
`;
const Section = styled.section`
margin: 20px 0;
`;
const StyledSelect = styled(Select)`
margin-right: 10px;
`;
const StyledSpan = styled.span`
::after {
content: '';
background-image: url(${arrow});
background-size: 13px 17px;
display: inline-block;
width: 13px;
height: 17px;
margin-right: 10px;
margin-left: 10px;
padding-top: 10px;
bottom: -10px;
}
font-size: 1.5rem;
color: #40a9ff;
`;
const StyledP = styled.p`
span:last-child {
::after {
background-image: none;
}
}
`;