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