phyks/broutertesting
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Smarter ordering of HTTP requests to BRouter API, no longer hammering the server

Browse Source
This commit is contained in:
Lucas Verney 2019-10-08 15:16:21 +02:00
parent c21cbbfc9b
commit 4eaa0b9555
1 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -47,6 +47,7 @@
flex: auto; flex: auto;
text-align: left; text-align: left;
} }
.back-top { .back-top {
flex: auto; flex: auto;
text-align: right; text-align: right;
@ -56,16 +57,20 @@
display: inline-block; display: inline-block;
text-align: left; text-align: left;
} }
input[type="text"], textarea { input[type="text"], textarea {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
} }
textarea { textarea {
min-height: 300px; min-height: 300px;
} }
#step2 { #step2 {
display: none; display: none;
} }
.center { .center {
text-align: center; text-align: center;
} }
@ -75,6 +80,16 @@
color: red; color: red;
} }
#status {
font-weight: bold;
color: blue;
text-align: center;
}
#error {
text-align: center;
}
.footnote { .footnote {
font-size: 0.8em; font-size: 0.8em;
margin-top: -10px; margin-top: -10px;
@ -117,6 +132,7 @@
</p> </p>
<p class="error" id="error"></p> <p class="error" id="error"></p>
<p id="status"></p>
<p class="center"><input type="submit" value="Run tests"/></p> <p class="center"><input type="submit" value="Run tests"/></p>
</form> </form>
@ -140,7 +156,7 @@
<script src="js/leaflet.js"></script> <script src="js/leaflet.js"></script>
<script src="tests.js"></script> <script src="tests.js"></script>
<script type="text/javascript"> <script type="text/javascript">
document.querySelector('#settings').addEventListener('submit', function (event) { document.querySelector('#settings').addEventListener('submit', (event) => {
event.preventDefault(); event.preventDefault();
document.querySelector('#settings input[type="submit"]').disabled = true; document.querySelector('#settings input[type="submit"]').disabled = true;
@ -158,15 +174,17 @@
fetch(brouterUrl + '/brouter/profile', { fetch(brouterUrl + '/brouter/profile', {
method : "POST", method : "POST",
body: profile, body: profile,
}).then(function (response) { }).then(
return response.json(); response => response.json()
}).then(function (response) { ).then((response) => {
var profileId = response['profileid']; var profileId = response['profileid'];
document.querySelector('#step2').style.display = 'block'; document.querySelector('#step2').style.display = 'block';
document.querySelector('#status').innerText = 'Running tests…';
var idx = 0; var idx = 0;
Object.keys(TESTS).forEach(function (testCategory) { var promisesQueue = Promise.resolve(null);
Object.keys(TESTS).forEach((testCategory) => {
var testCategoryID = testCategory.replace(/[^a-zA-Z]/g, ""); var testCategoryID = testCategory.replace(/[^a-zA-Z]/g, "");
// Create dedicated section // Create dedicated section
@ -188,7 +206,7 @@
summary.appendChild(summaryList); summary.appendChild(summaryList);
// Handle all test cases // Handle all test cases
TESTS[testCategory].forEach(function (testCase) { TESTS[testCategory].forEach((testCase) => {
var startPoint = testCase.start_point; var startPoint = testCase.start_point;
var endPoint = testCase.end_point; var endPoint = testCase.end_point;
@ -231,41 +249,46 @@
function delayFetch(startPoint, endPoint, map, idx) { function delayFetch(startPoint, endPoint, map, idx) {
return function () { return function () {
fetch( return new Promise(function (resolve, reject) {
brouterUrl + '/brouter?' +
'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
'profile=' + profileId + '&' +
'alternativeidx=0&format=geojson'
).then(function (geojson) {
return geojson.json();
}).then(function (geojson) {
L.geoJSON(geojson).addTo(map);
fetch( fetch(
brouterUrl + '/brouter?' + brouterUrl + '/brouter?' +
'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' + 'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
'profile=' + referenceProfile + '&' + 'profile=' + profileId + '&' +
'alternativeidx=0&format=geojson' 'alternativeidx=0&format=geojson'
).then(function (geojson) { ).then(function (geojson) {
return geojson.json(); return geojson.json();
}).then(function (geojson) { }).then(function (geojson) {
L.geoJSON(geojson, { style: { color: '#666666' } }).addTo(map); L.geoJSON(geojson).addTo(map);
fetch(
brouterUrl + '/brouter?' +
'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
'profile=' + referenceProfile + '&' +
'alternativeidx=0&format=geojson'
).then(function (geojson) {
return geojson.json();
}).then(function (geojson) {
L.geoJSON(geojson, { style: { color: '#666666' } }).addTo(map);
resolve(null);
});
}).catch(function (error) { }).catch(function (error) {
document.querySelector('#error').innerText = 'ERROR, see test results below.';
document.querySelector('#status').innerText = '';
document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error; document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error;
}); });
}).catch(function (error) {
document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error;
}); });
}; };
} }
// Overlay route with current profile // Overlay route with current profile
setTimeout(delayFetch(startPoint, endPoint, map, idx), idx * 1000); promisesQueue = promisesQueue.then(delayFetch(startPoint, endPoint, map, idx));
idx += 1; idx += 1;
}); });
promisesQueue.then(() => {
document.querySelector('#status').innerText = 'All tests done, see individual results below!';
})
}); });
}).catch(function (exc) { }).catch((exc) => {
document.querySelector('#error').innerText = 'ERROR:' + exc; document.querySelector('#error').innerText = 'ERROR:' + exc;
}); });
}); });