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

Adjust dialog and CSS; Format code

Browse Source
This commit is contained in:
Peter Rossa
2023-05-17 11:19:35 +02:00
parent e0e61a7148
commit f4466f704e
3 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,18 @@
import { HttpErrorResponse } from "@angular/common/http"; import { HttpErrorResponse } from '@angular/common/http';
import { Component } from "@angular/core"; import { Component } from '@angular/core';
import { MatDialog } from "@angular/material/dialog"; import { MatDialog } from '@angular/material/dialog';
import { LoaderService } from "src/app/components/loader/loader.service"; import { LoaderService } from 'src/app/components/loader/loader.service';
import { MeterData } from "src/app/dataModels/Meterdata"; import { MeterData } from 'src/app/dataModels/Meterdata';
import { UsageType } from "src/app/dataModels/UsageType"; import { UsageType } from 'src/app/dataModels/UsageType';
import { MeterDataAddDialogComponent } from "src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component"; import { MeterDataAddDialogComponent } from 'src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
import { DatabaseService } from "src/app/services/database.service"; import { DatabaseService } from 'src/app/services/database.service';
import { ErrorService } from "src/app/services/error.service"; import { ErrorService } from 'src/app/services/error.service';
import { GlobalService } from "src/app/services/global.service"; import { GlobalService } from 'src/app/services/global.service';
@Component({ @Component({
selector: "app-dashboard", selector: 'app-dashboard',
templateUrl: "./dashboard.component.html", templateUrl: './dashboard.component.html',
styleUrls: ["./dashboard.component.scss"], styleUrls: ['./dashboard.component.scss'],
}) })
export class DashboardComponent { export class DashboardComponent {
usageTypes = UsageType; usageTypes = UsageType;
@@ -27,7 +27,7 @@ export class DashboardComponent {
energyAverageAmountLastYear1Hem: number = 0; energyAverageAmountLastYear1Hem: number = 0;
waterAverageAmountLastYear: number = 0; waterAverageAmountLastYear: number = 0;
displayedColumns: string[] = ["date", "amount", "meter"]; displayedColumns: string[] = ['date', 'amount', 'meter'];
constructor( constructor(
private dataService: DatabaseService, private dataService: DatabaseService,
@@ -45,7 +45,7 @@ export class DashboardComponent {
next: (data) => { next: (data) => {
this.splitMeterData(data); this.splitMeterData(data);
this.loaderService.hide(); this.loaderService.hide();
console.log("Meter data:", data); console.log('Meter data:', data);
}, },
error: (error: HttpErrorResponse) => { error: (error: HttpErrorResponse) => {
this.errorService.handleError(error); this.errorService.handleError(error);
@@ -82,7 +82,11 @@ export class DashboardComponent {
} }
addMeterData(): void { addMeterData(): void {
const dialogRef = this.dialog.open(MeterDataAddDialogComponent); const dialogRef = this.dialog.open(MeterDataAddDialogComponent, {
width: '400px',
data: {},
restoreFocus: false,
});
dialogRef.afterClosed().subscribe((newMeterData: MeterData) => { dialogRef.afterClosed().subscribe((newMeterData: MeterData) => {
console.log({ newMeterData }); console.log({ newMeterData });

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

@@ -1,20 +1,23 @@
<h1 mat-dialog-title>Neuer Eintrag - Typ: {{usageType}}</h1> <h1 mat-dialog-title>Neuer Eintrag - Typ: {{usageType}}</h1>
<form [formGroup]="form"> <form [formGroup]="form">
<div mat-dialog-content> <div mat-dialog-content>
<mat-form-field>
<mat-form-field class="full-width">
<mat-label>Datum</mat-label>
<input matInput [matDatepicker]="picker" formControlName="date"> <input matInput [matDatepicker]="picker" formControlName="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field class="full-width">
<mat-label>Meter</mat-label> <mat-label>Zähler</mat-label>
<mat-select formControlName="meter" (valueChange)="setUsageType($event.name)"> <mat-select formControlName="meter" (valueChange)="setUsageType($event.name)">
<mat-option *ngFor="let el of meters" [value]="el">{{el.name}}</mat-option> <mat-option *ngFor="let el of meters" [value]="el">{{el.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field class="full-width">
<mat-label>Zählerstand</mat-label>
<input matInput type="number" formControlName="amount"> <input matInput type="number" formControlName="amount">
</mat-form-field> </mat-form-field>
</div> </div>

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

@@ -55,3 +55,18 @@ div.mat-grid-tile-content {
button { button {
border-radius: 0; border-radius: 0;
} }
// mat-dialog
.mat-mdc-dialog-container {
.mat-mdc-dialog-title {
border-bottom: #a6a6a6 1px solid;
}
.mat-mdc-dialog-content {
}
.mat-mdc-dialog-actions {
border-top: #a6a6a6 1px solid;
display: flex;
flex-direction: row;
justify-content: end;
}
}