From 4966721687f5848ce8cbb876d69a356ad55efcc5 Mon Sep 17 00:00:00 2001
From: Robson Oliveira dos Santos <robsonos@outlook.com>
Date: Mon, 2 Dec 2024 22:04:46 +0930
Subject: [PATCH] refactor(spie-ui): create serial port service

---
 apps/spie-ui-e2e/src/e2e/updater.ts           | 201 ++++++++++++
 apps/spie-ui/src/app/app.component.ts         |   4 +-
 .../connection-advanced-modal.component.ts    |   8 +-
 .../home/connection/connection.component.html |   5 +-
 .../home/connection/connection.component.ts   |  53 +++-
 .../src/app/pages/home/home.component.html    |  20 +-
 .../src/app/pages/home/home.component.ts      | 299 +-----------------
 .../send-advanced-modal.component.ts          |   8 +-
 .../app/pages/home/send/send.component.html   |   2 +-
 .../src/app/pages/home/send/send.component.ts |   9 +-
 .../terminal-advanced-modal.component.ts      |  20 +-
 .../home/terminal/terminal.component.html     |   5 +-
 .../pages/home/terminal/terminal.component.ts |  33 +-
 .../update-modal/update-modal.component.ts    | 116 ++++++-
 .../src/app/services/serial-port.service.ts   | 133 ++++++++
 15 files changed, 544 insertions(+), 372 deletions(-)
 create mode 100644 apps/spie-ui-e2e/src/e2e/updater.ts
 create mode 100644 apps/spie-ui/src/app/services/serial-port.service.ts

diff --git a/apps/spie-ui-e2e/src/e2e/updater.ts b/apps/spie-ui-e2e/src/e2e/updater.ts
new file mode 100644
index 0000000..e91c231
--- /dev/null
+++ b/apps/spie-ui-e2e/src/e2e/updater.ts
@@ -0,0 +1,201 @@
+import { type SerialPortEvent } from '@spie/types';
+
+import { mockElectronAPI } from '../fixtures/mocks/electron-api.mock';
+
+describe('Send component', () => {
+  const mockSerialPortList = [
+    { path: '/dev/ttyUSB0', manufacturer: 'Manufacturer1' },
+    { path: '/dev/ttyUSB1', manufacturer: 'Manufacturer2' },
+  ];
+
+  let onEventTrigger: ((event: SerialPortEvent) => void) | null;
+
+  beforeEach(() => {
+    cy.visit('/');
+
+    cy.on('window:before:load', (win) => {
+      const listeners: Array<(serialPortEvent: SerialPortEvent) => void> = [];
+
+      win.electron = mockElectronAPI();
+      win.electron.serialPort.list = cy.stub().resolves(mockSerialPortList);
+
+      win.electron.serialPort.onEvent = cy
+        .stub()
+        .callsFake((callback: (serialPortEvent: SerialPortEvent) => void) => {
+          listeners.push(callback);
+
+          onEventTrigger = (serialPortEvent) => {
+            listeners.forEach((listener) => listener(serialPortEvent));
+          };
+
+          return () => {
+            const index = listeners.indexOf(callback);
+            if (index !== -1) {
+              listeners.splice(index, 1);
+            }
+          };
+        });
+    });
+  });
+
+  it('should enable/disable send based on serial port status', () => {
+    const data = 'test test test test test test test test test test';
+
+    cy.wrap(null).then(() => {
+      if (onEventTrigger) {
+        onEventTrigger({ event: 'open' });
+      }
+    });
+
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+
+    cy.get('app-send ion-button')
+      .contains('Send')
+      .should('not.have.class', 'button-disabled');
+
+    cy.wrap(null).then(() => {
+      if (onEventTrigger) {
+        onEventTrigger({ event: 'close' });
+      }
+    });
+
+    cy.get('app-send ion-button')
+      .contains('Send')
+      .should('have.class', 'button-disabled');
+  });
+
+  it('should clear input after pressing clear input button', () => {
+    const data = 'test test test test test test test test test test';
+
+    cy.wrap(null).then(() => {
+      if (onEventTrigger) {
+        onEventTrigger({ event: 'open' });
+      }
+    });
+
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+    cy.get('app-send ion-input button').click();
+
+    cy.get('app-send ion-input input').should('have.value', '');
+  });
+
+  it('should send input with default options', () => {
+    const data = 'test test test test test test test test test test';
+    const formattedData = `${data}\n`;
+
+    cy.wrap(null).then(() => {
+      if (onEventTrigger) {
+        onEventTrigger({ event: 'open' });
+      }
+    });
+
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+
+    cy.get('app-send ion-button').contains('Send').click();
+
+    cy.window().then((win) => {
+      cy.wrap(win.electron.serialPort.write).should(
+        'have.been.calledOnceWithExactly',
+        formattedData,
+        'ascii'
+      );
+    });
+  });
+
+  it('should open and close the advanced modal', () => {
+    cy.get('app-send ion-button ion-icon').parent().click();
+    cy.get('ion-modal').should('be.visible');
+    cy.get('ion-modal ion-toolbar ion-button').click();
+    cy.get('ion-modal').should('not.be.visible');
+  });
+
+  it('should clear input after changing encoding', () => {
+    const data = 'test test test test test test test test test test';
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+
+    cy.get('app-send ion-button ion-icon').parent().click();
+    cy.getAdvancedModalSelectElement(
+      'send-advanced-modal',
+      'Encoding'
+    ).selectOption('Hex');
+    cy.get('ion-modal ion-toolbar ion-button').click();
+
+    cy.get('app-send ion-input input').should('have.value', '');
+  });
+
+  it('should format hex input', () => {
+    const data = 'test test test test test test test test test test';
+    const expectedHexData = 'EE EE EE EE EE';
+
+    cy.get('app-send ion-button ion-icon').parent().click();
+    cy.getAdvancedModalSelectElement(
+      'send-advanced-modal',
+      'Encoding'
+    ).selectOption('Hex');
+    cy.get('ion-modal ion-toolbar ion-button').click();
+
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+
+    cy.get('app-send ion-input input').should('have.value', expectedHexData);
+  });
+
+  it('should send input with hex encoding', () => {
+    const data = 'test test test test test test test test test test\n\n\n';
+    const formattedData = 'EEEEEEEEEE';
+
+    cy.get('app-send ion-button ion-icon').parent().click();
+    cy.getAdvancedModalSelectElement(
+      'send-advanced-modal',
+      'Encoding'
+    ).selectOption('Hex');
+    cy.get('ion-modal ion-toolbar ion-button').click();
+
+    cy.wrap(null).then(() => {
+      if (onEventTrigger) {
+        onEventTrigger({ event: 'open' });
+      }
+    });
+
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+
+    cy.get('app-send ion-button').contains('Send').click();
+
+    cy.window().then((win) => {
+      cy.wrap(win.electron.serialPort.write).should(
+        'have.been.calledOnceWithExactly',
+        formattedData,
+        'hex'
+      );
+    });
+  });
+
+  it('should send input with advanced delimiter', () => {
+    const data = 'test test test test test test test test test test';
+    const formattedData = `${data}\r\n`;
+
+    cy.get('app-send ion-button ion-icon').parent().click();
+    cy.getAdvancedModalSelectElement(
+      'send-advanced-modal',
+      'Delimiter'
+    ).selectOption('CRLF (\\r\\n)');
+    cy.get('ion-modal ion-toolbar ion-button').click();
+
+    cy.wrap(null).then(() => {
+      if (onEventTrigger) {
+        onEventTrigger({ event: 'open' });
+      }
+    });
+
+    cy.get('app-send ion-input input').invoke('val', data).trigger('input');
+
+    cy.get('app-send ion-button').contains('Send').click();
+
+    cy.window().then((win) => {
+      cy.wrap(win.electron.serialPort.write).should(
+        'have.been.calledOnceWithExactly',
+        formattedData,
+        'ascii'
+      );
+    });
+  });
+});
diff --git a/apps/spie-ui/src/app/app.component.ts b/apps/spie-ui/src/app/app.component.ts
index 5fced85..14a6860 100644
--- a/apps/spie-ui/src/app/app.component.ts
+++ b/apps/spie-ui/src/app/app.component.ts
@@ -19,9 +19,9 @@ import {
 })
 export class AppComponent {
   constructor() {
-    addIcons({ settingsOutline });
-    addIcons({ documentOutline });
     addIcons({ cloudUploadOutline });
+    addIcons({ documentOutline });
+    addIcons({ settingsOutline });
     addIcons({ speedometerOutline });
     addIcons({ statsChartOutline });
     addIcons({ timeOutline });
diff --git a/apps/spie-ui/src/app/pages/home/connection/connection-advanced-modal/connection-advanced-modal.component.ts b/apps/spie-ui/src/app/pages/home/connection/connection-advanced-modal/connection-advanced-modal.component.ts
index 89a32c0..7ec5e93 100644
--- a/apps/spie-ui/src/app/pages/home/connection/connection-advanced-modal/connection-advanced-modal.component.ts
+++ b/apps/spie-ui/src/app/pages/home/connection/connection-advanced-modal/connection-advanced-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, model, viewChild } from '@angular/core';
+import { Component, inject, input, viewChild } from '@angular/core';
 import {
   IonButton,
   IonButtons,
@@ -13,13 +13,13 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { type OpenOptions } from '@serialport/bindings-interface';
 import { type Subject } from 'rxjs';
 
 import {
   type CheckboxCustomEvent,
   type SelectCustomEvent,
 } from '../../../../interfaces/ionic.interface';
+import { SerialPortService } from '../../../../services/serial-port.service';
 
 @Component({
   selector: 'app-connection-advanced-modal',
@@ -42,8 +42,10 @@ import {
   ],
 })
 export class ConnectionAdvancedComponent {
+  private readonly serialPortService = inject(SerialPortService);
+
   reconnectSubject = input.required<Subject<void>>();
-  openOptions = model.required<OpenOptions>();
+  openOptions = this.serialPortService.openOptions;
 
   connectionAdvancedModal = viewChild.required<IonModal>(
     'connectionAdvancedModal'
diff --git a/apps/spie-ui/src/app/pages/home/connection/connection.component.html b/apps/spie-ui/src/app/pages/home/connection/connection.component.html
index 5595e27..81dd7ee 100644
--- a/apps/spie-ui/src/app/pages/home/connection/connection.component.html
+++ b/apps/spie-ui/src/app/pages/home/connection/connection.component.html
@@ -69,8 +69,5 @@
     </ion-row>
   </ion-grid>
 
-  <app-connection-advanced-modal
-    [(openOptions)]="openOptions"
-    [reconnectSubject]="reconnectSubject()"
-  />
+  <app-connection-advanced-modal [reconnectSubject]="reconnectSubject" />
 </ion-card>
diff --git a/apps/spie-ui/src/app/pages/home/connection/connection.component.ts b/apps/spie-ui/src/app/pages/home/connection/connection.component.ts
index 5c914ed..f1ee258 100644
--- a/apps/spie-ui/src/app/pages/home/connection/connection.component.ts
+++ b/apps/spie-ui/src/app/pages/home/connection/connection.component.ts
@@ -1,11 +1,5 @@
-import {
-  Component,
-  inject,
-  input,
-  model,
-  signal,
-  viewChild,
-} from '@angular/core';
+import { Component, inject, signal, viewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   IonButton,
   IonCard,
@@ -20,15 +14,13 @@ import {
   IonText,
   LoadingController,
 } from '@ionic/angular/standalone';
-import {
-  type OpenOptions,
-  type PortInfo,
-} from '@serialport/bindings-interface';
-import { type Subject } from 'rxjs';
+import { type PortInfo } from '@serialport/bindings-interface';
+import { Subject, tap } from 'rxjs';
 
 import { ConnectionAdvancedComponent } from './connection-advanced-modal/connection-advanced-modal.component';
 import { type SelectCustomEvent } from '../../../interfaces/ionic.interface';
 import { ElectronService } from '../../../services/electron.service';
+import { SerialPortService } from '../../../services/serial-port.service';
 import { ToasterService } from '../../../services/toaster.service';
 
 @Component({
@@ -55,10 +47,37 @@ export class ConnectionComponent {
   private readonly loadingController = inject(LoadingController);
   private readonly toasterService = inject(ToasterService);
   private readonly electronService = inject(ElectronService);
+  private readonly serialPortService = inject(SerialPortService);
+
+  constructor() {
+    this.reconnectSubject
+      .pipe(
+        takeUntilDestroyed(),
+
+        tap(async () => {
+          if (this.isOpen()) {
+            const loading = await this.loadingController.create();
+            await loading.present();
+            try {
+              await this.electronService.serialPort.close();
+              await this.electronService.serialPort.open(this.openOptions());
+              this.serialPortService.clearDataSubject.next({
+                event: 'data',
+                data: '',
+              });
+            } catch (error) {
+              await this.toasterService.presentErrorToast(error);
+            }
+            await loading.dismiss();
+          }
+        })
+      )
+      .subscribe();
+  }
 
-  reconnectSubject = input.required<Subject<void>>();
-  isOpen = input.required<boolean>();
-  openOptions = model.required<OpenOptions>();
+  isOpen = this.serialPortService.isOpen;
+  openOptions = this.serialPortService.openOptions;
+  reconnectSubject = new Subject<void>();
 
   private connectionAdvancedComponent = viewChild.required(
     ConnectionAdvancedComponent
@@ -111,7 +130,7 @@ export class ConnectionComponent {
       baudRate: parseInt(selectedOption, 10),
     }));
 
-    this.reconnectSubject().next();
+    this.reconnectSubject.next();
   }
 
   async onClickDisconnect(): Promise<void> {
diff --git a/apps/spie-ui/src/app/pages/home/home.component.html b/apps/spie-ui/src/app/pages/home/home.component.html
index 6493f6b..4fa7c2f 100644
--- a/apps/spie-ui/src/app/pages/home/home.component.html
+++ b/apps/spie-ui/src/app/pages/home/home.component.html
@@ -5,22 +5,10 @@
 </ion-header>
 
 <ion-content>
-  <app-connection
-    [(openOptions)]="openOptions"
-    [isOpen]="isOpen()"
-    [reconnectSubject]="reconnectSubject"
-  />
-
-  <app-terminal
-    [(terminalOptions)]="terminalOptions"
-    [clearTerminalSubject]="clearTerminalSubject"
-    [data]="data()"
-  />
-
-  <app-send [(sendOptions)]="sendOptions" [isOpen]="isOpen()" />
-
-  <app-update-modal [progressInfo]="progressInfo()" />
-
+  <app-connection />
+  <app-terminal />
+  <app-send />
+  <app-update-modal />
   <!-- For debug purposes -->
   <!-- <pre>{{ openOptions() | json }}</pre>
     <pre>{{ terminalOptions() | json }}</pre>
diff --git a/apps/spie-ui/src/app/pages/home/home.component.ts b/apps/spie-ui/src/app/pages/home/home.component.ts
index ab312e4..a204ca2 100644
--- a/apps/spie-ui/src/app/pages/home/home.component.ts
+++ b/apps/spie-ui/src/app/pages/home/home.component.ts
@@ -1,42 +1,15 @@
-import { Component, inject, signal, viewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import {
-  takeUntilDestroyed,
-  toObservable,
-  toSignal,
-} from '@angular/core/rxjs-interop';
-import {
-  type AlertButton,
-  AlertController,
   IonContent,
   IonHeader,
   IonTitle,
   IonToolbar,
-  LoadingController,
 } from '@ionic/angular/standalone';
-import { type OpenOptions } from '@serialport/bindings-interface';
-import { type SerialPortEvent } from '@spie/types';
-import {
-  Subject,
-  filter,
-  from,
-  map,
-  merge,
-  of,
-  scan,
-  switchMap,
-  tap,
-} from 'rxjs';
 
 import { ConnectionComponent } from './connection/connection.component';
 import { SendComponent } from './send/send.component';
 import { TerminalComponent } from './terminal/terminal.component';
 import { UpdateModalComponent } from './update-modal/update-modal.component';
-import {
-  type SendOptions,
-  type TerminalOptions,
-} from '../../interfaces/app.interface';
-import { ElectronService } from '../../services/electron.service';
-import { ToasterService } from '../../services/toaster.service';
 
 @Component({
   selector: 'app-home',
@@ -54,272 +27,4 @@ import { ToasterService } from '../../services/toaster.service';
     UpdateModalComponent,
   ],
 })
-export class HomeComponent {
-  private readonly alertController = inject(AlertController);
-  private readonly loadingController = inject(LoadingController);
-  private readonly toasterService = inject(ToasterService);
-  private readonly electronService = inject(ElectronService);
-
-  constructor() {
-    this.reconnectSubject
-      .pipe(
-        takeUntilDestroyed(),
-        tap(async () => {
-          if (this.isOpen()) {
-            const loading = await this.loadingController.create();
-            await loading.present();
-            try {
-              await this.electronService.serialPort.close();
-              await this.electronService.serialPort.open(this.openOptions());
-              this.clearTerminalSubject.next({ event: 'data', data: '' });
-            } catch (error) {
-              await this.toasterService.presentErrorToast(error);
-            }
-            await loading.dismiss();
-          }
-        })
-      )
-      .subscribe();
-  }
-
-  private terminalComponent =
-    viewChild.required<TerminalComponent>(TerminalComponent);
-  private updateModalComponent = viewChild.required(UpdateModalComponent);
-
-  openOptions = signal<OpenOptions>({
-    path: '',
-    baudRate: 9600,
-    dataBits: 8,
-    lock: true,
-    stopBits: 1,
-    parity: 'none',
-    rtscts: false,
-    xon: false,
-    xoff: false,
-    xany: false,
-    hupcl: true,
-  });
-
-  terminalOptions = signal<TerminalOptions>({
-    encoding: 'ascii',
-    isAutoScrollEnabled: true,
-    showTimestampsEnabled: false,
-    scrollbackLength: 1,
-  });
-
-  sendOptions = signal<SendOptions>({
-    delimiter: 'lf',
-    encoding: 'ascii',
-    isSendInputValid: false,
-  });
-
-  reconnectSubject = new Subject<void>();
-  clearTerminalSubject = new Subject<SerialPortEvent>();
-  clearInputSubject = new Subject<void>();
-
-  isOpen = toSignal(
-    from(this.electronService.serialPort.isOpen()).pipe(
-      switchMap((isOpen) =>
-        this.electronService.serialPort.onEvent().pipe(
-          filter(
-            (serialPortEvent) =>
-              serialPortEvent.event === 'close' ||
-              serialPortEvent.event === 'open'
-          ),
-          scan((currentIsOpen, serialPortEvent) => {
-            if (serialPortEvent.event === 'open') {
-              return true;
-            }
-
-            if (serialPortEvent.event === 'close') {
-              return false;
-            }
-
-            return currentIsOpen;
-          }, isOpen)
-        )
-      )
-    ),
-    { initialValue: false }
-  );
-
-  data = toSignal(
-    toObservable(this.isOpen).pipe(
-      switchMap(() =>
-        merge(
-          // Emissions to this.isOpen will resubscribe these
-          this.electronService.serialPort.onEvent(),
-          this.clearTerminalSubject
-        )
-      ),
-      filter((serialPortEvent) => serialPortEvent.event === 'data'),
-      map((serialPortEvent) => {
-        const data = serialPortEvent.data;
-        // If data it a "clear terminal" signal
-        if (data === '') {
-          return '';
-        }
-
-        if (this.terminalOptions().showTimestampsEnabled) {
-          return `${this.formatTimestamp(new Date())} ${data}`;
-        }
-
-        return data;
-      }),
-      scan(
-        (acc, value) => {
-          // Reset on empty string
-          if (value === '') {
-            return { items: [] as string[], length: 0 };
-          }
-
-          acc.items.push(value);
-          acc.length += value.length;
-          const maxLength = this.terminalOptions().scrollbackLength * 10000;
-
-          while (acc.length > maxLength) {
-            const removed = acc.items.shift();
-            if (removed) {
-              acc.length -= removed.length;
-            }
-          }
-
-          return acc;
-        },
-        { items: [] as string[], length: 0 }
-      ),
-      map((buffer) => {
-        if (this.terminalOptions().encoding === 'hex') {
-          return buffer.items.join('\n');
-        }
-
-        return buffer.items.join('');
-      }),
-      tap(async () => await this.handleAutoScroll())
-    ),
-    { initialValue: '' }
-  );
-
-  progressInfo = toSignal(
-    this.electronService.onUpdateEvent().pipe(
-      tap(async (autoUpdaterEvent) => {
-        if (autoUpdaterEvent.event === 'checking-for-update') {
-          await this.toasterService.presentInfoToast('Checking for Updates');
-        }
-
-        if (autoUpdaterEvent.event === 'update-not-available') {
-          await this.toasterService.presentInfoToast('No Updates Available');
-        }
-
-        if (autoUpdaterEvent.event === 'update-available') {
-          await this.presentAlert(
-            'Update Available for Download',
-            `Version ${autoUpdaterEvent.updateInfo.version} is ready for download.`,
-            [
-              {
-                text: 'Cancel',
-                role: 'cancel',
-              },
-              {
-                text: 'Download',
-                role: 'confirm',
-                handler: async () => {
-                  this.electronService.downloadUpdate();
-                  await this.updateModalComponent().updateModal().present();
-                },
-              },
-            ]
-          );
-        }
-
-        if (autoUpdaterEvent.event === 'update-downloaded') {
-          await this.presentAlert(
-            'Update Ready to Install',
-            `Version ${autoUpdaterEvent.updateDownloadedEvent.version} is ready to install.`,
-            [
-              {
-                text: 'Cancel',
-                role: 'cancel',
-              },
-              {
-                text: 'Install',
-                role: 'confirm',
-                handler: () => {
-                  this.electronService.installUpdate();
-                },
-              },
-            ]
-          );
-        }
-
-        if (autoUpdaterEvent.event === 'update-cancelled') {
-          await this.toasterService.presentErrorToast('Update Cancelled');
-        }
-
-        if (
-          autoUpdaterEvent.event === 'update-downloaded' ||
-          autoUpdaterEvent.event === 'update-cancelled' ||
-          autoUpdaterEvent.event === 'error'
-        ) {
-          await this.updateModalComponent().updateModal().dismiss();
-        }
-      }),
-      switchMap((autoUpdaterEvent) => {
-        if (autoUpdaterEvent.event === 'download-progress') {
-          return of(autoUpdaterEvent.progressInfo);
-        }
-
-        return of({
-          total: 0,
-          delta: 0,
-          transferred: 0,
-          percent: 0,
-          bytesPerSecond: 0,
-        });
-      })
-    ),
-    {
-      initialValue: {
-        total: 0,
-        delta: 0,
-        transferred: 0,
-        percent: 0,
-        bytesPerSecond: 0,
-      },
-    }
-  );
-
-  private async presentAlert(
-    header: string,
-    message?: string,
-    buttons?: (AlertButton | string)[]
-  ): Promise<void> {
-    const alert = await this.alertController.create({
-      header,
-      message,
-      buttons,
-    });
-    await alert.present();
-  }
-
-  private formatTimestamp(date: Date): string {
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    const seconds = date.getSeconds().toString().padStart(2, '0');
-    return `[${hours}:${minutes}:${seconds}]`;
-  }
-
-  async handleAutoScroll(): Promise<void> {
-    const isAutoScrollEnabled = this.terminalOptions().isAutoScrollEnabled;
-
-    if (isAutoScrollEnabled) {
-      const terminalTextArea = this.terminalComponent().terminalTextArea();
-      const textarea = await terminalTextArea.getInputElement();
-
-      textarea.scrollTo({
-        top: textarea.scrollHeight,
-        behavior: 'instant',
-      });
-    }
-  }
-}
+export class HomeComponent {}
diff --git a/apps/spie-ui/src/app/pages/home/send/send-advanced-modal/send-advanced-modal.component.ts b/apps/spie-ui/src/app/pages/home/send/send-advanced-modal/send-advanced-modal.component.ts
index 05355d7..196ffa0 100644
--- a/apps/spie-ui/src/app/pages/home/send/send-advanced-modal/send-advanced-modal.component.ts
+++ b/apps/spie-ui/src/app/pages/home/send/send-advanced-modal/send-advanced-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, model, viewChild } from '@angular/core';
+import { Component, inject, viewChild } from '@angular/core';
 import {
   IonButton,
   IonButtons,
@@ -14,8 +14,8 @@ import {
 } from '@ionic/angular/standalone';
 import { type Delimiter, type Encoding } from '@spie/types';
 
-import { type SendOptions } from '../../../../interfaces/app.interface';
 import { type SelectCustomEvent } from '../../../../interfaces/ionic.interface';
+import { SerialPortService } from '../../../../services/serial-port.service';
 
 @Component({
   selector: 'app-send-advanced-modal',
@@ -37,7 +37,9 @@ import { type SelectCustomEvent } from '../../../../interfaces/ionic.interface';
   ],
 })
 export class SendAdvancedComponent {
-  sendOptions = model.required<SendOptions>();
+  private readonly serialPortService = inject(SerialPortService);
+
+  sendOptions = this.serialPortService.sendOptions;
 
   sendAdvancedModal = viewChild.required<IonModal>('sendAdvancedModal');
 
diff --git a/apps/spie-ui/src/app/pages/home/send/send.component.html b/apps/spie-ui/src/app/pages/home/send/send.component.html
index 7fdeb50..7dd546e 100644
--- a/apps/spie-ui/src/app/pages/home/send/send.component.html
+++ b/apps/spie-ui/src/app/pages/home/send/send.component.html
@@ -37,5 +37,5 @@
     </ion-row>
   </ion-grid>
 
-  <app-send-advanced-modal [(sendOptions)]="sendOptions" />
+  <app-send-advanced-modal />
 </ion-card>
diff --git a/apps/spie-ui/src/app/pages/home/send/send.component.ts b/apps/spie-ui/src/app/pages/home/send/send.component.ts
index 21c51cb..85b9de1 100644
--- a/apps/spie-ui/src/app/pages/home/send/send.component.ts
+++ b/apps/spie-ui/src/app/pages/home/send/send.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, input, model, viewChild } from '@angular/core';
+import { Component, inject, viewChild } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import {
   IonButton,
@@ -16,9 +16,9 @@ import { type Delimiter } from '@spie/types';
 import { scan } from 'rxjs';
 
 import { SendAdvancedComponent } from './send-advanced-modal/send-advanced-modal.component';
-import { type SendOptions } from '../../../interfaces/app.interface';
 import { type IonInputCustomEvent } from '../../../interfaces/ionic.interface';
 import { ElectronService } from '../../../services/electron.service';
+import { SerialPortService } from '../../../services/serial-port.service';
 import { ToasterService } from '../../../services/toaster.service';
 
 @Component({
@@ -43,6 +43,7 @@ import { ToasterService } from '../../../services/toaster.service';
 export class SendComponent {
   private readonly toasterService = inject(ToasterService);
   private readonly electronService = inject(ElectronService);
+  private readonly serialPortService = inject(SerialPortService);
 
   constructor() {
     toObservable(this.sendOptions)
@@ -60,8 +61,8 @@ export class SendComponent {
       .subscribe();
   }
 
-  isOpen = input.required<boolean>();
-  sendOptions = model.required<SendOptions>();
+  isOpen = this.serialPortService.isOpen;
+  sendOptions = this.serialPortService.sendOptions;
 
   private sendInput = viewChild.required<IonInput>('sendInput');
   private sendAdvancedComponent = viewChild.required(SendAdvancedComponent);
diff --git a/apps/spie-ui/src/app/pages/home/terminal/terminal-advanced-modal/terminal-advanced-modal.component.ts b/apps/spie-ui/src/app/pages/home/terminal/terminal-advanced-modal/terminal-advanced-modal.component.ts
index e693909..301a92d 100644
--- a/apps/spie-ui/src/app/pages/home/terminal/terminal-advanced-modal/terminal-advanced-modal.component.ts
+++ b/apps/spie-ui/src/app/pages/home/terminal/terminal-advanced-modal/terminal-advanced-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, input, model, viewChild } from '@angular/core';
+import { Component, inject, viewChild } from '@angular/core';
 import {
   IonButton,
   IonButtons,
@@ -14,16 +14,15 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { type Encoding, type SerialPortEvent } from '@spie/types';
-import { type Subject } from 'rxjs';
+import { type Encoding } from '@spie/types';
 
-import { type TerminalOptions } from '../../../../interfaces/app.interface';
 import {
   type CheckboxCustomEvent,
   type RangeCustomEvent,
   type SelectCustomEvent,
 } from '../../../../interfaces/ionic.interface';
 import { ElectronService } from '../../../../services/electron.service';
+import { SerialPortService } from '../../../../services/serial-port.service';
 
 @Component({
   selector: 'app-terminal-advanced-modal',
@@ -48,9 +47,10 @@ import { ElectronService } from '../../../../services/electron.service';
 })
 export class TerminalAdvancedComponent {
   private readonly electronService = inject(ElectronService);
+  private readonly serialPortService = inject(SerialPortService);
 
-  clearTerminalSubject = input.required<Subject<SerialPortEvent>>();
-  terminalOptions = model.required<TerminalOptions>();
+  clearDataSubject = this.serialPortService.clearDataSubject;
+  terminalOptions = this.serialPortService.terminalOptions;
 
   terminalAdvancedModal = viewChild.required<IonModal>('terminalAdvancedModal');
 
@@ -62,7 +62,7 @@ export class TerminalAdvancedComponent {
     }));
 
     this.electronService.serialPort.setReadEncoding(selectedOption);
-    this.clearTerminalSubject().next({ event: 'data', data: '' });
+    this.clearDataSubject.next({ event: 'data', data: '' });
   }
 
   onChangeShowTimestamps(event: CheckboxCustomEvent<boolean>): void {
@@ -72,7 +72,7 @@ export class TerminalAdvancedComponent {
       showTimestampsEnabled: selectedOption,
     }));
 
-    this.clearTerminalSubject().next({ event: 'data', data: '' });
+    this.clearDataSubject.next({ event: 'data', data: '' });
   }
 
   onChangeAutoScroll(event: CheckboxCustomEvent<boolean>): void {
@@ -82,7 +82,7 @@ export class TerminalAdvancedComponent {
       isAutoScrollEnabled: selectedOption,
     }));
 
-    // this.clearTerminalSubject().next({ event: 'data', data: '' });
+    // this.clearDataSubject.next({ event: 'data', data: '' });
   }
   onScrollbackLength(event: RangeCustomEvent): void {
     const selectedOption = event.detail.value as number;
@@ -91,7 +91,7 @@ export class TerminalAdvancedComponent {
       scrollbackLength: selectedOption,
     }));
 
-    // this.clearTerminalSubject().next({ event: 'data', data: '' });
+    // this.clearDataSubject.next({ event: 'data', data: '' });
   }
 
   pinFormatter(value: number): string {
diff --git a/apps/spie-ui/src/app/pages/home/terminal/terminal.component.html b/apps/spie-ui/src/app/pages/home/terminal/terminal.component.html
index 6abdc64..f6b58c1 100644
--- a/apps/spie-ui/src/app/pages/home/terminal/terminal.component.html
+++ b/apps/spie-ui/src/app/pages/home/terminal/terminal.component.html
@@ -36,8 +36,5 @@
     </ion-row>
   </ion-grid>
 
-  <app-terminal-advanced-modal
-    [(terminalOptions)]="terminalOptions"
-    [clearTerminalSubject]="clearTerminalSubject()"
-  />
+  <app-terminal-advanced-modal />
 </ion-card>
diff --git a/apps/spie-ui/src/app/pages/home/terminal/terminal.component.ts b/apps/spie-ui/src/app/pages/home/terminal/terminal.component.ts
index 7ed3aa7..3ffe3a1 100644
--- a/apps/spie-ui/src/app/pages/home/terminal/terminal.component.ts
+++ b/apps/spie-ui/src/app/pages/home/terminal/terminal.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, model, viewChild } from '@angular/core';
+import { Component, effect, inject, viewChild } from '@angular/core';
 import {
   IonButton,
   IonCard,
@@ -11,11 +11,9 @@ import {
   IonText,
   IonTextarea,
 } from '@ionic/angular/standalone';
-import { type SerialPortEvent } from '@spie/types';
-import { type Subject } from 'rxjs';
 
 import { TerminalAdvancedComponent } from './terminal-advanced-modal/terminal-advanced-modal.component';
-import { type TerminalOptions } from '../../../interfaces/app.interface';
+import { SerialPortService } from '../../../services/serial-port.service';
 
 @Component({
   selector: 'app-terminal',
@@ -37,9 +35,28 @@ import { type TerminalOptions } from '../../../interfaces/app.interface';
   ],
 })
 export class TerminalComponent {
-  clearTerminalSubject = input.required<Subject<SerialPortEvent>>();
-  data = input.required<string>();
-  terminalOptions = model.required<TerminalOptions>();
+  private readonly serialPortService = inject(SerialPortService);
+
+  constructor() {
+    effect(async () => {
+      if (this.data() !== '') {
+        // Apply auto scroll
+        const isAutoScrollEnabled = this.terminalOptions().isAutoScrollEnabled;
+        if (isAutoScrollEnabled) {
+          const terminalTextArea = this.terminalTextArea();
+          const textarea = await terminalTextArea.getInputElement();
+          textarea.scrollTo({
+            top: textarea.scrollHeight,
+            behavior: 'instant',
+          });
+        }
+      }
+    });
+  }
+
+  clearDataSubject = this.serialPortService.clearDataSubject;
+  data = this.serialPortService.data;
+  terminalOptions = this.serialPortService.terminalOptions;
 
   terminalTextArea = viewChild.required<IonTextarea>('terminalTextArea');
   private terminalAdvancedComponent = viewChild.required(
@@ -47,7 +64,7 @@ export class TerminalComponent {
   );
 
   onClickClearTerminal(): void {
-    this.clearTerminalSubject().next({ event: 'data', data: '' });
+    this.clearDataSubject.next({ event: 'data', data: '' });
   }
 
   async onClickTerminalAdvancedModal() {
diff --git a/apps/spie-ui/src/app/pages/home/update-modal/update-modal.component.ts b/apps/spie-ui/src/app/pages/home/update-modal/update-modal.component.ts
index db673fc..012a5f8 100644
--- a/apps/spie-ui/src/app/pages/home/update-modal/update-modal.component.ts
+++ b/apps/spie-ui/src/app/pages/home/update-modal/update-modal.component.ts
@@ -1,6 +1,9 @@
 import { DecimalPipe } from '@angular/common';
-import { Component, input, viewChild } from '@angular/core';
+import { Component, inject, viewChild } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
+  type AlertButton,
+  AlertController,
   IonContent,
   IonHeader,
   IonIcon,
@@ -14,7 +17,10 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { type ProgressInfo } from 'electron-updater';
+import { of, switchMap, tap } from 'rxjs';
+
+import { ElectronService } from '../../../services/electron.service';
+import { ToasterService } from '../../../services/toaster.service';
 
 @Component({
   selector: 'app-update-modal',
@@ -38,7 +44,98 @@ import { type ProgressInfo } from 'electron-updater';
   ],
 })
 export class UpdateModalComponent {
-  progressInfo = input.required<ProgressInfo>();
+  private readonly electronService = inject(ElectronService);
+  private readonly toasterService = inject(ToasterService);
+  private readonly alertController = inject(AlertController);
+
+  progressInfo = toSignal(
+    this.electronService.onUpdateEvent().pipe(
+      tap(async (autoUpdaterEvent) => {
+        if (autoUpdaterEvent.event === 'checking-for-update') {
+          await this.toasterService.presentInfoToast('Checking for Updates');
+        }
+
+        if (autoUpdaterEvent.event === 'update-not-available') {
+          await this.toasterService.presentInfoToast('No Updates Available');
+        }
+
+        if (autoUpdaterEvent.event === 'update-available') {
+          await this.presentAlert(
+            'Update Available for Download',
+            `Version ${autoUpdaterEvent.updateInfo.version} is ready for download.`,
+            [
+              {
+                text: 'Cancel',
+                role: 'cancel',
+              },
+              {
+                text: 'Download',
+                role: 'confirm',
+                handler: async () => {
+                  this.electronService.downloadUpdate();
+                  await this.updateModal().present();
+                },
+              },
+            ]
+          );
+        }
+
+        if (autoUpdaterEvent.event === 'update-downloaded') {
+          await this.presentAlert(
+            'Update Ready to Install',
+            `Version ${autoUpdaterEvent.updateDownloadedEvent.version} is ready to install.`,
+            [
+              {
+                text: 'Cancel',
+                role: 'cancel',
+              },
+              {
+                text: 'Install',
+                role: 'confirm',
+                handler: () => {
+                  this.electronService.installUpdate();
+                },
+              },
+            ]
+          );
+        }
+
+        if (autoUpdaterEvent.event === 'update-cancelled') {
+          await this.toasterService.presentErrorToast('Update Cancelled');
+        }
+
+        if (
+          autoUpdaterEvent.event === 'update-downloaded' ||
+          autoUpdaterEvent.event === 'update-cancelled' ||
+          autoUpdaterEvent.event === 'error'
+        ) {
+          await this.updateModal().dismiss();
+        }
+      }),
+      switchMap((autoUpdaterEvent) => {
+        if (autoUpdaterEvent.event === 'download-progress') {
+          return of(autoUpdaterEvent.progressInfo);
+        }
+
+        return of({
+          total: 0,
+          delta: 0,
+          transferred: 0,
+          percent: 0,
+          bytesPerSecond: 0,
+        });
+      })
+    ),
+    {
+      initialValue: {
+        total: 0,
+        delta: 0,
+        transferred: 0,
+        percent: 0,
+        bytesPerSecond: 0,
+      },
+    }
+  );
 
   updateModal = viewChild.required<IonModal>('updateModal');
 
@@ -70,4 +167,17 @@ export class UpdateModalComponent {
       return `${minutes}m ${seconds}s`;
     }
   }
+
+  private async presentAlert(
+    header: string,
+    message?: string,
+    buttons?: (AlertButton | string)[]
+  ): Promise<void> {
+    const alert = await this.alertController.create({
+      header,
+      message,
+      buttons,
+    });
+    await alert.present();
+  }
 }
diff --git a/apps/spie-ui/src/app/services/serial-port.service.ts b/apps/spie-ui/src/app/services/serial-port.service.ts
new file mode 100644
index 0000000..e8b6d5b
--- /dev/null
+++ b/apps/spie-ui/src/app/services/serial-port.service.ts
@@ -0,0 +1,133 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { type OpenOptions } from '@serialport/bindings-interface';
+import { type SerialPortEvent } from '@spie/types';
+import { Subject, filter, from, map, merge, scan, switchMap } from 'rxjs';
+
+import { ElectronService } from './electron.service';
+import {
+  type SendOptions,
+  type TerminalOptions,
+} from '../interfaces/app.interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SerialPortService {
+  private readonly electronService = inject(ElectronService);
+
+  openOptions = signal<OpenOptions>({
+    path: '',
+    baudRate: 9600,
+    dataBits: 8,
+    lock: true,
+    stopBits: 1,
+    parity: 'none',
+    rtscts: false,
+    xon: false,
+    xoff: false,
+    xany: false,
+    hupcl: true,
+  });
+
+  terminalOptions = signal<TerminalOptions>({
+    encoding: 'ascii',
+    isAutoScrollEnabled: true,
+    showTimestampsEnabled: false,
+    scrollbackLength: 1,
+  });
+
+  sendOptions = signal<SendOptions>({
+    delimiter: 'lf',
+    encoding: 'ascii',
+    isSendInputValid: false,
+  });
+
+  clearDataSubject = new Subject<SerialPortEvent>();
+
+  isOpen = toSignal(
+    from(this.electronService.serialPort.isOpen()).pipe(
+      switchMap((isOpen) =>
+        this.electronService.serialPort.onEvent().pipe(
+          filter(
+            (serialPortEvent) =>
+              serialPortEvent.event === 'close' ||
+              serialPortEvent.event === 'open'
+          ),
+          scan((currentIsOpen, serialPortEvent) => {
+            if (serialPortEvent.event === 'open') {
+              return true;
+            }
+
+            if (serialPortEvent.event === 'close') {
+              return false;
+            }
+
+            return currentIsOpen;
+          }, isOpen)
+        )
+      )
+    ),
+    { initialValue: false }
+  );
+
+  data = toSignal(
+    toObservable(this.isOpen).pipe(
+      switchMap(() =>
+        merge(
+          // Emissions to this.isOpen will resubscribe these
+          this.electronService.serialPort.onEvent(),
+          this.clearDataSubject
+        )
+      ),
+      filter((serialPortEvent) => serialPortEvent.event === 'data'),
+      map((serialPortEvent) => {
+        const data = serialPortEvent.data;
+        // If data it a "clear terminal" signal
+        if (data === '') {
+          return '';
+        }
+
+        if (this.terminalOptions().showTimestampsEnabled) {
+          const date = new Date();
+          const hours = date.getHours().toString().padStart(2, '0');
+          const minutes = date.getMinutes().toString().padStart(2, '0');
+          const seconds = date.getSeconds().toString().padStart(2, '0');
+          return `[${hours}:${minutes}:${seconds}] ${data}`;
+        }
+
+        return data;
+      }),
+      scan(
+        (acc, value) => {
+          // Reset on empty string
+          if (value === '') {
+            return { items: [] as string[], length: 0 };
+          }
+
+          acc.items.push(value);
+          acc.length += value.length;
+          const maxLength = this.terminalOptions().scrollbackLength * 10000;
+
+          while (acc.length > maxLength) {
+            const removed = acc.items.shift();
+            if (removed) {
+              acc.length -= removed.length;
+            }
+          }
+
+          return acc;
+        },
+        { items: [] as string[], length: 0 }
+      ),
+      map((buffer) => {
+        if (this.terminalOptions().encoding === 'hex') {
+          return buffer.items.join('\n');
+        }
+
+        return buffer.items.join('');
+      })
+    ),
+    { initialValue: '' }
+  );
+}