working on last meetings ecology suggestions

src/app/app.component.html

@@ -38,13 +38,12 @@
 
 
 
-<!--
 
 
-<app-pro-view></app-pro-view>
--->
 
-<app-lev0Ver2></app-lev0Ver2>
+<app-thermometer></app-thermometer>
+
+
 
 
 

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: [

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>

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),

src/app/module/components/thermometer/thermometer.component.html

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

src/app/module/components/thermometer/thermometer.component.scss

+
+#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;
+    }
+
+
+  }
+
+}
+
+

src/app/module/components/thermometer/thermometer.component.spec.ts

+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();
+  });
+});

src/app/module/components/thermometer/thermometer.component.ts

+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;
+}
+