- toggleVisibility() and toggleSelection() for legend entries

- use FontAwesomeModule also in app.module
- select and hide events in geomon-timeseries-chart.component.ts

src/app/app.module.ts

@@ -36,6 +36,7 @@ import {MatBadgeModule} from '@angular/material/badge';
 
 import { TimeService } from '../common/core/time/time.service';
 import { InternalIdHandler } from '../common/components/services/internal-id-handler.service';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   // declarations: The components, directives, and pipes that belong to this NgModule.
@@ -44,7 +45,9 @@ import { InternalIdHandler } from '../common/components/services/internal-id-han
   //   DatasetByStationSelectorComponent
   // ],
   // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, GraphjsModule, BrowserAnimationsModule, MatDialogModule, MatListModule, MatBadgeModule],
+  imports: [
+    BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, GraphjsModule, BrowserAnimationsModule, MatDialogModule, MatListModule, MatBadgeModule,
+    FontAwesomeModule],
   providers: [
     MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService,DatasetService, InternalIdHandler, TimeService
  

src/app/components/legend-entry/legend-entry.component.html

@@ -1,6 +1,6 @@
 
 <div id="geomon-legend-entry" class="legendItem" style="position: relative;" [ngStyle]="{'border-color': datasetOption?.color}"
-    [ngClass]="{'selected': selected}" (click)="toggleVisibility(); $event.stopPropagation();">
+    [ngClass]="{'selected': selected}" (click)="toggleSelection();">
     <!-- <div class="loading-overlay" *ngIf="loading" [ngStyle]="{'background-color': datasetOption?.color}">
         <div class="fa fa-refresh fa-spin fa-3x fa-fw"></div>
     </div> -->
@@ -36,6 +36,11 @@
             <div class="small-label" *ngIf="categoryLabel != phenomenonLabel">
                 <label>{{categoryLabel}}</label>
             </div>
+            <div class="legendicons">
+                <!-- <span class="fa" [ngClass]="{'fa-eye-slash': datasetOption?.visible, 'fa-eye': !datasetOption?.visible}" (click)="toggleVisibility(); $event.stopPropagation();"></span> -->
+                <fa-icon [icon]="datasetOption?.visible ? faEye : faEyeSlash" (click)="toggleVisibility(); $event.stopPropagation();"></fa-icon>
+              </div>
+
         </div>
     </div>
 

src/app/components/legend-entry/legend-entry.component.ts

@@ -6,6 +6,8 @@ import { TimeInterval } from '../../../shared/models/timespan';
 import { DatasetApiService } from '../../services/dataset-api.service';
 import { InternalIdHandler, InternalDatasetId } from '../../../common/components/services/internal-id-handler.service';
 import { DatasetOptions } from '../../../shared/models/options';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+
 @Component({
     selector: 'geomon-legend-entry',
     templateUrl: './legend-entry.component.html',
@@ -18,6 +20,9 @@ export class LegendEntryComponent {
     @Output()
     public onSelectDate: EventEmitter<Date> = new EventEmitter();
 
+    faEye = faEye;
+    faEyeSlash= faEyeSlash;
+
     // public firstValue: FirstLastValue;
     // public lastValue: FirstLastValue;
     public hasData = true;