src/components/LastUpdated.svelte

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