Skip to content
Snippets Groups Projects
Commit 6e478508 authored by Bilal Hassan's avatar Bilal Hassan
Browse files

finishing last improvments 

-Unit in Avg Min Max
-All boxes the same label thickness
-adding Group to every Group
parent e3c7aa2f
No related branches found
No related tags found
3 merge requests!25Draft: Resolve #78,!7fixUrlPath,!4merge dev into main
Hide whitespace changes
Inline Side-by-side
Showing
with 79 additions and 33 deletions
src/app/module/components/lev0-ver3/lev0-ver3.component.html
+ 9
− 10
View file @ 6e478508
......@@ -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
+ 3
− 0
View file @ 6e478508
......@@ -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
+ 21
− 9
View file @ 6e478508
......@@ -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
+ 26
− 11
View file @ 6e478508
......@@ -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
+ 7
− 0
View file @ 6e478508
......@@ -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
− 3
View file @ 6e478508
......@@ -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
− 0
View file @ 6e478508
......@@ -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) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment