Add chart, adjust html, logic and remove unused code

.vscode/settings.json

@@ -18,6 +18,6 @@
     "titleBar.activeForeground": "#e7e7e7",
     "titleBar.inactiveBackground": "#4990b599",
     "titleBar.inactiveForeground": "#e7e7e799"
-  },
+},
   "peacock.color": "#4990b5"
 }

api/pom.xml

@@ -24,6 +24,12 @@
         <java.version>1.8</java.version>
     </properties>
     <dependencies>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-actuator</artifactId>
+        </dependency>
+
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>

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

@@ -23,11 +23,11 @@ INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2022-01-
 INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2022-12-31 00:00:00', 464.00, 3);
 INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2021-01-01 00:00:00', 153.00, 3);
 INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2021-12-31 00:00:00', 288.00, 3);
-INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2020-03-03 00:00:00', 153.00, 3);
+INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2020-03-03 00:00:00', 149.00, 3);
-INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2020-12-31 00:00:00', 288.00, 3);
+INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2020-12-31 00:00:00', 153.00, 3);
 
-INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('ENERGY', '2023-05-31 00:00:00', 524.00, 3);
+INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2023-05-31 00:00:00', 524.00, 3);
-INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('ENERGY', '2023-04-26 00:00:00', 496.00, 3);
+INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2023-04-26 00:00:00', 496.00, 3);
 
 INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2022-01-01 00:00:00', 116.00, 4);
 INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2022-12-31 00:00:00', 189.00, 4);
@@ -37,6 +37,10 @@ INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2020-03-
 INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('WATER', '2020-12-31 00:00:00', 81.00, 4);
 
 
+INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('ENERGY', '2023-08-31 00:00:00', 13944.00, 1);
+INSERT INTO meter_data (type, date, amount, meter_id) VALUES ('ENERGY', '2023-08-31 00:00:00', 14496.00, 2);
+
+
 /***************
 
 

rossa-tech-cli/package-lock.json

@@ -19,6 +19,8 @@
         "@angular/platform-browser-dynamic": "^16.0.1",
         "@angular/router": "^16.0.1",
         "@mdi/angular-material": "^7.2.96",
+        "chart.js": "^4.3.0",
+        "ng2-charts": "^5.0.3",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -2929,6 +2931,11 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -5156,6 +5163,17 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
+      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -8353,6 +8371,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -9164,6 +9187,23 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ng2-charts": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-5.0.3.tgz",
+      "integrity": "sha512-/lTY64tiCN/pJPx+oIWRWOhtCk+ZbAU9yAUDNnRJwhe+a8ajcO5yS0tVOm5k7pj3doVp9+UdBRahyt6woJ95Rw==",
+      "dependencies": {
+        "lodash-es": "^4.17.15",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": ">=16.0.0",
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@angular/platform-browser": ">=16.0.0",
+        "chart.js": "^3.4.0 || ^4.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

rossa-tech-cli/package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser-dynamic": "^16.0.1",
     "@angular/router": "^16.0.1",
     "@mdi/angular-material": "^7.2.96",
+    "chart.js": "^4.3.0",
+    "ng2-charts": "^5.0.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
@@ -38,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.9.5"
   }
-}
+}

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

@@ -10,8 +10,6 @@ import { AppComponent } from './app.component';
 import { LoginComponent } from './components/loginPage/login.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { MeterDataListComponent } from './components/subcomponents/meter-data-list/meter-data-list.component';
-import { ConsumptionLastYearComponent } from './components/subcomponents/consumption-last-year/consumption-last-year.component';
-import { MeterDataWrapperComponent } from './components/subcomponents/meter-data-wrapper/meter-data-wrapper.component';
 import { HeaderComponent } from './components/header/header.component';
 import { LoaderComponent } from './components/loader/loader.component';
 import { MeterDataAddDialogComponent } from './dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
@@ -35,6 +33,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { ChartComponent } from './components/subcomponents/chart/chart.component';
+import { NgChartsModule } from 'ng2-charts';
 
 @NgModule({
   declarations: [
@@ -44,10 +44,9 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     LoaderComponent,
     HeaderComponent,
     MeterDataListComponent,
-    ConsumptionLastYearComponent,
-    MeterDataWrapperComponent,
     MeterDataAddDialogComponent,
     SnackbarComponent,
+    ChartComponent,
   ],
   imports: [
     BrowserModule,
@@ -72,6 +71,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
     MatDatepickerModule,
     MatNativeDateModule,
     MatSnackBarModule,
+    NgChartsModule,
   ],
   providers: [
     MatDatepickerModule,

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

@@ -3,16 +3,26 @@
     <button mat-raised-button color="primary" (click)="addMeterData()">Neuer Eintrag</button>
   </div>
 
-
+  <mat-grid-list cols="2" rowHeight="300px">
-  <mat-grid-list cols="2" rowHeight="500px">
     <mat-grid-tile>
-      <app-meter-data-wrapper class="full-width" [meterData]="meterDataEnergyDTO"
+      <app-meter-data-list class="full-width" [meterData]="meterDataService.getMeterDataByType(this.usageTypes.ENERGY)"
-        [type]="usageTypes.ENERGY"></app-meter-data-wrapper>
+        [type]="this.usageTypes.ENERGY"></app-meter-data-list>
     </mat-grid-tile>
 
     <mat-grid-tile>
-      <app-meter-data-wrapper class="full-width" [meterData]="meterDataWaterDTO"
+      <!-- <app-meter-data-list class="full-width" [meterData]="preparedMeterData[1]"></app-meter-data-list> -->
-        [type]="usageTypes.WATER"></app-meter-data-wrapper>
+      <app-meter-data-list class="full-width" [meterData]="meterDataService.getMeterDataByType(this.usageTypes.WATER)"
+        [type]="this.usageTypes.WATER"></app-meter-data-list>
+    </mat-grid-tile>
+    <!-- <mat-grid-tile>
+      <app-meter-data-list class="full-width" [meterData]="preparedMeterData[2]"></app-meter-data-list>
+    </mat-grid-tile>
+    <mat-grid-tile>
+      <app-meter-data-list class="full-width" [meterData]="preparedMeterData[3]"></app-meter-data-list>
+    </mat-grid-tile> -->
+
+    <mat-grid-tile>
+      <app-chart [meterData]="meterDataEnergy"></app-chart>
     </mat-grid-tile>
   </mat-grid-list>
 

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

@@ -1,12 +1,16 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { LoaderService } from 'src/app/components/loader/loader.service';
-import { MeterData } from 'src/app/core/dataModels/Meterdata';
+import {
+  MeterData,
+  PreparedMeterData,
+} from 'src/app/core/dataModels/Meterdata';
 import { UsageType } from 'src/app/core/dataModels/UsageType';
 import { DatabaseService } from 'src/app/core/services/database.service';
 import { ErrorService } from 'src/app/core/services/error.service';
 import { GlobalService } from 'src/app/core/services/global.service';
+import { MeterDataService } from 'src/app/core/services/meterData.service';
 import { MeterDataAddDialogComponent } from 'src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
 
 @Component({
@@ -17,35 +21,45 @@ import { MeterDataAddDialogComponent } from 'src/app/dialogs/meter-data-add-dial
 export class DashboardComponent {
   usageTypes = UsageType;
 
-  meterDataEnergy: MeterData[] = [];
+  preparedMeterData: PreparedMeterData[] = [];
+
+  meterDataEnergy: PreparedMeterData[] = [];
   meterDataWater: MeterData[] = [];
 
-  meterDataEnergyDTO: MeterData[] = [];
-  meterDataWaterDTO: MeterData[] = [];
-
-  energyAverageAmountLastYear1Log: number = 0;
-  energyAverageAmountLastYear1Hem: number = 0;
-  waterAverageAmountLastYear: number = 0;
-
   displayedColumns: string[] = ['date', 'amount', 'meter'];
 
   constructor(
-    private dataService: DatabaseService,
+    private dataBaseService: DatabaseService,
+    public meterDataService: MeterDataService,
     private loaderService: LoaderService,
     private globalService: GlobalService,
     private errorService: ErrorService,
     private dialog: MatDialog
-  ) {
+  ) {}
+
+  ngOnInit(): void {
     this.loadMeterData();
   }
 
   loadMeterData(): void {
     this.loaderService.show();
-    this.dataService.getMeterData().subscribe({
+    this.dataBaseService.getMeterData().subscribe({
       next: (data) => {
-        this.splitMeterData(data);
+        this.meterDataService.prepareMeterData(data);
+
+        this.meterDataService.energyMeterData.subscribe({
+          next: (data: PreparedMeterData[]) => {
+            this.meterDataEnergy = data;
+          },
+        });
+        this.meterDataService.preparedMeterData.subscribe({
+          next: (data: PreparedMeterData[]) => {
+            this.preparedMeterData = data;
+            console.log({ data });
+          },
+        });
+
         this.loaderService.hide();
-        console.log('Meter data:', data);
       },
       error: (error: HttpErrorResponse) => {
         this.errorService.handleError(error);
@@ -54,31 +68,8 @@ export class DashboardComponent {
     });
   }
 
-  splitMeterData(meterData: MeterData[]): void {
+  test(): void {
-    if (meterData) {
+    this.meterDataService.getMeterDataByType(this.usageTypes.ENERGY);
-      meterData.forEach((data) => {
-        if (data.type === this.usageTypes.ENERGY) {
-          this.meterDataEnergy.push(data);
-        } else if (data.type === this.usageTypes.WATER) {
-          this.meterDataWater.push(data);
-        }
-      });
-      this.initEnergyMeterData();
-      this.initWaterMeterDate();
-    }
-  }
-
-  initEnergyMeterData(): void {
-    this.meterDataEnergy = this.globalService.sortMeterData(
-      this.meterDataEnergy
-    );
-    this.meterDataEnergyDTO = this.meterDataEnergy;
-  }
-
-  initWaterMeterDate(): void {
-    this.meterDataWater = this.globalService.sortMeterData(this.meterDataWater);
-
-    this.meterDataWaterDTO = this.meterDataWater;
   }
 
   addMeterData(): void {
@@ -92,8 +83,9 @@ export class DashboardComponent {
       console.log({ newMeterData });
 
       if (newMeterData) {
-        this.dataService.addMeterData(newMeterData).subscribe({
+        this.dataBaseService.addMeterData(newMeterData).subscribe({
           next: (meterData: MeterData) => {
+            // todo: refresh data
             console.log({ meterData });
           },
           error: (error: HttpErrorResponse) => {

rossa-tech-cli/src/app/components/subcomponents/chart/chart.component.html

@@ -0,0 +1,5 @@
+<div style="width: 100%; height: 280px;">
+  <canvas baseChart style="display: block; width: inherit;height: inherit;" [datasets]="barChartData"
+    [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [type]="barChartType">
+  </canvas>
+</div>

rossa-tech-cli/src/app/components/subcomponents/chart/chart.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartComponent } from './chart.component';
+
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ChartComponent]
+    });
+    fixture = TestBed.createComponent(ChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

rossa-tech-cli/src/app/components/subcomponents/chart/chart.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {
+  MeterData,
+  MeterDataForYear,
+  PreparedMeterData,
+} from 'src/app/core/dataModels/Meterdata';
+import { ChartType, ChartOptions, ChartDataset } from 'chart.js';
+
+// import Chart from 'chart.js/auto';
+import { BaseChartDirective } from 'ng2-charts';
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.scss'],
+})
+export class ChartComponent {
+  @Input() meterData: any[] = [];
+
+  // Chart properties
+  public barChartOptions: ChartOptions = {
+    responsive: true,
+    scales: { x: { stacked: false }, y: { stacked: false } },
+    maintainAspectRatio: false,
+  };
+  public barChartLabels: string[] = [];
+  public barChartType: ChartType = 'bar';
+  public barChartLegend = true;
+  public barChartData: ChartDataset[] = [];
+
+  ngOnChanges(): void {
+    this.updateChart();
+  }
+
+  private updateChart(): void {
+    this.barChartLabels = this.meterData[0]?.meterDataForYear
+      ?.map((entry: MeterDataForYear) => entry.year.toString())
+      .reverse();
+
+    this.barChartData = this.meterData?.map((meter) => ({
+      data: meter.meterDataForYear
+        .map((entry: MeterDataForYear) => entry.amount)
+        .reverse(),
+      label: meter.meter.name,
+    }));
+  }
+}

rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.html

@@ -1,49 +0,0 @@
-<ng-container *ngIf="type == usageTypes.ENERGY; else water">
-  <div style="display: flex; flex-direction: column">
-
-    <h2 class="text-center">{{type}}</h2>
-
-    <mat-grid-list cols="2" rowHeight="50px">
-      <mat-grid-tile>
-        1LOG - Hausstrom
-      </mat-grid-tile>
-      <mat-grid-tile>
-        1HEM - Heizstrom
-      </mat-grid-tile>
-      <mat-grid-tile>
-        <div>{{averageEnergy1Log}} kWh</div>
-      </mat-grid-tile>
-      <mat-grid-tile>
-        <div>{{averageEnergy1Hem}} kWh</div>
-      </mat-grid-tile>
-    </mat-grid-list>
-  </div>
-</ng-container>
-
-<ng-template #water>
-  <div style="display: flex; flex-direction: column">
-
-    <h2 class="text-center">{{type}}</h2>
-
-    <mat-grid-list cols="3" rowHeight="50px">
-      <mat-grid-tile>
-        Wasser
-      </mat-grid-tile>
-      <mat-grid-tile>
-        Gartenwasser
-      </mat-grid-tile>
-      <mat-grid-tile>
-        Summe
-      </mat-grid-tile>
-      <mat-grid-tile>
-        <div>{{averageWater}} m³</div>
-      </mat-grid-tile>
-      <mat-grid-tile>
-        <div>{{averageGarden}} m³</div>
-      </mat-grid-tile>
-      <mat-grid-tile>
-        <div>{{averageWater - averageGarden}} m³</div>
-      </mat-grid-tile>
-    </mat-grid-list>
-  </div>
-</ng-template>

rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.spec.ts

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

rossa-tech-cli/src/app/components/subcomponents/consumption-last-year/consumption-last-year.component.ts

@@ -1,145 +0,0 @@
-import { Component, Input, OnChanges } from '@angular/core';
-import { Meters } from 'src/app/core/dataModels/Meter';
-import { MeterData } from 'src/app/core/dataModels/Meterdata';
-import { UsageType } from 'src/app/core/dataModels/UsageType';
-import { GlobalService } from 'src/app/core/services/global.service';
-
-@Component({
-  selector: 'app-consumption-last-year',
-  templateUrl: './consumption-last-year.component.html',
-  styleUrls: ['./consumption-last-year.component.scss'],
-})
-export class ConsumptionLastYearComponent implements OnChanges {
-  @Input()
-  meterData!: MeterData[];
-  @Input()
-  type!: UsageType;
-
-  usageTypes = UsageType;
-  meters = Meters;
-
-  meterDataEnergy1Hem: MeterData[] = [];
-  averageEnergy1Hem!: number;
-
-  meterDataEnergy1Log: MeterData[] = [];
-  averageEnergy1Log!: number;
-
-  meterDataWasser: MeterData[] = [];
-  averageWater!: number;
-
-  meterDataAbwasser: MeterData[] = [];
-  averageGarden!: number;
-
-  currentYear = new Date().getFullYear();
-
-  constructor(private globalService: GlobalService) {}
-
-  ngOnChanges(): void {
-    if (this.type && this.type === this.usageTypes.ENERGY) {
-      console.log('count energy');
-
-      if (this.meterData) {
-        this.meterData.forEach((data) => {
-          if (data.meter.name === this.meters['1LOG']) {
-            this.meterDataEnergy1Log.push(data);
-          } else if (data.meter.name === this.meters['1HEM']) {
-            this.meterDataEnergy1Hem.push(data);
-          }
-        });
-
-        this.meterDataEnergy1Log = this.globalService.sortMeterData(
-          this.meterDataEnergy1Log
-        );
-        this.averageEnergy1Log = this.countAverageAmountForYear(
-          this.meterDataEnergy1Log,
-          this.currentYear - 1
-        );
-
-        this.meterDataEnergy1Hem = this.globalService.sortMeterData(
-          this.meterDataEnergy1Hem
-        );
-        this.averageEnergy1Hem = this.countAverageAmountForYear(
-          this.meterDataEnergy1Hem,
-          this.currentYear - 1
-        );
-      }
-    } else if (this.type && this.type === this.usageTypes.WATER) {
-      console.log('count water');
-
-      if (this.meterData) {
-        this.meterData.forEach((data) => {
-          if (data.meter.name === this.meters['WATER']) {
-            this.meterDataWasser.push(data);
-          } else if (data.meter.name === this.meters['GARDEN']) {
-            this.meterDataAbwasser.push(data);
-          }
-        });
-
-        this.meterDataWasser = this.globalService.sortMeterData(
-          this.meterDataWasser
-        );
-        this.averageWater = this.countAverageAmountForYear(
-          this.meterDataWasser,
-          this.currentYear - 1
-        );
-
-        this.meterDataAbwasser = this.globalService.sortMeterData(
-          this.meterDataAbwasser
-        );
-        this.averageGarden = this.countAverageAmountForYear(
-          this.meterDataAbwasser,
-          this.currentYear - 1
-        );
-      }
-    }
-  }
-
-  // countAverageAmountForLastYear(meterData: MeterData[]): number {
-  //   const currentYear = new Date().getFullYear();
-
-  //   let lastYear = meterData.filter(
-  //     (data) => new Date(data.date).getFullYear() === currentYear - 1
-  //   );
-
-  //   lastYear = this.globalService.sortMeterData(lastYear);
-  //   if (lastYear.length > 0) {
-  //     const end = lastYear[0];
-
-  //     const startIdx =
-  //       meterData.findIndex((el) => el === lastYear[lastYear.length - 1]) + 1;
-  //     const start = meterData[startIdx];
-
-  //     console.log({ end: end.amount, startIdx, startAm: start.amount, start });
-
-  //     return end.amount - start.amount;
-  //   }
-
-  //   return 0;
-  // }
-
-  /* FOR TEST*/
-  countAverageAmountForYear(meterData: MeterData[], year: number): number {
-    // const currentYear = new Date().getFullYear();
-
-    let filteredData = meterData.filter(
-      (data) => new Date(data.date).getFullYear() === year
-    );
-
-    filteredData = this.globalService.sortMeterData(filteredData);
-    if (filteredData.length > 0) {
-      const end = filteredData[0];
-
-      const startIdx =
-        meterData.findIndex(
-          (el) => el === filteredData[filteredData.length - 1]
-        ) + 1;
-      const start = meterData[startIdx];
-
-      console.log({ end: end.amount, startIdx, startAm: start.amount, start });
-
-      return end.amount - start.amount;
-    }
-
-    return 0;
-  }
-}

rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.html

@@ -1,3 +1,5 @@
+amount: {{amount}}
+
 <div class="meter-data-list-wrapper">
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 

rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.ts

@@ -1,7 +1,10 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { UsageType } from 'src/app/core/dataModels/UsageType';
-import { MeterData } from 'src/app/core/dataModels/Meterdata';
+import {
+  MeterData,
+  PreparedMeterData,
+} from 'src/app/core/dataModels/Meterdata';
 
 @Component({
   selector: 'app-meter-data-list',
@@ -10,9 +13,13 @@ import { MeterData } from 'src/app/core/dataModels/Meterdata';
 })
 export class MeterDataListComponent implements OnInit, OnChanges {
   @Input()
-  meterData: MeterData[] = [];
+  meterData!: MeterData[];
   @Input()
-  type: UsageType = UsageType.ENERGY;
+  type!: UsageType;
+  amount: number | undefined;
+  // meterData: PreparedMeterData = new PreparedMeterData();
+  // @Input()
+  // type: UsageType = UsageType.ENERGY;
 
   displayedColumns: string[] = ['id', 'date', 'amount', 'meter'];
 
@@ -105,6 +112,11 @@ export class MeterDataListComponent implements OnInit, OnChanges {
   ngOnInit(): void {}
 
   ngOnChanges(): void {
-    this.dataSource = new MatTableDataSource(this.meterData);
+    this.dataSource = new MatTableDataSource(
+      this.meterData
+      // this.meterData?.meterDataForYear[0].meterData
+    );
+
+    // this.amount = this.meterData?.meterDataForYear[0].amount;
   }
 }

rossa-tech-cli/src/app/components/subcomponents/meter-data-wrapper/meter-data-wrapper.component.html

@@ -1,3 +0,0 @@
-<app-consumption-last-year [meterData]="meterData" [type]="type"></app-consumption-last-year>
-
-<app-meter-data-list [meterData]="meterData" [type]="type"></app-meter-data-list>

rossa-tech-cli/src/app/components/subcomponents/meter-data-wrapper/meter-data-wrapper.component.spec.ts

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

rossa-tech-cli/src/app/components/subcomponents/meter-data-wrapper/meter-data-wrapper.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input, OnChanges } from '@angular/core';
-import { MeterData } from 'src/app/core/dataModels/Meterdata';
-import { UsageType } from 'src/app/core/dataModels/UsageType';
-
-@Component({
-  selector: 'app-meter-data-wrapper',
-  templateUrl: './meter-data-wrapper.component.html',
-  styleUrls: ['./meter-data-wrapper.component.scss'],
-})
-export class MeterDataWrapperComponent /* implements OnChanges */ {
-  @Input()
-  meterData: MeterData[] = [];
-  @Input()
-  type: UsageType = UsageType.ENERGY;
-
-  // usageTypes = UsageType;
-  // averageConsumptionLastYear: number;
-
-  constructor() {}
-
-  // ngOnChanges(): void {
-  //   this.averageConsumptionLastYear = this.countAverageAmountForLastYear(
-  //     this.meterData
-  //   );
-  // }
-}

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

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

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

@@ -1,23 +1,66 @@
-import { Meter } from "./Meter";
+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',
+}
 
 export class MeterData {
   id?: number;
-  type: "ENERGY" | "WATER";
+  type: 'ENERGY' | 'WATER';
   date: Date;
   amount: number;
   meter: Meter;
 
   constructor(
-    type: "ENERGY" | "WATER",
+    type?: 'ENERGY' | 'WATER',
-    date: Date,
+    date?: Date,
-    amount: number,
+    amount?: number,
-    meter: Meter,
+    meter?: Meter,
     id?: number
   ) {
-    this.id = id;
+    this.id = id || undefined;
-    this.type = type;
+    this.type = type || 'ENERGY';
-    this.date = date;
+    this.date = date || new Date();
-    this.amount = amount;
+    this.amount = amount || 0;
-    this.meter = meter;
+    this.meter = meter || new Meter(0);
+  }
+}
+
+export class PreparedMeterData {
+  meter: Meter;
+  meterDataForYear: MeterDataForYear[] = [];
+
+  constructor(meter?: Meter, meterDataForYear?: MeterDataForYear[]) {
+    this.meter = meter || new Meter(0);
+    this.meterDataForYear = meterDataForYear || [];
+  }
+}
+
+export class MeterDataForYear {
+  year: number;
+  amount: number;
+  meterData: MeterData[] = [];
+
+  constructor(year?: number, amount?: number, meterData?: MeterData[]) {
+    this.amount = amount || 0;
+    this.year = year || 0;
+    this.meterData = meterData || [];
   }
 }

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

@@ -1,20 +1,8 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-import { MeterData } from "../dataModels/Meterdata";
 
 @Injectable({
-  providedIn: "root",
+  providedIn: 'root',
 })
 export class GlobalService {
   constructor() {}
-
-  sortMeterData(meterData: MeterData[]): MeterData[] {
-    if (meterData.length > 0) {
-      meterData.sort(
-        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
-      );
-      return meterData;
-    } else {
-      return [];
-    }
-  }
 }

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

@@ -0,0 +1,168 @@
+import { Injectable } from '@angular/core';
+import {
+  MeterData,
+  MeterDataForYear,
+  PreparedMeterData,
+} from '../dataModels/Meterdata';
+import { UsageType } from '../dataModels/UsageType';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MeterDataService {
+  public preparedMeterDataObject: PreparedMeterData[] = [];
+  private meterDataObject: MeterData[] = new Array();
+  // public energyMeterDataObject: MeterData[] = [];
+
+  constructor() {}
+
+  setMeterData(meterData: MeterData[]) {
+    this.meterDataObject = meterData;
+  }
+
+  // get meterData(): Observable<MeterData[]> {
+  //   return
+  // }
+
+  get preparedMeterData(): Observable<PreparedMeterData[]> {
+    return of(this.preparedMeterDataObject);
+  }
+
+  get energyMeterData(): Observable<PreparedMeterData[]> {
+    // console.log(this.energyMeterDataObject);
+    return of(this.preparedMeterDataObject.slice(0, 2));
+    // return of(this.energyMeterDataObject);
+  }
+
+  getMeterAmoutforYear(meterName: string, year: number): number {
+    const amount: number = 0;
+    // todo: fill amount
+    return amount;
+  }
+  getMeterDataByMeter(meterName: string): MeterData[] {
+    const meterData: MeterData[] = [];
+    //todo: fill meterData
+    return this.sortMeterData(meterData);
+  }
+  getMeterDataByType(type: string): MeterData[] {
+    let meterData: MeterData[] = [];
+    meterData = this.meterDataObject.filter(
+      (md: MeterData) => md.type === type
+    );
+    return this.sortMeterData(meterData);
+  }
+
+  getMeterDataByMeterAndYear(meterName: string, year: number) {}
+
+  sortMeterData(meterData: MeterData[]): MeterData[] {
+    if (meterData.length > 0) {
+      meterData.sort(
+        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+      );
+      return meterData;
+    } else {
+      return [];
+    }
+  }
+
+  prepareMeterData(rawMeterData: MeterData[]) {
+    this.setMeterData(rawMeterData);
+    this.preparedMeterDataObject = [];
+    if (rawMeterData) {
+      rawMeterData.forEach((data) => {
+        // if (data.type === UsageType.ENERGY) {
+        //   this.energyMeterDataObject.push(data);
+        // }
+        const meterExist = this.preparedMeterDataObject.find(
+          (el) => el.meter.name === data.meter.name
+        );
+
+        if (!meterExist) {
+          const newPreparedMeterData: PreparedMeterData = {
+            meter: data.meter,
+            meterDataForYear: [
+              {
+                year: new Date(data.date).getFullYear(),
+                amount: data.amount,
+                meterData: [data],
+              },
+            ],
+          };
+          this.preparedMeterDataObject.push(newPreparedMeterData);
+        } else {
+          // meter exist, check year
+          const yearExist = meterExist.meterDataForYear.find(
+            (meterByYear) =>
+              meterByYear.year === new Date(data.date).getFullYear()
+          );
+
+          if (yearExist) {
+            yearExist.meterData.push(data);
+            yearExist.meterData = this.sortMeterData(yearExist.meterData);
+          } else {
+            // add new year
+            const newMeterDataForYear: MeterDataForYear = {
+              year: new Date(data.date).getFullYear(),
+              amount: data.amount,
+              meterData: [data],
+            };
+
+            meterExist.meterDataForYear.push(newMeterDataForYear);
+
+            meterExist.meterDataForYear.sort(
+              (a, b) => new Date(b.year).getTime() - new Date(a.year).getTime()
+            );
+          }
+        }
+      });
+
+      console.log('----PREPARE BY YEAR DONE-----');
+      this.countAmountByYear();
+    }
+  }
+
+  countAmountByYear() {
+    this.preparedMeterDataObject.forEach((prepMeterData) => {
+      prepMeterData.meterDataForYear.forEach((year) => {
+        // check if prev year
+        const previousYear = prepMeterData.meterDataForYear.find(
+          (meterByYear) => meterByYear.year === year.year - 1
+        );
+        if (previousYear) {
+          year.amount =
+            year.meterData[0].amount - previousYear.meterData[0].amount;
+        } else {
+          if (year.meterData.length > 1) {
+            year.amount =
+              year.meterData[0].amount -
+              year.meterData[year.meterData.length - 1].amount;
+          } else {
+            console.log('nothing');
+          }
+        }
+      });
+    });
+
+    console.log('----AMOUNT PER YEAR DONE-----');
+  }
+
+  // getDataSummarizedByYear(meterData: MeterData[]):any {
+  //   const yearSummary: YearSummary[] = []
+
+  //   meterData.forEach(data => {
+  //     const year: string = data.date.getFullYear().toString();
+  //     // const exist = yearSummary.find(el => el[year] === undefined)
+  //     if (!yearSummary.hasOwnProperty(year)) {
+  //       const newYearSummary: YearSummary = {
+  //         // year,
+  //         amount: 0,
+  //         meterData: [data]
+  //       }
+  //       yearSummary.add(newYearSummary)
+  //     } else {
+
+  //     }
+  //   })
+  // }
+}

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

@@ -23,6 +23,6 @@
   </div>
 
   <div mat-dialog-actions>
-    <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+    <button mat-raised-button color="primary" (click)="submit()">Eintrag erstellen</button>
   </div>
 </form>