From 923b0d71cc86d4b5b449615aa568ee73636a7868 Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Sun, 16 Mar 2025 23:20:14 +0100
Subject: [PATCH] FE-7 Initialize dashboard-settings component and add draft
style
---
.../dashboard-settings.component.html | 42 +++++++++
.../dashboard-settings.component.scss | 86 +++++++++++++++++++
.../dashboard-settings.component.spec.ts | 23 +++++
.../dashboard-settings.component.ts | 23 +++++
.../dashboard/dashboard.component.ts | 21 ++++-
5 files changed, 192 insertions(+), 3 deletions(-)
create mode 100644 src/app/components/dashboard-settings/dashboard-settings.component.html
create mode 100644 src/app/components/dashboard-settings/dashboard-settings.component.scss
create mode 100644 src/app/components/dashboard-settings/dashboard-settings.component.spec.ts
create mode 100644 src/app/components/dashboard-settings/dashboard-settings.component.ts
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.html b/src/app/components/dashboard-settings/dashboard-settings.component.html
new file mode 100644
index 0000000..9ca3bc4
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.html
@@ -0,0 +1,42 @@
+<div class="dialog">
+ <h2 mat-dialog-title class="dialog__header">Settings</h2>
+ <mat-dialog-content class="dialog__content">
+ <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 [(ngModel)]="isChecked">Total packets</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">Packets per seconds</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">Total bytes</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">Bytes per second</mat-slide-toggle>
+ </div>
+ </div>
+ <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 [(ngModel)]="isChecked">ETH</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">IPv4</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">IPv6</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">TCP</mat-slide-toggle>
+ </div>
+ </div>
+ <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 [(ngModel)]="isChecked">Min value</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">Max value</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="isChecked">Current value</mat-slide-toggle>
+
+ </div>
+ </div>
+ </mat-dialog-content>
+ <mat-dialog-actions class="dialog__actions">
+ <button mat-flat-button mat-dialog-close>Cancel</button>
+ <button mat-flat-button mat-dialog-close>Basic</button>
+ </mat-dialog-actions>
+</div>
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.scss b/src/app/components/dashboard-settings/dashboard-settings.component.scss
new file mode 100644
index 0000000..82aa7b9
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.scss
@@ -0,0 +1,86 @@
+@use '../../../vars';
+@use 'sass:map';
+
+
+.custom-dialog-container .mat-dialog-container {
+
+
+
+}
+
+.dialog {
+ background-color: map.get(vars.$grey, 0);
+ &__header {
+ border-bottom: 1px solid map.get(vars.$grey, 30);
+ font-family: Monoton, cursive;
+
+ font-size: map.get(vars.$text, 'xxl');
+ padding: map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'lg') map.get(vars.$spacing, 'xl');
+ }
+
+ &__content {
+ font-weight: 500;
+ &__statistics {
+ &__columns {
+ &-title {
+ font-size: map.get(vars.$text, 'xl');
+ padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'none');
+ }
+ &-content {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 10);
+ padding: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'lg');
+ mat-slide-toggle {
+ width: 25%;
+ }
+ }
+ }
+ &__rows {
+ &-title {
+ font-size: map.get(vars.$text, 'xl');
+ padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'none');
+ }
+ &-content {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 10);
+ padding: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'lg');
+ mat-slide-toggle {
+ width: 25%;
+ }
+ }
+ }
+ &__ir {
+ &-title {
+ font-size: map.get(vars.$text, 'xl');
+ padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'none');
+ }
+ &-content {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 10);
+ padding: map.get(vars.$spacing, 'sm') map.get(vars.$spacing, 'lg');
+ mat-slide-toggle {
+ width: 25%;
+ }
+ }
+ }
+ }
+ }
+ &__actions {
+ margin-top: map.get(vars.$spacing, 'sm');
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 30);
+ //padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xxxl') map.get(vars.$spacing, 'none');
+ button {
+ width: 33%;
+ border-radius: map.get(vars.$radius, 'sm');
+ }
+ }
+}
+
+
+
+
+::ng-deep .p-toggleswitch-input {
+ width:300px;
+ height:300px;
+}
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.spec.ts b/src/app/components/dashboard-settings/dashboard-settings.component.spec.ts
new file mode 100644
index 0000000..5a25de3
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardSettingsComponent } from './dashboard-settings.component';
+
+describe('DashboardSettingsComponent', () => {
+ let component: DashboardSettingsComponent;
+ let fixture: ComponentFixture<DashboardSettingsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [DashboardSettingsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(DashboardSettingsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts
new file mode 100644
index 0000000..da7902c
--- /dev/null
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { FormsModule } from '@angular/forms';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [
+ MatDialogModule,
+ ToggleSwitchModule,
+ FormsModule,
+ MatSlideToggle,
+ MatButtonModule,
+ ],
+ selector: 'app-dashboard-settings',
+ styleUrl: './dashboard-settings.component.scss',
+ templateUrl: './dashboard-settings.component.html',
+})
+export class DashboardSettingsComponent {
+ isChecked: Boolean = true;
+}
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index c9ea330..2638312 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,10 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIcon } from '@angular/material/icon';
-import { MatFabButton } from '@angular/material/button';
+import { MatButtonModule, MatFabButton } from '@angular/material/button';
import { DashboardStatisticsComponent } from '../dashboard-statistics/dashboard-statistics.component';
import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.component';
+import {
+ MatDialog,
+ MatDialogActions,
+ MatDialogClose,
+ MatDialogContent,
+ MatDialogTitle,
+} from '@angular/material/dialog';
+import { DashboardSettingsComponent } from '../dashboard-settings/dashboard-settings.component';
@Component({
selector: 'app-dashboard',
@@ -21,5 +29,12 @@ import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.c
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {
- openSettings() {}
+ readonly dialog = inject(MatDialog);
+
+ openSettings() {
+ this.dialog.open(DashboardSettingsComponent, {
+ minWidth: '1100px',
+ minHeight: '550px',
+ });
+ }
}
--
GitLab