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