From 97019c97d07f788e34b1880b625cde279e0a086b Mon Sep 17 00:00:00 2001
From: csba1652 <Bilal.Hassan@student.uibk.ac.at>
Date: Fri, 23 Jun 2023 20:51:39 +0100
Subject: [PATCH] working on TreeConfig ->config Representation
---
src/app/app.module.ts | 4 +-
.../form-dialog/form-dialog.component.css | 0
.../form-dialog/form-dialog.component.html | 61 +++++++++++++++++++
.../form-dialog/form-dialog.component.spec.ts | 23 +++++++
.../form-dialog/form-dialog.component.ts | 20 ++++++
.../station-config.component.html | 18 +++---
.../station-config.component.ts | 6 +-
7 files changed, 122 insertions(+), 10 deletions(-)
create mode 100644 src/app/module/components/customUX/forms/form-dialog/form-dialog.component.css
create mode 100644 src/app/module/components/customUX/forms/form-dialog/form-dialog.component.html
create mode 100644 src/app/module/components/customUX/forms/form-dialog/form-dialog.component.spec.ts
create mode 100644 src/app/module/components/customUX/forms/form-dialog/form-dialog.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b60bb30..521ad51 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 0000000..e69de29
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 0000000..0397cad
--- /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 0000000..41b98fe
--- /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 0000000..eedf915
--- /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 bf5c679..97121f0 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 9e4ad18..87eddbf 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;
}
--
GitLab