Error section (#90)

* display API error messages

diff --git a/src/components/Error.svelte b/src/components/Error.svelte
new file mode 100644 (file)
index 0000000..db542e3
--- /dev/null
+++ b/src/components/Error.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { error_store } from '../lib/stores.js';
+
+  let error_message;
+
+  error_store.subscribe(text => { error_message = text; });
+
+  function dismiss_message() {
+    error_store.set(null);
+  }
+</script>
+
+{#if error_message}
+  <div id="error" class="container-fluid alert-danger py-3 px-4">
+    {error_message}
+
+    <button type="button" class="close" aria-label="dismiss" on:click={dismiss_message}>
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+{/if}

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 06f3bd4aa6c06f936ecdb16caca60951a01e63e2..777d8b8a81be8ba44efcaf35d94dc0c31ac98503 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -2,6 +2,7 @@
   import PageLink from './PageLink.svelte';
   import ReverseLink from './ReverseLink.svelte';
   import LastUpdated from './LastUpdated.svelte';
+  import Error from './Error.svelte';
 
   import { page } from '../lib/stores.js';
   import { get_config_value } from '../lib/config_reader.js';
@@ -90,4 +91,5 @@
 <section class="search-section">
   <slot/>
 </section>
+<Error/>
 <LastUpdated/>

diff --git a/src/lib/api_utils.js b/src/lib/api_utils.js
index 8422dc491237696e55b65f0a0956c255141c10c4..93363e4f5ff3c45cfb465030947b888e0bd50f39 100644 (file)
--- a/src/lib/api_utils.js
+++ b/src/lib/api_utils.js
@@ -1,6 +1,6 @@
 
 import { get_config_value } from './config_reader.js';
-import { last_api_request_url_store } from './stores.js';
+import { last_api_request_url_store, error_store } from './stores.js';
 
 
 function api_request_progress(status) {
@@ -14,13 +14,22 @@ export async function fetch_from_api(endpoint_name, params, callback) {
   var api_url = generate_nominatim_api_url(endpoint_name, params);
 
   api_request_progress('start');
+  if (endpoint_name !== 'status') last_api_request_url_store.set(null);
 
-  await fetch(api_url)
-    .then(response => response.json())
-    .then(data => {
-      callback(data);
-      api_request_progress('finish');
-    });
+  try {
+    await fetch(api_url)
+      .then(response => response.json())
+      .then(data => {
+        if (data.error) {
+          error_store.set(data.error.message);
+        }
+        callback(data);
+        api_request_progress('finish');
+      });
+  } catch (error) {
+    error_store.set(`Error fetching data from ${api_url} (${error})`);
+    api_request_progress('finish');
+  }
 
   if (endpoint_name !== 'status') last_api_request_url_store.set(api_url);
 }

diff --git a/src/lib/stores.js b/src/lib/stores.js
index 6220ecc46f1ba792bb9db4910e6a0a588987bfc4..7ada7761489c0ddba2547c29f753f688cdc95f37 100644 (file)
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 export const map_store = writable();
 export const results_store = writable();
 export const last_api_request_url_store = writable();
+export const error_store = writable();
 export const page = writable();
 
 /**
@@ -37,4 +38,6 @@ export function refresh_page(pagename, params) {
   }
 
   page.set({ tab: pagename, params: params });
+  last_api_request_url_store.set(null);
+  error_store.set(null);
 }

diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index d48005038769bf9904358645002ac27f98dcb845..b7c436da11e90ccca847bcbccbba8e0f203d9a5b 100644 (file)
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -14,10 +14,9 @@
   import Map from '../components/Map.svelte';
 
   let aPlace;
-  let errorResponse;
   let base_url = window.location.search;
-  let current_result;
   let api_request_params;
+  let api_request_finished = false;
 
   function loaddata(search_params) {
     api_request_params = {
@@ -32,6 +31,7 @@
       polygon_geojson: 1,
       format: 'json'
     };
+    api_request_finished = false;
 
     if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
 
@@ -43,14 +43,8 @@
 
       fetch_from_api('details', api_request_params, function (data) {
         window.scrollTo(0, 0);
-        if (data.error) {
-          errorResponse = data;
-          current_result = undefined;
-        } else {
-          aPlace = data;
-          errorResponse = undefined;
-          current_result = data;
-        }
+        api_request_finished = true;
+        aPlace = (data && !data.error) ? data : undefined;
       });
     } else {
       aPlace = undefined;
@@ -68,11 +62,9 @@
 <Header>
   <SearchSectionDetails api_request_params={api_request_params}/>
 </Header>
-{#if errorResponse}
-  {errorResponse.error.message}
-{/if}
-{#if aPlace}
-  <div class="container">
+
+<div class="container">
+  {#if aPlace}
     <div class="row">
       <div class="col-sm-10">
         <h1>
@@ -185,7 +177,7 @@
       </div>
       <div class="col-md-6">
         <div id="map-wrapper">
-          <Map {current_result} />
+          <Map current_result={aPlace} />
         </div>
       </div>
     </div>
@@ -273,12 +265,10 @@
         </table>
       </div>
     </div>
-  </div>
-{:else if (window.location.search === '')}
-  <!-- <DetailsIndex/> -->
-{:else}
-  No such place found.
-{/if}
+  {:else if (window.location.search !== '' && api_request_finished)}
+    No such place found.
+  {/if}
+</div>