From 999e5a83218ddde0bb48e615f996b75d2c40554d Mon Sep 17 00:00:00 2001
From: csba1652 <Bilal.Hassan@student.uibk.ac.at>
Date: Tue, 23 May 2023 19:46:35 +0100
Subject: [PATCH] -finishing last refactoring -starting working on marking
error in pro view
---
.../list-icon/list-icon.component.html | 245 +++++++++++++
.../list-icon/list-icon.component.scss | 347 ++++++++++++++++++
.../list-icon/list-icon.component.spec.ts | 23 ++
.../summary/list-icon/list-icon.component.ts | 33 ++
.../pages/home/summary/summary.component.css | 0
.../pages/home/summary/summary.component.html | 41 +++
.../home/summary/summary.component.spec.ts | 23 ++
.../pages/home/summary/summary.component.ts | 84 +++++
src/app/shared/service/mapper.service.spec.ts | 16 +
src/app/shared/service/mapper.service.ts | 33 ++
10 files changed, 845 insertions(+)
create mode 100644 src/app/module/pages/home/summary/list-icon/list-icon.component.html
create mode 100644 src/app/module/pages/home/summary/list-icon/list-icon.component.scss
create mode 100644 src/app/module/pages/home/summary/list-icon/list-icon.component.spec.ts
create mode 100644 src/app/module/pages/home/summary/list-icon/list-icon.component.ts
create mode 100644 src/app/module/pages/home/summary/summary.component.css
create mode 100644 src/app/module/pages/home/summary/summary.component.html
create mode 100644 src/app/module/pages/home/summary/summary.component.spec.ts
create mode 100644 src/app/module/pages/home/summary/summary.component.ts
create mode 100644 src/app/shared/service/mapper.service.spec.ts
create mode 100644 src/app/shared/service/mapper.service.ts
diff --git a/src/app/module/pages/home/summary/list-icon/list-icon.component.html b/src/app/module/pages/home/summary/list-icon/list-icon.component.html
new file mode 100644
index 0000000..1fe7948
--- /dev/null
+++ b/src/app/module/pages/home/summary/list-icon/list-icon.component.html
@@ -0,0 +1,245 @@
+<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}} 🌲</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>
+
+```
diff --git a/src/app/module/pages/home/summary/list-icon/list-icon.component.scss b/src/app/module/pages/home/summary/list-icon/list-icon.component.scss
new file mode 100644
index 0000000..1464a34
--- /dev/null
+++ b/src/app/module/pages/home/summary/list-icon/list-icon.component.scss
@@ -0,0 +1,347 @@
+@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;
+}
+}
diff --git a/src/app/module/pages/home/summary/list-icon/list-icon.component.spec.ts b/src/app/module/pages/home/summary/list-icon/list-icon.component.spec.ts
new file mode 100644
index 0000000..e77b615
--- /dev/null
+++ b/src/app/module/pages/home/summary/list-icon/list-icon.component.spec.ts
@@ -0,0 +1,23 @@
+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();
+ });
+});
diff --git a/src/app/module/pages/home/summary/list-icon/list-icon.component.ts b/src/app/module/pages/home/summary/list-icon/list-icon.component.ts
new file mode 100644
index 0000000..602b55a
--- /dev/null
+++ b/src/app/module/pages/home/summary/list-icon/list-icon.component.ts
@@ -0,0 +1,33 @@
+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
+ }
+}
diff --git a/src/app/module/pages/home/summary/summary.component.css b/src/app/module/pages/home/summary/summary.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/module/pages/home/summary/summary.component.html b/src/app/module/pages/home/summary/summary.component.html
new file mode 100644
index 0000000..52de93a
--- /dev/null
+++ b/src/app/module/pages/home/summary/summary.component.html
@@ -0,0 +1,41 @@
+
+<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>
diff --git a/src/app/module/pages/home/summary/summary.component.spec.ts b/src/app/module/pages/home/summary/summary.component.spec.ts
new file mode 100644
index 0000000..0ce9d33
--- /dev/null
+++ b/src/app/module/pages/home/summary/summary.component.spec.ts
@@ -0,0 +1,23 @@
+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();
+ });
+});
diff --git a/src/app/module/pages/home/summary/summary.component.ts b/src/app/module/pages/home/summary/summary.component.ts
new file mode 100644
index 0000000..78fc0ef
--- /dev/null
+++ b/src/app/module/pages/home/summary/summary.component.ts
@@ -0,0 +1,84 @@
+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
+ }
+ )
+ }
+
+}
diff --git a/src/app/shared/service/mapper.service.spec.ts b/src/app/shared/service/mapper.service.spec.ts
new file mode 100644
index 0000000..9dbeafe
--- /dev/null
+++ b/src/app/shared/service/mapper.service.spec.ts
@@ -0,0 +1,16 @@
+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();
+ });
+});
diff --git a/src/app/shared/service/mapper.service.ts b/src/app/shared/service/mapper.service.ts
new file mode 100644
index 0000000..14734e9
--- /dev/null
+++ b/src/app/shared/service/mapper.service.ts
@@ -0,0 +1,33 @@
+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", "°"],
+ ["SOIL_MOISTURE", "%"],
+ ["","unknown"]
+ ]);
+
+ typeMapper = new Map<String, String>([
+ ["AVG", "Durchschnitt"],
+ ["SUM", "Totale Summe"],
+ ["","unknown"]
+ ]);
+
+ constructor() { }
+}
--
GitLab