diff --git a/src/app/module/components/lev0/lev0.component.html b/src/app/module/components/lev0/lev0.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a2f9100f3bcc55ff2689ae9090ca0afe50eab583
--- /dev/null
+++ b/src/app/module/components/lev0/lev0.component.html
@@ -0,0 +1,159 @@
+<div class="container-flex">
+ <div class="header">
+ <div class="header-left">
+ <h4>Level 0 Summary</h4>
+ </div>
+ <div class="header-right">
+ <div class="container-flex-cover">
+ <mat-form-field appearance="outline">
+ <mat-label>From</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <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>
+ </div>
+
+ <div class="scroller">
+ <div *ngFor="let sumAvg of sumOrAvg">
+ <div class="card-b">
+ <div class="header-left">
+ <h5>{{sumAvg.name}}</h5>
+ <h2>{{sumAvg.value.toFixed(1)}}{{" "+unitMapper.get(sumAvg.sensorType)}}</h2>
+ <div class="display-flex"><h4>{{typeMapper.get( sumAvg.type)}}</h4></div>
+ </div>
+ <div class="header-right">
+ <i class="material-icons" style="font-size:80px;color: black">{{iconMapper.get(sumAvg.sensorType)}}</i>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="scroller">
+
+ <div *ngFor="let avgMMax of avgMinMax">
+ <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)':''}">
+ <header>
+ <h5>{{avgMMax.name}}</h5>
+ </header>
+ <main>
+ <div class="min">
+ <h3>Min</h3>
+ <h3>{{avgMMax.min.value.toFixed(2)}}</h3>
+ </div>
+
+ <div class="avg">
+ <h3>Avg</h3>
+ <h3>{{avgMMax.avg.toFixed(2)}}</h3>
+ </div>
+
+ <div class="max">
+ <h3>Min</h3>
+ <h3>{{avgMMax.max.value.toFixed(2)}}</h3>
+ </div>
+
+ </main>
+ </div>
+ </div>
+
+
+ </div>
+
+
+
+</div>
+
+
+<!--
+<div class="container-flex">
+ <div class="header">
+ <div class="header-left">
+ <h4>Level 0 Summary</h4>
+ </div>
+ <div class="header-right">
+ <div class="container-flex-cover">
+ <mat-form-field appearance="outline">
+ <mat-label>From</mat-label>
+ <input matInput [matDatepicker]="picker">
+ <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>
+ </div>
+
+
+ <div class="main-lev0">
+ <div class="header">
+
+ <div class="card-b">
+ <div class="header-left">
+ <h5>Rain Percipatation</h5>
+ <h2>230 mm</h2>
+ <div class="display-flex"><h4>12%</h4> <h6>more than yesterday</h6></div>
+ </div>
+ <div class="header-right">
+ <svg xmlns="http://www.w3.org/2000/svg" width="75.557" height="75.557" viewBox="0 0 75.557 75.557">
+ <path id="Icon_awesome-cloud-rain" data-name="Icon awesome-cloud-rain" d="M61.39,18.889c-.089,0-.162.03-.236.03a11.524,11.524,0,0,0,.236-2.391A11.759,11.759,0,0,0,40.582,8.972,16.472,16.472,0,0,0,9.445,16.528a16.782,16.782,0,0,0,.31,3.129,14.131,14.131,0,0,0,4.412,27.567H61.39a14.167,14.167,0,0,0,0-28.334Zm-48.4,36.332c-1.889,6.552-5.9,8.323-5.9,12.942a7.241,7.241,0,0,0,7.083,7.393,7.241,7.241,0,0,0,7.083-7.393c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,12.986,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,36.6,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,60.21,55.222Z"/>
+ </svg>
+ </div>
+ </div>
+
+ <div class="card-b">
+ <div class="header-left">
+ <h5>Rain Percipatation</h5>
+ <h2>230 mm</h2>
+ <div class="display-flex"><h4>12%</h4> <h6>more than yesterday</h6></div>
+
+ </div>
+ <div class="header-right">
+ <svg xmlns="http://www.w3.org/2000/svg" width="75.557" height="75.557" viewBox="0 0 75.557 75.557">
+ <path id="Icon_awesome-cloud-rain" data-name="Icon awesome-cloud-rain" d="M61.39,18.889c-.089,0-.162.03-.236.03a11.524,11.524,0,0,0,.236-2.391A11.759,11.759,0,0,0,40.582,8.972,16.472,16.472,0,0,0,9.445,16.528a16.782,16.782,0,0,0,.31,3.129,14.131,14.131,0,0,0,4.412,27.567H61.39a14.167,14.167,0,0,0,0-28.334Zm-48.4,36.332c-1.889,6.552-5.9,8.323-5.9,12.942a7.241,7.241,0,0,0,7.083,7.393,7.241,7.241,0,0,0,7.083-7.393c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,12.986,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,36.6,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,60.21,55.222Z"/>
+ </svg>
+ </div>
+ </div>
+
+
+ <div class="card-b">
+ <div class="header-left">
+ <h5>Rain Percipatation</h5>
+ <h2>230 mm</h2>
+ <div class="display-flex"><h4>12%</h4> <h6>more than yesterday</h6></div>
+
+ </div>
+ <div class="header-right">
+ <svg xmlns="http://www.w3.org/2000/svg" width="75.557" height="75.557" viewBox="0 0 75.557 75.557">
+ <path id="Icon_awesome-cloud-rain" data-name="Icon awesome-cloud-rain" d="M61.39,18.889c-.089,0-.162.03-.236.03a11.524,11.524,0,0,0,.236-2.391A11.759,11.759,0,0,0,40.582,8.972,16.472,16.472,0,0,0,9.445,16.528a16.782,16.782,0,0,0,.31,3.129,14.131,14.131,0,0,0,4.412,27.567H61.39a14.167,14.167,0,0,0,0-28.334Zm-48.4,36.332c-1.889,6.552-5.9,8.323-5.9,12.942a7.241,7.241,0,0,0,7.083,7.393,7.241,7.241,0,0,0,7.083-7.393c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,12.986,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,36.6,55.222Zm23.612,0c-1.889,6.552-5.9,8.323-5.9,12.942a7.09,7.09,0,1,0,14.167,0c0-4.634-4.014-6.36-5.9-12.942A1.218,1.218,0,0,0,60.21,55.222Z"/>
+ </svg>
+ </div>
+ </div>
+
+ </div>
+ <div class="main">
+ <app-light-chart></app-light-chart>
+ </div>
+
+ </div>
+
+
+</div>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0" />
+<div class="scroller">
+ <div *ngFor="let sumAvg of sumOrAvg">
+ <div class="card-b">
+ <div class="header-left">
+ <h5>{{sumAvg.name}}</h5>
+ <h2>{{sumAvg.value.toFixed(1)}}{{" "+unitMapper.get(sumAvg.sensorType)}}</h2>
+ <div class="display-flex"><h4>{{typeMapper.get( sumAvg.type)}}</h4></div>
+ </div>
+ <div class="header-right">
+ <i class="material-icons" style="font-size:80px;color: black">{{iconMapper.get(sumAvg.sensorType)}}</i>
+ </div>
+ </div>
+ </div>
+</div>
+-->
diff --git a/src/app/module/components/lev0/lev0.component.scss b/src/app/module/components/lev0/lev0.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3446410989d4a5d478767221dbd955ea14d528a4
--- /dev/null
+++ b/src/app/module/components/lev0/lev0.component.scss
@@ -0,0 +1,223 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
+.display-flex{
+ display: flex;
+ flex-direction: row;
+
+ align-items: flex-end;
+
+}
+
+.container-flex{
+ height: 100vh;
+ width: 100%;
+ background-color: #F5F7FC;
+ display: flex;
+ flex-direction: column;
+}
+
+.container-flex-cover{
+ margin-top: 7vh;
+ margin-right: 5vh;
+}
+
+.header{
+// background-color: black;
+ height: 20vh;
+ width: 100%;
+ display: flex;
+}
+
+.header-left{
+ // background-color: white;
+ flex: 50%;
+
+ h4{
+ margin-top: 10vh;
+ margin-left: 15vh;
+ font-family: 'Poppins', sans-serif;
+ font-weight:600;
+ }
+}
+
+.header-right{
+ // background-color: brown;
+ flex: 50%;
+ display: flex;
+ justify-content: flex-end;
+}
+
+
+.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-left: 30px;
+ border-radius: 6px;
+ display: flex;
+
+ .header-left{
+ display: flex;
+ flex-direction: column;
+ padding-left: 10px;
+ justify-content: space-around;
+
+ 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-image: url("../../../../assets/Icon-awesome-cloud-rain.png");
+ background-repeat: no-repeat;
+ background-size: cover;
+ }
+ }
+
+}
+
+.scroller{
+ margin-top: 20px;
+ background-color: #F5F7FC;
+ line-height: 1;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 38%;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ height: 200px;
+}
+
+.scroller:hover {
+ overflow-x: scroll;
+
+}
+
+
+.card-group{
+
+ height: 150px;
+ width: 400px;
+ background-color: white;
+ margin-left: 30px;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+
+ header{
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ width: 100%;
+ }
+
+ main{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ justify-content: space-around;
+ }
+ .min{
+ height: 90px;
+ width: 70px;
+ border: 1px solid green;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-left: 20px;
+ }
+
+ .max {
+ @extend .min;
+ border: 1px solid red;
+ }
+
+ .avg{
+ @extend .min;
+ border: 1px 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;
+ }
+}
diff --git a/src/app/module/components/lev0/lev0.component.spec.ts b/src/app/module/components/lev0/lev0.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cfe4f396df181a7250e54751c006f177846a428a
--- /dev/null
+++ b/src/app/module/components/lev0/lev0.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Lev0Component } from './lev0.component';
+
+describe('Lev0Component', () => {
+ let component: Lev0Component;
+ let fixture: ComponentFixture<Lev0Component>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ Lev0Component ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(Lev0Component);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/lev0/lev0.component.ts b/src/app/module/components/lev0/lev0.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5edae03492d4f567f30de5ee6f561d0d978dc169
--- /dev/null
+++ b/src/app/module/components/lev0/lev0.component.ts
@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import {ApiService} from "../../../shared/api.service";
+import {Lv1} from "../../../core/service/level1/Lv1";
+import {AvgMinMax} from "../../../core/service/level1/AvgMinMax";
+import {SumOrAvg} from "../../../core/service/level1/SumOrAvg";
+
+@Component({
+ selector: 'app-lev0',
+ templateUrl: './lev0.component.html',
+ styleUrls: ['./lev0.component.scss']
+})
+export class Lev0Component {
+ heros: Hero[] = [
+ { id: 12, name: 'Dr. Nice' },
+ { id: 13, name: 'Bombasto' },
+ { id: 14, name: 'Celeritas' },
+ { id: 15, name: 'Magneta' },
+ { id: 16, name: 'RubberMan' },
+ { id: 17, name: 'Dynama' },
+ { id: 18, name: 'Dr. IQ' },
+ { id: 19, name: 'Magma' },
+ { id: 20, name: 'Tornado' }
+ ];
+ constructor(private api:ApiService) {
+ }
+ lv1:Lv1|undefined;
+ avgMinMax:AvgMinMax[]=[]
+ sumOrAvg:SumOrAvg[]=[]
+
+ iconMapper = new Map<String, String>([
+ ["SOLAR_RADIATION", "sunny"],
+ ["SOIL_MOISTURE", "water"]
+ ]);
+
+ unitMapper = new Map<String, String>([
+ ["SOLAR_RADIATION", "w/m2"],
+ ["SOIL_MOISTURE", "vwc"]
+ ]);
+
+ typeMapper = new Map<String, String>([
+ ["AVG", "Durchschnitt"],
+ ["SUM", "Totale Summe"]
+ ]);
+
+
+ ngOnInit(){
+ this.api.get("http://localhost:8080/api/v1/server/get/lvl1/IBK?from=15.04.2022 00:00:00&to=15.04.2022 23:30:00").subscribe(
+ res=>{
+ this.lv1=res
+ console.log(res)
+ console.log("avgMinMax",this.lv1?.avgMinMax[0].min.value)
+ // @ts-ignore
+ this.avgMinMax=this.lv1.avgMinMax
+ console.log("sumOrAvg",this.lv1?.sumOrAvg[0].type)
+ // @ts-ignore
+ this.sumOrAvg=this.lv1.sumOrAvg
+ }
+ )
+ }
+}
+export interface Hero {
+ id: number;
+ name: string;
+}