From d9d89653f4b2adebb0e6a9b65eb5e471fcb3d485 Mon Sep 17 00:00:00 2001
From: csba1652 <Bilal.Hassan@student.uibk.ac.at>
Date: Thu, 4 May 2023 16:14:03 +0100
Subject: [PATCH] adding shaddow
---
.../lev0-ver3/lev0-ver3.component.html | 52 ++++++++++++++++++-
.../components/lev0Ver2/lev0.component.html | 4 +-
.../components/lev0Ver2/lev0.component.scss | 2 +-
.../components/slider/slider.component.html | 18 ++++---
.../components/slider/slider.component.ts | 15 ++++--
5 files changed, 75 insertions(+), 16 deletions(-)
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 fa07c81..4a3aa1f 100644
--- a/src/app/module/components/lev0-ver3/lev0-ver3.component.html
+++ b/src/app/module/components/lev0-ver3/lev0-ver3.component.html
@@ -1,7 +1,7 @@
-
+<!--
<div class="flex w-full min-h-min ">
@@ -97,6 +97,13 @@
</div>
</div>
+-->
+
+
+
+
+
+
<!--
<div class="w-full bg-gray-100 flex flex-col">
@@ -224,3 +231,46 @@
</div>
-->
+
+
+<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)':''}">
+ <header>
+ <h5>{{avgMMax.name}}</h5>
+ </header>
+ <main>
+ <div class="min">
+ <h3>Min</h3>
+ <h3>{{avgMMax.min?.value?.toFixed(2)}}</h3>
+ </div>
+
+ <div class="avg">
+ <h3>Avg</h3>
+ <h3>{{avgMMax.avg?.toFixed(2)}}</h3>
+ </div>
+
+ <div class="max">
+ <h3>Max</h3>
+ <h3>{{avgMMax.max?.value?.toFixed(2)}}</h3>
+ </div>
+ </main>
+ </div>
+ </div>
+</div>
+
+
+<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}} <h6>(wemc)</h6></h5>
+ </header>
+ <main class="w-full mb-4 flex">
+ <app-slider [avg]="avgMMax.avg" [min]="avgMMax.min?.value" [max]="avgMMax.max?.value" class="w-full px-5" ></app-slider>
+ </main>
+ </div>
+ </div>
+</div>
+
+
diff --git a/src/app/module/components/lev0Ver2/lev0.component.html b/src/app/module/components/lev0Ver2/lev0.component.html
index aea85b0..4985c12 100644
--- a/src/app/module/components/lev0Ver2/lev0.component.html
+++ b/src/app/module/components/lev0Ver2/lev0.component.html
@@ -57,7 +57,7 @@
<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)':''}">
+ <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>
@@ -87,7 +87,7 @@
<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)':''}">
+ [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'}">
<h1 class="flex font-bold text-4sm mb-6 justify-start ml-5">{{dent.name}}</h1>
<div class="mx-8 flex justify-between">
diff --git a/src/app/module/components/lev0Ver2/lev0.component.scss b/src/app/module/components/lev0Ver2/lev0.component.scss
index 79faa8a..267e8cb 100644
--- a/src/app/module/components/lev0Ver2/lev0.component.scss
+++ b/src/app/module/components/lev0Ver2/lev0.component.scss
@@ -112,7 +112,7 @@ app-Cjs-timline {
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{
diff --git a/src/app/module/components/slider/slider.component.html b/src/app/module/components/slider/slider.component.html
index 96bbbea..324f9ae 100644
--- a/src/app/module/components/slider/slider.component.html
+++ b/src/app/module/components/slider/slider.component.html
@@ -1,18 +1,22 @@
<div class="flex pt-3 w-full items-center">
- <div class="w-4 h-4 flex items-center">
- <div class="text-sm ml-1 text-gray-400">{{minTemp}}</div>
+
+
+ <div class="flex h-4 flex items-center ">
+ <div class="text-sm text-gray-400">{{min?.toFixed(2)}}</div>
</div>
- <div class="flex h-1 w-full items-center bg-gradient-to-r from-green-700 to-red-900 w-full rounded-xl">
- <div class="w-1/12"></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">{{avgTemp}}°</div>
+ <div class="text-sm ml-1">{{avg?.toFixed(2)}}</div>
</div>
</div>
- <div class="w-4 h-4 flex items-center">
- <div class="text-sm ml-1 text-gray-400">{{maxTemp}}</div>
+
+ <div class="flex h-4 flex items-center">
+ <div class="text-sm ml-1 text-gray-400">{{max?.toFixed(2)}}</div>
</div>
</div>
+
diff --git a/src/app/module/components/slider/slider.component.ts b/src/app/module/components/slider/slider.component.ts
index 830a12b..75d0080 100644
--- a/src/app/module/components/slider/slider.component.ts
+++ b/src/app/module/components/slider/slider.component.ts
@@ -1,13 +1,18 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
-export class SliderComponent {
- @Input() avgTemp: number = 0;
- @Input() maxTemp: number = 0;
- @Input() minTemp: number = 0;
+export class SliderComponent implements OnChanges{
+ @Input() avg: number | undefined = 0;
+ @Input() max: number | undefined = 0;
+ @Input() min: number | undefined = 0;
+ distance: number = (this.avg! - this.min!) / (this.max! - this.min!) * 100;
+
+ ngOnChanges(changes: SimpleChanges) {
+ this.distance = (this.avg! - this.min!) / (this.max! - this.min!) * 100;
+ }
}
--
GitLab