ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-24 07:06:38 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Validation in text & style editor added

Browse Source
This commit is contained in:
Piotr Pekala 2019-05-30 03:57:30 -07:00
parent 889c48be65
commit 2a56441ce9
9 changed files with 138 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -184,6 +184,8 @@ import { AdbutlerComponent } from './components/adbutler/adbutler.component';
import { ConsoleService } from './services/settings/console.service';
import { DefaultConsoleService } from './services/settings/default-console.service';
import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
import { NonNegativeValidator } from './validators/NonNegativeValidator';
import { RotationValidator } from './validators/RotationValidator';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -374,7 +376,9 @@ if (environment.production) {
ServerManagementService,
ConsoleService,
DefaultConsoleService,
NodeCreatedLabelStylesFixer
NodeCreatedLabelStylesFixer,
NonNegativeValidator,
RotationValidator
],
entryComponents: [
AddServerDialogComponent,

34
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
View File

@ -1,25 +1,27 @@
<h1 mat-dialog-title>Style editor</h1>
<div class="modal-form-container">
<mat-form-field>
<input matInput placeholder="Fill color" type="color" [(ngModel)]="element.fill">
</mat-form-field>
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.fill">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Border width" type="text" [(ngModel)]="element.stroke_width">
</mat-form-field>
<mat-form-field *ngIf="element.stroke_dasharray">
<input matInput placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="borderWidth" placeholder="Border width" type="number">
</mat-form-field>
<mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
<input matInput [ngModelOptions]="{standalone: true}" placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="rotation" placeholder="Rotation" type="number">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>

4
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
View File

@ -47,3 +47,7 @@ input[type="color"]::-webkit-color-swatch {
.modal-form-container > * {
width: 100%;
}
.form-field {
width: 100%;
}

72
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Injectable } from '@angular/core';
import { Server } from '../../../../models/server';
import { Project } from '../../../../models/project';
import { Drawing } from '../../../../cartography/models/drawing';
@ -10,6 +10,10 @@ import { DrawingsDataSource } from '../../../../cartography/datasources/drawings
import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
import { LineElement } from '../../../../cartography/models/drawings/line-element';
import { RectElement } from '../../../../cartography/models/drawings/rect-element';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { ToasterService } from '../../../../services/toaster.service';
import { NonNegativeValidator } from '../../../../validators/NonNegativeValidator';
import { RotationValidator } from '../../../../validators/RotationValidator';
@Component({
selector: 'app-style-editor',
@ -21,19 +25,27 @@ export class StyleEditorDialogComponent implements OnInit {
project: Project;
drawing: Drawing;
element: ElementData;
rotation: string;
formGroup: FormGroup;
constructor(
public dialogRef: MatDialogRef<StyleEditorDialogComponent>,
private drawingToMapDrawingConverter: DrawingToMapDrawingConverter,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource
) {}
private drawingsDataSource: DrawingsDataSource,
private formBuilder: FormBuilder,
private toasterService: ToasterService,
private nonNegativeValidator: NonNegativeValidator,
private rotationValidator: RotationValidator
) {
this.formGroup = this.formBuilder.group({
borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
rotation: new FormControl('', [Validators.required, rotationValidator.get])
});
}
ngOnInit() {
this.element = new ElementData();
this.rotation = this.drawing.rotation.toString();
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.element.fill = this.drawing.element.fill;
@ -45,6 +57,9 @@ export class StyleEditorDialogComponent implements OnInit {
this.element.stroke_dasharray = this.drawing.element.stroke_dasharray;
this.element.stroke_width = this.drawing.element.stroke_width;
}
this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
}
onNoClick() {
@ -52,27 +67,34 @@ export class StyleEditorDialogComponent implements OnInit {
}
onYesClick() {
this.drawing.rotation = +this.rotation;
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.drawing.element.fill = this.element.fill;
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) {
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
if (this.formGroup.valid) {
this.element.stroke_width = this.formGroup.get('borderWidth').value;
this.drawing.rotation = this.formGroup.get('rotation').value;
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.drawing.element.fill = this.element.fill;
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) {
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
}
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
} else {
this.toasterService.error(`Entered data is incorrect`);
}
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
}
}

10
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
View File

@ -1,13 +1,15 @@
<h1 mat-dialog-title>Text editor</h1>
<div class="modal-form-container">
<mat-form-field>
<mat-form-field class="form-field">
<input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
</mat-form-field>
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<input formControlName="rotation" matInput placeholder="Rotation" type="text">
</mat-form-field>
</form>
<textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea>
</div>

4
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
View File

@ -52,3 +52,7 @@ input[type="color"]::-webkit-color-swatch {
.modal-form-container > * {
width: 100%;
}
.form-field {
width: 100%;
}

47
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
View File

@ -8,6 +8,9 @@ import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map
import { DrawingService } from '../../../../services/drawing.service';
import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource';
import { TextElement } from '../../../../cartography/models/drawings/text-element';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ToasterService } from '../../../../services/toaster.service';
import { RotationValidator } from '../../../../validators/RotationValidator';
@Component({
selector: 'app-text-editor',
@ -21,7 +24,7 @@ export class TextEditorDialogComponent implements OnInit {
project: Project;
drawing: Drawing;
element: TextElement;
rotation: string;
formGroup: FormGroup;
constructor(
private dialogRef: MatDialogRef<TextEditorDialogComponent>,
@ -29,12 +32,18 @@ export class TextEditorDialogComponent implements OnInit {
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource,
private renderer: Renderer2
) {}
private renderer: Renderer2,
private formBuilder: FormBuilder,
private toasterService: ToasterService,
private rotationValidator: RotationValidator
) {
this.formGroup = this.formBuilder.group({
rotation: new FormControl('', [Validators.required, rotationValidator.get])
});
}
ngOnInit() {
this.rotation = this.drawing.rotation.toString();
this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
this.element = this.drawing.element as TextElement;
this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill);
this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family);
@ -47,18 +56,22 @@ export class TextEditorDialogComponent implements OnInit {
}
onYesClick() {
this.drawing.rotation = +this.rotation;
this.drawing.element = this.element;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
if (this.formGroup.valid) {
this.drawing.rotation = this.formGroup.get('rotation').value;
this.drawing.element = this.element;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
} else {
this.toasterService.error(`Entered data is incorrect`);
}
}
changeTextColor(changedColor) {

12
src/app/validators/NonNegativeValidator.ts Normal file
View File

@ -0,0 +1,12 @@
import { Injectable } from '@angular/core';
@Injectable()
export class NonNegativeValidator {
get(control) {
if (+control.value>=0) {
return null;
}
return { negativeValue: true };
}
}

12
src/app/validators/RotationValidator.ts Normal file
View File

@ -0,0 +1,12 @@
import { Injectable } from '@angular/core';
@Injectable()
export class RotationValidator {
get(control) {
if (+control.value>-360 && +control.value<=360) {
return null;
}
return { negativeValue: true };
}
}