diff --git a/src/app/module/components/lev0-ver3/lev0-ver3.component.html b/src/app/module/components/lev0-ver3/lev0-ver3.component.html
index b9fcd31d31cc42bcfb189f525d8ec39e8eb3127d..b0d6c05c2cf83b979927738ef737386a07714d72 100644
--- a/src/app/module/components/lev0-ver3/lev0-ver3.component.html
+++ b/src/app/module/components/lev0-ver3/lev0-ver3.component.html
@@ -3,7 +3,7 @@
<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 Wertee
+ Tages Sensor Werte
<button (click)="sendSignal1(1)" 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>
@@ -44,9 +44,9 @@
</div>
<div class="flex flex-col w-full bg-white/30 shadow-xl ease-in duration-300
- shadow-cyan-200/50 hover:shadow-cyan-400/50 rounded-xl">
+ 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 oder Durchschnits eines Sensor/<div class="flex rounded bg-gray-200">Gruppe</div>...
+ 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
@@ -88,23 +88,22 @@
<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>
+ <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 sumAvg of sumOrAvg">
- <tr [ngClass]="{'bg-gray-200':sumAvg.isSensorGroup}">
+ <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">{{sumAvg.name}}</h1>
+ <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">{{iconMapper.get(sumAvg.measurementType+"")}}</i>
+ <i class="material-icons" style="color: black">{{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 class="w-full -translate-y-2"></app-slider>
+ <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>
diff --git a/src/app/module/components/lev0-ver3/lev0-ver3.component.ts b/src/app/module/components/lev0-ver3/lev0-ver3.component.ts
index b4afdd10c010cd1651b9c31efe9eda197cb53803..d40acddd0f97fc41c67f56aca69826a15ea4a68b 100644
--- a/src/app/module/components/lev0-ver3/lev0-ver3.component.ts
+++ b/src/app/module/components/lev0-ver3/lev0-ver3.component.ts
@@ -63,6 +63,7 @@ export class Lev0Ver3Component {
iconMapper = new Map<String, String>([
["SOLAR_RADIATION", "sunny"],
["SOIL_MOISTURE", "water"],
+ ["SOIL_TEMPERATURE", "device_thermostat"],
["","unknown"]
]);
@@ -79,6 +80,8 @@ export class Lev0Ver3Component {
]);
+
+
ngOnInit(){
this.api.get("http://localhost:8080/api/v1/server/get/lvl1/ibk_s_id?date=15-04-2022").subscribe(
res=>{
diff --git a/src/app/module/components/lev0Ver2/lev0.component.html b/src/app/module/components/lev0Ver2/lev0.component.html
index 69bc0c649dbf71778e1c9d4b7294a23aac3535e8..c292c038d9bc0f38a0f02adc650c5615b29778a5 100644
--- a/src/app/module/components/lev0Ver2/lev0.component.html
+++ b/src/app/module/components/lev0Ver2/lev0.component.html
@@ -58,7 +58,7 @@
<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 Wertee
+ Tages Sensor Werte
<button (click)="sendSignal1(1)" 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>
@@ -92,7 +92,7 @@
<div *ngFor="let sumAvg of sumOrAvg" >
<div class="card-b">
<div class="header-left">
- <h5>{{sumAvg.name}}</h5>
+ <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>
@@ -101,7 +101,7 @@
</h2>
<div><h4>{{typeMapper.get( sumAvg.type+"")}}</h4></div>
</div>
- <div class="header-right">
+ <div class="header-right flex-col">
<i class="material-icons" style="font-size:80px;color: black">{{iconMapper.get(sumAvg.measurementType+"")}}</i>
</div>
@@ -116,23 +116,32 @@
<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>
- <h5>{{avgMMax.name}}</h5>
+ <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>{{avgMMax.min?.value?.toFixed(2)}}</h3>
+ <h3 class="flex">{{avgMMax.min?.value?.toFixed(2)}}
+ <p [innerHTML]="unitHashMapper.get(avgMMax.measurementType+'')"></p>
+ </h3>
+
+
</div>
<div class="avg">
<h3>Avg</h3>
- <h3>{{avgMMax.avg?.toFixed(2)}}</h3>
+ <h3 class="flex">{{avgMMax.avg?.toFixed(2)}}
+ <p [innerHTML]="unitHashMapper.get(avgMMax.measurementType+'')"></p>
+ </h3>
</div>
<div class="max">
<h3>Max</h3>
- <h3>{{avgMMax.max?.value?.toFixed(2)}}</h3>
+ <h3 class="flex">{{avgMMax.max?.value?.toFixed(2)}}
+ <p [innerHTML]="unitHashMapper.get(avgMMax.measurementType+'')"></p>
+ </h3>
</div>
</main>
</div>
@@ -146,8 +155,11 @@
<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>
- <h1 class="flex font-bold text-4sm mb-6 justify-start ml-5">{{dent.name}}</h1>
<div class="mx-8 flex justify-between">
<div class="flex-col content-center items-center justify-center">
diff --git a/src/app/module/components/lev0Ver2/lev0.component.scss b/src/app/module/components/lev0Ver2/lev0.component.scss
index 267e8cbffa41a7ce2fabba7310582aa209e020c8..86b0d160201f1afe03b8d0fcf293b58fcf5180d0 100644
--- a/src/app/module/components/lev0Ver2/lev0.component.scss
+++ b/src/app/module/components/lev0Ver2/lev0.component.scss
@@ -122,11 +122,12 @@ app-Cjs-timline {
justify-content: space-around;
overflow: hidden;
h5{
- font-family: 'Poppins', sans-serif;
- font-weight:400;
- font-size: 16px;
- color: #7E84A3;
+ // font-family: 'Poppins', sans-serif;
+ // font-weight:400;
+ // font-size: 16px;
+ // color: #7E84A3;
}
+
h2{
margin: 0px;
font-family: 'Poppins', sans-serif;
@@ -172,6 +173,13 @@ app-Cjs-timline {
}
+.isGroup-text{
+ color:rgb(173,216,230);
+ font-family: 'Poppins', sans-serif;
+ font-weight:600;
+ font-size: 16px;
+}
+
.card-group{
@@ -182,17 +190,24 @@ app-Cjs-timline {
display: flex;
flex-direction: column;
-
header{
//no margin justify-content: center;
- margin-top: 20px;
+ padding-top: 20px;
display: flex;
- margin-left: 20px;
+ 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;
@@ -231,10 +246,10 @@ app-Cjs-timline {
}
h5{
- font-family: 'Poppins', sans-serif;
- font-weight:400;
- font-size: 16px;
- color: #7E84A3;
+ // font-family: 'Poppins', sans-serif;
+ // font-weight:400;
+ // font-size: 16px;
+ // color: #7E84A3;
}
h2{
margin: 0px;
diff --git a/src/app/module/components/lev0Ver2/lev0.component.ts b/src/app/module/components/lev0Ver2/lev0.component.ts
index 428ac0ce2f330ac51a5c9fb21d3dedad34048e08..116f772e1e1b1f74ec714452d5b9a48de15e72f0 100644
--- a/src/app/module/components/lev0Ver2/lev0.component.ts
+++ b/src/app/module/components/lev0Ver2/lev0.component.ts
@@ -72,12 +72,19 @@ export class Lev0Ver2Component {
["","unknown"]
]);
+ unitHashMapper = new Map<String, String>([
+ ["SOIL_TEMPERATURE", "°"],
+ ["SOIL_MOISTURE", "%"],
+ ["","unknown"]
+ ]);
+
typeMapper = new Map<String, String>([
["AVG", "Durchschnitt"],
["SUM", "Totale Summe"],
["","unknown"]
]);
+St="°"
ngOnInit(){
this.api.get("http://localhost:8080/api/v1/server/get/lvl1/ibk_s_id?date=15-04-2022").subscribe(
diff --git a/src/app/module/components/slider/slider.component.html b/src/app/module/components/slider/slider.component.html
index 324f9ae7571fe898fd6b034d2078e2fceede40d1..7843870ad15aeb52d21e609773345ee235eeddfc 100644
--- a/src/app/module/components/slider/slider.component.html
+++ b/src/app/module/components/slider/slider.component.html
@@ -3,19 +3,19 @@
<div class="flex h-4 flex items-center ">
- <div class="text-sm text-gray-400">{{min?.toFixed(2)}}</div>
+ <div class="flex ext-sm text-gray-400">{{min?.toFixed(2)}}<p [innerHTML]="unitHashMapper.get(mType+'')"></div>
</div>
<div class="flex mx-2 h-1 flex-grow items-center bg-gradient-to-r from-green-700 to-red-900 w-full rounded-xl">
<div [style.width.%]="distance"></div>
<div class="rounded-full border-[1px] border-neutral-400 w-16 -translate-y-1 h-8 justify-center items-start flex ">
- <div class="text-sm ml-1">{{avg?.toFixed(2)}}</div>
+ <div class="flex text-sm ml-1">{{avg?.toFixed(2)}} <p [innerHTML]="unitHashMapper.get(mType+'')"></div>
</div>
</div>
<div class="flex h-4 flex items-center">
- <div class="text-sm ml-1 text-gray-400">{{max?.toFixed(2)}}</div>
+ <div class="flex text-sm ml-1 text-gray-400">{{max?.toFixed(2)}}<p [innerHTML]="unitHashMapper.get(mType+'')"></p></div>
</div>
</div>
diff --git a/src/app/module/components/slider/slider.component.ts b/src/app/module/components/slider/slider.component.ts
index 75d0080b3817772278f9ac1fa8a7629ba10ae0ac..70e4d31e8d98d87d4d1d7e425d8015164a1a2689 100644
--- a/src/app/module/components/slider/slider.component.ts
+++ b/src/app/module/components/slider/slider.component.ts
@@ -10,6 +10,16 @@ export class SliderComponent implements OnChanges{
@Input() max: number | undefined = 0;
@Input() min: number | undefined = 0;
+ @Input() mType: string = "";
+
+
+ unitHashMapper = new Map<String, String>([
+ ["SOIL_TEMPERATURE", "°"],
+ ["SOIL_MOISTURE", "%"],
+ ["",""]
+ ]);
+
+
distance: number = (this.avg! - this.min!) / (this.max! - this.min!) * 100;
ngOnChanges(changes: SimpleChanges) {