make LastUpdated a Svelte component (#56)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index f4a9231b6ba2459007fdacd9316f3a8b4a70f931..63e2a4454cf1e9c4b164bb4731716482ae98ba2d 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,15 +1,7 @@
 <script>
-
-  import { last_updated_store } from '../lib/stores.js';
-
-  let last_updated;
-
-  last_updated_store.subscribe(data => {
-    if (!data) { return; }
-    last_updated = data;
-  });
-
+  import LastUpdated from './LastUpdated.svelte';
 </script>
+
 <style>
   header {
     width: 100%;
@@ -17,47 +9,29 @@
     z-index: 5;
   }
 
-  header .brand {
+  .brand {
     white-space: nowrap;
   }
 
-  header .brand a:hover{
+  .brand a:hover{
     text-decoration: none;
   }
 
-  header .brand h1 {
+  .brand h1 {
     display: inline;
     font-size: 1.5em;
     color: #333;
   }
 
-  header .brand img {
+  .brand img {
     display: inline-block;
     margin-right: 5px;
     margin-top: -5px;
   }
 
-  header #last-updated {
-    font-size: 0.7em;
-    white-space: nowrap;
-    text-align: center;
-/*    display: none;
-*/  }
-
-  header .dropdown-menu {
+  .dropdown-menu {
     z-index: 1005;
   }
-
-  #loading {
-    display: none;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    background-color: #eee;
-    z-index: 100;
-    padding: 10px;
-    text-align: center;
-  }
 </style>
 
 <header class="container-fluid">
@@ -71,16 +45,7 @@
       </div>
     </div>
     <div class="col-4">
-      <div id="last-updated" class="text-center">
-        <div id="loading">loading...</div>
-        {#if last_updated}
-          <div id="api-request">
-            Data from <a href="{last_updated.api_request_url}">API request</a>
-            <span id="api-request-debug">(<a href="{last_updated.api_request_url_debug}">debug output</a>)</span>
-          </div>
-          Data last updated: <span id="data-date">{last_updated.date}</span>
-        {/if}
-      </div>
+      <LastUpdated/>
     </div>
     <div class="col-4 text-right">
       <div class="dropdown">

diff --git a/src/components/LastUpdated.svelte b/src/components/LastUpdated.svelte
new file mode 100644 (file)
index 0000000..f269903
--- /dev/null
+++ b/src/components/LastUpdated.svelte
@@ -0,0 +1,47 @@
+<script>
+  import { last_api_request_url_store } from '../lib/stores.js';
+  import { fetch_from_api } from '../lib/api_utils.js';
+
+  let last_updated_date;
+  let last_api_request_url;
+
+  last_api_request_url_store.subscribe(url => {
+    last_api_request_url = url;
+    fetch_from_api('status', { format: 'json' }, function (data) {
+      last_updated_date = data.data_updated;
+    });
+  });
+</script>
+
+<style>
+  #last-updated {
+    font-size: 0.7em;
+    white-space: nowrap;
+    text-align: center;
+  }
+  #loading {
+    display: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background-color: #eee;
+    z-index: 100;
+    padding: 10px;
+    text-align: center;
+  }
+</style>
+
+<div id="last-updated">
+  <div id="loading">loading...</div>
+  {#if last_updated_date}
+    {#if last_api_request_url}
+      <div id="api-request">
+        Data from <a href="{last_api_request_url}">API request</a>
+        <span id="api-request-debug">
+          (<a href="{last_api_request_url}&debug=1">debug output</a>)
+        </span>
+      </div>
+    {/if}
+    Data last updated: <span id="data-date">{last_updated_date}</span>
+  {/if}
+</div>

diff --git a/src/lib/api_utils.js b/src/lib/api_utils.js
index 066543f5296d02cae7f7a476bd814bb7e049e5c4..0317e13c031fccc7471f4f9edc3029710cf546cc 100644 (file)
--- a/src/lib/api_utils.js
+++ b/src/lib/api_utils.js
@@ -1,31 +1,28 @@
 
 import { get_config_value } from './config_reader.js';
-import { last_updated_store } from './stores.js';
+import { last_api_request_url_store } from './stores.js';
 
 
+function api_request_progress(status) {
+  var loading_el = document.getElementById('loading');
+  if (!loading_el) return; // might not be on page yet
+
+  loading_el.style.display = (status === 'start') ? 'block' : 'none';
+}
 
 export async function fetch_from_api(endpoint_name, params, callback) {
   var api_url = generate_nominatim_api_url(endpoint_name, params);
 
-  document.getElementById('loading').style.display = 'block';
+  api_request_progress('start');
+
   await fetch(api_url)
     .then(response => response.json())
     .then(data => {
       callback(data);
-      document.getElementById('loading').style.display = 'none';
+      api_request_progress('finish');
     });
 
-
-  fetch(generate_nominatim_api_url('status', { format: 'json' }))
-    .then(response => response.json())
-    .then(data => {
-      let last_updated = {
-        api_request_url: api_url,
-        api_request_url_debug: api_url + '&debug=1',
-        date: data.data_updated
-      };
-      last_updated_store.set(last_updated);
-    });
+  if (endpoint_name !== 'status') last_api_request_url_store.set(api_url);
 }
 
 function generate_nominatim_api_url(endpoint_name, params) {

diff --git a/src/lib/stores.js b/src/lib/stores.js
index d445ade78ef0ac4be74560cbd1dded145319426e..56d11b9e78dcebc248be1bb8ac544ac32a0878ef 100644 (file)
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -4,7 +4,7 @@ export const map_store = writable();
 export const results_store = writable();
 export const current_result_store = writable();
 export const current_request_latlon = writable();
-export const last_updated_store = writable();
+export const last_api_request_url_store = writable();
 export const page = writable({ count: 0 });
 
 export function refresh_page() {