src/components/LastUpdated.svelte

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