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