allerta-vvf/frontend/src/app/_routes/place-details/place-details.component.html

38 lines
1.6 KiB
HTML

<back-btn></back-btn>
<div class="d-flex justify-content-center mt-5 pt-5" *ngIf="!place_loaded">
<div class="spinner spinner-border"></div>
</div>
<br>
<div style="height: 300px;" leaflet [leafletOptions]="options" *ngIf="place_loaded">
<div [leafletLayers]="layers"></div>
</div>
<div class="place_info" *ngIf="place_loaded">
<h3>
<a href="https://www.google.com/maps/@?api=1&map_action=map&center={{ place_info.lat }},{{ place_info.lon }}&zoom=19&basemap=satellite" target="_blank">{{ 'place_details.open_in_google_maps'|translate }}</a>
</h3>
<br>
<h4 *ngIf="place_info.name">
{{ 'name'|translate|ftitlecase }}: <b>{{ place_info.name }}</b>
</h4>
<h4 *ngIf="place_info.country">
{{ 'place_details.country'|translate|ftitlecase }}: <b>
{{ place_info.country }} ({{ place_info.country_code }})
<ng-container *ngIf="place_info.state">- {{ place_info.state }}</ng-container>
</b>
</h4>
<h4 *ngIf="place_info.village">
{{ 'place_details.village'|translate|ftitlecase }}: <b>
{{ place_info.village }}
<ng-container *ngIf="place_info.suburb">- {{ place_info.suburb }}</ng-container>
</b> ({{ 'place_details.postcode'|translate }} <b>{{ place_info.postcode }}</b>)
</h4>
<h4 *ngIf="place_info.municipality">
{{ 'place_details.municipality'|translate|ftitlecase }}: <b>{{ place_info.municipality }}</b>
</h4>
<h4 *ngIf="place_info.road">
{{ 'place_details.road'|translate|ftitlecase }}: <b>{{ place_info.road }}</b>
</h4>
<h4 *ngIf="place_info.house_number">
{{ 'place_details.house_number'|translate|ftitlecase }}: <b>{{ place_info.house_number }}</b>
</h4>
</div>