Add icons to pages and tables

src/app/app.component.ts

@@ -29,7 +29,7 @@ export class AppComponent {
       children: [
         {
           displayName: 'Lastenräder',
-          iconName: 'group',
+          iconName: 'directions_bike',
           route: 'table/bikes'
         },
         {
@@ -39,7 +39,7 @@ export class AppComponent {
         },
         {
           displayName: 'Standorte',
-          iconName: 'group',
+          iconName: 'place',
           route: 'table/lendingStations'
         }]
       }];

src/app/components/data-page/data-page.component.html

@@ -8,8 +8,9 @@
 </div>
 
 <div class="data-page-wrapper" *ngIf="data">
-  <h1>
+  <h1 class="headline">
     {{ data[headlineDataPath] }}
+    <mat-icon>{{headlineIconName}}</mat-icon>
   </h1>
   <ng-container *ngFor="let object of propertiesInfo">
     <mat-card class="inline-card" *ngIf="object.type === 'Group'">

src/app/components/data-page/data-page.component.scss

@@ -29,3 +29,11 @@
   top: 2em;
   right: 2em;
 }
+
+.headline {
+  display: flex;
+  align-items: center;
+  .mat-icon {
+    margin-left: 8px;
+  }
+}

src/app/components/data-page/data-page.component.ts

@@ -47,9 +47,12 @@ export class DataPageComponent implements OnInit, OnDestroy {
   @Input()
   dataService: any;
 
+  /** specifies which property should be shown in the headline */
   @Input()
   headlineDataPath: string;
   @Input()
+  headlineIconName: string = "help_outline";
+  @Input()
   pageDataGQLType: string;
   @Input()
   pageDataGQLUpdateInputType: string;

src/app/components/table/table.component.html

@@ -1,6 +1,7 @@
 <div class="table-page-wrapper">
   <h1 class="headline" *ngIf="headline">
     {{ headline }}
+    <mat-icon>{{headlineIconName}}</mat-icon>
   </h1>
   <div class="table-control">
     <!--<button

src/app/components/table/table.component.scss

@@ -3,7 +3,13 @@
   flex-direction: column;
   height: 100%;
   .headline {
+    display: flex;
+    align-items: center;
     margin: 0 0.5em;
+    margin-top: 0.25em;
+    .mat-icon {
+      margin-left: 8px;
+    }
   }
   .table-control {
     margin: 0.5em;

src/app/components/table/table.component.ts

@@ -29,8 +29,12 @@ import { SelectObjectDialogComponent } from '../tableComponents/select-object-di
   styleUrls: ['./table.component.scss'],
 })
 export class TableComponent implements AfterViewInit {
+  /** specifies the headline */
   @Input()
   headline: string = null;
+  @Input()
+  headlineIconName: string = "help_outline";
+  
   /** this array defines the columns and translations of the table and the order they are displayed  */
   @Input()
   columnInfo: {

src/app/pages/dataPages/bike/bike.component.html

@@ -2,6 +2,7 @@
   [dataService]="dataService"
   [propertiesInfo]="propertiesInfo"
   [headlineDataPath]="headlineDataPath"
+  [headlineIconName]="headlineIconName"
   [pageDataGQLType]="pageDataGQLType"
   [pageDataGQLUpdateInputType]="pageDataGQLUpdateInputType"
   (lockEvent)="lock($event)"

src/app/pages/dataPages/bike/bike.component.ts

@@ -236,6 +236,7 @@ export class BikeComponent implements OnInit {
   ];
 
   headlineDataPath = 'name';
+  headlineIconName = 'directions_bike'
   pageDataGQLType: string = 'CargoBike';
   pageDataGQLUpdateInputType: string = 'CargoBikeUpdateInput';
 

src/app/pages/dataPages/lending-station/lending-station.component.html

@@ -2,6 +2,7 @@
   [dataService]="dataService"
   [propertiesInfo]="propertiesInfo"
   [headlineDataPath]="headlineDataPath"
+  [headlineIconName]="headlineIconName"
   [pageDataGQLType]="pageDataGQLType"
   [pageDataGQLUpdateInputType]="pageDataGQLUpdateInputType"
   (lockEvent)="lock($event)"

src/app/pages/dataPages/lending-station/lending-station.component.ts

@@ -28,9 +28,7 @@ export class LendingStationComponent implements OnInit {
     {
       type: 'Group',
       title: 'Öffnungszeiten',
-      properties: [
-        
-      ],
+      properties: [],
     },
     {
       type: 'Group',
@@ -54,6 +52,7 @@ export class LendingStationComponent implements OnInit {
         },
         { dataPath: 'contactInformationIntern.email', translation: 'Email' },
         { dataPath: 'contactInformationIntern.email2', translation: 'Email 2' },
+        { dataPath: 'contactInformationIntern.note', translation: 'Anmerkung' },
       ],
     },
     {
@@ -78,6 +77,7 @@ export class LendingStationComponent implements OnInit {
         },
         { dataPath: 'contactInformationExtern.email', translation: 'Email' },
         { dataPath: 'contactInformationExtern.email2', translation: 'Email 2' },
+        { dataPath: 'contactInformationExtern.note', translation: 'Anmerkung' },
       ],
     },
     /*
@@ -118,6 +118,7 @@ export class LendingStationComponent implements OnInit {
   ];
 
   headlineDataPath = 'name';
+  headlineIconName = 'location_on';
   pageDataGQLType: string = 'LendingStation';
   pageDataGQLUpdateInputType: string = 'LendingStationUpdateInput';
 

src/app/pages/tables/bikes/bikes.component.html

@@ -1,5 +1,6 @@
 <app-table
   [headline]="headline"
+  [headlineIconName]="headlineIconName"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

src/app/pages/tables/bikes/bikes.component.ts

@@ -111,7 +111,13 @@ export class BikesComponent implements OnInit {
       translation: '',
     },
     { dataPath: 'lendingStation.id', translation: '' },
-    { dataPath: 'lendingStation.name', translation: '' },
+    {
+      dataPath: 'lendingStation.name',
+      translation: '',
+      link: (row: any) => {
+        return '/lendingStation/' + row['lendingStation.id'];
+      },
+    },
     { dataPath: 'lendingStation.address.number', translation: '' },
     { dataPath: 'lendingStation.address.street', translation: '' },
     { dataPath: 'lendingStation.address.zip', translation: '' },
@@ -124,6 +130,7 @@ export class BikesComponent implements OnInit {
   tableDataGQLUpdateInputType: string = 'CargoBikeUpdateInput';
 
   headline = 'Lastenräder';
+  headlineIconName = 'directions_bike';
 
   loadingRowIds: string[] = [];
   constructor(private bikesService: BikesService) {}

src/app/pages/tables/engagement-types/engagement-types.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EngagementTypesComponent } from './engagement-types.component';
-
-describe('EngagementTypesComponent', () => {
-  let component: EngagementTypesComponent;
-  let fixture: ComponentFixture<EngagementTypesComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EngagementTypesComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EngagementTypesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/tables/equipment-types/equipment-types.component.html

@@ -1,5 +1,6 @@
 <app-table
   [headline]="headline"
+  [headlineIconName]="headlineIconName"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

src/app/pages/tables/equipment-types/equipment-types.component.ts

@@ -8,6 +8,7 @@ import {EquipmentTypeService} from 'src/app/services/equipmentType.service'
 })
 export class EquipmentTypesComponent implements OnInit {
   headline = 'Equipmenttypen';
+  headlineIconName = 'toys';
 
   columnInfo = [
     { dataPath: 'id', translation: 'ID', readonly: true },

src/app/pages/tables/equipment/equipment.component.html

@@ -1,5 +1,6 @@
 <app-table
   [headline]="headline"
+  [headlineIconName]="headlineIconName"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

src/app/pages/tables/equipment/equipment.component.ts

@@ -8,6 +8,7 @@ import { EquipmentService } from 'src/app/services/equipment.service';
 })
 export class EquipmentComponent implements OnInit {
   headline = 'Equipment';
+  headlineIconName = 'battery_full';
 
   columnInfo = [
     { dataPath: 'id', translation: 'ID', readonly: true },

src/app/pages/tables/lending-stations/lending-stations.component.html

@@ -1,5 +1,6 @@
 <app-table
   [headline]="headline"
+  [headlineIconName]="headlineIconName"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

src/app/pages/tables/lending-stations/lending-stations.component.ts

@@ -68,6 +68,7 @@ export class LendingStationsComponent implements OnInit {
   tableDataGQLUpdateInputType: string = 'LendingStationUpdateInput';
 
   headline = 'Standorte';
+  headlineIconName = 'location_on';
 
   loadingRowIds: string[] = [];
   constructor(private lendingStationsService: LendingStationsService) {}

src/app/pages/tables/time-frames/time-frames.component.html

@@ -1,5 +1,6 @@
 <app-table
   [headline]="headline"
+  [headlineIconName]="headlineIconName"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

src/app/pages/tables/time-frames/time-frames.component.ts

@@ -9,6 +9,7 @@ import { TimeFrameService } from 'src/app/services/timeFrame.service';
 })
 export class TimeFramesComponent implements OnInit {
   headline = 'Zeitscheiben';
+  headlineIconName = 'access_time';
 
   columnInfo = [
     {