Browse Source

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

Phyks (Lucas Verney) 4 months ago
parent
commit
4eaa0b9555
1 changed files with 45 additions and 22 deletions
  1. 45
    22
      index.html

+ 45
- 22
index.html View File

@@ -47,6 +47,7 @@
47 47
                 flex: auto;
48 48
                 text-align: left;
49 49
             }
50
+
50 51
             .back-top {
51 52
                 flex: auto;
52 53
                 text-align: right;
@@ -56,16 +57,20 @@
56 57
                 display: inline-block;
57 58
                 text-align: left;
58 59
             }
60
+
59 61
             input[type="text"], textarea {
60 62
                 width: 100%;
61 63
                 display: inline-block;
62 64
             }
65
+
63 66
             textarea {
64 67
                 min-height: 300px;
65 68
             }
69
+
66 70
             #step2 {
67 71
                 display: none;
68 72
             }
73
+
69 74
             .center {
70 75
                 text-align: center;
71 76
             }
@@ -75,6 +80,16 @@
75 80
                 color: red;
76 81
             }
77 82
 
83
+            #status {
84
+                font-weight: bold;
85
+                color: blue;
86
+                text-align: center;
87
+            }
88
+
89
+            #error {
90
+                text-align: center;
91
+            }
92
+
78 93
             .footnote {
79 94
                 font-size: 0.8em;
80 95
                 margin-top: -10px;
@@ -117,6 +132,7 @@
117 132
             </p>
118 133
 
119 134
             <p class="error" id="error"></p>
135
+            <p id="status"></p>
120 136
             <p class="center"><input type="submit" value="Run tests"/></p>
121 137
         </form>
122 138
 
@@ -140,7 +156,7 @@
140 156
         <script src="js/leaflet.js"></script>
141 157
         <script src="tests.js"></script>
142 158
         <script type="text/javascript">
143
-            document.querySelector('#settings').addEventListener('submit', function (event) {
159
+            document.querySelector('#settings').addEventListener('submit', (event) => {
144 160
                 event.preventDefault();
145 161
                 document.querySelector('#settings input[type="submit"]').disabled = true;
146 162
 
@@ -158,15 +174,17 @@
158 174
                 fetch(brouterUrl + '/brouter/profile', {
159 175
                     method : "POST",
160 176
                     body: profile,
161
-                }).then(function (response) {
162
-                    return response.json();
163
-                }).then(function (response) {
177
+                }).then(
178
+                    response => response.json()
179
+                ).then((response) => {
164 180
                     var profileId = response['profileid'];
165 181
 
166 182
                     document.querySelector('#step2').style.display = 'block';
183
+                    document.querySelector('#status').innerText = 'Running tests…';
167 184
 
168 185
                     var idx = 0;
169
-                    Object.keys(TESTS).forEach(function (testCategory) {
186
+                    var promisesQueue = Promise.resolve(null);
187
+                    Object.keys(TESTS).forEach((testCategory) => {
170 188
                         var testCategoryID = testCategory.replace(/[^a-zA-Z]/g, "");
171 189
 
172 190
                         // Create dedicated section
@@ -188,7 +206,7 @@
188 206
                         summary.appendChild(summaryList);
189 207
 
190 208
                         // Handle all test cases
191
-                        TESTS[testCategory].forEach(function (testCase) {
209
+                        TESTS[testCategory].forEach((testCase) => {
192 210
                             var startPoint = testCase.start_point;
193 211
                             var endPoint = testCase.end_point;
194 212
 
@@ -231,41 +249,46 @@
231 249
 
232 250
                             function delayFetch(startPoint, endPoint, map, idx) {
233 251
                                 return function () {
234
-                                    fetch(
235
-                                        brouterUrl + '/brouter?' +
236
-                                        'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
237
-                                        'profile=' + profileId + '&' +
238
-                                        'alternativeidx=0&format=geojson'
239
-                                    ).then(function (geojson) {
240
-                                        return geojson.json();
241
-                                    }).then(function (geojson) {
242
-                                        L.geoJSON(geojson).addTo(map);
243
-
252
+                                    return new Promise(function (resolve, reject) {
244 253
                                         fetch(
245 254
                                             brouterUrl + '/brouter?' +
246 255
                                             'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
247
-                                            'profile=' + referenceProfile + '&' +
256
+                                            'profile=' + profileId + '&' +
248 257
                                             'alternativeidx=0&format=geojson'
249 258
                                         ).then(function (geojson) {
250 259
                                             return geojson.json();
251 260
                                         }).then(function (geojson) {
252
-                                            L.geoJSON(geojson, { style: { color: '#666666' } }).addTo(map);
261
+                                            L.geoJSON(geojson).addTo(map);
262
+                                            fetch(
263
+                                                brouterUrl + '/brouter?' +
264
+                                                'lonlats=' + startPoint.join(',') + '|' + endPoint.join(',') + '&' +
265
+                                                'profile=' + referenceProfile + '&' +
266
+                                                'alternativeidx=0&format=geojson'
267
+                                            ).then(function (geojson) {
268
+                                                return geojson.json();
269
+                                            }).then(function (geojson) {
270
+                                                L.geoJSON(geojson, { style: { color: '#666666' } }).addTo(map);
271
+                                                resolve(null);
272
+                                            });
253 273
                                         }).catch(function (error) {
274
+                                            document.querySelector('#error').innerText = 'ERROR, see test results below.';
275
+                                            document.querySelector('#status').innerText = '';
254 276
                                             document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error;
255 277
                                         });
256
-                                    }).catch(function (error) {
257
-                                        document.querySelector('#error_' + idx).innerText = 'ERROR: ' + error;
258 278
                                     });
259 279
                                 };
260 280
                             }
261 281
 
262 282
                             // Overlay route with current profile
263
-                            setTimeout(delayFetch(startPoint, endPoint, map, idx), idx * 1000);
283
+                            promisesQueue = promisesQueue.then(delayFetch(startPoint, endPoint, map, idx));
264 284
 
265 285
                             idx += 1;
266 286
                         });
287
+                        promisesQueue.then(() => {
288
+                            document.querySelector('#status').innerText = 'All tests done, see individual results below!';
289
+                        })
267 290
                     });
268
-                }).catch(function (exc) {
291
+                }).catch((exc) => {
269 292
                     document.querySelector('#error').innerText = 'ERROR:' + exc;
270 293
                 });
271 294
             });