src/components/LastUpdated.svelte

   1 <script>
   2   import { onMount } from 'svelte';
   3   import PageLink from './PageLink.svelte';
   4   import * as timeago from 'timeago.js';
   5   import { appState } from '../state/AppState.svelte.js';
   6
   7   let last_updated_date = $state();
   8
   9   let last_api_request_url = $derived.by(() => {
  10     const url = appState.lastApiRequestURL;
  11
  12     if (url) {
  13       const urlobj = new URL(url, window.location.origin);
  14       urlobj.searchParams.delete('polygon_geojson');
  15       return urlobj.toString();
  16     }
  17   });
  18
  19   onMount(() => {
  20     appState.fetchFromApi('status', { format: 'json' }, function (data) {
  21       last_updated_date = data.data_updated;
  22     });
  23   });
  24 </script>
  25
  26 <style>
  27   #last-updated {
  28     position: relative;
  29     font-size: 0.8rem;
  30     font-style: italic;
  31   }
  32   #loading {
  33     display: none;
  34     position: absolute;
  35     padding: 0.5em 1em;
  36     top: 0;
  37     left: 0;
  38     width: 100%;
  39     background-color: var(--bs-primary-bg-subtle);
  40     z-index: 100;
  41   }
  42 </style>
  43
  44 <div id="last-updated" class="container-fluid py-2 px-4 mb-3">
  45   <div id="loading"
  46        class="py-2 px-4"
  47        style:display={appState.requestProgress === 'start' ? 'block' : 'none'}>
  48     <div class="spinner-border spinner-border-sm text-primary me-1" role="status"></div>
  49     Loading data from API ...
  50   </div>
  51   <div class="row">
  52     <div class="col-sm-6">
  53       {#if last_api_request_url}
  54         <div id="api-request">
  55           Data from <a href="{last_api_request_url}">API request</a>
  56           <span id="api-request-debug">
  57             (<a href="{last_api_request_url}&debug=1">debug output</a>)
  58           </span>
  59         </div>
  60       {/if}
  61     </div>
  62     <div class="col-sm-6 text-end">
  63       {#if last_updated_date}
  64         Data last updated:
  65         <abbr id="data-date" title="{last_updated_date} (UTC timezone)">
  66           {timeago.format(new Date(last_updated_date))}
  67         </abbr>
  68       {/if}
  69       (<PageLink page="status" text="Details" />)
  70     </div>
  71   </div>
  72 </div>