diff --git a/src/App.js b/src/App.js
index 93054a4..d7b6dfe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,7 @@ import './App.css';
import './govuk-styles.scss';
import axios from 'axios';
import LocationMarker from './components/LocationMarker';
-import {filterTable, sortTable, resetTable} from './components/Table';
+import { populateTable, filterTable, sortTable, resetTable} from './components/Table';
// import data from './london-spots.json';
let pageSize = 50;
let zoomSize = 16;
@@ -63,12 +63,6 @@ function ready(fn) {
}
}
-function generateElements(html) {
- const template = document.createElement('template');
- template.innerHTML = html.trim();
- return template.content;
-}
-
// Parsing data acquired from GET request
function parseJSON (data, iter, applicationData) {
for (let i = 0; i < Object.keys(data.data).length; i++) {
@@ -92,7 +86,6 @@ function parseJSON (data, iter, applicationData) {
}
}
-
// Make data GeoJSON format
function toGeoJSON(data) {
var result = {
@@ -110,9 +103,9 @@ function toGeoJSON(data) {
"coordinates":[data[iter]["longitude"], data[iter]["latitude"]]
},
"properties":{
- "name" : data[iter]["title"],
+ "name" : addresize(data[iter]["title"]),
"description" : data[iter]["description"],
- "status" : data[iter]["status"],
+ "status" : humanize(data[iter]["status"]),
"reference" : data[iter]["reference"],
"recvDate" : data[iter]["recvDate"],
"publicUrl" : data[iter]["publicUrl"],
@@ -164,63 +157,32 @@ function App () {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- const populateTable = async(data) => {
- let loaded = false;
- loaded = await(!loading);
- if (loaded) {
- document.querySelector("#applicationTableBody").replaceChildren();
-
- if (data === null) {return;}
-
- const table = document.querySelector("#applicationTable").querySelector('tbody')
-
- for (let i = 0; i < Object.keys(data.features).length; i++) {
- var feature = data.features[i].properties;
-
- let featureHTML = `
- | ${addresize(feature.name)} |
- ${feature.reference} |
- ${feature.description} |
- ${feature.recvDate} |
- ${humanize(feature.status)} | `;
-
- if (feature.publicUrl === undefined) { featureHTML += `N/A |
`; }
-
- else {
- featureHTML += `More info | `;
- }
-
- table.append(generateElements(featureHTML));
- }
- }
- }
-
const onEachFeature = (feature, layer) => {
if (feature.properties && feature.properties.description && feature.properties.status && feature.properties.publicUrl) {
const div = document.createElement('div');
- div.innerHTML = `${addresize(feature.properties.name)}
+ div.innerHTML = `${feature.properties.name}
Reference: ${feature.properties.reference}
Planned work: ${feature.properties.description}
- Current status: ${humanize(feature.properties.status)}
+ Current status: ${feature.properties.status}
More info`;
layer.bindPopup(div);
}
else if (feature.properties && feature.properties.description && feature.properties.status) {
const div = document.createElement('div');
- div.innerHTML = `${addresize(feature.properties.name)}
+ div.innerHTML = `${feature.properties.name}
Reference: ${feature.properties.reference}
Planned work: ${feature.properties.description}
Current status: ${feature.properties.status}
`;
layer.bindPopup(div);
}
else if (feature.properties && feature.properties.description) {
- layer.bindPopup(`${addresize(feature.properties.name)}
+ layer.bindPopup(`${feature.properties.name}
Planned work: ${feature.properties.description}
`);
}
else if (feature.properties) {
- layer.bindPopup(`${addresize(feature.properties.name)}
`);
+ layer.bindPopup(`${feature.properties.name}
`);
}
};
@@ -312,7 +274,8 @@ function App () {
if (loading) {return (Loading...
);}
ready(async() => {
- populateTable(geojson);
+ let loaded = await (!loading);
+ if (loaded) {populateTable(geojson);}
});
return (
diff --git a/src/components/Table.js b/src/components/Table.js
index 5bc257a..765fa82 100644
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -1,3 +1,36 @@
+function generateElements(html) {
+ const template = document.createElement('template');
+ template.innerHTML = html.trim();
+ return template.content;
+ }
+
+function populateTable(data) {
+ document.querySelector("#applicationTableBody").replaceChildren();
+
+ if (data === null) { return; }
+
+ const table = document.querySelector("#applicationTable").querySelector('tbody')
+
+ for (let i = 0; i < Object.keys(data.features).length; i++) {
+ var feature = data.features[i].properties;
+
+ let featureHTML = `
+ | ${feature.name} |
+ ${feature.reference} |
+ ${feature.description} |
+ ${feature.recvDate} |
+ ${feature.status} | `;
+
+ if (feature.publicUrl === undefined) { featureHTML += `N/A |
`; }
+
+ else {
+ featureHTML += `More info | `;
+ }
+
+ table.append(generateElements(featureHTML));
+ }
+}
+
function filterTable(event) {
var table = document.getElementById("applicationTable");
var tr = table.getElementsByTagName("tr");
@@ -114,5 +147,5 @@ function resetTable() {
// }
// }
-export { sortTable, filterTable, resetTable };
+export { populateTable, sortTable, filterTable, resetTable };