ui: less opacity for zero values + code clean

src/main/angular/src/app/app.component.html

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

src/main/angular/src/app/app.component.less

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

src/main/angular/src/app/series/series.service.ts

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

src/main/angular/src/app/value/Value.ts

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