-finishing last refactoring

-starting working on marking error in pro view

src/app/module/pages/home/summary/list-icon/list-icon.component.html

+<main *ngIf="isGrid">
+  <div class="w-full flex flex-row items-end justify-start flex-wrap">
+    <!--Data of Sum or Average -->
+    <div *ngFor="let sumAvg of sumOrAvg">
+      <div class="card-b">
+        <div class="header-left">
+          <h5 class="font-bold text-4sm ">{{sumAvg.name}}</h5>
+          <h2 *ngIf="sumAvg.measurementType?.toString()=='SOLAR_RADIATION' ">
+            {{sumAvg.value?.toFixed(3)}}{{" "}}w/m<sup>2</sup>
+          </h2>
+          <h2 *ngIf="sumAvg.measurementType?.toString()!='SOLAR_RADIATION' ">
+            {{sumAvg.value?.toFixed(3)}}{{" " + mapper.unitMapper.get(sumAvg.measurementType + "")}}
+          </h2>
+          <div><h4>{{mapper.typeMapper.get(sumAvg.type + "")}}</h4></div>
+        </div>
+        <div class="header-right flex-col">
+          <i class="material-icons"
+             style="font-size:80px;color: black">{{mapper.iconMapper.get(sumAvg.measurementType + "")}}</i>
+        </div>
+
+      </div>
+    </div>
+
+
+  </div>
+
+  <!--Data of Min Max Avg -->
+  <div class="w-full flex flex-row items-end justify-start flex-wrap">
+    <div *ngFor="let avgMMax of avgMinMax;let iX=index;">
+      <div class="card-group"
+           [ngStyle]="{'box-shadow':avgMMax.isSensorGroup  ? '15px 15px rgb(173,216,230,0.4) ,30px 30px rgb(173,216,230,0.2)':'rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px'}">
+        <header class="justify-content-between flex">
+          <h5 class="font-bold text-4sm">{{avgMMax.name}}</h5>
+          <h3 *ngIf="avgMMax.isSensorGroup" class>Sensorgruppe</h3>
+        </header>
+        <main>
+          <div class="min">
+            <h3>Min</h3>
+            <h3 class="flex">{{avgMMax.min?.value?.toFixed(2)}}
+              <p [innerHTML]="mapper.unitHashMapper.get(avgMMax.measurementType+'')"></p>
+            </h3>
+
+
+          </div>
+
+          <div class="avg">
+            <h3>Avg</h3>
+            <h3 class="flex">{{avgMMax.avg?.toFixed(2)}}
+              <p [innerHTML]="mapper.unitHashMapper.get(avgMMax.measurementType+'')"></p>
+            </h3>
+          </div>
+
+          <div class="max">
+            <h3>Max</h3>
+            <h3 class="flex">{{avgMMax.max?.value?.toFixed(2)}}
+              <p [innerHTML]="mapper.unitHashMapper.get(avgMMax.measurementType+'')"></p>
+            </h3>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+
+  <!--Data of Min Max Avg -->
+  <div class="w-full flex flex-row  justify-start flex-wrap ">
+    <div class="flex-col p-2 m-4 bg-white justify-center items-center rounded"
+         *ngFor="let dent of dentrometerDailyValue"
+         [ngStyle]="{'box-shadow':dent.isSensorGroup  ? '15px 15px rgb(173,216,230,0.4) ,30px 30px rgb(173,216,230,0.2)':'rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px'}">
+      <div class="flex pt-2 justify-content-between pl-5 pr-5">
+        <h1 class="flex font-bold text-4sm mb-6 justify-start">{{dent.name}}</h1>
+        <h3 *ngIf="dent.isSensorGroup" class="isGroup-text">Sensorgruppe</h3>
+      </div>
+
+      <div class="mx-8 flex justify-between">
+
+        <div class="flex-col content-center items-center justify-center">
+          <div class="flex mx-2  flex items-center border-b-2 border-black  ">
+            <i class="material-icons text-blue-500 text-2xl mr-2">unfold_less</i>
+            <h5 class="text-gray-500 text-xs">Maximum daily shrinkage</h5>
+          </div>
+          <div class="flex items-end justify-center">
+            <h1 class=" flex justify-center text-3xl font-bold">{{dent.mds?.value?.toFixed(2)}}</h1>
+            <h3 class="mb-1 ml-1 text-slate-400">mm </h3>
+          </div>
+        </div>
+
+        <div class="flex-col">
+          <div class="flex mx-2  flex items-center border-b-2 border-black ">
+            <i class="material-icons text-yellow-500 text-2xl mr-2">vertical_align_top</i>
+            <h5 class="text-gray-500 text-xs">Radius increment</h5>
+          </div>
+          <div class="flex items-end justify-center">
+            <h1 class=" flex justify-center text-3xl font-bold">{{dent.deltaR?.value?.toFixed(2)}}</h1>
+            <h3 class="mb-1 ml-1 text-slate-400">mm </h3>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</main>
+
+<main *ngIf="!isGrid" class="grid mt-2 gap-y-14 gap-x-8 grid-cols-2 grid-auto-rows-min">
+
+  <section class="col-span-2  flex w-full min-h-min ">
+
+
+    <div class="min-h-full w-10 flex justify-end items-center">
+      <button (click)="scrollLeft()">
+        <mat-icon>arrow_back_ios</mat-icon>
+      </button>
+    </div>
+
+    <div class="flex flex-col w-full bg-white/30 shadow-xl ease-in duration-300
+                                shadow-blue-300/50 hover:shadow-blue-400/50 rounded-xl">
+      <div class="flex items-center text-sm text-slate-400 py-2 pl-8 border-gray-200 border-b-[1px] ">
+        Summe und Durchschnitts Werte eines Sensor/
+        <div class="flex  rounded bg-gray-200">Gruppe</div>
+        ...
+      </div>
+      <div #scrollContainer class="flex  w-full overflow-x-auto scrollbar-hide items-center
+                      [&>*]:mx-4 [&>*]:flex-shrink-0
+                      [&>*]:rounded ">
+        <div class="h-full  flex items-center my-4" *ngFor="let sumAvg of sumOrAvg">
+          <div [ngClass]="{'bg-gray-200 rounded-xl':sumAvg.isSensorGroup}"
+               class="flex-col flex items-center justify-center  [&>*]:m-1">
+            <h3 class="text-green-400 text-xs font-bold">
+              {{mapper.typeMapper.get(sumAvg.type + "")}}
+            </h3>
+            <h1 class="text-xs font-bold pb-1">{{sumAvg.name}}</h1>
+            <mat-icon>{{mapper.iconMapper.get(sumAvg.measurementType + "")}}</mat-icon>
+            <div class="display-flex pt-1">
+              <h1 class="text-xm font-bold mr-0.5"> {{sumAvg.value?.toFixed(3)}}{{" "}}</h1>
+              <h3 class="text-xs font-bold" *ngIf="sumAvg.measurementType?.toString()=='SOLAR_RADIATION' ">
+                w/m<sup>2</sup></h3>
+              <h3 class="text-xs font-bold" *ngIf="sumAvg.measurementType?.toString()!='SOLAR_RADIATION' ">
+                {{" " + mapper.unitMapper.get(sumAvg.measurementType + "")}}
+              </h3>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+    <div class="min-h-full w-10 flex justify-start items-center">
+      <button (click)="scrollRight()">
+        <mat-icon>arrow_forward_ios</mat-icon>
+      </button>
+    </div>
+  </section>
+
+  <section class="col-span-1  w-full flex flex-col  pl-10 ">
+    <div class="-m-1.5 overflow-x-auto bg-white/30 rounded-3xl
+                shadow-xl shadow-blue-200/50 hover:shadow-blue-400/50 ease-in duration-300">
+      <div class="p-1.5 min-w-full inline-block align-middle">
+        <div class="overflow-hidden">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead>
+            <tr>
+              <td colspan="3" class="text-sm text-slate-400 p-2">Minimum, Maximum und Mittelwert eines
+                Sensor/Gruppe...
+              </td>
+            </tr>
+
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700" *ngFor="let avgMMax of avgMinMax">
+            <tr [ngClass]="{'bg-gray-200':avgMMax.isSensorGroup}">
+              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+                <h1 class="text-xs font-bold">{{avgMMax.name}}</h1>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
+                <i class="material-icons" style="color: black">{{mapper.iconMapper.get(avgMMax.measurementType + "")}}</i>
+              </td>
+
+              <td class="px-6 py-4 w-full whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
+                <app-slider [min]="avgMMax.min?.value" [mType]="avgMMax?.measurementType+''" [max]="avgMMax.max?.value"
+                            [avg]="avgMMax.avg" class="w-full -translate-y-2"></app-slider>
+              </td>
+            </tr>
+
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="col-span-1  w-full flex flex-col w-1/3  pr-10">
+    <div class="-m-1.5 overflow-x-auto scrollbar-hide rounded-3xl  bg-white/30
+      shadow-xl shadow-indigo-200/50 hover:shadow-indigo-400/50 ease-in duration-300">
+      <div class="p-1.5 min-w-full inline-block align-middle">
+        <div class="overflow-hidden">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead>
+            <tr>
+              <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <div class="text-xs text-slate-400">
+                  DendrometerSensor/Gruppe...
+                </div>
+              </th>
+              <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <div class="flex mx-2  flex items-center border-black  ">
+                  <i class="material-icons text-blue-500 text-2xl mr-2">unfold_less</i>
+                  <h5 class="text-gray-500 text-xs">Maximum daily shrinkage</h5>
+                </div>
+              </th>
+              <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                <div class="flex mx-2  flex items-center border-black ">
+                  <i class="material-icons text-yellow-500 text-2xl mr-2">vertical_align_top</i>
+                  <h5 class="text-gray-500 text-xs">Radius increment</h5>
+                </div>
+              </th>
+            </tr>
+
+
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700" *ngFor="let dent of dentrometerDailyValue">
+
+            <tr [ngClass]="{'bg-gray-200':dent.isSensorGroup}">
+              <td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+                <h1 class="flex font-bold text-4sm  justify-center">{{dent.name}}&#32;🌲</h1>
+              </td>
+              <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
+                <div class="flex items-end justify-center">
+                  <h1 class=" flex justify-center text-xl font-bold">{{dent.mds?.value?.toFixed(2)}}</h1>
+                  <h3 class="mb-1 ml-1 text-slate-400">mm </h3>
+                </div>
+              </td>
+              <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
+                <div class="flex items-end justify-center">
+                  <h1 class=" flex justify-center text-xl font-bold">{{dent.deltaR?.value?.toFixed(2)}}</h1>
+                  <h3 class="mb-1 ml-1 text-slate-400">mm </h3>
+                </div>
+              </td>
+            </tr>
+
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+
+```

src/app/module/pages/home/summary/list-icon/list-icon.component.scss

+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
+.display-flex{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  flex-wrap: wrap;
+
+}
+
+.display-flex-start{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: start;
+  flex-wrap: wrap;
+
+}
+
+.display-flex-center{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  flex-wrap: wrap;
+
+}
+
+app-Cjs-timline {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.container-flex{
+
+  width: 100%;
+  background-color: #F5F7FC;
+  display: flex;
+  flex-direction: column;
+}
+
+.container-flex-cover{
+  margin-top: 7vh;
+  margin-right: 5vh;
+}
+
+.header{
+//  background-color: black;
+  justify-content: center;
+  min-height: 100px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 30px;
+}
+
+.header-left{
+// background-color: white;
+  flex: 50%;
+h4{
+  margin-top: 10vh;
+  margin-left: 2vh;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+}
+}
+
+.header-right{
+// background-color: brown;
+  padding-right: 30px;
+  flex: 50%;
+  display: flex;
+  justify-content: flex-end;
+
+}
+@media (max-width: 800px) {
+  .header{
+  .header-left{
+    display: flex;
+    justify-content: center;
+  }
+  .header-right{
+    display: flex;
+    justify-content: center;
+  }
+}
+}
+
+.main-lev0{
+  display: flex;
+  height:80vh;
+  width: 100%;
+  flex-direction: column;
+// background-color: #f1f1f1;
+.main{
+  height: 100vh;
+  width: 100%;
+}
+}
+
+.card-b{
+  height: 150px;
+  width: 400px;
+  background-color: white;
+  margin: 30px;
+  border-radius: 6px;
+  display: flex;
+  flex: 0 0  400px;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+
+
+.header-left{
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  justify-content: space-around;
+  overflow: hidden;
+h5{
+//  font-family: 'Poppins', sans-serif;
+//   font-weight:400;
+//   font-size: 16px;
+//   color: #7E84A3;
+}
+
+h2{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 28px;
+  color: black;
+
+}
+
+h4{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color: #6ED29D;
+
+
+}
+h6{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 12px;
+  color: #7E84A3;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+}
+
+.header-right{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+.img{
+  height: 50px;
+  width: 50px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+}
+
+}
+
+.isGroup-text{
+  color:rgb(173,216,230);
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+}
+
+.card-group{
+
+
+  width: 400px;
+  background-color:white;
+  margin: 30px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+
+header{
+//no margin justify-content: center;
+  padding-top: 20px;
+  display: flex;
+  padding-left: 20px;
+  padding-right: 20px;
+  justify-content: start;
+  align-content: center;
+  width: 100%;
+h3{
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color:rgb(173,216,230);
+}
+}
+
+
+main{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+
+
+
+.light-chart{
+  display: flex;
+  height: 300px;
+  width: 100%;
+  justify-content: center;
+}
+.min{
+  height: 90px;
+  width: 90px;
+  border: 2px solid green;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.max {
+  @extend .min;
+  border: 2px solid #ff0000;
+}
+
+.avg{
+  @extend .min;
+  border: 2px solid black;
+}
+
+h5{
+//  font-family: 'Poppins', sans-serif;
+//   font-weight:400;
+//   font-size: 16px;
+//   color: #7E84A3;
+}
+h2{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 28px;
+  color: black;
+
+}
+
+h4{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color: #6ED29D;
+
+
+}
+h6{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 12px;
+  color: #7E84A3;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+}
+
+.card-dendrometer{
+  height: 700px;
+  width: 1100px;
+  margin: 50px;
+  padding-top: 50px;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  justify-content: center;
+  align-items: center;
+
+.headers{
+
+  width: 70%;
+  display: flex;
+  justify-content: space-around;
+.element{
+mat-icon{
+  margin-bottom: 10px;
+  margin-right: 5px;
+}
+display: flex;
+justify-content: center;
+align-items: center;
+flex-basis: 33.33%;
+border-bottom: 1px solid black;
+margin-right: 10px;
+margin-left: 10px;
+}
+}
+h5{
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 16px;
+  color: #7E84A3;
+}
+h2{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 28px;
+  color: black;
+
+}
+
+h4{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color: #6ED29D;
+
+
+}
+h6{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 12px;
+  color: #7E84A3;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+}

src/app/module/pages/home/summary/list-icon/list-icon.component.spec.ts

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

src/app/module/pages/home/summary/list-icon/list-icon.component.ts

+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {
+  AvgMinMax,
+  DendrometerDailyValue,
+  LevelOneResponse,
+  SumOrAvg
+} from "../../../../../../../projects/generated-api/src";
+import {MapperService} from "../../../../../shared/service/mapper.service";
+
+@Component({
+  selector: 'app-list-icon',
+  templateUrl: './list-icon.component.html',
+  styleUrls: ['./list-icon.component.scss']
+})
+export class ListIconComponent {
+
+  @Input() isGrid:boolean=true
+  @Input()  dentrometerDailyValue:DendrometerDailyValue[]=[]
+  @Input() avgMinMax:AvgMinMax[]=[]
+  @Input() sumOrAvg:SumOrAvg[]=[]
+  // @ts-ignore
+  @ViewChild('scrollContainer') scrollContainer: ElementRef ;
+
+  constructor(public mapper: MapperService) {}
+
+  scrollLeft() {
+    this.scrollContainer.nativeElement.scrollLeft -= 100; // Adjust the scrolling speed as needed
+  }
+
+  scrollRight() {
+    this.scrollContainer.nativeElement.scrollLeft += 100; // Adjust the scrolling speed as needed
+  }
+}

src/app/module/pages/home/summary/summary.component.html

+
+<div class="w-full bg-gray-100 flex flex-col">
+  <!--Input field -->
+  <div class="flex min-h-min w-full  ">
+    <div class="flex min-h-full w-1/2  justify-start pl-8 pt-3">
+      <div class="flex items-center pl-2 rounded h-14 border border-indigo-600">
+        Tages Sensor Werte
+        <button (click)="isGrid=true"  type="button" class="ml-8 h-full px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-indigo-200 font-semibold text-indigo-500
+                                                                      hover:text-white hover:bg-indigo-500 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
+          <mat-icon >grid_view</mat-icon>
+        </button>
+        <button (click)="isGrid=false" type="button" class="h-full px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-indigo-200 font-semibold text-indigo-500
+                                                                      hover:text-white hover:bg-indigo-500 hover:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">
+          <mat-icon>table_rows</mat-icon>
+        </button>
+      </div>
+    </div>
+
+    <div class="flex justify-center w-1/2 pt-3 items-center">
+
+      <mat-form-field appearance="outline" class="mx-5">
+        <mat-select placeholder="Station" [formControl]="stationControl" >
+          <mat-option *ngFor="let topping of availableStation" [value]="topping" >{{topping}} </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="mr-2">
+        <mat-label>Wähle ein Datum</mat-label>
+        <input matInput [matDatepicker]="picker"  [formControl]="dateControl">
+        <mat-hint>MM/DD/YYYY</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+    </div>
+  </div>
+
+  <app-list-icon [dentrometerDailyValue]="dentrometerDailyValue"
+                 [avgMinMax]="avgMinMax"
+                 [sumOrAvg]="sumOrAvg"
+                 [isGrid]="isGrid"></app-list-icon>
+</div>

src/app/module/pages/home/summary/summary.component.spec.ts

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

src/app/module/pages/home/summary/summary.component.ts

+import { Component } from '@angular/core';
+import {
+  AvgMinMax,
+  DendrometerDailyValue,
+  LevelOneResponse, ServerControllerService, StationControllerService,
+  SumOrAvg
+} from "../../../../../../projects/generated-api/src";
+import {FormControl} from "@angular/forms";
+import {DatePipe} from "@angular/common";
+import {ApiService} from "../../../../shared/api.service";
+import {Router} from "@angular/router";
+//import {SharedService} from "../../../../shared/shared-service.service";
+
+@Component({
+  selector: 'app-summary',
+  templateUrl: './summary.component.html',
+  styleUrls: ['./summary.component.css']
+})
+export class SummaryComponent {
+
+  isGrid:boolean=true
+
+  //Input Controls
+  dateControl = new FormControl(new Date());
+  stationControl = new FormControl();
+  availableStation: string[] = [''];
+
+  //Data Objects to Store API Responses
+  levelOne!:LevelOneResponse
+  avgMinMax:AvgMinMax[]=[]
+  sumOrAvg:SumOrAvg[]=[]
+  dentrometerDailyValue:DendrometerDailyValue[]=[]
+
+
+  constructor(private api:ApiService,
+              private stationControllerService: StationControllerService) {}
+
+  ngOnInit(){
+    this.dateControl.valueChanges.subscribe(date => {this.reload()});
+
+    this.api.get("http://localhost:8080/api/v1/server/get/lvl1/ibk_s_id?date=15-04-2022").subscribe(
+      res=>{
+        this.levelOne=res
+        // @ts-ignore
+        this.avgMinMax=this.levelOne.avgMinMax
+        // @ts-ignore
+        this.sumOrAvg=this.levelOne.sumOrAvg
+        // @ts-ignore
+        this.dentrometerDailyValue=this.levelOne.dendrometerDailyValues
+      }
+    )
+    //get all station from server
+    this.stationControllerService.getAll().subscribe(x => {
+      console.log('available station', x);
+      this.availableStation=x.map(x=>x.id!==undefined ?x.id:"No station avalable")
+    });
+    //subscribe to station control
+    this.stationControl.valueChanges.subscribe(x=>{
+      console.log(x)
+      this.reload()
+    })
+  }
+
+
+  reload() {
+    console.log(this.dateControl.value)
+    let datePipe = new DatePipe('en-US');
+    let dateStart = datePipe.transform(this.dateControl.value, 'dd-MM-yyyy');
+    console.log(dateStart)
+    let stationId = this.stationControl.value;
+    this.api.get("http://localhost:8080/api/v1/server/get/lvl1/"+stationId+"?date="+dateStart).subscribe(
+      res=>{
+        this.levelOne=res
+        // @ts-ignore
+        this.avgMinMax=this.levelOne.avgMinMax
+        // @ts-ignore
+        this.sumOrAvg=this.levelOne.sumOrAvg
+        // @ts-ignore
+        this.dentrometerDailyValue=this.levelOne.dendrometerDailyValues
+      }
+    )
+  }
+
+}

src/app/shared/service/mapper.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MapperService } from './mapper.service';
+
+describe('MapperService', () => {
+  let service: MapperService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MapperService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/service/mapper.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MapperService {
+
+  iconMapper = new Map<String, String>([
+    ["SOLAR_RADIATION", "sunny"],
+    ["SOIL_MOISTURE", "water"],
+    ["","unknown"]
+  ]);
+
+  unitMapper = new Map<String, String>([
+    ["SOLAR_RADIATION", "W/m2"],
+    ["SOIL_MOISTURE", "vwc"],
+    ["","unknown"]
+  ]);
+
+  unitHashMapper = new Map<String, String>([
+    ["SOIL_TEMPERATURE", "&#176;"],
+    ["SOIL_MOISTURE", "&#37;"],
+    ["","unknown"]
+  ]);
+
+  typeMapper = new Map<String, String>([
+    ["AVG", "Durchschnitt"],
+    ["SUM", "Totale Summe"],
+    ["","unknown"]
+  ]);
+
+  constructor() { }
+}