UI: Fixed show color in signal strength widget when low signal

ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts

@@ -145,6 +145,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
   private rssi = -100;
   private noSignal = false;
   private noData = false;
+  private noSignalRssiValue = -100;
 
   constructor(public widgetComponent: WidgetComponent,
               private imagePipe: ImagePipe,
@@ -166,6 +167,8 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
       this.dateStyle.color = this.settings.dateColor;
     }
 
+    this.noSignalRssiValue = this.settings.noSignalRssiValue ?? -100;
+
     this.activeBarsColor = ColorProcessor.fromSettings(this.settings.activeBarsColor);
     const inactiveBarsColor = tinycolor(this.settings.inactiveBarsColor);
     this.inactiveBarsColorHex = inactiveBarsColor.toHexString();
@@ -262,7 +265,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
       }
     }
 
-    this.noSignal = this.rssi <= this.settings.noSignalRssiValue;
+    this.noSignal = this.rssi <= this.noSignalRssiValue;
 
     this.activeBarsColor.update(this.rssi);
 
@@ -342,7 +345,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
       const activeBarsOpacity = activeBarsColor.getAlpha();
       for (let index = 0; index < this.bars.length; index++) {
         const bar = this.bars[index];
-        const active = signalBarActive(this.rssi, index);
+        const active = signalBarActive(this.rssi, index, this.noSignalRssiValue);
         const newFill = active ? activeBarsColorHex : this.inactiveBarsColorHex;
         const newOpacity = active ? activeBarsOpacity : this.inactiveBarsOpacity;
         if (newFill !== bar.fill() || newOpacity !== bar.opacity()) {

ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.models.ts

@@ -133,10 +133,10 @@ export const signalStrengthDefaultSettings: SignalStrengthWidgetSettings = {
   padding: '12px'
 };
 
-export const signalBarActive = (rssi: number, index: number): boolean => {
+export const signalBarActive = (rssi: number, index: number, minSignal: number): boolean => {
     switch (index) {
       case 0:
-        return rssi > -100;
+        return rssi > minSignal;
       case 1:
         return rssi >= -85;
       case 2:

ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts

@@ -16,7 +16,7 @@
 
 import { Component, Injector } from '@angular/core';
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { formatValue } from '@core/utils';
@@ -88,7 +88,7 @@ export class SignalStrengthWidgetSettingsComponent extends WidgetSettingsCompone
 
       background: [settings.background, []],
       padding: [settings.padding, []],
-      noSignalRssiValue: [settings.noSignalRssiValue, []]
+      noSignalRssiValue: [settings.noSignalRssiValue, [Validators.max(-86)]]
     });
   }