Replace graph with an svg path
This commit is contained in:
parent
60bbf7a890
commit
7bdaf1f619
24
.gitignore
vendored
24
.gitignore
vendored
@ -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*
|
|
||||||
|
|||||||
@ -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
61
public/belgium-map.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 9.6 KiB |
@ -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>
|
||||||
@ -155,10 +156,10 @@ function HomeView() {
|
|||||||
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
31
src/components/Map.jsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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"
|
||||||
});
|
});
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import Axios from '../utils/API';
|
import Axios from './API';
|
||||||
|
|
||||||
export async function fetchRoads() {
|
export async function fetchRoads() {
|
||||||
try {
|
try {
|
||||||
Loading…
Reference in New Issue
Block a user