diff --git a/.gitignore b/.gitignore
index 4d29575..3c3629e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,23 +1 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# 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*
+node_modules
diff --git a/package.json b/package.json
index 8ba45f1..5684f18 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,18 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@ant-design/icons": "^4.2.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
- "antd": "^3.26.9",
+ "antd": "^4.6.6",
"axios": "^0.19.2",
- "react": "^16.12.0",
+ "react": "^16.13.1",
"react-dom": "^16.12.0",
- "react-graph-vis": "^1.0.5",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.3",
"react-sigma": "^1.2.34",
+ "react-svgmt": "^1.1.11",
"styled-components": "^5.0.1"
},
"scripts": {
diff --git a/public/belgium-map.svg b/public/belgium-map.svg
new file mode 100644
index 0000000..8b4bc69
--- /dev/null
+++ b/public/belgium-map.svg
@@ -0,0 +1,61 @@
+
diff --git a/src/components/HomeView.jsx b/src/components/HomeView.jsx
index 2b8dd33..e256fd0 100644
--- a/src/components/HomeView.jsx
+++ b/src/components/HomeView.jsx
@@ -1,22 +1,37 @@
import React, { useState, useEffect } from 'react';
-import { fetchRoads, fetchCities, getShortestPath } from './requests';
-import { Layout, Select, Button, Icon } from 'antd';
-import Graph from 'react-graph-vis';
+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, Footer, Content } = Layout;
-
+const { Header, Content } = Layout;
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() {
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))
@@ -60,7 +75,8 @@ function HomeView() {
});
return;
}
- // Will reset the error message and shown path
+ // Reset the error message and shown path
+ setHighlighted(highlightInitial);
setShortestPath();
setError({ flag: false });
}
@@ -77,7 +93,8 @@ function HomeView() {
});
return;
}
- // Will reset the error message and shown path
+ // Reset the error message and shown path
+ setHighlighted(highlightInitial);
setShortestPath();
setError({ flag: false });
}
@@ -88,10 +105,19 @@ function HomeView() {
message: 'Please select a start and a destination',
flag: true,
});
- return;
} else if (startingPoint && destination) {
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));
setError({ flag: false });
} 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 (
<>
{errorSelect.message}
}