only subscribe to websocket when needed

skot · Nov 26, 2023 · fe97e56 · fe97e56
1 parent 1879a84
commit fe97e56
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/main/http_server/axe-os/src/app/components/home/home.component.html b/main/http_server/axe-os/src/app/components/home/home.component.html
@@ -125,8 +125,8 @@ <h2>Results</h2>
     </div>
 
     <div class="card mt-2">
-        <h2>Realtime Logs <button (click)="showLogs = !showLogs" style="margin-left: 15px;"
-                class="btn btn-secondary">{{showLogs ? 'Hide': 'Show'}}
+        <h2>Realtime Logs <button (click)="toggleLogs()" style="margin-left: 15px;" class="btn btn-secondary">{{showLogs
+                ? 'Hide': 'Show'}}
                 Logs</button></h2>
 
         <div *ngIf="showLogs" id="logs" #scrollContainer>

diff --git a/main/http_server/axe-os/src/app/components/home/home.component.ts b/main/http_server/axe-os/src/app/components/home/home.component.ts
@@ -18,7 +18,7 @@ export class HomeComponent implements AfterViewChecked, OnDestroy {
 
   public logs: string[] = [];
 
-  private websocketSubscription: Subscription;
+  private websocketSubscription?: Subscription;
 
   public showLogs = false;
 
@@ -47,26 +47,35 @@ export class HomeComponent implements AfterViewChecked, OnDestroy {
       })
     )
 
-    this.websocketSubscription = this.websocketService.ws$.subscribe({
-      next: (val) => {
-        this.logs.push(val);
-        if (this.logs.length > 100) {
-          this.logs.shift();
-        }
 
-      }
-    })
 
   }
   ngOnDestroy(): void {
-    this.websocketSubscription.unsubscribe();
+    this.websocketSubscription?.unsubscribe();
   }
   ngAfterViewChecked(): void {
     if (this.scrollContainer?.nativeElement != null) {
       this.scrollContainer.nativeElement.scrollTo({ left: 0, top: this.scrollContainer.nativeElement.scrollHeight, behavior: 'smooth' });
     }
   }
 
+  public toggleLogs() {
+    this.showLogs = !this.showLogs;
+
+    if (this.showLogs) {
+      this.websocketSubscription = this.websocketService.ws$.subscribe({
+        next: (val) => {
+          this.logs.push(val);
+          if (this.logs.length > 100) {
+            this.logs.shift();
+          }
+        }
+      })
+    } else {
+      this.websocketSubscription?.unsubscribe();
+    }
+  }
+
 
 }