Skip to content
Snippets Groups Projects

merge dev into main

Merged merge dev into main
develop into main
Merged Zoe Michaela Dietmar Pfister requested to merge develop into main
Viewing commit 034b5209
Prev Next
Show latest version
9 files
+ 329
− 98
Compare changes
  • Side-by-side
  • Inline
Files
9
src/app/module/components/lev0-ver3/lev0-ver3.component.html
+ 172
− 70
<div class="w-full bg-gray-100 flex flex-col">
<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
<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>
<button (click)="sendSignal1(2)" 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>
<!--
<div class="flex w-full min-h-min ">
<main class="grid mt-2 gap-y-14 gap-x-8 grid-cols-2 grid-auto-rows-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>
<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 #scrollContainer class="flex w-full overflow-x-auto scrollbar-hide bg-gray-400 rounded-xl items-center
[&>*]:m-4 [&>*]:flex-shrink-0
<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">
<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>...
</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" *ngFor="let x of num_t">
<div class="flex-col flex items-center justify-center py-4 [&>*]:m-0.5">
<h1 class="text-xs font-bold">Solar Radiation</h1>
<mat-icon>sunny</mat-icon>
<div class="display-flex">
<h1 class="text-xm font-bold mr-0.5"> 22</h1>
<h3 class="text-xs font-bold"> w/m<sup>2</sup></h3>
<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">
{{typeMapper.get( sumAvg.type+"")}}
</h3>
<h1 class="text-xs font-bold pb-1">{{sumAvg.name}}</h1>
<mat-icon >{{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' ">
{{" "+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 sumAvg of sumOrAvg">
<tr [ngClass]="{'bg-gray-200':sumAvg.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>
</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>
</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>
</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>
</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>
<div class="h-3/5 bg-dark w-0.5 ml-2"></div>
</div>
</div>
</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>
<div class="min-h-full w-10 flex justify-start items-center">
<button (click)="scrollRight()">
<mat-icon>arrow_forward_ios</mat-icon>
</button>
</div>
</div>
</main>
<div class="bg-violet-500"> </div>
</div>
<!--
<div class="bg-white"> </div>
<div class="flex w-1/2 rounded-xl bg-violet-300 flex-col divide-y divide-slate-800 [&>*]:py-4 ">
<div class=" flex items-center [&>*]:mx-2">
<h1 class="text-xs font-bold">Solar Radiation</h1>
@@ -58,53 +195,11 @@
<mat-icon>sunny</mat-icon>
<app-slider class="w-32 -translate-y-2"></app-slider>
</div>
</div>
<div class="flex w-2/3 p-2 divide-y divide-slate-800 bg-white justify-center items-end 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)':''}">
<h1 class="flex font-bold text-4sm mb-6 justify-center">{{dent.name}}</h1>
<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 class="w-full bg-gray-100 flex flex-col">
@@ -233,6 +328,13 @@
-->
<!--
<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)':''}">
@@ -272,5 +374,5 @@
</div>
</div>
</div>
-->