Adjust data and components.

api/src/main/java/com/rossa/api/config/data.sql

@@ -1,5 +1,5 @@
 INSERT INTO meters (name) VALUES ('1LOG');
-INSERT INTO meters (name) VALUES ('1HEM');
+INSERT INTO meters (name) VALUES ('1EHM');
 INSERT INTO meters (name) VALUES ('WATER');
 INSERT INTO meters (name) VALUES ('GARDEN');
 

rossa-tech-cli/src/app/app.component.html

@@ -1,3 +1,9 @@
+<div class="app-wrapper">
+
     <app-header></app-header>
 
     <router-outlet></router-outlet>
+
+    <app-footer></app-footer>
+
+</div>

rossa-tech-cli/src/app/app.component.scss

@@ -0,0 +1,6 @@
+div.app-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

rossa-tech-cli/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'rossa-tech';

rossa-tech-cli/src/app/app.module.ts

@@ -34,6 +34,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
 // import { ChartComponent } from './components/subcomponents/chart/chart.component';
 // import { NgChartsModule } from 'ng2-charts';
 
@@ -73,6 +74,7 @@ import { HeaderComponent } from './components/header/header.component';
     MatNativeDateModule,
     MatSnackBarModule,
     HeaderComponent,
+    FooterComponent,
     // NgChartsModule,
   ],
   providers: [

rossa-tech-cli/src/app/components/dashboard/dashboard.component.html

@@ -1,29 +1,39 @@
-<div class="content">
+<div class="content-wrapper">
     <div class="content-header">
         <button mat-raised-button color="primary" (click)="addMeterData()">Neuer Eintrag</button>
     </div>
 
-  <mat-grid-list cols="2" rowHeight="300px">
+    <div class="content">
-    <mat-grid-tile>
+        <div class="meter-list">
-      <app-meter-data-list class="full-width" [meterData]="meterDataService.getMeterDataByType(this.usageTypes.ENERGY)"
+            <h2 class="headline">
+                MeterList
+            </h2>
+            <div class="divider">
+                <div style="margin-right: 15px">
+                    <app-meter-data-list class="full-width"
+                        [meterData]="meterDataService.getMeterDataByType(this.usageTypes.ENERGY)"
                         [type]="this.usageTypes.ENERGY"></app-meter-data-list>
-    </mat-grid-tile>
+                </div>
-
+                <div style="margin-left: 15px;">
-    <mat-grid-tile>
+                    <app-meter-data-list class="full-width"
-      <!-- <app-meter-data-list class="full-width" [meterData]="preparedMeterData[1]"></app-meter-data-list> -->
+                        [meterData]="meterDataService.getMeterDataByType(this.usageTypes.WATER)"
-      <app-meter-data-list class="full-width" [meterData]="meterDataService.getMeterDataByType(this.usageTypes.WATER)"
                         [type]="this.usageTypes.WATER"></app-meter-data-list>
-    </mat-grid-tile>
+                </div>
-    <!-- <mat-grid-tile>
+            </div>
-      <app-meter-data-list class="full-width" [meterData]="preparedMeterData[2]"></app-meter-data-list>
+        </div>
-    </mat-grid-tile>
+        <div class="charts">
-    <mat-grid-tile>
+            <h2 class="headline">
-      <app-meter-data-list class="full-width" [meterData]="preparedMeterData[3]"></app-meter-data-list>
+                Charts
-    </mat-grid-tile> -->
+            </h2>
-
+            <div class="divider">
-    <mat-grid-tile>
+                <div style="margin-right: 15px">
                     <app-chart [meterData]="meterDataEnergy"></app-chart>
-    </mat-grid-tile>
+                </div>
-  </mat-grid-list>
+                <div style="margin-left: 15px;">
+                    <app-chart [meterData]="meterDataWater"></app-chart>
+                </div>
+            </div>
 
         </div>
+    </div>
+</div>

rossa-tech-cli/src/app/components/dashboard/dashboard.component.ts

@@ -16,6 +16,7 @@ import { MeterDataService } from 'src/app/core/services/meterData.service';
 import { MeterDataAddDialogComponent } from 'src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
 import { MeterDataListComponent } from '../subcomponents/meter-data-list/meter-data-list.component';
 import { ChartComponent } from '../subcomponents/chart/chart.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-dashboard',
@@ -27,13 +28,14 @@ import { ChartComponent } from '../subcomponents/chart/chart.component';
     MatGridListModule,
     MeterDataListComponent,
     ChartComponent,
+    MatButtonModule,
   ],
 })
 export class DashboardComponent {
   usageTypes = UsageType;
   preparedMeterData: PreparedMeterData[] = [];
   meterDataEnergy: PreparedMeterData[] = [];
-  // meterDataWater: MeterData[] = [];
+  meterDataWater: PreparedMeterData[] = [];
   displayedColumns: string[] = ['date', 'amount', 'meter'];
 
   // injects
@@ -61,6 +63,11 @@ export class DashboardComponent {
             this.meterDataEnergy = data;
           },
         });
+        this.meterDataService.waterMeterData.subscribe({
+          next: (data: PreparedMeterData[]) => {
+            this.meterDataWater = data;
+          },
+        });
         this.meterDataService.preparedMeterData.subscribe({
           next: (data: PreparedMeterData[]) => {
             this.preparedMeterData = data;

rossa-tech-cli/src/app/components/footer/footer.component.html

@@ -0,0 +1,8 @@
+<div class="footer-wrapper" *ngIf="userLoggedIn">
+    <div class="version-web" *ngIf="versionWeb">
+        Web: v{{versionWeb}}
+    </div>
+    <div class="version-api" *ngIf="versionApi">
+        API: v{{versionApi}}
+    </div>
+</div>

rossa-tech-cli/src/app/components/footer/footer.component.scss

@@ -0,0 +1,8 @@
+div.footer-wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 36px;
+  justify-content: flex-end;
+  padding-right: 16px;
+  align-items: center;
+}

rossa-tech-cli/src/app/components/footer/footer.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { LoaderService } from '../loader/loader.service';
+import { environment } from 'src/environments/environment';
+import { AuthService } from 'src/app/auth/auth.service';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class FooterComponent implements OnInit {
+  versionWeb: number | undefined = environment.version;
+  versionApi: number | undefined;
+  userLoggedIn: Boolean = false;
+
+  //injects
+  private authService: AuthService = inject(AuthService);
+  // private loaderService: LoaderService = inject(LoaderService);
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.authService.isLoggedIn.subscribe((res) => {
+      this.userLoggedIn = res;
+    });
+  }
+}

rossa-tech-cli/src/app/constants.ts

@@ -1 +1 @@
-export const METERS = ['1LOG', '1HEM', 'WATER', 'GARDEN'];
+export const METERS = ['1LOG', '1EHM', 'WATER', 'GARDEN'];

rossa-tech-cli/src/app/core/dataModels/Meter.ts

@@ -1,22 +0,0 @@
-export class Meter {
-  id: number;
-  name: '1LOG' | '1HEM' | 'WATER' | 'GARDEN';
-  type?: 'ENERGY' | 'WATER';
-
-  constructor(
-    id: number,
-    name?: '1LOG' | '1HEM' | 'WATER' | 'GARDEN',
-    type?: 'ENERGY' | 'WATER'
-  ) {
-    this.id = id || 0;
-    this.name = name || '1LOG';
-    this.type = type || 'ENERGY';
-  }
-}
-
-export enum Meters {
-  '1LOG' = '1LOG',
-  '1HEM' = '1HEM',
-  'WATER' = 'WATER',
-  'GARDEN' = 'GARDEN',
-}

rossa-tech-cli/src/app/core/dataModels/Meterdata.ts

@@ -1,11 +1,11 @@
 export class Meter {
   id: number;
-  name: '1LOG' | '1HEM' | 'WATER' | 'GARDEN';
+  name: '1LOG' | '1EHM' | 'WATER' | 'GARDEN';
   type?: 'ENERGY' | 'WATER';
 
   constructor(
     id: number,
-    name?: '1LOG' | '1HEM' | 'WATER' | 'GARDEN',
+    name?: '1LOG' | '1EHM' | 'WATER' | 'GARDEN',
     type?: 'ENERGY' | 'WATER'
   ) {
     this.id = id || 0;
@@ -16,7 +16,7 @@ export class Meter {
 
 export enum Meters {
   '1LOG' = '1LOG',
-  '1HEM' = '1HEM',
+  '1EHM' = '1EHM',
   'WATER' = 'WATER',
   'GARDEN' = 'GARDEN',
 }

rossa-tech-cli/src/app/core/services/database.service.ts

@@ -7,8 +7,7 @@ import {
 import { Observable, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
-import { MeterData } from '../dataModels/Meterdata';
+import { Meter, MeterData } from '../dataModels/Meterdata';
-import { Meter } from '../dataModels/Meter';
 
 @Injectable({
   providedIn: 'root',

rossa-tech-cli/src/app/core/services/meterData.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import {
   MeterData,
   MeterDataForYear,
+  Meters,
   PreparedMeterData,
 } from '../dataModels/Meterdata';
 import { UsageType } from '../dataModels/UsageType';
@@ -13,7 +14,6 @@ import { Observable, of } from 'rxjs';
 export class MeterDataService {
   public preparedMeterDataObject: PreparedMeterData[] = [];
   private meterDataObject: MeterData[] = new Array();
-  // public energyMeterDataObject: MeterData[] = [];
 
   constructor() {}
 
@@ -21,18 +21,28 @@ export class MeterDataService {
     this.meterDataObject = meterData;
   }
 
-  // get meterData(): Observable<MeterData[]> {
-  //   return
-  // }
-
   get preparedMeterData(): Observable<PreparedMeterData[]> {
     return of(this.preparedMeterDataObject);
   }
 
   get energyMeterData(): Observable<PreparedMeterData[]> {
-    // console.log(this.energyMeterDataObject);
+    const energyMeters: PreparedMeterData[] =
-    return of(this.preparedMeterDataObject.slice(0, 2));
+      this.preparedMeterDataObject.filter(
-    // return of(this.energyMeterDataObject);
+        (md: PreparedMeterData) =>
+          md.meter.name === Meters['1EHM'] || md.meter.name === Meters['1LOG']
+      );
+    console.log({ energyMeters });
+    return of(energyMeters);
+  }
+
+  get waterMeterData(): Observable<PreparedMeterData[]> {
+    const waterMeters: PreparedMeterData[] =
+      this.preparedMeterDataObject.filter(
+        (md: PreparedMeterData) =>
+          md.meter.name === Meters.GARDEN || md.meter.name === Meters.WATER
+      );
+    console.log({ waterMeters });
+    return of(waterMeters);
   }
 
   getMeterAmoutforYear(meterName: string, year: number): number {

rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.ts

@@ -7,12 +7,12 @@ import {
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { Meter, Meters } from 'src/app/core/dataModels/Meter';
+import { Meter, MeterData, Meters } from 'src/app/core/dataModels/Meterdata';
-import { MeterData } from 'src/app/core/dataModels/Meterdata';
 import { UsageType } from 'src/app/core/dataModels/UsageType';
 import { DatabaseService } from 'src/app/core/services/database.service';
 
@@ -29,6 +29,7 @@ import { DatabaseService } from 'src/app/core/services/database.service';
     FormsModule,
     ReactiveFormsModule,
     CommonModule,
+    MatButtonModule,
   ],
 })
 export class MeterDataAddDialogComponent implements OnInit {
@@ -78,7 +79,7 @@ export class MeterDataAddDialogComponent implements OnInit {
   }
 
   setUsageType(meterName: string): void {
-    if (meterName === Meters['1HEM'] || meterName === Meters['1LOG']) {
+    if (meterName === Meters['1EHM'] || meterName === Meters['1LOG']) {
       this.usageType = this.usageTypes.ENERGY;
     } else if (meterName === Meters.GARDEN || meterName === Meters.WATER) {
       this.usageType = this.usageTypes.WATER;

rossa-tech-cli/src/environments/environment.prod.ts

@@ -1,5 +1,6 @@
 export const environment = {
   production: true,
-  env: "prod",
+  env: 'prod',
-  apiBaseUrl: "http://192.168.178.21:8182/api",
+  apiBaseUrl: 'http://192.168.178.21:8182/api',
+  version: 0.2,
 };

rossa-tech-cli/src/environments/environment.ts

@@ -6,6 +6,7 @@ export const environment = {
   production: false,
   env: 'local',
   apiBaseUrl: 'http://localhost:8080',
+  version: 0.2,
   // apiBaseUrl: 'http://192.168.178.21:8182/api',
 };
 

rossa-tech-cli/src/styles.scss

@@ -71,7 +71,7 @@ button {
     border-top: #a6a6a6 1px solid;
     display: flex;
     flex-direction: row;
-    justify-content: end;
+    justify-content: flex-end;
   }
 }
 
@@ -79,3 +79,35 @@ button {
 .mat-mdc-table .mat-mdc-row {
   height: 42px;
 }
+
+div.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  div.content {
+    min-height: 500px;
+    overflow: auto;
+    height: 100%;
+    padding: 16px;
+
+    div.meter-list,
+    div.charts {
+      display: flex;
+      flex-direction: column;
+
+      h2.headline {
+        font-size: 26px;
+      }
+
+      div.divider {
+        display: flex;
+        flex-direction: row;
+
+        div {
+          flex: 1;
+        }
+      }
+    }
+  }
+}

rossa-tech-cli/tsconfig.json

@@ -17,10 +17,7 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
-    "lib": [
+    "lib": ["es2020", "dom"],
-      "es2020",
-      "dom"
-    ],
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {