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