Files
FarmMapsLib/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
2026-01-20 17:11:03 +01:00

71 lines
3.7 KiB
HTML

<div class="spacer"></div>
@if (selectedItem(); as item) {
<div>
<div class="card border-0">
<div class="card-body">
<fm-back-button></fm-back-button>
<div class="card menu-card">
@if (parentOfItemType('vnd.farmmaps.itemtype.cropfield')) {
<h2>{{parentItem.name}}</h2>
}
<h1>{{item.name}}</h1>
</div>
@if (item?.data.layers; as layers) {
<div class="legend-container">
<div class="card menu-card">
<h5><span i18n>Date</span>: {{temporalService.selectedDate(itemLayer)}}</h5>
<div class="d-flex justify-content-between">
<div>
@if (temporalService.hasPrevious(itemLayer)) {
<button type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)">
<i class="fal fa-arrow-circle-left" aria-hidden="true" i18n-title title="Previous"></i>&nbsp;{{ temporalService.previousDate(itemLayer) }}
</button>
}
</div>
<div>
@if (temporalService.hasNext(itemLayer)) {
<button type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)">
{{ temporalService.nextDate(itemLayer)}}&nbsp;<i class="fal fa-arrow-circle-right" aria-hidden="true" i18n-title title="Next"></i>
</button>
}
</div>
</div>
<fm-map-zoom-to-show-alert [layer]="currentItemLayer()?.layer"></fm-map-zoom-to-show-alert>
</div>
<div class="card menu-card pt-2">
@if (layers.length>1) {
<div>
<select (change)="onLayerChanged($event.target.value)">
@for (l of layers; track l) {
<option [value]="l.index" [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
}
</select>
</div>
}
<fm-map-layer-legend [showTitle]="layers.length == 1"
[layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend>
</div>
</div>
<div class="card menu-card">
<ul class="p-0 mt-2">
@if (item.isEditable) {
<li><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
}
@if (itemTypeService.isLayer(item)) {
@if (!getItemLayer(item,itemLayer.layerIndex)) {
<li><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
}
@if (getItemLayer(item,itemLayer.layerIndex)) {
<li><a href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
}
}
<li><a href="#" (click)="handleGoToChart(item)"><i class="fal fa-line-chart" aria-hidden="true" i18m-title title="Show chart"></i>&nbsp;<span i18n>Show chart</span></a></li>
<li><a href="#" (click)="download($event,item,layers,itemLayer.layerIndex)"><i class="fal fa-download" aria-hidden="true" i18n-title title="Download"></i>&nbsp;<span i18n>Download</span></a></li>
</ul>
</div>
}
</div>
</div>
</div>
}