pezi_gi/rossa-tech
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust data and components.

Browse Source
This commit is contained in:
Peter
2023-10-05 13:18:57 +02:00
parent b32c5b165c
commit bba6229c2b
22 changed files with 184 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
rossa-tech-cli/src/app/app.component.css
View File

10
rossa-tech-cli/src/app/app.component.html
View File

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

6
rossa-tech-cli/src/app/app.component.scss
View File

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

2
rossa-tech-cli/src/app/app.component.ts
View File

@@ -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';

2
rossa-tech-cli/src/app/app.module.ts
View File

@@ -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: [

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

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

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

@@ -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;

8
rossa-tech-cli/src/app/components/footer/footer.component.html Normal file
View File

@@ -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>

8
rossa-tech-cli/src/app/components/footer/footer.component.scss Normal file
View File

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

31
rossa-tech-cli/src/app/components/footer/footer.component.ts Normal file
View File

@@ -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;
});
}
}

20
rossa-tech-cli/src/app/components/header/header.component.html
View File

@@ -1,16 +1,16 @@
<div class="header-wrapper" *ngIf="userLoggedIn">
<div class="logo">
<div class="logo">
<!-- <img src='https://dummyimage.com/200x56.png' alt='' /> -->
<img src='./../../../assets/logo.png' width="200" alt='' />
</div>
<!-- <img src='https://dummyimage.com/200x56.png' alt='' /> -->
<img src='./../../../assets/logo.png' width="200" alt='' />
</div>
<div class="nav">
<!-- <button type="button" class="btn btn-link" routerLink="/index">home</button>
<div class="nav">
<!-- <button type="button" class="btn btn-link" routerLink="/index">home</button>
<button type="button" class="btn btn-link" routerLink="/dashboard">dashboard</button> -->
</div>
</div>
<div class="account">
<button mat-raised-button color="primary" (click)="onClickLogout()">logout</button>
</div>
<div class="account">
<button mat-raised-button color="primary" (click)="onClickLogout()">logout</button>
</div>
</div>

2
rossa-tech-cli/src/app/constants.ts
View File

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

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

@@ -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',
}

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

@@ -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',
}

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

@@ -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 } from '../dataModels/Meter';
import { Meter, MeterData } from '../dataModels/Meterdata';
@Injectable({
providedIn: 'root',

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

@@ -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);
return of(this.preparedMeterDataObject.slice(0, 2));
// return of(this.energyMeterDataObject);
const energyMeters: PreparedMeterData[] =
this.preparedMeterDataObject.filter(
(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 {

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

@@ -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 { MeterData } from 'src/app/core/dataModels/Meterdata';
import { Meter, MeterData, Meters } 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;

5
rossa-tech-cli/src/environments/environment.prod.ts
View File

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

1
rossa-tech-cli/src/environments/environment.ts
View File

@@ -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',
};

34
rossa-tech-cli/src/styles.scss
View File

@@ -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;
}
}
}
}
}

5
rossa-tech-cli/tsconfig.json
View File

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