src/pages/PolygonsPage.svelte

   1 <script>
   2   import { onMount } from 'svelte';
   3   import { update_html_title } from '../lib/api_utils.js';
   4   import { formatOSMType } from '../lib/helpers.js';
   5   import { appState } from '../state/AppState.svelte.js';
   6
   7   import Header from '../components/Header.svelte';
   8   import OsmLink from '../components/OsmLink.svelte';
   9
  10   let aPolygons = $state([]);
  11
  12   function loaddata() {
  13     appState.fetchFromApi('polygons', { format: 'json' }, function (data) {
  14       aPolygons = data;
  15     });
  16     update_html_title('Broken polygons');
  17   }
  18   onMount(loaddata);
  19 </script>
  20
  21 <Header/>
  22 <div class="container">
  23   <div class="row">
  24     <div class="col-sm-12">
  25       <h1>Broken polygons</h1>
  26
  27       <p>
  28         Total number of broken polygons: {aPolygons.length}.
  29       </p>
  30
  31       <table class="table table-striped table-hover">
  32         <thead>
  33           <tr>
  34             <th>OSM object</th>
  35             <th>Class</th>
  36             <th>Type</th>
  37             <th>Name</th>
  38             <th>Country Code</th>
  39             <th>Error message</th>
  40             <th>Updated</th>
  41             <th></th>
  42           </tr>
  43         </thead>
  44         <tbody>
  45           {#each aPolygons as polygon}
  46             <tr>
  47               <td><OsmLink osmType=(polygon.osm_type} osmId={polygon.osm_id} /></td>
  48               <td>{polygon.class}</td>
  49               <td>{polygon.type}</td>
  50               <td>{polygon.name}</td>
  51               <td>{polygon.country_code || ''}</td>
  52               <td>{polygon.errormessage}</td>
  53               <td>{polygon.updated}</td>
  54               <td>
  55                 <a href="http://localhost:8111/import?url=https://www.openstreetmap.org/api/0.6/{formatOSMType(polygon.osm_type)}/{polygon.osm_id}/full" target="josm">josm</a>
  56               </td>
  57             </tr>
  58           {/each}
  59         </tbody>
  60       </table>
  61     </div>
  62   </div>
  63 </div>