Adding the expert view discussed in the meeting of 6 Feb

angular.json

@@ -26,12 +26,11 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+
               "src/styles.css"
             ],
             "scripts": [
-              "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/jquery/dist/jquery.min.js"
             ]
           },
           "configurations": {

package.json

@@ -34,12 +34,15 @@
     "@angular/cli": "~15.0.1",
     "@angular/compiler-cli": "^15.0.0",
     "@types/jasmine": "~4.3.0",
+    "autoprefixer": "^10.4.13",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
     "typescript": "~4.8.2"
   }
 }

src/app/app-routing.module.ts

@@ -18,6 +18,7 @@ import {ConfigHeaderComponent} from "./module/components/header/config-header/co
 import {HomeComponent} from "./module/pages/home/home.component";
 import {CoomingSoonHeaderComponent} from "./module/components/cooming-soon-header/cooming-soon-header.component";
 import {ComingSoonComponent} from "./module/components/coming-soon/coming-soon.component";
+import {Lev0Ver2Component} from "./module/components/lev0Ver2/lev0.component";
 
 const routes: Routes = [
   {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
@@ -36,6 +37,8 @@ const routes: Routes = [
   { path: 'client', component:ClientComponent, outlet: 'home' },
   { path: 'sensor', component: SensorComponent, outlet: 'home' },
   { path: '', component: SummaryComponent, outlet: 'home' },
+ //   {path:'',component:Lev0Ver2Component,outlet:'home'},
+  {path:'data',component:Lev0Ver2Component,outlet:'home'},
   { path: 'summary', component: DataHeaderComponent, outlet: 'header' },
   { path: 'station', component: ConfigHeaderComponent, outlet: 'header' },
   { path: '', component: ConfigHeaderComponent, outlet: 'header' },
@@ -47,6 +50,8 @@ const routes: Routes = [
   { path: 'homeConfigClient',  children: [ { path: '',  component: ConfigHeaderComponent,  outlet: 'child1'},  { path: '',  component: ClientComponent,  outlet: 'child2'}]},
   { path: 'homeConfigSensor',  children: [ { path: '',  component: ConfigHeaderComponent,  outlet: 'child1'},  { path: '',  component: SensorComponent,  outlet: 'child2'}]},
   { path: 'ComingSoon',  children: [ { path: '',  component: CoomingSoonHeaderComponent,  outlet: 'child1'},  { path: '',  component: ComingSoonComponent,  outlet: 'child2'}]},
+  { path: 'data',  children: [ { path: '',  component: DataHeaderComponent,  outlet: 'child1'},  { path: '',  component: Lev0Ver2Component,  outlet: 'child2'}]},
+
 
 ];
 

src/app/app.component.html

@@ -24,6 +24,8 @@
   </div>
 </nav>
 -->
-<app-lev0Ver2></app-lev0Ver2>
+<app-pro-view></app-pro-view>
+
+
 
 

src/app/app.component.ts

@@ -73,4 +73,12 @@ export class AppComponent {
       this.router.navigate(['/']);
     }
   }
+
+
+  isShowDivIf = true;
+  toggleDisplayDivIf() {
+    this.isShowDivIf = !this.isShowDivIf;
+  }
+
+  ngOnInit(): void {}
 }

src/app/app.module.ts

@@ -33,6 +33,9 @@ import { Lev0Component } from './module/components/lev0/lev0.component';
 import { LightChartComponent } from './module/components/charts/light-chart/light-chart.component';
 import {Lev0Ver2Component} from "./module/components/lev0Ver2/lev0.component";
 import {CjsTimline} from "./module/components/charts/Cjs-timeline/light-chart.component";
+import { ProViewComponent } from './module/components/pro-view/pro-view.component';
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import {MatCheckboxModule} from "@angular/material/checkbox";
 
 
 @NgModule({
@@ -58,21 +61,25 @@ import {CjsTimline} from "./module/components/charts/Cjs-timeline/light-chart.co
     Lev0Ver2Component,
     CjsTimline,
     LightChartComponent,
+    ProViewComponent,
+
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    ReactiveFormsModule,
-    HttpClientModule,
-    FormsModule,
-    BrowserAnimationsModule,
-    MatIconModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatDatepickerModule,
-    MatInputModule,
-    MatNativeDateModule
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        FormsModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        MatInputModule,
+        MatNativeDateModule,
+        MatAutocompleteModule,
+        MatCheckboxModule,
+    ],
   providers: [EventEmitterService],
   bootstrap: [AppComponent],
 })

src/app/module/components/charts/Cjs-timeline/light-chart.component.scss

-.chart{
-  margin: 50px;
-  height: 300px;
-  width: 400px;
-}
 
-.my-container{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  background-color: red;
-}
 
 

src/app/module/components/charts/Cjs-timeline/light-chart.component.ts

-import {Component, OnInit, Input, ViewChild,ElementRef} from '@angular/core';
+import {Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
 import {Chart} from "chart.js/auto";
 import {ThreePhaseDendrometer} from "../../../../core/service/level1/ThreePhaseDendrometer";
 import {DatePipe} from "@angular/common";
+import {LogLevel, MyLoggerServiceService} from "../../../../shared/service/my-logger-service.service";
+
 
 @Component({
   selector: 'app-Cjs-timline',
   templateUrl: './light-chart.component.html',
   styleUrls: ['./light-chart.component.scss']
 })
-export class CjsTimline implements OnInit{
-  // @ts-ignore
-  @ViewChild('myCanvas') canvas: ElementRef;
+export class CjsTimline implements OnInit,OnChanges{
+
+  constructor(private logger:MyLoggerServiceService) {
+    logger.setLevel(LogLevel.LOG)
+    logger.setTopic("CjsTimline")
+  }
+
+  ngOnInit(): void {
+    this.mapData();
+  }
 
+  @ViewChild('myCanvas') canvas!: ElementRef;
 
-  @Input() chartId!:String
+  @Input() chartId:String="test"
   @Input() threePhaseDenrometer!:ThreePhaseDendrometer
   dataParent:Number[]=[]
   timeStampsAsHour:any
@@ -24,47 +34,16 @@ export class CjsTimline implements OnInit{
     ["STEM_RADIUS_INCREASE", "#ffc93c"]
   ]);
 
-  timeParent:any=["2022-04-14T23:30:00.000+00:00","2022-04-14T23:30:00.000+00:00"]
-  labels:any=["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
 //*************************lineChart-Trio*****************************
   data:any ={
-    labels:this.timeParent,
     datasets: [ {
-      label: "Temperature-1",
+      label: "Baum Umfang",
       data: this.dataParent,
-
       fill:true,
-      //   fillColor: '#d20f0f',
       borderColor:"rgba(152,112,112,0.8)",
       backgroundColor: "rgba(162,66,66,0.1)",
-      pointBorderColor: ['red', 'red', 'red','red','red','red','red','red','red','blue','blue','blue','blue','blue','blue','blue','blue','blue','blue'],
-      pointBackgroundColor: ['red', 'red', 'red','red','red','red','red','red','red','blue','blue','blue','blue','blue','blue','blue','blue','blue','blue'],
       tension:0.2,
     },
-      /*
-      {
-        label: "Min",
-        data: this.dataConst,
-        fill:true,
-        //   fillColor: '#d20f0f',
-        borderColor:"rgba(130,220,16,0.8)",
-        backgroundColor: "rgba(255, 10, 13, 0.0)",
-        tension:0.2,
-        radius:0,
-        hoverRadius:0,
-      },
-      {
-        label: "Max",
-        data: this.dataConstMax,
-        fill:true,
-        //   fillColor: '#d20f0f',
-        borderColor:"rgba(220,16,16,0.8)",
-        backgroundColor: "rgba(255, 10, 13, 0.0)",
-        tension:0.2,
-        radius:0,
-        hoverRadius:0,
-        hitRadius:3
-      }*/
     ]
   }
 
@@ -87,37 +66,28 @@ export class CjsTimline implements OnInit{
       }
     }
   }
-  s:any="line"
 
   linechart: any;
 
-  ngOnInit(): void {
 
-    // @ts-ignore
-    console.log(this.threePhaseDenrometer[0].readings.map(x=>x.value));
+  mapData(){
     //@ts-ignore
     this.dataParent=this.threePhaseDenrometer[0].readings.map(x=>x.value)
-
-    //@ts-ignore
-    this.timeParent=this.threePhaseDenrometer[0].readings.map(y=> y.timestamp)
+    this.logger.info("Values of Circumference #gS",this.dataParent)
     // @ts-ignore
     let timeStamp:Date[]=this.threePhaseDenrometer[0].readings.map(y=> y.timestamp)
+
     let datePipe = new DatePipe('en-US');
-    console.log("time parent",this.timeParent)
-    // @ts-ignore
-    console.log(timeStamp.map(x=>datePipe.transform(x,'HH:mm')));
-    // @ts-ignore
     this.timeStampsAsHour=timeStamp.map(x=>datePipe.transform(x,'HH:mm'))
-    console.log(this.timeStampsAsHour)
+    this.logger.info("Timeline got from Server #gS",this.timeStampsAsHour)
     // @ts-ignore
     this.coloredData=this.threePhaseDenrometer[0].readings.map(y=>this.colorMapper.get(y.fluctuationType))
     // @ts-ignore
-    console.log(this.coloredData);
-    console.log("end")
+    this.logger.info("Data Code #gS",this.coloredData);
+    this.logger.info("Finished Mapping data")
   }
 
    ngAfterViewInit() {
-    console.log(this.s)
     this.linConfig.data.labels=this.timeStampsAsHour
     this.linConfig.data.datasets[0].data=this.dataParent
      this.linConfig.data.datasets[0].pointBorderColor=this.coloredData
@@ -125,4 +95,17 @@ export class CjsTimline implements OnInit{
     this.linechart = new Chart(this.chartId.toString(), this.linConfig)
   }
 
+  ngOnChanges() {
+    /**********THIS FUNCTION WILL TRIGGER WHEN PARENT COMPONENT UPDATES 'someInput'**************/
+    //Write your code here
+    this.mapData()
+    this.linConfig.data.labels=this.timeStampsAsHour
+    this.linConfig.data.datasets[0].data=this.dataParent
+    this.linConfig.data.datasets[0].pointBorderColor=this.coloredData
+    this.linConfig.data.datasets[0].pointBackgroundColor=this.coloredData
+    this.linechart.data = this.linConfig.data;
+    console.log("channnged")
+    this.linechart.update();
+  }
+
 }

src/app/module/components/lev0Ver2/lev0.component.html

@@ -88,8 +88,8 @@
             <h5>tatsächliche Ausdehnung</h5>
           </div>
         </div>
-        <app-Cjs-timline  *ngIf="threePhaseDendromete" [chartId]="chartId"  [threePhaseDenrometer]="this.threePhaseDendromete"></app-Cjs-timline>
 
+        <app-Cjs-timline  *ngIf="threePhaseDendromete" [chartId]="chartId"  [threePhaseDenrometer]="this.threePhaseDendromete"></app-Cjs-timline>
       </div>
 
   </div>

src/app/module/components/lev0Ver2/lev0.component.ts

@@ -118,6 +118,8 @@ export class Lev0Ver2Component {
         console.log("sumOrAvg",this.lv1?.sumOrAvg[0].type)
         // @ts-ignore
         this.sumOrAvg=this.lv1.sumOrAvg
+        // @ts-ignore
+        this.threePhaseDendromete=this.lv1.threePhaseDendrometer
       }
     )
   }

src/app/module/components/pro-view/pro-view.component.css

+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/app/module/components/pro-view/pro-view.component.html

+
+<form class="mt-10 flex flex-wrap justify-center sm:justify-between w-full
+            [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:p-2">
+  <mat-form-field class=" " appearance="fill">
+    <mat-label>Select a Station</mat-label>
+    <input type="text"
+           placeholder="Pick one"
+           aria-label="Number"
+           matInput
+           [formControl]="stationControl"
+           [matAutocomplete]="auto1"
+           (ngModelChange)="checkSelect(stationControl,$event)">
+    <mat-error *ngIf="stationControl.hasError('invalid')">This Station does not exists</mat-error>
+    <mat-autocomplete #auto1="matAutocomplete">
+      <mat-option *ngFor="let option1 of filteredStation | async" [value]="option1">
+        {{option1}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+
+  <mat-form-field class="" appearance="fill">
+    <mat-label>Select a Host</mat-label>
+    <input type="text"
+           placeholder="Pick one"
+           aria-label="Number"
+           matInput
+           [formControl]="hostControl"
+           [matAutocomplete]="auto2"
+           (ngModelChange)="checkSelect(hostControl,$event)">
+    <mat-error *ngIf="hostControl.hasError('invalid')">This Host does not exists</mat-error>
+    <mat-autocomplete #auto2="matAutocomplete">
+      <mat-option *ngFor="let option2 of filteredHost | async" [value]="option2">
+        {{option2}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+<!--
+  <mat-form-field class="" appearance="fill">
+    <mat-label>Select a Sensor</mat-label>
+    <input type="text"
+           placeholder="Pick one"
+           aria-label="Number"
+           matInput
+           [formControl]="sensorControl"
+           [matAutocomplete]="auto3"
+           (ngModelChange)="checkSelect(sensorControl,$event)">
+    <mat-error *ngIf="sensorControl.hasError('invalid')">This Sensor does not exists</mat-error>
+    <mat-autocomplete #auto3="matAutocomplete">
+      <mat-option *ngFor="let option3 of filteredSensor | async" [value]="option3">
+        {{option3}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+-->
+  <mat-form-field>
+    <mat-select placeholder="Toppings" [formControl]="toppings" multiple [(ngModel)]="selected">
+      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field  class="" appearance="outline">
+    <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>
+</form>
+
+<div class="flex flex-wrap w-full bg-black justify-center sm:justify-between
+             [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:h-16  [&>*]:p-2 [&>*]:bg-slate-600">
+
+  <div class="">
+    <section class="bg-slate-100 h-full ">
+      <p>Check me!</p>
+      <mat-checkbox class="example-margin"></mat-checkbox>
+    </section>
+  </div>
+
+  <div class="">
+    <div class="bg-slate-50 h-full">
+
+    </div>
+  </div>
+
+  <div class="">
+    <div class="bg-slate-50 h-full">
+
+    </div>
+  </div>
+
+  <div class="">
+    <div class="bg-slate-50 h-full">
+    </div>
+  </div>
+
+
+
+</div>

src/app/module/components/pro-view/pro-view.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProViewComponent } from './pro-view.component';
+
+describe('ProViewComponent', () => {
+  let component: ProViewComponent;
+  let fixture: ComponentFixture<ProViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProViewComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/pro-view/pro-view.component.ts

+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-pro-view',
+  templateUrl: './pro-view.component.html',
+  styleUrls: ['./pro-view.component.css']
+})
+export class ProViewComponent {
+  stationControl = new FormControl('');
+  hostControl = new FormControl('');
+  sensorControl = new FormControl('');
+  dateControl = new FormControl(new Date());
+  availableStation: string[] = ['One', 'Two', 'Three'];
+  availableHosts: string[] = ['One', 'Two', 'Three'];
+  availableSensors: string[] = ['One', 'Two', 'Three'];
+  // @ts-ignore
+  filteredStation: Observable<string[]>;
+  // @ts-ignore
+  filteredHost: Observable<string[]>;
+  filteredSensor!: Observable<string[]>;
+  toppings = new FormControl();
+  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+  selected: string[] = []
+
+  ngOnInit() {
+    this.filteredStation = this.stationControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filterS(this.availableStation,value || '')),
+    );
+    this.filteredHost = this.hostControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filterS(this.availableHosts,value || '')),
+    );
+    this.filteredSensor = this.sensorControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filterS(this.availableSensors,value || '')),
+    );
+  }
+
+
+  private _filterS(opt:string[],value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return opt.filter(option => option.toLowerCase().includes(filterValue));
+  }
+
+  checkSelect(formControl:FormControl ,value: string) {
+    if (!this.availableStation.includes(value)) {
+      formControl.setErrors({'invalid': true});
+    } else {
+      formControl.setErrors(null);
+    }
+  }
+
+
+}

src/app/shared/service/my-logger-service.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MyLoggerServiceService } from './my-logger-service.service';
+
+describe('MyLoggerServiceService', () => {
+  let service: MyLoggerServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MyLoggerServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/service/my-logger-service.service.ts

+import { Injectable } from '@angular/core';
+
+export enum LogLevel {
+  OFF = 0,
+  ERROR = 1,
+  WARNING = 2,
+  INFO = 3,
+  DEBUG = 4,
+  LOG = 5
+}
+@Injectable({
+  providedIn: 'root'
+})
+export class MyLoggerServiceService {
+  private logLevel: LogLevel = LogLevel.OFF;
+  private topic:String="NULL"
+  constructor() { }
+
+  setLevel(level: LogLevel): void {
+    this.logLevel = level;
+  }
+
+  setTopic(topic: String): void {
+    this.topic=topic;
+  }
+
+
+
+  error(s:any,...message: any[]): void {
+    if (this.logLevel >= LogLevel.ERROR) {
+      let topic = this.topic !== "NULL" ? this.topic : "";
+      console.error(topic+": "+s,message);
+    }
+  }
+
+  warn(s:any,...message: any[]): void {
+    if (this.logLevel >= LogLevel.WARNING) {
+      let topic = this.topic !== "NULL" ? this.topic : "";
+      console.warn(topic+": "+s,message);
+    }
+  }
+
+  info(s:any,...message: any[]): void {
+    if (this.logLevel >= LogLevel.INFO) {
+      let topic = this.topic !== "NULL" ? this.topic : "";
+      console.info(topic+": "+s,message);
+    }
+  }
+
+  debug(s:any,...message: any[]): void {
+    if (this.logLevel >= LogLevel.DEBUG) {
+      let topic = this.topic !== "NULL" ? this.topic : "";
+      console.debug(topic+": "+s,message);
+    }
+  }
+
+  log(...args: any[]): void {
+    if (this.logLevel >= LogLevel.LOG) {
+      let prefix = this.topic !== "NULL" ? this.topic : "";
+      console.log(prefix,args);
+    }
+  }
+}

src/styles.css

 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content:[
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}