src/components/LastUpdated.svelte

   1 <script>
   2   import PageLink from './PageLink.svelte';
   3   import * as timeago from 'timeago.js';
   4   import { last_api_request_url_store } from '../lib/stores.js';
   5   import { fetch_from_api } from '../lib/api_utils.js';
   6
   7   let last_updated_date = $state();
   8   let last_api_request_url = $state();
   9
  10   let fetch_running = false; // prevent multiple parallel fetch runs
  11
  12   last_api_request_url_store.subscribe(url => {
  13     last_api_request_url = url;
  14
  15     if (last_api_request_url) {
  16       last_api_request_url = new URL(last_api_request_url, window.location.origin);
  17       last_api_request_url.searchParams.delete('polygon_geojson');
  18       last_api_request_url = last_api_request_url.toString();
  19     }
  20
  21     if (fetch_running || last_updated_date) return;
  22
  23     fetch_running = true;
  24
  25     fetch_from_api('status', { format: 'json' }, function (data) {
  26       last_updated_date = data.data_updated;
  27       fetch_running = false;
  28     });
  29   });
  30 </script>
  31
  32 <style>
  33   #last-updated {
  34     position: relative;
  35     font-size: 0.8rem;
  36     font-style: italic;
  37   }
  38   #loading {
  39     display: none;
  40     position: absolute;
  41     padding: 0.5em 1em;
  42     top: 0;
  43     left: 0;
  44     width: 100%;
  45     background-color: var(--bs-primary-bg-subtle);
  46     z-index: 100;
  47   }
  48 </style>
  49
  50 <div id="last-updated" class="container-fluid py-2 px-4 mb-3">
  51   <div id="loading" class="py-2 px-4">
  52     <div class="spinner-border spinner-border-sm text-primary me-1" role="status"></div>
  53     Loading data from API ...
  54   </div>
  55   <div class="row">
  56     <div class="col-sm-6">
  57       {#if last_api_request_url}
  58         <div id="api-request">
  59           Data from <a href="{last_api_request_url}">API request</a>
  60           <span id="api-request-debug">
  61             (<a href="{last_api_request_url}&debug=1">debug output</a>)
  62           </span>
  63         </div>
  64       {/if}
  65     </div>
  66     <div class="col-sm-6 text-end">
  67       {#if last_updated_date}
  68         Data last updated:
  69         <abbr id="data-date" title="{last_updated_date} (UTC timezone)">
  70           {timeago.format(new Date(last_updated_date))}
  71         </abbr>
  72       {/if}
  73       (<PageLink page="status" text="Details" />)
  74     </div>
  75   </div>
  76 </div>