import {
osmLink, wikipediaLink, coverageType, isAdminBoundary,
- formatAddressRank, formatKeywordToken
+ formatAddressRank, formatKeywordToken, formatOSMType
} from '../lib/helpers.js';
import Header from '../components/Header.svelte';
import MapIcon from '../components/MapIcon.svelte';
import SearchSectionDetails from '../components/SearchSectionDetails.svelte';
import DetailsOneRow from '../components/DetailsOneRow.svelte';
import DetailsLink from '../components/DetailsLink.svelte';
+ import DetailsPostcodeHint from '../components/DetailsPostcodeHint.svelte';
+ import InfoRow from '../components/DetailsInfoRow.svelte';
+ import InfoRowList from '../components/DetailsInfoRowList.svelte';
import Map from '../components/Map.svelte';
let aPlace;
- let base_url = window.location.search;
+ let base_url;
let api_request_params;
let api_request_finished = false;
let pageinfo = $page;
if (pageinfo.tab === 'details') {
loaddata(pageinfo.params);
+ base_url = window.location.search;
}
}
</script>
<div class="row">
<div class="col-sm-10">
<h1>
- {aPlace.localname}
+ {aPlace.localname || `${formatOSMType(aPlace.osm_type)} ${aPlace.osm_id}` }
<small><DetailsLink feature={aPlace}>link to this page</DetailsLink></small>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
- <table id="locationdetails" class="table table-striped">
+ <table id="locationdetails" class="table table-striped table-responsive">
<tbody>
- <tr>
- <td>Name</td>
- <td>
- {#each Object.keys(aPlace.names) as name}
- <div class="line">
- <span class="name">{aPlace.names[name]}</span> ({name})
- </div>
- {/each}
- </td>
- </tr>
- <tr>
- <td>Type</td>
- <td>{aPlace.category}:{aPlace.type}</td>
- </tr>
- <tr>
- <td>Last Updated</td>
- <td>{aPlace.indexed_date}</td>
- </tr>
+ <InfoRow title="Name">
+ {#if (Array.isArray(aPlace.names)) }
+ <span class="noname font-weight-bold">No Name</span>
+ {:else}
+ <InfoRowList items={aPlace.names} />
+ {/if}
+ </InfoRow>
+ <InfoRow title="Type">{aPlace.category}:{aPlace.type}</InfoRow>
+ <InfoRow title="Last Updated">{aPlace.indexed_date}</InfoRow>
{#if (isAdminBoundary(aPlace)) }
- <tr>
- <td>Admin Level</td>
- <td>{aPlace.admin_level}</td>
- </tr>
+ <InfoRow title="Admin Level">{aPlace.admin_level}</InfoRow>
{/if}
- <tr>
- <td>Search Rank</td>
- <td>{aPlace.rank_search}</td>
- </tr>
- <tr>
- <td>Address Rank</td>
- <td>{aPlace.rank_address} ({formatAddressRank(aPlace.rank_address)})</td>
- </tr>
+ <InfoRow title="Search Rank">{aPlace.rank_search}</InfoRow>
+ <InfoRow title="Address Rank">{aPlace.rank_address} ({formatAddressRank(aPlace.rank_address)})</InfoRow>
{#if aPlace.calculated_importance}
- <tr>
- <td>Importance</td>
- <td>
+ <InfoRow title="Importance">
{aPlace.calculated_importance}
{#if !aPlace.importance} (estimated){/if}
- </td>
- </tr>
+ </InfoRow>
{/if}
- <tr>
- <td>Coverage</td>
- <td>{coverageType(aPlace)}</td>
- </tr>
- <tr>
- <td>Centre Point (lat,lon)</td>
- <td>
+ <InfoRow title="Coverage">{coverageType(aPlace)}</InfoRow>
+ <InfoRow title="Centre Point (lat,lon)">
{aPlace.centroid.coordinates[1]},{aPlace.centroid.coordinates[0]}
- </td>
- </tr>
- <tr>
- <td>OSM</td>
- <td>{@html osmLink(aPlace)}
- </tr>
- <tr>
- <td>
- Place Id
- (<a href="https://nominatim.org/release-docs/develop/api/Output/#place_id-is-not-a-persistent-id">on this server</a>)
- </td>
- <td>{aPlace.place_id}</td>
- </tr>
+ </InfoRow>
+ <InfoRow title="OSM">{@html osmLink(aPlace)}</InfoRow>
+ <InfoRow title="Place Id">
+ {aPlace.place_id}
+ (<a href="https://nominatim.org/release-docs/develop/api/Output/#place_id-is-not-a-persistent-id">on this server</a>)
+ </InfoRow>
{#if aPlace.calculated_wikipedia}
- <tr>
- <td>Wikipedia Calculated</td>
- <td>{@html wikipediaLink(aPlace)}</td>
- </tr>
+ <InfoRow title="Wikipedia Calculated">{@html wikipediaLink(aPlace)}</InfoRow>
{/if}
- <tr>
- <td>Computed Postcode</td>
- <td>{aPlace.calculated_postcode || ''}</td>
- </tr>
- <tr>
- <td>Address Tags</td>
- <td>
- {#each Object.keys(aPlace.addresstags) as name}
- <div class="line">
- <span class="name">{aPlace.addresstags[name]}</span> ({name})
- </div>
- {/each}
- </td>
- </tr>
- <tr>
- <td>Extra Tags</td>
- <td>
- {#each Object.keys(aPlace.extratags) as name}
- <div class="line">
- <span class="name">{aPlace.extratags[name]}</span> ({name})
- </div>
- {/each}
- </td>
- </tr>
+ <InfoRow title="Computed Postcode">
+ {#if aPlace.calculated_postcode}
+ {aPlace.calculated_postcode}
+ <DetailsPostcodeHint postcode={aPlace.calculated_postcode} lat={aPlace.centroid.coordinates[1]} lon={aPlace.centroid.coordinates[0]} />
+ {/if}
+ </InfoRow>
+ <InfoRow title="Address Tags"><InfoRowList items={aPlace.addresstags} /></InfoRow>
+ <InfoRow title="Extra Tags"><InfoRowList items={aPlace.extratags} /></InfoRow>
</tbody>
</table>
</div>
<tbody>
{#if aPlace.address}
{#each aPlace.address as addressLine}
- <DetailsOneRow addressLine={addressLine} bDistanceInMeters=false />
+ <DetailsOneRow addressLine={addressLine} bMarkUnusedLines=true bDistanceInMeters=false />
{/each}
{/if}
{#if aPlace.linked_places}
<tr class="all-columns"><td colspan="6"><h2>Linked Places</h2></td></tr>
{#each aPlace.linked_places as addressLine}
- <DetailsOneRow addressLine={addressLine} bDistanceInMeters=true />
+ <DetailsOneRow addressLine={addressLine} bMarkUnusedLines=true bDistanceInMeters=true />
{/each}
{/if}
</tr>
{/each}
- <tr class="all-columns"><td colspan="6"><h3>Address Keywords</h3></td></tr>
- {#each aPlace.keywords.address as keyword}
- <tr>
- <td>{formatKeywordToken(keyword.token)}</td>
- {#if keyword.id}
- <td>word id: {keyword.id}</td>
- {/if}
- </tr>
- {/each}
+ {#if aPlace.keywords.address}
+ <tr class="all-columns"><td colspan="6"><h3>Address Keywords</h3></td></tr>
+ {#each aPlace.keywords.address as keyword}
+ <tr>
+ <td>{formatKeywordToken(keyword.token)}</td>
+ {#if keyword.id}
+ <td>word id: {keyword.id}</td>
+ {/if}
+ </tr>
+ {/each}
+ {/if}
{:else}
<tr>
<td>
border-top: none !important;
padding-left: 0 !important;
}
-
- .table {
- width: 100%;
- }
- .table td {
- font-size: 0.9em;
- }
- .table>thead>tr>th, .table>tbody>tr>td {
- padding: 2px 8px;
- }
- .name{
- font-weight: bold;
+ :global(span.noname){
+ color:#800;
}
+
#map-wrapper {
width:100%;
min-height: auto;
projects / nominatim-ui.git / blobdiff