ruihildt/dijkstra-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve styling

Browse Source
This commit is contained in:
rui hildt 2020-02-10 03:09:47 +01:00
parent 6ce1f04147
commit e95bb21532
3 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.js
View File

@ -1,22 +1,12 @@
import React from 'react';
import { Layout } from 'antd';
import HomeView from './components/HomeView';
import 'antd/dist/antd.css';
import styled from 'styled-components';
function App() {
return (
<MainSection>
<h1>Dijkstra</h1>
<p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
<>
<HomeView/>
</MainSection>
</>
);
}
export default App;
const MainSection = styled.main`
max-width: 800px;
margin: 0 auto;
`

BIN
src/assets/arrow-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

97
src/components/HomeView.jsx
View File

@ -1,13 +1,16 @@
import React, { useState ,useEffect } from "react";
import React, { useState ,useEffect } from 'react';
import { fetchRoads, fetchCities, getShortestPath } from './requests';
import { Select, Button, Icon } from 'antd';
import Graph from "react-graph-vis";
import Graph from 'react-graph-vis';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import arrow from '../assets/arrow-right.png';
const { Option } = Select;
function HomeView() {
const [startingPoint, setStartingPoint] = useState();
const [destination, setDestination] = useState();
const [startingPoint, setStartingPoint] = useState(1);
const [destination, setDestination] = useState(9);
const [errorSelect, setError] = useState({ message: '', flag: false });
const [shortestPath, setShortestPath] = useState();
@ -33,7 +36,7 @@ function HomeView() {
));
let edges = roads.map(edge => (
{ from: edge.start_city_id, to: edge.end_city_id, length: edge.distance }
{ from: edge.start_city_id, to: edge.end_city_id, length: edge.distance * 2 }
))
setGraph({nodes, edges})
@ -69,6 +72,7 @@ function HomeView() {
function handleSubmit() {
if (startingPoint === destination) {
setError({ message: 'Please select a start and a destination', flag: true});
return
} else
if (startingPoint && destination) {
@ -117,14 +121,16 @@ function HomeView() {
// setGraph({...graph, edges: updatedEdges});
return(
<main>
<section>
<h2>Select Starting Point</h2>
<Main>
<h1>Dijkstra</h1>
<p>Find the shortest path between different cities in Belgium with Dijkstra algorithm.</p>
<Section>
<h2>Starting Point</h2>
<div>
<Select defaultValue="Belgium" disabled>
</Select>
<StyledSelect defaultValue="Belgium" disabled>
</StyledSelect>
<Select
defaultValue="Choose a city"
defaultValue="Select a city"
onChange={handleStart}
style={{ width: 139 }}
>
@ -133,14 +139,14 @@ function HomeView() {
))}
</Select>
</div>
</section>
<section>
<h2>Select Destination</h2>
</Section>
<Section>
<h2>Destination</h2>
<div>
<Select defaultValue="Belgium" disabled>
</Select>
<StyledSelect defaultValue="Belgium" disabled>
</StyledSelect>
<Select
defaultValue="Choose a city"
defaultValue="Select a city"
onChange={handleDestination}
style={{ width: 139 }}
>
@ -149,8 +155,8 @@ function HomeView() {
))}
</Select>
</div>
</section>
<section>
</Section>
<Section>
<Button
type="primary"
onClick={handleSubmit}
@ -161,17 +167,17 @@ function HomeView() {
{errorSelect.flag &&
<p>{errorSelect.message}</p>
}
</section>
</Section>
{
shortestPath &&
<section>
<Section>
<h2>Shortest path from {startingPoint.name} to {destination.name} ({shortestPath.distance}km)</h2>
<div>{shortestPath.path.map(city => (
<p key={city.id}><Icon type="right" /><span>{city.name}</span></p>
<StyledP>{shortestPath.path.map(city => (
<StyledSpan key={city.id} class="cityPath">{city.name}</StyledSpan>
))}
</div>
</StyledP>
</section>
</Section>
}
{ graph.nodes.length > 0 &&
@ -184,8 +190,47 @@ function HomeView() {
}}
/>
}
</main>
</Main>
);
}
export default HomeView
const Main = styled.main`
padding-top: 20px;
max-width: 800px;
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;
}
}
`