Add chart, adjust html, logic and remove unused code
This commit is contained in:
Peter
40
rossa-tech-cli/package-lock.json
generated
40
rossa-tech-cli/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -3,16 +3,26 @@
|
||||
<button mat-raised-button color="primary" (click)="addMeterData()">Neuer Eintrag</button>
|
||||
</div>
|
||||
|
||||
|
||||
<mat-grid-list cols="2" rowHeight="500px">
|
||||
<mat-grid-list cols="2" rowHeight="300px">
|
||||
<mat-grid-tile>
|
||||
<app-meter-data-wrapper class="full-width" [meterData]="meterDataEnergyDTO"
|
||||
[type]="usageTypes.ENERGY"></app-meter-data-wrapper>
|
||||
<app-meter-data-list class="full-width" [meterData]="meterDataService.getMeterDataByType(this.usageTypes.ENERGY)"
|
||||
[type]="this.usageTypes.ENERGY"></app-meter-data-list>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile>
|
||||
<app-meter-data-wrapper class="full-width" [meterData]="meterDataWaterDTO"
|
||||
[type]="usageTypes.WATER"></app-meter-data-wrapper>
|
||||
<!-- <app-meter-data-list class="full-width" [meterData]="preparedMeterData[1]"></app-meter-data-list> -->
|
||||
<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>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
if (meterData) {
|
||||
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;
|
||||
test(): void {
|
||||
this.meterDataService.getMeterDataByType(this.usageTypes.ENERGY);
|
||||
}
|
||||
|
||||
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) => {
|
||||
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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,
|
||||
}));
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
amount: {{amount}}
|
||||
|
||||
<div class="meter-data-list-wrapper">
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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
|
||||
// );
|
||||
// }
|
||||
}
|
||||
@@ -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') {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
constructor(
|
||||
id: number,
|
||||
name?: '1LOG' | '1HEM' | 'WATER' | 'GARDEN',
|
||||
type?: 'ENERGY' | 'WATER'
|
||||
) {
|
||||
this.id = id || 0;
|
||||
this.name = name || '1LOG';
|
||||
this.type = type || 'ENERGY';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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",
|
||||
date: Date,
|
||||
amount: number,
|
||||
meter: Meter,
|
||||
type?: 'ENERGY' | 'WATER',
|
||||
date?: Date,
|
||||
amount?: number,
|
||||
meter?: Meter,
|
||||
id?: number
|
||||
) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
this.date = date;
|
||||
this.amount = amount;
|
||||
this.meter = meter;
|
||||
this.id = id || undefined;
|
||||
this.type = type || 'ENERGY';
|
||||
this.date = date || new Date();
|
||||
this.amount = amount || 0;
|
||||
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 || [];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,8 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import { MeterData } from "../dataModels/Meterdata";
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@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 [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
168
rossa-tech-cli/src/app/core/services/meterData.service.ts
Normal file
168
rossa-tech-cli/src/app/core/services/meterData.service.ts
Normal file
@@ -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 {
|
||||
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
}
|
||||
@@ -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>
|
||||
BIN
rossa-tech-cli/src/assets/icon.png
Normal file
BIN
rossa-tech-cli/src/assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Reference in New Issue
Block a user