patrick/Data
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: less opacity for zero values + code clean

Browse Source
This commit is contained in:
Patrick Haßel 2025-02-27 12:45:23 +01:00
parent 617c9a2ebb
commit f5cbf9cf43
4 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/main/angular/src/app/app.component.html
View File

@ -5,27 +5,27 @@
</div>
<div class="content">
<div class="entry consumption">
<div class="entry consumption" [class.zero]="powerConsumption?.zero">
<div class="name">Verbrauch</div>
<div class="percent">&nbsp;</div>
<div class="value">{{ powerConsumption?.formatted }}</div>
</div>
<div class="entry purchase">
<div class="entry purchase" [class.zero]="powerPurchase?.zero">
<div class="name">Bezug</div>
<div class="percent">{{ powerPurchasePercent?.formatted }}</div>
<div class="value">{{ powerPurchase?.formatted }}</div>
</div>
<div class="entry production">
<div class="entry production" [class.zero]="powerProduced?.zero">
<div class="name">Produktion</div>
<div class="percent">{{ powerProducedPercent?.formatted }}</div>
<div class="value">{{ powerProduced?.formatted }}</div>
</div>
<div class="entry self">
<div class="entry self" [class.zero]="powerSelf?.zero">
<div class="name">Eigenverbrauch</div>
<div class="percent">{{ powerSelfPercent?.formatted }}</div>
<div class="value">{{ powerSelf?.formatted }}</div>
</div>
<div class="entry delivery">
<div class="entry delivery" [class.zero]="powerDelivery?.zero">
<div class="name">Einspeisung</div>
<div class="percent">{{ powerDeliveryPercent?.formatted }}</div>
<div class="value">{{ powerDelivery?.formatted }}</div>
@ -55,27 +55,27 @@
</div>
<div class="content">
<div class="entry consumption">
<div class="entry consumption" [class.zero]="aggregations.energyConsumed?.zero">
<div class="name">Verbrauch</div>
<div class="percent">&nbsp;</div>
<div class="value">{{ aggregations.energyConsumed?.formatted }}</div>
</div>
<div class="entry purchase">
<div class="entry purchase" [class.zero]="aggregations.energyPurchased?.delta?.zero">
<div class="name">Bezug</div>
<div class="percent">{{ aggregations.energyPurchasedPercent?.formatted }}</div>
<div class="value">{{ aggregations.energyPurchased?.delta?.formatted }}</div>
</div>
<div class="entry production">
<div class="entry production" [class.zero]="aggregations.energyProduced?.delta?.zero">
<div class="name">Produktion</div>
<div class="percent">{{ aggregations.energyProducedPercent?.formatted }}</div>
<div class="value">{{ aggregations.energyProduced?.delta?.formatted }}</div>
</div>
<div class="entry self">
<div class="entry self" [class.zero]="aggregations.energySelf?.zero">
<div class="name">Eigenverbrauch</div>
<div class="percent">{{ aggregations.energySelfPercent?.formatted }}</div>
<div class="value">{{ aggregations.energySelf?.formatted }}</div>
</div>
<div class="entry delivery">
<div class="entry delivery" [class.zero]="aggregations.energyDelivered?.delta?.zero">
<div class="name">Eingespeist</div>
<div class="percent">{{ aggregations.energyDeliveredPercent?.formatted }}</div>
<div class="value">{{ aggregations.energyDelivered?.delta?.formatted }}</div>

4
src/main/angular/src/app/app.component.less
View File

@ -80,3 +80,7 @@
.delivery {
color: magenta;
}
.zero {
filter: opacity(30%);
}

2
src/main/angular/src/app/series/series.service.ts
View File

@ -60,10 +60,8 @@ export class SeriesService {
this.subs.push(this.api.subscribe(['Series'], Series.fromJson, series => this.update(series)));
this.subs.push(this.api.subscribeConnection(connected => {
if (connected) {
console.log("connected");
this.all();
} else {
console.log("disconnected");
this.liveValues.forEach(liveValue => liveValue.series = null);
}
}));

6
src/main/angular/src/app/value/Value.ts
View File

@ -22,6 +22,10 @@ export class Value {
);
}
get zero(): boolean {
return this.value === 0;
}
get formatted(): string {
return `${this.value.toFixed(this.decimals)} ${this.unit.unit}`;
}
@ -59,7 +63,7 @@ export class Value {
}
percent(other: Value | undefined): Value | undefined {
if (!other) {
if (!other || other.value === 0) {
return undefined;
}
return new Value(this.value / other.value * 100, Unit.PERCENT, 0);