diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b60bb30e046a2f3658fb7f7c3ceb94db075e784e..521ad510af5a0edcf4b55be0f10850829f0caea1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -44,6 +44,7 @@ import { MatNativeDateModule } from '@angular/material/core';
import { MomentDateModule } from '@angular/material-moment-adapter';
import { StationConfigComponent } from './module/pages/home/station-config/station-config.component';
import {MatTreeModule} from "@angular/material/tree";
+import { FormDialogComponent } from './module/components/customUX/forms/form-dialog/form-dialog.component';
const MY_DATE_FORMATS: MatDateFormats = {
parse: {
@@ -78,7 +79,8 @@ const MY_DATE_FORMATS: MatDateFormats = {
SliderComponent,
SummaryComponent,
ListIconComponent,
- StationConfigComponent
+ StationConfigComponent,
+ FormDialogComponent
],
imports: [
BrowserModule,
diff --git a/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.css b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.html b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..0397cad78d70cf435f83ce189941003caf88f9b8
--- /dev/null
+++ b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.html
@@ -0,0 +1,61 @@
+<div *ngIf="!isOpen" class="fixed inset-0 flex items-center justify-center z-50">
+ <div class="bg-white rounded-lg p-6">
+
+ <h2 class="text-lg font-semibold">Modal Dialog</h2>
+
+ <form>
+ <div class="relative z-0 w-full mb-6 group">
+ <mat-form-field appearance="fill" class="w-full">
+ <mat-label>Username</mat-label>
+ <input matInput formControlName="username">
+ <mat-error>
+ Please enter a valid username.
+ </mat-error>
+ </mat-form-field>
+
+ </div>
+ <div class="relative z-0 w-full mb-6 group">
+ <mat-form-field appearance="fill" class="w-full">
+ <mat-label>Username</mat-label>
+ <input matInput formControlName="username">
+ <mat-error>
+ Please enter a valid username.
+ </mat-error>
+ </mat-form-field>
+
+ </div>
+ <div class="grid md:grid-cols-2 md:gap-6">
+ <div class="relative z-0 w-full mb-6 group">
+ <mat-form-field appearance="fill" class="w-full">
+ <mat-label>Username</mat-label>
+ <input matInput formControlName="username">
+ <mat-error>
+ Please enter a valid username.
+ </mat-error>
+ </mat-form-field>
+ </div>
+ <div class="relative z-0 w-full mb-6 group">
+ <mat-form-field appearance="fill" class="w-full">
+ <mat-label>Username</mat-label>
+ <input matInput formControlName="username">
+ <mat-error>
+ Please enter a valid username.
+ </mat-error>
+ </mat-form-field>
+ </div>
+ </div>
+
+ <div class="relative w-full flex justify-between bg-danger">
+ <button type="submit" class=" my-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
+ <button class=" mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" (click)="closeModal()">Close</button>
+
+ </div>
+ </form>
+ </div>
+
+</div>
+
+<div *ngIf="!isOpen" class="fixed inset-0 bg-black opacity-50"></div>
+{{isOpen}}
+
+
diff --git a/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.spec.ts b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41b98fe60117136c667c19a56e557dd3f05f8fb3
--- /dev/null
+++ b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormDialogComponent } from './form-dialog.component';
+
+describe('FormDialogComponent', () => {
+ let component: FormDialogComponent;
+ let fixture: ComponentFixture<FormDialogComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ FormDialogComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(FormDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.ts b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eedf91558d72c5521d33ccf42a1090821a68e241
--- /dev/null
+++ b/src/app/module/components/customUX/forms/form-dialog/form-dialog.component.ts
@@ -0,0 +1,20 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+ selector: 'app-form-dialog',
+ templateUrl: './form-dialog.component.html',
+ styleUrls: ['./form-dialog.component.css']
+})
+export class FormDialogComponent {
+
+ @Input() isOpen:boolean = false;
+ @Output() sizeChange = new EventEmitter<boolean>();
+ openModal(): void {
+ this.isOpen = true;
+ }
+
+ closeModal(): void {
+ this.sizeChange.emit(false);
+ this.isOpen = false;
+ }
+}
diff --git a/src/app/module/pages/home/station-config/station-config.component.html b/src/app/module/pages/home/station-config/station-config.component.html
index bf5c679b2841edb48c5b68a256926ed1595fa601..97121f0ab27d151be1e78e8005aa7e39a79e13ad 100644
--- a/src/app/module/pages/home/station-config/station-config.component.html
+++ b/src/app/module/pages/home/station-config/station-config.component.html
@@ -1,5 +1,5 @@
<section class="mt-3 rounded-xl relative">
- <mat-tree class="rounded-xl mr-3" [dataSource]="dataSource" [treeControl]="treeControl">
+ <mat-tree class="rounded-xl mr-3" [dataSource]="dataSource" [treeControl]="treeControl" >
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="justify-between">
<!-- use a disabled button to provide padding for tree leaf -->
@@ -8,12 +8,13 @@
{{node.name}}
</section>
- <section class="pr-2">
- <button>
+ <section class="pr-2" >
+ <button (click)="alerts()">
<mat-icon>
edit
</mat-icon>
- </button>
+s
+ </button >
</section>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
@@ -21,7 +22,7 @@
<section class="flex items-center">
<button mat-icon-button matTreeNodeToggle
- [attr.aria-label]="'Toggle ' + node.name">
+ [attr.aria-label]="'Toggle ' + node.name" >
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
@@ -29,10 +30,11 @@
{{node.name}}
</section>
<section class="pr-2">
- <button>
+ <button (click)="openModule=true" >
<mat-icon>
edit
</mat-icon>
+ sdk
</button>
</section>
</mat-tree-node>
@@ -40,10 +42,10 @@
</section>
+<app-form-dialog [isOpen]="openModule" (sizeChange)="openModule=$event"></app-form-dialog>
-
-
+{{openModule}}
diff --git a/src/app/module/pages/home/station-config/station-config.component.ts b/src/app/module/pages/home/station-config/station-config.component.ts
index 9e4ad18cab414ebcec269a55d86ed6509715e37a..87eddbf727da7e9a969ef28c06bffa434a96c50d 100644
--- a/src/app/module/pages/home/station-config/station-config.component.ts
+++ b/src/app/module/pages/home/station-config/station-config.component.ts
@@ -9,6 +9,7 @@ import {
StationControllerService
} from "../../../../../../projects/generated-api/src";
import {combineLatest, Observable, of, switchMap, tap} from "rxjs";
+import {b} from "chart.js/dist/chunks/helpers.core";
@@ -209,8 +210,11 @@ export class StationConfigComponent implements OnInit{
});
}
- alert=()=>{alert("focused")}
+ alerts(): void {
+ alert("focused");
+ }
+ public openModule:boolean=false;
}