finishing last improvments

-Unit in Avg Min Max
-All boxes the same label thickness
-adding Group to every Group

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>

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=>{

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">

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;

src/app/module/components/lev0Ver2/lev0.component.ts

@@ -72,12 +72,19 @@ export class Lev0Ver2Component {
     ["","unknown"]
   ]);
 
+  unitHashMapper = new Map<String, String>([
+    ["SOIL_TEMPERATURE", "&#176;"],
+    ["SOIL_MOISTURE", "&#37;"],
+    ["","unknown"]
+  ]);
+
   typeMapper = new Map<String, String>([
     ["AVG", "Durchschnitt"],
     ["SUM", "Totale Summe"],
     ["","unknown"]
   ]);
 
+St="&deg;"
 
   ngOnInit(){
     this.api.get("http://localhost:8080/api/v1/server/get/lvl1/ibk_s_id?date=15-04-2022").subscribe(

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>
 

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", "&#176;"],
+    ["SOIL_MOISTURE", "&#37;"],
+    ["",""]
+  ]);
+
+
   distance: number = (this.avg! - this.min!) / (this.max! - this.min!) * 100;
 
   ngOnChanges(changes: SimpleChanges) {