Move dashboard messages from template to component

main/http_server/axe-os/src/app/components/home/home.component.html

@@ -1,26 +1,13 @@
 <ng-template #noTemp>--</ng-template>
 
 <ng-container *ngIf="info$ | async as info">
-    <!-- Temp warning alert -->
-    <p-message *ngIf="info.overheat_mode" severity="error" styleClass="w-full mb-4 py-4 border-round-xl"
-        text="Device has overheated - See settings">
-    </p-message>
-
-    <p-message *ngIf="!info.frequency || info.frequency < 400" severity="warn" styleClass="w-full mb-4 py-4 border-round-xl"
-        text="Device frequency is set low - See settings">
-    </p-message>
-
-    <p-message *ngIf="info.power_fault" severity="error" styleClass="w-full mb-4 py-4 border-round-xl"
-        text="{{info.power_fault}} Check your Power Supply.">
-    </p-message>
-
-    <p-message *ngIf="info.isUsingFallbackStratum" severity="warn" styleClass="w-full mb-4 py-4 border-round-xl"
-        text="Using fallback pool - Share stats reset. Check Pool Settings and / or reboot Device">
-    </p-message>
-
-    <p-message *ngIf="info.version !== info.axeOSVersion" severity="warn" styleClass="w-full mb-4 py-4 border-round-xl"
-        text="Firmware ({{info.version}}) and AxeOS ({{info.axeOSVersion}}) versions do not match. Please make sure to update both www.bin and esp-miner.bin.">
-    </p-message>
+    <ng-container *ngFor="let message of messages">
+        <p-message
+            [severity]="message.severity"
+            [text]="message.text"
+            [styleClass]="'w-full mb-3 py-3 border-round-lg'"
+        />
+    </ng-container>
 
     <p-message *ngIf="info.blockFound" severity="success" styleClass="w-full mb-4 py-4 border-round-xl"
         text="Today is your lucky day! Your device has found a block 🎉">

main/http_server/axe-os/src/app/components/home/home.component.ts

@@ -22,6 +22,19 @@ import { chartLabelKey } from 'src/models/enum/eChartLabel';
 import { LocalStorageService } from 'src/app/local-storage.service';
 
 type PoolLabel = 'Primary' | 'Fallback';
+type MessageType =
+  | 'DEVICE_OVERHEAT'
+  | 'POWER_FAULT'
+  | 'FREQUENCY_LOW'
+  | 'FALLBACK_STRATUM'
+  | 'VERSION_MISMATCH';
+
+interface ISystemMessage {
+  type: MessageType;
+  severity: 'error' | 'warn' | 'info';
+  text: string;
+}
+
 const HOME_CHART_DATA_SOURCES = 'HOME_CHART_DATA_SOURCES';
 
 @Component({
@@ -30,6 +43,7 @@ const HOME_CHART_DATA_SOURCES = 'HOME_CHART_DATA_SOURCES';
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit, OnDestroy {
+  public messages: ISystemMessage[] = [];
 
   public info$!: Observable<ISystemInfo>;
   public stats$!: Observable<ISystemStatistics>;
@@ -61,7 +75,7 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   private pageDefaultTitle: string = '';
   private destroy$ = new Subject<void>();
-  private titleSubscription?: Subscription;
+  private infoSubscription?: Subscription;
   public form!: FormGroup;
 
   @Input() uri = '';
@@ -148,7 +162,7 @@ export class HomeComponent implements OnInit, OnDestroy {
       .pipe(this.loadingService.lockUIUntilComplete())
       .subscribe({
         next: () => {
-          this.titleSubscription?.unsubscribe();
+          this.infoSubscription?.unsubscribe();
           this.clearDataPoints();
           this.loadPreviousData();
         },
@@ -444,9 +458,10 @@ export class HomeComponent implements OnInit, OnDestroy {
       })
     );
 
-    this.titleSubscription = this.info$
+    this.infoSubscription = this.info$
       .pipe(takeUntil(this.destroy$))
       .subscribe(info => {
+        this.handleSystemMessages(info);
         this.setTitle(info);
       });
   }
@@ -525,6 +540,28 @@ export class HomeComponent implements OnInit, OnDestroy {
     return this.calculateAverage(efficiencies);
   }
 
+  public handleSystemMessages(info: ISystemInfo) {
+    const updateMessage = (
+      condition: boolean,
+      type: MessageType,
+      severity: ISystemMessage['severity'],
+      text: string
+    ) => {
+      const exists = this.messages.some(msg => msg.type === type);
+      if (condition && !exists) {
+        this.messages.push({ type, severity, text });
+      } else if (!condition && exists) {
+        this.messages = this.messages.filter(msg => msg.type !== type);
+      }
+    };
+
+    updateMessage(info.overheat_mode === 1, 'DEVICE_OVERHEAT', 'error', 'Device has overheated - See settings');
+    updateMessage(!!info.power_fault, 'POWER_FAULT', 'error', `${info.power_fault} Check your Power Supply.`);
+    updateMessage(!info.frequency || info.frequency < 400, 'FREQUENCY_LOW', 'warn', 'Device frequency is set low - See settings');
+    updateMessage(info.isUsingFallbackStratum, 'FALLBACK_STRATUM', 'warn', 'Using fallback pool - Share stats reset. Check Pool Settings and / or reboot Device.');
+    updateMessage(info.version !== info.axeOSVersion, 'VERSION_MISMATCH', 'warn', `Firmware (${info.version}) and AxeOS (${info.axeOSVersion}) versions do not match. Please make sure to update both www.bin and esp-miner.bin.`);
+  }
+
   private calculateEfficiency(info: ISystemInfo, key: 'hashRate' | 'expectedHashrate'): number {
     const hashrate = info[key];
     if (info.power_fault || hashrate <= 0) {