diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0e79093e1b7dbd82d8013c7f0fa95d0d7459e18b..eea828c217a0023f4c24c84b51c3abb541353661 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -38,13 +38,12 @@
-<!--
-<app-pro-view></app-pro-view>
--->
-<app-lev0Ver2></app-lev0Ver2>
+<app-thermometer></app-thermometer>
+
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9c83d100a472994813ef98026db45c92ac1a2aef..9ec6a42490447e07391f7577d459538d3e332472 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,6 +40,7 @@ import {ApiModule} from "../../projects/swagger-client/src";
import { InterceptorService } from './shared/auth/interceptor.service';
import {CjsTimelineMultiple} from "./module/components/charts/Cjs-timeline-multiple/light-chart.component";
import {MatButtonModule} from "@angular/material/button";
+import { ThermometerComponent } from './module/components/thermometer/thermometer.component';
@NgModule({
declarations: [
@@ -65,7 +66,8 @@ import {MatButtonModule} from "@angular/material/button";
CjsTimline,
LightChartComponent,
ProViewComponent,
- CjsTimelineMultiple
+ CjsTimelineMultiple,
+ ThermometerComponent
],
imports: [
diff --git a/src/app/module/components/pro-view/pro-view.component.html b/src/app/module/components/pro-view/pro-view.component.html
index 601696e999a0cbc71096011f3e9f2f7483887e2d..fd3b2f9a8fc309b2199004e01f2f5444dc3cf317 100644
--- a/src/app/module/components/pro-view/pro-view.component.html
+++ b/src/app/module/components/pro-view/pro-view.component.html
@@ -47,7 +47,7 @@
</mat-form-field>
</form>
-<!--
+
<mat-form-field class=" " appearance="fill" *ngIf="t_bool">
<mat-label>Select a Station</mat-label>
<input type="text"
@@ -57,6 +57,7 @@
[formControl]="t_control"
[matAutocomplete]="auto2">
<mat-error *ngIf="stationControl.hasError('invalid')">This Station does not exists</mat-error>
+
<mat-autocomplete #auto2="matAutocomplete">
<div *ngIf="t_bool">
<mat-select>
@@ -70,15 +71,27 @@
</mat-form-field>
-<div class="relative inline-block text-left ">
+<mat-form-field class="" appearance="fill">
+ <mat-label>Favorite food</mat-label>
+ <input matInput placeholder="Ex. Pizza" value="Sushi" [formControl]="t_control2" (focus)="onFocus()"
+ (blur)="onBlur()" #inputField>
+</mat-form-field>
-<div class="absolute overflow-y-auto h-32 right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
- <div *ngFor="let x of t_string" class="py-1" role="none">
- <a href="#" class="text-gray-700 block px-4 py-0.5 text-sm" role="menuitem" tabindex="-1" id="menu-item-0"> <mat-checkbox class="example-margin"></mat-checkbox>{{x}}</a>
+<div *ngIf="isFocused " class="relative inline-block text-left" >
+ <div class="absolute overflow-y-auto h-32 right-0 z-10 mt-2 w-56 origin-top-right rounded-md
+ bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+ role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
+ tabindex="-1"
+ (focus)="menuOpen=true" (blur)="menuOpen=false">
+ <div *ngFor="let x of t_string" class="py-1" role="none" >
+ <a class="text-gray-700 block px-4 py-0.5 text-sm" role="menuitem" id="menu-item-0"
+ (click)="isFocused=true; inputField.focus()">
+ <mat-checkbox class="example-margin" ></mat-checkbox>{{x}}
+ </a>
+ </div>
</div>
</div>
-</div>
--->
+{{isFocused}}{{menuOpen}}
<div class="flex flex-wrap w-full justify-center sm:justify-end
[&>*]:w-full [&>*]:sm:w-1/4 [&>*]:h-16 [&>*]:p-2 ">
@@ -90,6 +103,9 @@
</div>
-->
+
+
+
<div class="">
<section class=" h-full w-full flex items-center rounded-2xl">
<button class="w-full h-full" mat-raised-button color="primary" (click)="downloadCSV4()">Download Data <mat-icon>download</mat-icon></button>
diff --git a/src/app/module/components/pro-view/pro-view.component.ts b/src/app/module/components/pro-view/pro-view.component.ts
index c238c080c59226a758e4c3328984aa5fa0c61d5b..b7f971a9d1e096f78b43c6112674f84160a244dc 100644
--- a/src/app/module/components/pro-view/pro-view.component.ts
+++ b/src/app/module/components/pro-view/pro-view.component.ts
@@ -37,6 +37,24 @@ export class ProViewComponent {
t_control= new FormControl();
t_filterdString!: Observable<string[]>;
t_bool:boolean=true
+ t_control2=new FormControl;
+ isFocused = false;
+ menuOpen=false;
+ onFocus() {
+ this.isFocused = true;
+ }
+
+ onBlur() {
+ setTimeout(() => {
+ // this.isFocused = false;
+ }, 9000);
+ }
+
+ onBlurDropdown(){
+ this.menuOpen=false;
+ alert("hsjd");
+ }
+
range = new FormGroup({
start: new FormControl<Date | null>(null),
end: new FormControl<Date | null>(null),
diff --git a/src/app/module/components/thermometer/thermometer.component.html b/src/app/module/components/thermometer/thermometer.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a166f5df2799190f1dee82ad60739ab8dae51d2
--- /dev/null
+++ b/src/app/module/components/thermometer/thermometer.component.html
@@ -0,0 +1,10 @@
+
+<div id="thermometer"
+ class="mx-5 flex relative rounded-3xl items-end after:absolute after:rounded-full after:bg-sky-500">
+ <div id="temperature" [style.height.%]="temp" [attr.data-value]="cont"
+ class="flex w-full bg-gradient-to-t from-sky-500 to-pink-500 rounded-xl">
+ </div>
+</div>
+
+
+
diff --git a/src/app/module/components/thermometer/thermometer.component.scss b/src/app/module/components/thermometer/thermometer.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..43262eead2799eefe3cfa261368ff61f4ec825ef
--- /dev/null
+++ b/src/app/module/components/thermometer/thermometer.component.scss
@@ -0,0 +1,56 @@
+
+#thermometer {
+ width: 30px;
+ height: 200px;
+ border: 8px solid #2b2b2b;
+ z-index: 1;
+
+ &:after {
+ content: "";
+ z-index: -3;
+ transform: translateX(-18px);
+ bottom: -25px;
+ border: 8px solid #2b2b2b;
+ width: 50px;
+ height: 50px;
+ }
+
+ #temperature{
+
+
+ &, &:before, &:after {
+ position: absolute;
+ }
+
+ // Temperature value - Tooltip
+
+ &:before {
+ content: attr(data-value);
+ color: white;
+ width: 60px;
+ height: 40px;
+ background: #2b2b2b;
+ left: 30px ;
+ top: -10px;
+ border-radius: 10%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ // Tooltip arrow
+ &:after {
+ content: "";
+ border-top: 10px solid transparent;
+ border-bottom:10px solid transparent;
+ border-right: 10px solid black;
+ left: 20px ;
+ top: 0;
+ }
+
+
+ }
+
+}
+
+
diff --git a/src/app/module/components/thermometer/thermometer.component.spec.ts b/src/app/module/components/thermometer/thermometer.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d463cd88acf84e67f4292698a7826a3014c6fec0
--- /dev/null
+++ b/src/app/module/components/thermometer/thermometer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThermometerComponent } from './thermometer.component';
+
+describe('ThermometerComponent', () => {
+ let component: ThermometerComponent;
+ let fixture: ComponentFixture<ThermometerComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ ThermometerComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ThermometerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/thermometer/thermometer.component.ts b/src/app/module/components/thermometer/thermometer.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6d1bd1ca3f98f0f9908a77cd4b0c1b6d726906d5
--- /dev/null
+++ b/src/app/module/components/thermometer/thermometer.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-thermometer',
+ templateUrl: './thermometer.component.html',
+ styleUrls: ['./thermometer.component.scss']
+})
+export class ThermometerComponent {
+ cont="12 C";
+ temp: number = 80;
+}
+