working on last viewing dendrometer graph

projects/generated-api/src/api/serverController.service.ts

@@ -20,6 +20,7 @@ import { Observable }                                        from 'rxjs';
 import { Document } from '../model/document';
 import { LevelOneResponse } from '../model/levelOneResponse';
 import { ReadingPayload } from '../model/readingPayload';
+import { ThreePhaseDendrometer } from '../model/threePhaseDendrometer';
 
 import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
 import { Configuration }                                     from '../configuration';
@@ -326,4 +327,67 @@ export class ServerControllerService {
         );
     }
 
+    /**
+     * 
+     * 
+     * @param sensorId 
+     * @param from 
+     * @param to 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public getReadingsDendrometerByIdAndTimeRange(sensorId: string, from: Date, to: Date, observe?: 'body', reportProgress?: boolean): Observable<Array<ThreePhaseDendrometer>>;
+    public getReadingsDendrometerByIdAndTimeRange(sensorId: string, from: Date, to: Date, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<Array<ThreePhaseDendrometer>>>;
+    public getReadingsDendrometerByIdAndTimeRange(sensorId: string, from: Date, to: Date, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<Array<ThreePhaseDendrometer>>>;
+    public getReadingsDendrometerByIdAndTimeRange(sensorId: string, from: Date, to: Date, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (sensorId === null || sensorId === undefined) {
+            throw new Error('Required parameter sensorId was null or undefined when calling getReadingsDendrometerByIdAndTimeRange.');
+        }
+
+        if (from === null || from === undefined) {
+            throw new Error('Required parameter from was null or undefined when calling getReadingsDendrometerByIdAndTimeRange.');
+        }
+
+        if (to === null || to === undefined) {
+            throw new Error('Required parameter to was null or undefined when calling getReadingsDendrometerByIdAndTimeRange.');
+        }
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (sensorId !== undefined && sensorId !== null) {
+            queryParameters = queryParameters.set('sensorId', <any>sensorId);
+        }
+        if (from !== undefined && from !== null) {
+            queryParameters = queryParameters.set('from', <any>from.toISOString());
+        }
+        if (to !== undefined && to !== null) {
+            queryParameters = queryParameters.set('to', <any>to.toISOString());
+        }
+
+        let headers = this.defaultHeaders;
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            '*/*'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.request<Array<ThreePhaseDendrometer>>('get',`${this.basePath}/api/v1/server/get/dendrometer/range`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
 }

projects/generated-api/src/model/models.ts

@@ -3,6 +3,7 @@ export * from './client';
 export * from './dendrometerDailyValue';
 export * from './dendrometerDeltaR';
 export * from './dendrometerMDS';
+export * from './dendrometerValue';
 export * from './document';
 export * from './host';
 export * from './levelOneResponse';
@@ -15,6 +16,7 @@ export * from './sensor';
 export * from './sensorGroup';
 export * from './station';
 export * from './sumOrAvg';
+export * from './threePhaseDendrometer';
 export * from './userLoginRequest';
 export * from './userSignUpRequest';
 export * from './valueWithTimestamp';

projects/generated-api/src/model/threePhaseDendrometer.ts

@@ -14,5 +14,4 @@ import { DendrometerValue } from './dendrometerValue';
 export interface ThreePhaseDendrometer { 
     name?: string;
     readings?: Array<DendrometerValue>;
-    isSensorGroup?: boolean;
 }
\ No newline at end of file

src/app/app.component.html

@@ -32,9 +32,6 @@
 
 
 
-
-
-
 <app-pro-view></app-pro-view>
 
 

src/app/app.component.ts

@@ -76,7 +76,6 @@ export class AppComponent {
     }
   }
 
-
   isShowDivIf = true;
   toggleDisplayDivIf() {
     this.isShowDivIf = !this.isShowDivIf;

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

-{{isDendrometer}}
+<div class="bg-sky-500">
+
+
 <form class="mt-10 flex flex-wrap justify-center sm:justify-between w-full
             [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:p-2">
 
@@ -117,7 +119,44 @@
   </div>
 </div>
 
-<app-Cjs-timeline-multiple [sensorData]="this.sensorData" [sensorDataArray]="this.sensorDataArray" ></app-Cjs-timeline-multiple>
+<div class="bg-slate-500 flex">
+  <app-Cjs-timeline-multiple [sensorData]="this.sensorData" [sensorDataArray]="this.sensorDataArray" ></app-Cjs-timeline-multiple>
+
+  <app-Cjs-timline></app-Cjs-timline>
+</div>
+
+
+</div>
+
+
+
+
 
-<app-Cjs-timline></app-Cjs-timline>
+
+<div class="w-full flex flex-row items-end justify-center flex-wrap">
+
+  <div class="card-dendrometer">
+    <h1>Dendrometer</h1>
+
+    <div class="headers">
+      <div class="element">
+        <mat-icon style="color: #ff6f3c; ;margin-bottom: 10px; margin-right: 5px;">unfold_more</mat-icon>
+        <h5>ausdehnen</h5>
+      </div>
+
+      <div class="element">
+        <mat-icon style="color: #155263;margin-bottom: 10px; margin-right: 5px;">unfold_less</mat-icon>
+        <h5>kontraktion</h5>
+      </div>
+
+      <div class="element">
+        <mat-icon style="color: #ffc93c;margin-bottom: 10px; margin-right: 5px;">vertical_align_top</mat-icon>
+        <h5>tatsächliche Ausdehnung</h5>
+      </div>
+    </div>
+
+    <app-Cjs-timline  *ngIf="threePhaseDendromete"  [threePhaseDenrometer]="this.threePhaseDendromete"></app-Cjs-timline>
+  </div>
+
+</div>
 

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

+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');
+.display-flex{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  flex-wrap: wrap;
+
+}
+
+.display-flex-start{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: start;
+  flex-wrap: wrap;
+
+}
+
+.display-flex-center{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  flex-wrap: wrap;
+
+}
+
+app-Cjs-timline {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.container-flex{
+
+  width: 100%;
+  background-color: #F5F7FC;
+  display: flex;
+  flex-direction: column;
+}
+
+.container-flex-cover{
+  margin-top: 7vh;
+  margin-right: 5vh;
+}
+
+.header{
+//  background-color: black;
+  justify-content: center;
+  min-height: 100px;
+  width: 90%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 30px;
+}
+
+.header-left{
+// background-color: white;
+  flex: 50%;
+h4{
+  margin-top: 10vh;
+  margin-left: 2vh;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+}
+}
+
+.header-right{
+// background-color: brown;
+  flex: 50%;
+  display: flex;
+  justify-content: flex-end;
+}
+@media (max-width: 800px) {
+  .header{
+  .header-left{
+    display: flex;
+    justify-content: center;
+  }
+  .header-right{
+    display: flex;
+    justify-content: center;
+  }
+}
+}
+
+.main-lev0{
+  display: flex;
+  height:80vh;
+  width: 100%;
+  flex-direction: column;
+// background-color: #f1f1f1;
+.main{
+  height: 100vh;
+  width: 100%;
+}
+}
+
+.card-b{
+  height: 150px;
+  width: 400px;
+  background-color: white;
+  margin: 30px;
+  border-radius: 6px;
+  display: flex;
+  flex: 0 0  400px;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+
+
+.header-left{
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+  justify-content: space-around;
+  overflow: hidden;
+h5{
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 16px;
+  color: #7E84A3;
+}
+h2{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 28px;
+  color: black;
+
+}
+
+h4{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color: #6ED29D;
+
+
+}
+h6{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 12px;
+  color: #7E84A3;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+}
+
+.header-right{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+.img{
+  height: 50px;
+  width: 50px;
+  background-image: url("../../../../assets/Icon-awesome-cloud-rain.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+}
+
+}
+
+.card-group{
+
+
+  width: 400px;
+  background-color:white;
+  margin: 30px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+
+
+header{
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+}
+
+main{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+
+
+
+.light-chart{
+  display: flex;
+  height: 300px;
+  width: 100%;
+  justify-content: center;
+}
+.min{
+  height: 90px;
+  width: 90px;
+  border: 2px solid green;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-left: 20px;
+  margin-bottom: 20px;
+}
+
+.max {
+  @extend .min;
+  border: 2px solid #ff0000;
+}
+
+.avg{
+  @extend .min;
+  border: 2px solid black;
+}
+
+h5{
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 16px;
+  color: #7E84A3;
+}
+h2{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 28px;
+  color: black;
+
+}
+
+h4{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color: #6ED29D;
+
+
+}
+h6{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 12px;
+  color: #7E84A3;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+}
+
+.card-dendrometer{
+  height: 700px;
+  width: 1100px;
+  margin: 50px;
+  padding-top: 50px;
+  padding-left: 20px;
+  padding-right: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  justify-content: center;
+  align-items: center;
+
+.headers{
+
+  width: 70%;
+  display: flex;
+  justify-content: space-around;
+.element{
+mat-icon{
+  margin-bottom: 10px;
+  margin-right: 5px;
+}
+display: flex;
+justify-content: center;
+align-items: center;
+flex-basis: 33.33%;
+border-bottom: 1px solid black;
+margin-right: 10px;
+margin-left: 10px;
+}
+}
+h5{
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 16px;
+  color: #7E84A3;
+}
+h2{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 28px;
+  color: black;
+
+}
+
+h4{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:600;
+  font-size: 16px;
+  color: #6ED29D;
+
+
+}
+h6{
+  margin: 0px;
+  font-family: 'Poppins', sans-serif;
+  font-weight:400;
+  font-size: 12px;
+  color: #7E84A3;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+}

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

@@ -13,13 +13,14 @@ import {
 import {DatePipe} from "@angular/common";
 import {LogLevel, MyLoggerServiceService} from "../../../shared/service/my-logger-service.service";
 import {ThreePhaseDendrometer} from "../../../core/service/level1/ThreePhaseDendrometer";
+import {HttpClient} from "@angular/common/http";
 
 //TODOS after from this.serverControllerService.getReadingsBySensorIdAndTimeRange return type is changed i can uncomment the @ts-ignore
 //
 @Component({
   selector: 'app-pro-view',
   templateUrl: './pro-view.component.html',
-  styleUrls: ['./pro-view.component.css'],
+  styleUrls: ['./pro-view.component.scss'],
   providers: [DatePipe]
 })
 export class ProViewComponent {
@@ -74,12 +75,21 @@ t_bool:boolean=true
               private clientControllerService:ClientControllerService,private serverControllerService:ServerControllerService,
               private sensorControllerService:SensorControllerService,
               private datePipe: DatePipe,
-              private logger:MyLoggerServiceService) {
+              private logger:MyLoggerServiceService,
+              private http:HttpClient
+              ) {
     this.logger.setLevel(LogLevel.LOG)
     this.logger.setTopic("ProViewInputParent")
   }
 
   ngOnInit() {
+
+
+
+    this.http.get("http://localhost:8080/api/v1/server/get/dendrometer/range?sensorId=ddm_id_1&from=15-04-2022T00:00:00&to=15-04-2022T23:59:59").subscribe(
+      // @ts-ignore
+      x=>this.logger.info("dendrometer",this.threePhaseDendromete=x))
+
     //test for dendrometer
     const date = new Date('2022-04-15T00:00:00');
     const formattedDate = this.datePipe.transform(date, 'dd-MM-yyyy');

src/styles.css

@@ -4,3 +4,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body{
+  background-color: rgb(243 244 246);
+}