diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.html b/src/app/components/dashboard-charts/dashboard-charts.component.html
index b47c127796fea4ca6dfb70f2692716718beeefb8..6e8dd56d956477b08d1a37b0f647bc6ba16c7559 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.html
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.html
@@ -1,5 +1,5 @@
<mat-tab-group>
- @if (settings?.statisticsRowsAndCharts?.showETH) {
+ @if (settings?.showETH) {
<mat-tab label="Frames">
<app-dashboard-chart-frames />
</mat-tab>
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.ts b/src/app/components/dashboard-charts/dashboard-charts.component.ts
index 6ae554762a843e59ac914a0fff21d715096278b2..f2d0bbd083ec9e5cf1b55156afc45f50833edfe9 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.ts
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.ts
@@ -37,9 +37,9 @@ export class DashboardChartsComponent {
private settingsService = inject(SettingsService);
constructor() {
- this.settingsService.settings$.subscribe(settings => {
+ this.settingsService.settingsObserver$.subscribe(settings => {
this.settings = settings;
- console.log('Settings received in Dashboard:', this.settings);
+ console.log('Settings received in charts:', this.settings);
});
}
}
diff --git a/src/app/components/dashboard-settings/dashboard-settings.builder.ts b/src/app/components/dashboard-settings/dashboard-settings.builder.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cbb0caa6a30e86a513d3cd3e1ceba0bc35f06c6e
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.builder.ts
@@ -0,0 +1,67 @@
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { inject, Injectable } from '@angular/core';
+import { Settings } from '../../models/settings';
+
+export type SettingsForm = FormGroup<{
+ showTotalPackets: FormControl<boolean>;
+ showPacketsPerSec: FormControl<boolean>;
+ showTotalBytes: FormControl<boolean>;
+ showBytesPerSec: FormControl<boolean>;
+
+ showETH: FormControl<boolean>;
+ showIPv4: FormControl<boolean>;
+ showIPv6: FormControl<boolean>;
+ showTCP: FormControl<boolean>;
+
+ showMinValue: FormControl<boolean>;
+ showMaxValue: FormControl<boolean>;
+ showCurrentValue: FormControl<boolean>;
+}>;
+
+@Injectable({
+ providedIn: 'root',
+})
+export class SettingsFormBuilder {
+ formBuilder = inject(FormBuilder);
+
+ create(settings?: Settings): SettingsForm {
+ const fb = this.formBuilder.nonNullable;
+
+ return fb.group({
+ showTotalPackets: fb.control<boolean>(settings?.showTotalPackets || true),
+ showPacketsPerSec: fb.control<boolean>(
+ settings?.showPacketsPerSec || true
+ ),
+ showTotalBytes: fb.control<boolean>(settings?.showTotalBytes || true),
+ showBytesPerSec: fb.control<boolean>(settings?.showBytesPerSec || true),
+
+ showETH: fb.control<boolean>(settings?.showETH || true),
+ showIPv4: fb.control<boolean>(settings?.showIPv4 || true),
+ showIPv6: fb.control<boolean>(settings?.showIPv6 || true),
+ showTCP: fb.control<boolean>(settings?.showTCP || true),
+
+ showMinValue: fb.control<boolean>(settings?.showMinValue || true),
+ showMaxValue: fb.control<boolean>(settings?.showMaxValue || true),
+ showCurrentValue: fb.control<boolean>(settings?.showCurrentValue || true),
+ });
+ }
+
+ toValue(form: SettingsForm): Settings {
+ const data = form.value;
+ return <Settings>{
+ showTotalPackets: data.showTotalPackets ?? true,
+ showPacketsPerSec: data.showPacketsPerSec ?? true,
+ showTotalBytes: data.showTotalBytes ?? true,
+ showBytesPerSec: data.showBytesPerSec ?? true,
+
+ showETH: data.showETH ?? true,
+ showIPv4: data.showIPv4 ?? true,
+ showIPv6: data.showIPv6 ?? true,
+ showTCP: data.showTCP ?? true,
+
+ showMinValue: data.showMinValue ?? true,
+ showMaxValue: data.showMaxValue ?? true,
+ showCurrentValue: data.showCurrentValue ?? true,
+ };
+ }
+}
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.html b/src/app/components/dashboard-settings/dashboard-settings.component.html
index bddf1679bc80f0f57914c73c1c3416b717ab8def..3b5756c593481d6bf4dc23f86a990429adc29164 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.html
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.html
@@ -1,36 +1,36 @@
-<div class="dialog" [formGroup]="settingsForm">
+<div class="dialog" [formGroup]="form">
<h2 mat-dialog-title class="dialog__header">Settings</h2>
<mat-dialog-content class="dialog__content">
- <div formGroupName="statisticsColumns" class="dialog__content__statistics__columns">
+ <div class="dialog__content__statistics__columns">
<div class="dialog__content__statistics__columns-title">
Statistics columns
</div>
<div class="dialog__content__statistics__columns-content">
- <mat-slide-toggle [hideIcon]="true" formControlName="showTotalPackets">Total packets</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showPacketsPerSec">Packets per seconds</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showTotalBytes">Total bytes</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showBytesPerSec">Bytes per second</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showTotalPackets">Total packets</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showPacketsPerSec">Packets per seconds</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showTotalBytes">Total bytes</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showBytesPerSec">Bytes per second</mat-slide-toggle>
</div>
</div>
- <div formGroupName="statisticsRowsAndCharts" class="dialog__content__statistics__rows">
+ <div class="dialog__content__statistics__rows">
<div class="dialog__content__statistics__rows-title">
Statistics rows & charts
</div>
<div class="dialog__content__statistics__rows-content">
- <mat-slide-toggle [hideIcon]="true" formControlName="showETH">ETH</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showIPv4">IPv4</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showIPv6">IPv6</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showTCP">TCP</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showETH">ETH</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showIPv4">IPv4</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showIPv6">IPv6</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showTCP">TCP</mat-slide-toggle>
</div>
</div>
- <div formGroupName="statisticsIR" class="dialog__content__statistics__ir">
+ <div class="dialog__content__statistics__ir">
<div class="dialog__content__statistics__ir-title">
Information Rate
</div>
<div class="dialog__content__statistics__ir-content">
- <mat-slide-toggle [hideIcon]="true" formControlName="showMinValue">Min value</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showMaxValue">Max value</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" formControlName="showCurrentValue">Current value</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showMinValue">Min value</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showMaxValue">Max value</mat-slide-toggle>
+ <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showCurrentValue">Current value</mat-slide-toggle>
</div>
</div>
</mat-dialog-content>
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts
index 65a044ad32af672659949446adfbf8babcecea92..3acffaa589d80034bced276f0bfaec6e8759461d 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.ts
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.ts
@@ -2,16 +2,21 @@ import {
ChangeDetectionStrategy,
Component,
inject,
+ input,
OnInit,
} from '@angular/core';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { ButtonComponent } from '../button/button.component';
import { SettingsService } from '../../service/settings.service';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { Settings } from '../../models/settings';
+import {
+ SettingsForm,
+ SettingsFormBuilder,
+} from './dashboard-settings.builder';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,39 +34,30 @@ import { Settings } from '../../models/settings';
templateUrl: './dashboard-settings.component.html',
})
export class DashboardSettingsComponent implements OnInit {
- private formBuilder = inject(FormBuilder).nonNullable;
-
- private dialogRef = inject(MatDialogRef<DashboardSettingsComponent>);
+ settingsFormBuilder = inject(SettingsFormBuilder);
+ settings = input<Settings>();
+ form!: SettingsForm;
- private settingsService = inject(SettingsService);
+ dialogRef = inject(MatDialogRef<DashboardSettingsComponent>);
- settingsForm = this.formBuilder.group({
- statisticsColumns: this.formBuilder.group({
- showTotalPackets: [false],
- showPacketsPerSec: [false],
- showTotalBytes: [false],
- showBytesPerSec: [false],
- }),
- statisticsRowsAndCharts: this.formBuilder.group({
- showETH: [false],
- showIPv4: [false],
- showIPv6: [false],
- showTCP: [false],
- }),
- statisticsIR: this.formBuilder.group({
- showMinValue: [false],
- showMaxValue: [false],
- showCurrentValue: [false],
- }),
- });
+ settingsService = inject(SettingsService);
ngOnInit() {
+ this.initializeForm();
+ this.loadSettings();
+ }
+
+ initializeForm() {
+ this.form = this.settingsFormBuilder.create(this.settings());
+ }
+
+ loadSettings() {
const currentSettings = this.settingsService.getSettings();
- this.settingsForm.patchValue(currentSettings);
+ this.form.patchValue(currentSettings);
}
onSubmit() {
- const settings: Settings = this.settingsForm.getRawValue();
+ const settings: Settings = this.settingsFormBuilder.toValue(this.form);
this.settingsService.updateSettings(settings);
this.dialogRef.close();
}
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.html b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
index bf8dc8853234103549e3ec927b4e8447cbc3ac03..d7d609615b0b8b078f57880729d969ee7e23fca7 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.html
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
@@ -16,37 +16,37 @@
<thead class="statistics__table__header-title">
<tr>
<th></th>
- @if (settings?.statisticsColumns?.showTotalPackets) {
+ @if (settings?.showTotalPackets) {
<th>Total packets</th>
}
- @if (settings?.statisticsColumns?.showPacketsPerSec) {
+ @if (settings?.showPacketsPerSec) {
<th>Packets per second</th>
}
- @if (settings?.statisticsColumns?.showTotalBytes) {
+ @if (settings?.showTotalBytes) {
<th>Total bytes</th>
}
- @if (settings?.statisticsColumns?.showBytesPerSec) {
+ @if (settings?.showBytesPerSec) {
<th>Bytes per second</th>
}
</tr>
</thead>
- @if (settings?.statisticsRowsAndCharts?.showETH) {
+ @if (settings?.showETH) {
<tbody>
@let protocolEth = getETHStatistics(statistics.protocols);
<tr class="statistics__table__header-eth">
<td>{{ protocolEth.name }}</td>
- @if (settings?.statisticsColumns?.showTotalPackets) {
+ @if (settings?.showTotalPackets) {
<td>{{ protocolEth.total_packets | decimal }}</td>
}
- @if (settings?.statisticsColumns?.showPacketsPerSec) {
+ @if (settings?.showPacketsPerSec) {
<td>
{{ getPerSecond(protocolEth.total_packets, statistics.total_time) | decimal }}
</td>
}
- @if (settings?.statisticsColumns?.showTotalBytes) {
+ @if (settings?.showTotalBytes) {
<td>{{ protocolEth.total_bytes | decimal }}</td>
}
- @if (settings?.statisticsColumns?.showBytesPerSec) {
+ @if (settings?.showBytesPerSec) {
<td>
{{ getPerSecond(protocolEth.total_bytes, statistics.total_time) | decimal }}
</td>
@@ -62,18 +62,18 @@
@if (showProtocolRow(protocol.name)) {
<tr>
<td>{{ protocol.name }}</td>
- @if (settings?.statisticsColumns?.showTotalPackets) {
+ @if (settings?.showTotalPackets) {
<td>{{ protocol.total_packets | decimal }}</td>
}
- @if (settings?.statisticsColumns?.showPacketsPerSec) {
+ @if (settings?.showPacketsPerSec) {
<td>
{{ getPerSecond(protocol.total_packets, statistics.total_time) | decimal }}
</td>
}
- @if (settings?.statisticsColumns?.showTotalBytes) {
+ @if (settings?.showTotalBytes) {
<td>{{ protocol.total_bytes | decimal }}</td>
}
- @if (settings?.statisticsColumns?.showBytesPerSec) {
+ @if (settings?.showBytesPerSec) {
<td>
{{ getPerSecond(protocol.total_bytes, statistics.total_time) | decimal }}
</td>
@@ -89,13 +89,13 @@
<thead class="statistics__table__ir-header">
<tr>
<th></th>
- @if (settings?.statisticsIR?.showMinValue) {
+ @if (settings?.showMinValue) {
<th>Min</th>
}
- @if (settings?.statisticsIR?.showMaxValue) {
+ @if (settings?.showMaxValue) {
<th>Max</th>
}
- @if (settings?.statisticsIR?.showCurrentValue) {
+ @if (settings?.showCurrentValue) {
<th>Current</th>
}
</tr>
@@ -103,13 +103,13 @@
<tbody>
<tr class="statistics__table_ir-content">
<td>Information Rate</td>
- @if (settings?.statisticsIR?.showMinValue) {
+ @if (settings?.showMinValue) {
<td>{{ statistics.information_rate.min | decimal }}</td>
}
- @if (settings?.statisticsIR?.showMaxValue) {
+ @if (settings?.showMaxValue) {
<td>{{ statistics.information_rate.max | decimal }}</td>
}
- @if (settings?.statisticsIR?.showCurrentValue) {
+ @if (settings?.showCurrentValue) {
<td>{{ statistics.information_rate.current | decimal }}</td>
}
</tr>
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
index 7afcf20efb373090b7d31d4a0701dcaed02b6f09..ba39e03963d6d17454d245f006a9dfb21e3b132a 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
@@ -33,10 +33,10 @@ export class DashboardStatisticsComponent implements OnInit {
dashboardApi = inject(DashboardApi);
settings!: Settings;
- private settingsService = inject(SettingsService);
+ settingsService = inject(SettingsService);
ngOnInit() {
- this.settingsService.settings$.subscribe(settings => {
+ this.settingsService.settingsObserver$.subscribe(settings => {
this.settings = settings;
console.log('Settings received in Dashboard:', this.settings);
});
@@ -61,7 +61,7 @@ export class DashboardStatisticsComponent implements OnInit {
}
get showAnyStatisticsColumn(): boolean {
- const cols = this.settings?.statisticsColumns;
+ const cols = this.settings;
return (
cols?.showBytesPerSec ||
cols?.showPacketsPerSec ||
@@ -71,17 +71,17 @@ export class DashboardStatisticsComponent implements OnInit {
}
get showStatisticsRowsAndCharts(): boolean {
- const rows = this.settings?.statisticsRowsAndCharts;
+ const rows = this.settings;
return rows?.showETH || rows?.showIPv4 || rows?.showIPv6 || rows?.showTCP;
}
get showInformationRate(): boolean {
- const ir = this.settings?.statisticsIR;
+ const ir = this.settings;
return ir?.showMinValue || ir?.showMaxValue || ir?.showCurrentValue;
}
showProtocolRow(protocolName: string): boolean {
- const rows = this.settings?.statisticsRowsAndCharts;
+ const rows = this.settings;
return (
(rows?.showIPv4 && protocolName === 'IPv4') ||
(rows?.showIPv6 && protocolName === 'IPv6') ||
diff --git a/src/app/models/settings.ts b/src/app/models/settings.ts
index cd24489148d24a631454d841d38228952be76260..09e4e131f79cd7924b41d080c67e4e4525ed1fd6 100644
--- a/src/app/models/settings.ts
+++ b/src/app/models/settings.ts
@@ -1,21 +1,17 @@
export type Settings = SettingsDto;
export interface SettingsDto {
- statisticsColumns: {
- showTotalPackets: boolean;
- showPacketsPerSec: boolean;
- showTotalBytes: boolean;
- showBytesPerSec: boolean;
- };
- statisticsRowsAndCharts: {
- showETH: boolean;
- showIPv4: boolean;
- showIPv6: boolean;
- showTCP: boolean;
- };
- statisticsIR: {
- showMinValue: boolean;
- showMaxValue: boolean;
- showCurrentValue: boolean;
- };
+ showTotalPackets: boolean;
+ showPacketsPerSec: boolean;
+ showTotalBytes: boolean;
+ showBytesPerSec: boolean;
+
+ showETH: boolean;
+ showIPv4: boolean;
+ showIPv6: boolean;
+ showTCP: boolean;
+
+ showMinValue: boolean;
+ showMaxValue: boolean;
+ showCurrentValue: boolean;
}
diff --git a/src/app/service/settings.service.ts b/src/app/service/settings.service.ts
index 4f7be8b583b0f500be9db2bd64ec07c7a985d7ce..8c8d3e1954d497e5bd1761c6e3a34f0604cc9479 100644
--- a/src/app/service/settings.service.ts
+++ b/src/app/service/settings.service.ts
@@ -3,23 +3,19 @@ import { BehaviorSubject } from 'rxjs';
import { Settings } from '../models/settings';
const DEFAULT_SETTINGS: Settings = {
- statisticsColumns: {
- showTotalPackets: true,
- showPacketsPerSec: true,
- showTotalBytes: true,
- showBytesPerSec: true,
- },
- statisticsRowsAndCharts: {
- showETH: true,
- showIPv4: true,
- showIPv6: true,
- showTCP: true,
- },
- statisticsIR: {
- showMinValue: true,
- showMaxValue: true,
- showCurrentValue: true,
- },
+ showTotalPackets: true,
+ showPacketsPerSec: true,
+ showTotalBytes: true,
+ showBytesPerSec: true,
+
+ showETH: true,
+ showIPv4: true,
+ showIPv6: true,
+ showTCP: true,
+
+ showMinValue: true,
+ showMaxValue: true,
+ showCurrentValue: true,
};
@Injectable({
@@ -27,7 +23,7 @@ const DEFAULT_SETTINGS: Settings = {
})
export class SettingsService {
private settingsSubject = new BehaviorSubject<Settings>(DEFAULT_SETTINGS);
- settings$ = this.settingsSubject.asObservable();
+ settingsObserver$ = this.settingsSubject.asObservable();
updateSettings(settings: Settings) {
this.settingsSubject.next(settings);