Angular v20
This commit is contained in:
@@ -1,31 +1,50 @@
|
||||
<div>
|
||||
<div class="layerlist" *ngIf="itemLayers.length > 0;else noLayers">
|
||||
<div class="list-group">
|
||||
<div *ngFor="let itemLayer of itemLayers" class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
|
||||
<div (click)="handleSelectLayer($event,itemLayer)" [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
|
||||
<div class="mt-1" *ngIf="selectedLayer==itemLayer && !baseLayers">
|
||||
<span class="btn-group">
|
||||
<a title="Toggle visibility"href="#" class="btn btn-light btn-sm" (click)="handleToggleVisibility($event,itemLayer)"><i class="fa" aria-hidden="true" [ngClass]="{'fa-eye':!itemLayer.visible,'fa-eye-slash':itemLayer.visible}"></i></a>
|
||||
<a title="Transparency 25%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.25)">25%</a>
|
||||
<a title="Transparency 50%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.5)">50%</a>
|
||||
<a title="Transparency 75%" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
|
||||
<a title="No transparency" *ngIf="itemLayer.visible" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
|
||||
</span>
|
||||
<a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
|
||||
<span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
|
||||
<span *ngIf="!dataLayers" class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
|
||||
</div>
|
||||
<div *ngIf="itemLayer.legendVisible">
|
||||
<div class="card legend">
|
||||
<fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);" [histogramenabled]="true"></fm-map-layer-legend>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #noLayers>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item" i18n>No layers</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div>
|
||||
@if (itemLayers.length > 0) {
|
||||
<div class="layerlist">
|
||||
<div class="list-group">
|
||||
@for (itemLayer of itemLayers; track itemLayer) {
|
||||
<div class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
|
||||
<div (click)="handleSelectLayer($event,itemLayer)" [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
|
||||
@if (selectedLayer==itemLayer && !baseLayers) {
|
||||
<div class="mt-1">
|
||||
<span class="btn-group">
|
||||
<a title="Toggle visibility"href="#" class="btn btn-light btn-sm" (click)="handleToggleVisibility($event,itemLayer)"><i class="fa" aria-hidden="true" [ngClass]="{'fa-eye':!itemLayer.visible,'fa-eye-slash':itemLayer.visible}"></i></a>
|
||||
@if (itemLayer.visible) {
|
||||
<a title="Transparency 25%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.25)">25%</a>
|
||||
}
|
||||
@if (itemLayer.visible) {
|
||||
<a title="Transparency 50%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.5)">50%</a>
|
||||
}
|
||||
@if (itemLayer.visible) {
|
||||
<a title="Transparency 75%" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,0.75)">75%</a>
|
||||
}
|
||||
@if (itemLayer.visible) {
|
||||
<a title="No transparency" href="#" class="btn btn-light btn-sm" (click)="handleSetOpacity($event,itemLayer,1)">100%</a>
|
||||
}
|
||||
</span>
|
||||
<a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
|
||||
@if (firstLayer(itemLayer)) {
|
||||
<span><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
|
||||
}
|
||||
@if (!dataLayers) {
|
||||
<span class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (itemLayer.legendVisible) {
|
||||
<div>
|
||||
<div class="card legend">
|
||||
<fm-map-layer-legend [layer]="firstLayer(itemLayer)" (click)="handleLegendClick($event,itemLayer);" [histogramenabled]="true"></fm-map-layer-legend>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="list-group">
|
||||
<div class="list-group-item" i18n>No layers</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,27 @@
|
||||
<div #layerValues class="layer-values">
|
||||
<div class="cross" *ngIf="enabled$ | async">
|
||||
<div class="pointer"></div>
|
||||
<div class="values-container border border-dark rounded p-2" *ngIf="(layerValues$ | async ) as layers">
|
||||
<div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
|
||||
<ul class="value-list p-0 mb-0" *ngIf="layers.length>0 ;else no_data">
|
||||
<li class="border-top pt-1 pb-1 value" *ngFor="let layerValue of layers">
|
||||
<div>{{layerValue.layerName}}</div>
|
||||
<div>{{layerValue.date|date}}</div>
|
||||
<div><span *ngIf="layerValue.quantity"><span class="me-1">{{layerValue.quantity}}</span> </span><span class="me-1 font-weight-bold">{{getScaledValue(layerValue)}}</span><span>{{layerValue.unit}}</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
<ng-template #no_data>
|
||||
<div i18n class="border-top pt-1 pb-1">No data at location</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (enabled$ | async) {
|
||||
<div class="cross" >
|
||||
<div class="pointer"></div>
|
||||
@if ((layerValues$ | async ); as layers) {
|
||||
<div class="values-container border border-dark rounded p-2">
|
||||
<div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
|
||||
@if (layers.length>0 ) {
|
||||
<ul class="value-list p-0 mb-0">
|
||||
@for (layerValue of layers; track layerValue) {
|
||||
<li class="border-top pt-1 pb-1 value">
|
||||
<div>{{layerValue.layerName}}</div>
|
||||
<div>{{layerValue.date|date}}</div>
|
||||
<div>@if (layerValue.quantity) {
|
||||
<span><span class="me-1">{{layerValue.quantity}}</span> </span>
|
||||
}<span class="me-1 font-weight-bold">{{getScaledValue(layerValue)}}</span><span>{{layerValue.unit}}</span></div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
} @else {
|
||||
<div i18n class="border-top pt-1 pb-1">No data at location</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user