FarmMapsLib/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html

<div class="spacer"></div>
<div *ngIf="selectedItem();let item">
  <div class="card border-0">
    <div class="card-body">
      <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
      <div class="card menu-card">
        <h1>{{item.name}}</h1>
      </div>
      <div class="legend-container" *ngIf="item?.data.layers;let layers">
        <div class="card menu-card">
          <h5>Date image: {{item.dataDate | date:'shortDate'}}</h5>
          <div class="d-flex justify-content-between">
            <div *ngIf="hasPrevious()">
              <button type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)" i18n>
                <i class="fa fa-arrow-circle-left" aria-hidden="true" title="Previous"></i>&nbsp;{{ previousDate() | date:'shortDate'}}
              </button>
            </div>
            <div *ngIf="hasNext()">
              <button type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)" i18n>
                {{ nextDate()| date:'shortDate' }}&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true" title="Next"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card menu-card pt-2">
          <div *ngIf="layers.length>1">
            <select (change)="onLayerChanged($event.target.value)" [value]="itemLayer.layerIndex">
              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
            </select>
          </div>
          <fm-map-layer-legend [layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend>
        </div>
      </div>
      <div class="card menu-card">
        <ul class="p-0 mt-2">
          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
          <li><a href="#" (click)="handleGoToChart()" i18n><i class="fa fa-line-chart" aria-hidden="true" title="Edit"></i> Show chart</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>