src/pages/PolygonsPage.svelte

   1 <script>
   2   import { onMount } from 'svelte';
   3   import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
   4   import { formatOSMType, osmLink } from '../lib/helpers.js';
   5
   6   let aPolygons = [];
   7
   8   function loaddata() {
   9     fetch_from_api('polygons', {format: 'json'}, function(data){
  10       aPolygons = data;
  11     });
  12     update_html_title('Broken polygons');
  13   }
  14   onMount(loaddata);
  15 </script>
  16
  17
  18 <div class="container">
  19   <div class="row">
  20     <div class="col-sm-12">
  21       <h1>Broken polygons</h1>
  22
  23       <p>
  24         Total number of broken polygons: {aPolygons.length}.
  25       </p>
  26
  27       <table class="table table-striped table-hover">
  28         <thead>
  29           <th>OSM type</th>
  30           <th>OSM id</th>
  31           <th>Class</th>
  32           <th>Type</th>
  33           <th>Name</th>
  34           <th>Country Code</th>
  35           <th>Error message</th>
  36           <th>Updated</th>
  37           <th></th>
  38         </thead>
  39         <tbody>
  40           {#each aPolygons as polygon}
  41             <tr>
  42               <td>{polygon.osm_type}</td>
  43               <td>{@html osmLink(polygon)}</td>
  44               <td>{polygon.class}</td>
  45               <td>{polygon.type}</td>
  46               <td>{polygon.name}</td>
  47               <td>{polygon.country_code || ''}</td>
  48               <td>{polygon.errormessage}</td>
  49               <td>{polygon.updated}</td>
  50               <td>
  51                 <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>
  52               </td>
  53             </tr>
  54           {/each}
  55         </tbody>
  56       </table>
  57     </div>
  58   </div>
  59 </div>