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

Replace graph with an svg path

Browse Source
This commit is contained in:
rui hildt 2020-10-07 23:27:30 +02:00
parent 60bbf7a890
commit 7bdaf1f619
7 changed files with 159 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored
View File

@ -1,23 +1 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. node_modules
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

7
package.json
View File

@ -3,17 +3,18 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@ant-design/icons": "^4.2.2",
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"antd": "^3.26.9", "antd": "^4.6.6",
"axios": "^0.19.2", "axios": "^0.19.2",
"react": "^16.12.0", "react": "^16.13.1",
"react-dom": "^16.12.0", "react-dom": "^16.12.0",
"react-graph-vis": "^1.0.5",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-scripts": "^3.4.3", "react-scripts": "^3.4.3",
"react-sigma": "^1.2.34", "react-sigma": "^1.2.34",
"react-svgmt": "^1.1.11",
"styled-components": "^5.0.1" "styled-components": "^5.0.1"
}, },
"scripts": { "scripts": {

61
public/belgium-map.svg Normal file
View File

@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -22 1136 988">
<path fill="none" d="M0-22h1136v988H0z"/>
<g fill="none" stroke="#646464" stroke-linejoin="round" stroke-miterlimit="3.9" stroke-width="4.3">
<path d="M84 247l1-1 8-4 2-1 3-2 1-1 7-4h1l7-4 7-3 6-4h0l4-3 8-4 7-5 4-2 11-7 9-7h0l1-1 1-2 2 1h0l1 1 1 1 1 1v-2l-2-4 3-1 3-1 5-4 5-3 14-8 7-7 9-4 3-1 4-2 8-3 2-1 1-4 2-2h1l-2 5h1l2-3h2v3l2-1 2-2h4l3-1 5-3 10-3 7-2 2-2h2m211 8l-12 14-18 18-9 4h0l-3 2-3 2h-6 0l-8 3-2 3-4 4-6 2h-2l-2-2h-2l-2 4-4 1h-3l-1-2 2-2v-2l-1-2-2 1-2 3-1 2-5 1-9-1h-1l-1-1h0l-2-1v-12l1-3-1-2-3-1-2 1-3-3h0l-4-1h-6 0l-6-3-8-1-1-1h-3l-2-1-7-5-2-1h-1 0-1v5l-1 1-1-1-3-2h0l-3 2-3 1-4-2h0-1 0v1l2 16h-3l-4 1-2 1h-11 0l-2-1h-1l-2-4-2-1-4-4-5-5v-1l-4-4v-2h2v-1l-1-3-1-2 5-5 1-3-1-2-2-4-2-7m211 8l2-2-1-2-4-3v-2h5"/>
<path d="M495 139h7l15-1 1 1 2 4 3 2h4l2 1 1-1h5l4-2v-4l-8-11-3-6v-6l-2-3 11-6 4-2 3-1h4l2-4h1l1 1 13-2 1 3-1 5 2 8 2 5 1-1 4-2 3 1 8 2 5 1h3l7-1 4-4 1-2 2-3 1-3 3-5v-2l1-2h1l2-2 1-1 3-4 5-2h0l1 2 7 2 2 4 2 1v1l-1 3v4l-3 1v4l2 4v1h1v4l-11-4-3 1 1 6 3 1 4 1 12-1h3l6-1 2 1h1l5 7 1-1 2-1 15-15 4-3 1-3v-1l-1-5 4-4 2-2h1l1 5 1 1v1h7l2 6 2 11-5 12 5 5 1 1 7 9h0l2 9v5h7l10-2 1 1 2 1 5 4-4 13h0l2 3 1 1h2l3-1 16-1 4 1 2-5 12 2v1l5 1 2-5h4l6-3v-1l4-5 12 9 5 4v8l1 7 3 3 2 1h0l3 3 3 4 15 3 1 2h1l5 1h3l4-1 6-1 10 4v1l2 2-1 1h2v4l2-1h3l1 1h2l3 2v3h0l-2 3-1 2-3 1h-2l-1 3h0v3h0l5 2h0v3l-3 1h0-4l-1 1h0v2l1 3-1 2v3l-1 2-1 1-2-2h0l-2 1h0v2l-1 3-3 4v2l4 2-1 6-1 3-1 2-1 3-6 5v1l-3 5 1 1v1l5-2h1l1 3h0l-1 1-1 4-4 4-2 7-2 1-3 1h-2v2l-1 2v1l-1 1v1l-1 1-1 1-1 1h0-2 0l-3 2-1 1v5l1 8 1 1 4 3 4 6 1 1 1 1h0v1l-1 3 2 5v2l-4 7h0l2 1h1l2-2v1h1l2-1 1-1h0l1 2h3l1-3 2-3 4-3h1l1 1 2 5 2-1 4 5h2l7-4 1 1 1 3 2-2 1-1h2l2-2 1 2v2l1 2 1 1h1v-1h5l2-1h2l2-1 3-1h3l1 3h12l4 3 1 2-2 5v1l1 2h2l2-1 1-1 2 1h10l2 4 1 3 8 10 1 2h1l2 4 1 2 2 1h1l-1 2-3 3 1 2 2 2-1 1 1 1 2-1 2-1h4l4 2h1l2 1 6-1v3l-2 3-2 2-1 3v3l-2 1-2-2h-1l-1 3-4 3-2 2-6 5 1 1v4l1 1 1 1 2-1v4l-1 1 3 3 1 3 1 1h1l2 5 2 1 3-3h3l1 1 2-1h3l2 2h5l5 1 3 3v3l-1 2v3l1 1 1 1 6 4 1 5-3 4v7l-5 8-1 3 5 4 1 1 1 2 7 6 1 7-1 1h0-3l-7 4-2-2-2-1-2-1h-2l-1 1h-2l-1 2-1 1-1 1-1 4-2 2v3l2 3-5 4h-4l-2 1-5 1-2 1-3 2h-1v3l-2 2-1 1h-4v2h0v2l-1 1h-1l1 2 2 1 1 1 1 4-1 3 2 4-1 2-4-1-2 1-1 1-2-1h0l-2 4 1 4h0l-2 2h3l1 4-1 2h-2l-1 1v2l-4-2-2-3 2-4-2-2 2-2-3-2h0l-7-1v3l-1 2-2 1h-2l-2-2h0l-4-1-1-2-1-4v-1h-2 0l-6 3h-5l-3 2 1 4v1l-1 2-1 7-10 4-3 1-2 3v3l-1 3-1 2 1 3-1 2-1 1h-3l-3 3-1 2 1 1 2 4 1 1-3 4v1l-2 4-6 3-1 1v4l1 1h0l1 2h0l2 2-1 3v1l-3 1-2 1v2l-1 2-3-1-3 1-1 1-2 4 1 3-1 3-2 1v5l-1 1-3 2-3 4 4 3h3l2 2 3 3h0v2h-1l-1 1h0-1l-2-1h-1 0l-1 1 1 4-2 1v3l-1 2-2 2 1 1 2 2-1 5 1 1 1 8 4-1h2l2-1 6 14 2 3 1 1 1 1v8l4 2 3-2h2l1 1 4 6-5 5-1 4-1 3h0l10 4 2 1v1l-1 2v6l-1 2h-3 0v2l-1 1-2 3v5l-5 3-1 1 1 3h5l-2 3 2 2-2 2-5 4h-1l-1 1-3 3-2 1h-1l-1-1-1-1h-3l-1-2-1-1-3-1-3 1-1 2v2l-1 2v1l-2 1-1-1-1-1h-2v1h-5l-7-2-5-1h-1l-4 2-1 2-2 2-1 2 1 4-1 2-1 2h-2l-2-4-1-1-5-3h-5l-3 5-4 1-3 2-6-1-2 3v4l-3-3v-3l-7-4 2-1h2l2-2 2-2v-2l-2-3-4-2 3-6-4-1-2-7v-3l-10-8v-1l-3-1-2-1h-1l-3-3-2 1v3l-5 1-2 2v1l-2-6 1-3 2-4 3-3-3-5-2-1-1-2-5-4-4-3-3-1-3 3-5-1-2 1-1-1-1-2h-2l-1 1-4-1h-4v-3h0v-3l-1-3h-2l-1 3h-1l-1-2-3 1-1-2 1-4-7-12-2-1-3 1h-2 0l-1-3-1-1-3 1-2-1-4-2-3-2-3-5v-1l-2-1-3-1h-2l-1 1-1-1h-1l-3 1v2l-6 2-3 1-3-1-4-2h-1l-1 2-3-1-1-1 1-1 2-6 2-2v-1l-1-5v-3l-3-1-1-6v-1l1-1 1-1 1-2 1-3v-2l3-4 1-2-2-6v-3l-3-2-2-2-2-4-2-2h-2l-7-1-1-1-2-2 1-6 1-2h2l2-4 1-2h0l-1-3 1-2-1-2 1-5 5-4v-2l-4-3 1-1-1-4 4-1v-5l1-1-1-2 1-3h4l2 3h1v-3l-1-1v-9l3-2 1-1 2-2-3-3v-2l-1-1-5 1-5-2-1-2-2-2-2 1v2l-2 3h-2l-1 1-6 4-1 1-2 3-1 3-1 3-2 1-2 1-7 3-1 2-2 3-1 2v2l-2 3v2l5 1v2l-1 7-2 7-1 5-1 2-5 1-1 1h-1l-1 1h-5l-2 1-7 1-3 1-2 4-3 1h-3l-2 1-1 1-1 3-4 3-6 1h-1l-6 2-3 1-1-2h-2l-7-2-2 1-2-1-2-2h-7l-2-1-2-3h-2l-4-2h-1l-3 1-2 1h-8l-4 2h-6l-2 1-1-1v-4l-2-1h-2v-2h-2l-4 1-1-1-1-1 3-5 1-2-2-2h-2l-1-3v-6l1-1 3-6 1-1 3-1 3 1 1-1 2-2 7-4 1-2v-2l-2-3-3-3-2-2v-1l1-1-1-1-1-1 1-3-1-3h0l1-3h-2l-3-1h-4l-3 2-2 1h-2l-2-2 2-4v-3l4-4v-3l-1-1v-1l1-3 2-2v-3l-2-6 1-1 3-1 2-3v-2l8-6 1-2v-3l-1-3-1-2-2-1h-3l-2-1-1-3-2-1-1 1-2 2v2l4 3v2l-4 2h-3l-1-2v-3l-1-1h-2v-7l-1-3-1-1-1-1-3-3-2-1-2 2-2-5-2-2h-2l-1-4-2-1-2-1-1-1-1-3-1-1-1 1-1 2h-3l-2 2-2 1-2-1-3 1-1-1h-1l-2 1-4 3-7 2-4-1v-2l-1-1-2 1-2-1-5-5-6 1v2h-1l-2-2v-1l-3 1-6-2-3 3-2-1-2 1-2 3-2 5 1 4-1 2-4-3-1 1 1 3h-1l-3-1-2-2v-2l-2-3-1-4-2-3v-4l-1-1-1-2 1-4 3-6v-7l-1-4v-4l-1-2-2-1v-5l-1-2-2-1-3-3v-1l-1-2-5-6-1-1-4 3h-1l-3-2-2-1-3 1h-4l-5 2-4 1-1-4 1-2 1-1 4-5-2-2-4-2-6-1-3 5-1 4h-5l-1 1h-1l-2 1h-5l-2 3-1 1h-1l-5-5-5-1-10-6-2-2-2-3v-5l1-2-1-1 1-1-1-3v-1l1-2-2-4 1-4-1-1v-5l-3-3-2-2-1-4-1-2 1-2-1-2-1-3v-3l1-1 5-3 1-1-3-4v-3l-3-5h-3l-4-1-2-2-2-2 1-2-1-2-3-2-1-2v-2l-1-1-2-3-4-7v-3l-3-1h-2l-2 1h-3l-6 5h-2l-4-1-1-1-2 1h0l-5 2h0-4l-1 1-2 2-3 1-1 2-2 2h-6l-3 3 1 3-1 2h-2v2l-1 4v3l-2 1h-2l-1 1h-3l-1-2h-4l-1-1-2-2-1-3-2-2-5 3h-2l-5-3-2-4v-3l-1-3-5-2 1-1-1-4-3-3-4-3-1-2-1-2v-4l-1-2h0l-1-1h-8l-1-2-1-1h-1l-1-1-2 3-1 1h-5l-1-6-2-3-1-4h-1l-3-1 3-5-1-4 1-2-1-2 1-5-2-3v-3h-3l-1-1 2-2 5-6v-2l3-3-2-5-2-2v-1l-1-4v-2l-1-1-5-2-1-1h-1l-2-5 1-4-2-14-1-3h0l-1-2-1-2v-2l-1-3"/>
<path d="M671 108l-7 10-8-2 2-10z"/>
</g>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M612 457l201-49" class="liege-namur namur-liege"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M523 348l290 60" class="liege-brussels brussels-liege"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M424 489l99-141" class="brussels-mons mons-brussels"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M851 774L614 459" class="namur-arlon arlon-namur"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M523 348l16-46" class="mechelen-brussels brussels-mechelen"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M539 302l-23-128" class="antwerp-mechelen mechelen-antwerp"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M363 233l153-59" class="ghent-antwerp antwerp-ghent"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M254 201l108 33" class="bruges-ghent ghent-bruges"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M360 236l-64 195" class="ghent-tournai tournai-ghent"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M296 431l128 58" class="mons-tournai tournai-mons"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M424 485l188-28" class="mons-namur namur-mons"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M296 431l227-83" class="tournai-brussels brussels-tournai"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M364 239l157 102" class="ghent-brussels brussels-ghent"/>
<ellipse cx="523.2" cy="344.9" fill="#00aa90" class="brussels" rx="12.2" ry="11.9"/>
<ellipse cx="515.7" cy="174.4" fill="#00aa90" class="antwerp" rx="12.2" ry="11.9"/>
<ellipse cx="362.3" cy="235.3" fill="#00aa90" class="ghent" rx="12.2" ry="11.9"/>
<ellipse cx="253.8" cy="199.6" fill="#00aa90" class="bruges" rx="12.2" ry="11.9"/>
<ellipse cx="538.7" cy="300.8" fill="#00aa90" class="mechelen" rx="12.2" ry="11.9"/>
<ellipse cx="423.8" cy="487.3" fill="#00aa90" class="mons" rx="12.2" ry="11.9"/>
<ellipse cx="611.3" cy="457.9" fill="#00aa90" class="namur" rx="12.2" ry="11.9"/>
<ellipse cx="812.6" cy="407.6" fill="#00aa90" class="liege" rx="12.2" ry="11.9"/>
<ellipse cx="294.5" cy="432.1" fill="#00aa90" class="tournai" rx="12.2" ry="11.9"/>
<ellipse cx="853.4" cy="776" fill="#00aa90" class="arlon" rx="12.2" ry="11.9"/>
<text>
<tspan x="534" y="182" fill="#66baa3" class="antwerp" font-family="sans-serif" font-size="26.7" font-weight="700">ANTWERP</tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-3)" class="liege" font-family="sans-serif" font-size="26.7" transform="translate(283 243)">
<tspan x="547" y="178"><tspan font-weight="700">LIEGE</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-3-7)" class="mechelen" font-family="sans-serif" font-size="26.7" transform="translate(9 125)">
<tspan x="547" y="178"><tspan font-weight="700">MECHELEN</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35)" class="bruges" font-family="sans-serif" font-size="26.7" transform="translate(-394 60)">
<tspan x="547" y="178"><tspan font-weight="700">BRUGES</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9)" class="tournai" font-family="sans-serif" font-size="26.7" transform="translate(-227 264)">
<tspan x="547" y="178"><tspan font-weight="700">TOURNAI</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2)" class="mons" font-family="sans-serif" font-size="26.7" transform="translate(-107 331)">
<tspan x="547" y="178"><tspan font-weight="700">MONS</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0)" class="brussels" font-family="sans-serif" font-size="26.7" transform="translate(-4 169)">
<tspan x="547" y="178"><tspan font-weight="700">BRUSSELS</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0-3)" class="ghent" font-family="sans-serif" font-size="26.7" transform="translate(-160 70)">
<tspan x="547" y="178"><tspan font-weight="700">GHENT</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0-0)" class="namur" font-family="sans-serif" font-size="26.7" transform="translate(95 300)">
<tspan x="547" y="178"><tspan font-weight="700">NAMUR</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0-0-6)" class="arlon" font-family="sans-serif" font-size="26.7" transform="translate(180 593)">
<tspan x="547" y="178"><tspan font-weight="700">ARLON</tspan></tspan>
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

143
src/components/HomeView.jsx
View File

@ -1,22 +1,37 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { fetchRoads, fetchCities, getShortestPath } from './requests'; import { Layout, Select, Button } from 'antd';
import { Layout, Select, Button, Icon } from 'antd';
import Graph from 'react-graph-vis';
import styled from 'styled-components'; import styled from 'styled-components';
import { fetchRoads, fetchCities, getShortestPath } from '../utils/requests';
import Map from './Map';
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import arrow from '../assets/arrow-right.png'; import arrow from '../assets/arrow-right.png';
const { Header, Footer, Content } = Layout; const { Header, Content } = Layout;
const { Option } = Select; const { Option } = Select;
let highlightInitial = {
bruges: '#00aa90',
ghent: '#00aa90',
antwerp: '#00aa90',
mechelen: '#00aa90',
tournai: '#00aa90',
brussels: '#00aa90',
mons: '#00aa90',
namur: '#00aa90',
liege: '#00aa90',
arlon: '#00aa90',
};
function HomeView() { function HomeView() {
const [startingPoint, setStartingPoint] = useState(1); const [startingPoint, setStartingPoint] = useState(1);
const [destination, setDestination] = useState(9); const [destination, setDestination] = useState(9);
const [errorSelect, setError] = useState({ message: '', flag: false }); const [errorSelect, setError] = useState({ message: '', flag: false });
const [shortestPath, setShortestPath] = useState(); const [shortestPath, setShortestPath] = useState();
const [cities, setCities] = useState([]); const [cities, setCities] = useState([]);
const [highlighted, setHighlighted] = useState(highlightInitial);
useEffect(() => { useEffect(() => {
fetchCities() fetchCities()
.then((data) => setCities(data)) .then((data) => setCities(data))
@ -60,7 +75,8 @@ function HomeView() {
}); });
return; return;
} }
// Will reset the error message and shown path // Reset the error message and shown path
setHighlighted(highlightInitial);
setShortestPath(); setShortestPath();
setError({ flag: false }); setError({ flag: false });
} }
@ -77,7 +93,8 @@ function HomeView() {
}); });
return; return;
} }
// Will reset the error message and shown path // Reset the error message and shown path
setHighlighted(highlightInitial);
setShortestPath(); setShortestPath();
setError({ flag: false }); setError({ flag: false });
} }
@ -88,10 +105,19 @@ function HomeView() {
message: 'Please select a start and a destination', message: 'Please select a start and a destination',
flag: true, flag: true,
}); });
return;
} else if (startingPoint && destination) { } else if (startingPoint && destination) {
getShortestPath(startingPoint.id, destination.id) getShortestPath(startingPoint.id, destination.id)
.then((data) => setShortestPath(data)) .then((data) => {
setShortestPath(data);
// Add cities to highlight
let updatedgHighlighted = {};
data.path.forEach((city) => {
updatedgHighlighted[city.name] = '#E83015';
});
setHighlighted(updatedgHighlighted);
})
.catch((error) => console.log(error)); .catch((error) => console.log(error));
setError({ flag: false }); setError({ flag: false });
} else { } else {
@ -102,49 +128,24 @@ function HomeView() {
} }
} }
// Graph visualization settings
const options = {
layout: {
hierarchical: false,
},
edges: {
color: '#000000',
},
height: '500px',
};
const events = {
select: function (event) {
let { nodes, edges } = event;
},
};
// // TODO Find a solution to trigger a re-render of the map
// // Add dashes to shortest path edges
// let path = test.path;
// let pairs = [];
// for (let i = 0; path.length - 1 > i; i++) {
// let obj = { from: path[i], to: path[i+1]}
// pairs.push(obj);
// }
// let updatedEdges = graph.edges.map(edge => {
// if (pairs.includes(edge)){
// edge['dashes'] = true;
// }
// return edge
// })
// console.log(updatedEdges)
// setGraph({...graph, edges: updatedEdges});
return ( return (
<> <>
<Header style={{ backgroundColor: '#ededed' }}> <Header style={{ backgroundColor: '#ededed' }}>
<div style={{ margin: '0 auto', maxWidth: '800px' }}> <div style={{ margin: '0 auto', maxWidth: '800px' }}>
<InlineH1>Dijkstra | </InlineH1> <InlineH1>Dijkstra | </InlineH1>
<InlineP> <InlineP>
Find the shortest path between different cities in Find the shortest path between different cities
Belgium with Dijkstra algorithm </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> </InlineP>
</div> </div>
</Header> </Header>
@ -154,11 +155,11 @@ function HomeView() {
style={{ style={{
display: 'flex', display: 'flex',
flexFlow: 'row wrap', flexFlow: 'row wrap',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center' alignItems: 'center',
}} }}
> >
<div style={{margin: '0 20px'}}> <div style={{ margin: '0 20px' }}>
<Section> <Section>
<h2>Starting Point</h2> <h2>Starting Point</h2>
<div> <div>
@ -202,26 +203,10 @@ function HomeView() {
<Section> <Section>
<Button type='primary' onClick={handleSubmit}> <Button type='primary' onClick={handleSubmit}>
Get shortest path between the cities Get shortest path between the cities
<Icon type='right' />
</Button> </Button>
{errorSelect.flag && <p>{errorSelect.message}</p>} {errorSelect.flag && <p>{errorSelect.message}</p>}
</Section> </Section>
</div>
<div style={{ maxWidth: '660px', minWidth: '400px' }}>
{graph.nodes.length > 0 && (
<Graph
graph={graph}
options={options}
events={events}
getNetwork={(network) => {
// if you want access to vis.js network api you can set the state in a parent component using this property
}}
/>
)}
</div>
<div>
{shortestPath && ( {shortestPath && (
<Section> <Section>
<h2> <h2>
@ -233,7 +218,7 @@ function HomeView() {
{shortestPath.path.map((city) => ( {shortestPath.path.map((city) => (
<StyledSpan <StyledSpan
key={city.id} key={city.id}
class='cityPath' className='cityPath'
> >
{city.name} {city.name}
</StyledSpan> </StyledSpan>
@ -242,23 +227,16 @@ function HomeView() {
</Section> </Section>
)} )}
</div> </div>
{graph.nodes.length > 0 && (
<div>
<div style={{ width: '500px' }}>
<Map highlighted={highlighted} />
</div>
</div>
)}
</Main> </Main>
</Content> </Content>
<Footer>
<div style={{ margin: '0 auto', maxWidth: '800px' }}>
<p>
Git |{' '}
<a href='https://git.armada.digital/rui/dijkstra-backend'>
backend
</a>{' '}
&{' '}
<a href='https://git.armada.digital/rui/dijkstra-frontend'>
frontend
</a>{' '}
</p>
</div>
</Footer>
</> </>
); );
} }
@ -279,7 +257,6 @@ const Main = styled.main`
padding-top: 20px; padding-top: 20px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
height: calc(100vh - 147px);
`; `;
const Section = styled.section` const Section = styled.section`

31
src/components/Map.jsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { SvgLoader, SvgProxy } from 'react-svgmt';
export default function Map({ highlighted }) {
return (
<div>
<SvgLoader
path='/belgium-map.svg'
style={{
width: '500px',
height: '500px',
}}
>
<SvgProxy
selector='.liege-namur, .namur-liege'
fill={highlighted.LN}
/>
<SvgProxy selector='.ghent' fill={highlighted.ghent} />
<SvgProxy selector='.brussels' fill={highlighted.brussels} />
<SvgProxy selector='.antwerp' fill={highlighted.antwerp} />
<SvgProxy selector='.tournai' fill={highlighted.tournai} />
<SvgProxy selector='.mechelen' fill={highlighted.mechelen} />
<SvgProxy selector='.bruges' fill={highlighted.bruges} />
<SvgProxy selector='.mons' fill={highlighted.mons} />
<SvgProxy selector='.liege' fill={highlighted.liege} />
<SvgProxy selector='.namur' fill={highlighted.namur} />
<SvgProxy selector='.arlon' fill={highlighted.arlon} />
</SvgLoader>
</div>
);
}

2
src/utils/API.js
View File

@ -1,6 +1,6 @@
import axios from "axios"; import axios from "axios";
export default axios.create({ export default axios.create({
baseURL: "https://dijkstra-backend.herokuapp.com/", baseURL: "http://localhost:4000",
responseType: "json" responseType: "json"
}); });

2
src/components/requests.js → src/utils/requests.js
View File

@ -1,4 +1,4 @@
import Axios from '../utils/API'; import Axios from './API';
export async function fetchRoads() { export async function fetchRoads() {
try { try {