feat(spie-ui): restructure app to add support to plotter view

robsonos · Dec 5, 2024 · 42b7495 · 42b7495
1 parent 4966721
commit 42b7495
Show file tree

Hide file tree

Showing 52 changed files with 1,245 additions and 560 deletions.
diff --git a/apps/spie-ui/eslint.config.js b/apps/spie-ui/eslint.config.js
@@ -25,6 +25,10 @@ module.exports = [
           style: 'kebab-case',
         },
       ],
+      '@angular-eslint/component-class-suffix': [
+        'error',
+        { suffixes: ['Page', 'Component'] },
+      ],
     },
   },
   {

diff --git a/apps/spie-ui/project.json b/apps/spie-ui/project.json
@@ -27,15 +27,15 @@
           "apps/spie-ui/src/global.scss",
           "apps/spie-ui/src/theme/variables.scss"
         ],
-        "scripts": []
+        "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"]
       },
       "configurations": {
         "production": {
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/apps/spie-ui/src/app/app.component.ts b/apps/spie-ui/src/app/app.component.ts
@@ -4,10 +4,18 @@ import { addIcons } from 'ionicons';
 import {
   cloudUploadOutline,
   documentOutline,
+  logInOutline,
+  logOutOutline,
+  pauseOutline,
+  playOutline,
+  pulseOutline,
+  sendOutline,
   settingsOutline,
   speedometerOutline,
   statsChartOutline,
+  terminalOutline,
   timeOutline,
+  trashOutline,
 } from 'ionicons/icons';
 
 @Component({
@@ -21,9 +29,17 @@ export class AppComponent {
   constructor() {
     addIcons({ cloudUploadOutline });
     addIcons({ documentOutline });
+    addIcons({ logInOutline });
+    addIcons({ logOutOutline });
+    addIcons({ pauseOutline });
+    addIcons({ playOutline });
+    addIcons({ pulseOutline });
+    addIcons({ sendOutline });
     addIcons({ settingsOutline });
     addIcons({ speedometerOutline });
     addIcons({ statsChartOutline });
+    addIcons({ terminalOutline });
     addIcons({ timeOutline });
+    addIcons({ trashOutline });
   }
 }
diff --git a/apps/spie-ui/src/app/app.routes.ts b/apps/spie-ui/src/app/app.routes.ts
@@ -1,15 +1,9 @@
 import { type Routes } from '@angular/router';
 
-import { HomeComponent } from './pages/home/home.component';
-
 export const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
-  },
-  {
-    path: '**',
-    redirectTo: '',
-    pathMatch: 'full',
+    loadChildren: () =>
+      import('./pages/home/home.routes').then((m) => m.routes),
   },
 ];
diff --git a/.../connection-advanced-modal.component.html → .../connection-advanced-modal.component.html b/.../connection-advanced-modal.component.html → .../connection-advanced-modal.component.html
diff --git a/.../connection-advanced-modal.component.scss → .../connection-advanced-modal.component.scss b/.../connection-advanced-modal.component.scss → .../connection-advanced-modal.component.scss
diff --git a/...al/connection-advanced-modal.component.ts → ...al/connection-advanced-modal.component.ts b/...al/connection-advanced-modal.component.ts → ...al/connection-advanced-modal.component.ts
@@ -18,11 +18,11 @@ import { type Subject } from 'rxjs';
 import {
   type CheckboxCustomEvent,
   type SelectCustomEvent,
-} from '../../../../interfaces/ionic.interface';
-import { SerialPortService } from '../../../../services/serial-port.service';
+} from '../../interfaces/ionic.interface';
+import { SerialPortService } from '../../services/serial-port.service';
 
 @Component({
-  selector: 'app-connection-advanced-modal',
+  selector: 'app-connection-advanced-modal-component',
   templateUrl: 'connection-advanced-modal.component.html',
   styleUrls: ['./connection-advanced-modal.component.scss'],
   standalone: true,
@@ -53,8 +53,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeDataBits(event: SelectCustomEvent<string>): void {
     const selectedOption = event.detail.value;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       dataBits: parseInt(selectedOption, 10) as 5 | 6 | 7 | 8,
     }));
 
@@ -63,8 +63,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeStopBits(event: SelectCustomEvent<string>): void {
     const selectedOption = event.detail.value;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       stopBits: parseFloat(selectedOption) as 1 | 1.5 | 2,
     }));
 
@@ -73,8 +73,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeParity(event: SelectCustomEvent<string>): void {
     const selectedOption = event.detail.value;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       parity: selectedOption,
     }));
 
@@ -83,8 +83,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeRtscts(event: CheckboxCustomEvent<boolean>): void {
     const selectedOption = event.detail.checked;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       rtscts: selectedOption,
     }));
 
@@ -93,8 +93,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeXon(event: CheckboxCustomEvent<boolean>): void {
     const selectedOption = event.detail.checked;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       xon: selectedOption,
     }));
 
@@ -103,8 +103,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeXoff(event: CheckboxCustomEvent<boolean>): void {
     const selectedOption = event.detail.checked;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       xoff: selectedOption,
     }));
 
@@ -113,8 +113,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeXany(event: CheckboxCustomEvent<boolean>): void {
     const selectedOption = event.detail.checked;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       xany: selectedOption,
     }));
 
@@ -123,8 +123,8 @@ export class ConnectionAdvancedComponent {
 
   onChangeHupcl(event: CheckboxCustomEvent<boolean>): void {
     const selectedOption = event.detail.checked;
-    this.openOptions.update((currentOpenOptions) => ({
-      ...currentOpenOptions,
+    this.openOptions.update((openOptions) => ({
+      ...openOptions,
       hupcl: selectedOption,
     }));
 

diff --git a/apps/spie-ui/src/app/components/connection/connection.component.html b/apps/spie-ui/src/app/components/connection/connection.component.html
@@ -0,0 +1,81 @@
+<ion-accordion-group value="connection">
+  <ion-accordion value="connection" toggleIconSlot="start">
+    <ion-item slot="header" color="primary">
+      <ion-label>Connection</ion-label>
+    </ion-item>
+
+    <ion-card slot="content">
+      <ion-card-content>
+        <ion-grid>
+          <ion-row>
+            <ion-col size="6">
+              <ion-item>
+                <ion-select
+                  label="Serial Port"
+                  placeholder="Select Serial Port"
+                  [disabled]="isOpen()"
+                  [value]="openOptions().path"
+                  (click)="onClickSerialPort($event)"
+                  (ionChange)="onChangeSerialPort($event)"
+                >
+                  @for (serialPort of serialPorts(); track $index) {
+                  <ion-select-option [value]="serialPort.path">
+                    {{ serialPort.path }} - {{ serialPort.manufacturer }}
+                  </ion-select-option>
+                  }
+                </ion-select>
+              </ion-item>
+            </ion-col>
+
+            <ion-col size="6">
+              <ion-item>
+                <ion-select
+                  label="Baud Rate"
+                  placeholder="Select Baud Rate"
+                  [value]="openOptions().baudRate"
+                  (ionChange)="onChangeBaudRate($event)"
+                >
+                  @for (baudRate of baudRates; track $index) {
+                  <ion-select-option [value]="baudRate">{{
+                    baudRate
+                  }}</ion-select-option>
+                  }
+                </ion-select>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col>
+              <ion-button
+                expand="block"
+                [color]="isOpen() ? 'danger' : 'secondary'"
+                [disabled]="!isOpen() && openOptions().path === ''"
+                (click)="onClickConnect()"
+              >
+                <ion-icon
+                  slot="start"
+                  [name]="isOpen() ? 'log-out-outline' : 'log-in-outline'"
+                ></ion-icon>
+                {{ isOpen() ? 'Disconnect' : 'Connect' }}
+              </ion-button>
+            </ion-col>
+            <ion-col size="auto">
+              <ion-button
+                fill="clear"
+                color="secondary"
+                (click)="onClickConnectionAdvancedModal()"
+              >
+                <ion-icon name="settings-outline"></ion-icon>
+              </ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <app-connection-advanced-modal-component
+          [reconnectSubject]="reconnectSubject"
+        />
+      </ion-card-content>
+    </ion-card>
+  </ion-accordion>
+</ion-accordion-group>
diff --git a/...home/connection/connection.component.scss → ...ents/connection/connection.component.scss b/...home/connection/connection.component.scss → ...ents/connection/connection.component.scss