From a1228d009babfcf7bf9ea58d45e75bd722fc31b2 Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Wed, 16 Jun 2021 18:44:12 +0200 Subject: [PATCH] Edit link style dialog created --- src/app/app.module.ts | 4 ++ .../map/link-to-map-link-converter.ts | 1 + .../map/map-link-to-link-converter.ts | 1 + src/app/cartography/models/map/map-link.ts | 2 + .../edit-link-style-action.component.html | 4 ++ .../edit-link-style-action.component.ts | 33 ++++++++++ .../context-menu/context-menu.component.html | 12 ++++ .../link-style-editor.component.html | 35 +++++++++++ .../link-style-editor.component.scss | 54 ++++++++++++++++ .../link-style-editor.component.ts | 61 +++++++++++++++++++ src/app/models/link-style.ts | 5 ++ src/app/models/link.ts | 2 + 12 files changed, 214 insertions(+) create mode 100644 src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.html create mode 100644 src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.ts create mode 100644 src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.html create mode 100644 src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss create mode 100644 src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts create mode 100644 src/app/models/link-style.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index caa42a53..ea41c8c6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -112,6 +112,7 @@ import { DeleteActionComponent } from './components/project-map/context-menu/act import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component'; import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component'; import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component'; +import { EditLinkStyleActionComponent } from './components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component'; import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component'; import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component'; import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component'; @@ -138,6 +139,7 @@ import { ContextMenuComponent } from './components/project-map/context-menu/cont import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component'; import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component'; import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component'; +import { LinkStyleEditorDialogComponent } from './components/project-map/drawings-editors/link-style-editor/link-style-editor.component'; import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component'; import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component'; import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer'; @@ -300,6 +302,7 @@ import { LoggedUserComponent } from './components/users/logged-user/logged-user. MoveLayerDownActionComponent, MoveLayerUpActionComponent, EditStyleActionComponent, + EditLinkStyleActionComponent, EditTextActionComponent, DeleteActionComponent, DuplicateActionComponent, @@ -327,6 +330,7 @@ import { LoggedUserComponent } from './components/users/logged-user/logged-user. InterfaceLabelDraggedComponent, InstallSoftwareComponent, StyleEditorDialogComponent, + LinkStyleEditorDialogComponent, TextEditorDialogComponent, PacketFiltersDialogComponent, QemuPreferencesComponent, diff --git a/src/app/cartography/converters/map/link-to-map-link-converter.ts b/src/app/cartography/converters/map/link-to-map-link-converter.ts index 28ecf2c8..14fd3827 100644 --- a/src/app/cartography/converters/map/link-to-map-link-converter.ts +++ b/src/app/cartography/converters/map/link-to-map-link-converter.ts @@ -15,6 +15,7 @@ export class LinkToMapLinkConverter implements Converter { mapLink.captureFilePath = link.capture_file_path; mapLink.capturing = link.capturing; mapLink.filters = link.filters; + mapLink.link_style = link.link_style; mapLink.linkType = link.link_type; mapLink.nodes = link.nodes.map((linkNode) => this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id }) diff --git a/src/app/cartography/converters/map/map-link-to-link-converter.ts b/src/app/cartography/converters/map/map-link-to-link-converter.ts index ae269a42..6cc8be8b 100644 --- a/src/app/cartography/converters/map/map-link-to-link-converter.ts +++ b/src/app/cartography/converters/map/map-link-to-link-converter.ts @@ -16,6 +16,7 @@ export class MapLinkToLinkConverter implements Converter { link.capturing = mapLink.capturing; link.filters = mapLink.filters; link.link_type = mapLink.linkType; + link.link_style = mapLink.link_style; link.nodes = mapLink.nodes.map((mapLinkNode) => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode)); link.project_id = mapLink.projectId; link.suspend = mapLink.suspend; diff --git a/src/app/cartography/models/map/map-link.ts b/src/app/cartography/models/map/map-link.ts index 57bac994..339f165d 100644 --- a/src/app/cartography/models/map/map-link.ts +++ b/src/app/cartography/models/map/map-link.ts @@ -2,6 +2,7 @@ import { Filter } from '../../../models/filter'; import { Indexed } from '../../datasources/map-datasource'; import { MapLinkNode } from './map-link-node'; import { MapNode } from './map-node'; +import { LinkStyle } from '../../../models/link-style'; export class MapLink implements Indexed { id: string; @@ -13,6 +14,7 @@ export class MapLink implements Indexed { nodes: MapLinkNode[]; projectId: string; suspend: boolean; + link_style?: LinkStyle; distance: number; // this is not from server length: number; // this is not from server diff --git a/src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.html b/src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.html new file mode 100644 index 00000000..43ab8ded --- /dev/null +++ b/src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.ts new file mode 100644 index 00000000..de5ea91b --- /dev/null +++ b/src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.ts @@ -0,0 +1,33 @@ +import { Component, Input, OnChanges } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { Link } from '../../../../../models/link'; +import { Project } from '../../../../../models/project'; +import { Server } from '../../../../../models/server'; +import { LinkStyleEditorDialogComponent } from '../../../drawings-editors/link-style-editor/link-style-editor.component'; + +@Component({ + selector: 'app-edit-link-style-action', + + templateUrl: './edit-link-style-action.component.html', +}) +export class EditLinkStyleActionComponent implements OnChanges { + @Input() server: Server; + @Input() project: Project; + @Input() link: Link; + + constructor(private dialog: MatDialog) {} + + ngOnChanges() {} + + editStyle() { + const dialogRef = this.dialog.open(LinkStyleEditorDialogComponent, { + width: '800px', + autoFocus: false, + disableClose: true, + }); + let instance = dialogRef.componentInstance; + instance.server = this.server; + instance.project = this.project; + instance.link = this.link; + } +} diff --git a/src/app/components/project-map/context-menu/context-menu.component.html b/src/app/components/project-map/context-menu/context-menu.component.html index ac888f82..85f6fec9 100644 --- a/src/app/components/project-map/context-menu/context-menu.component.html +++ b/src/app/components/project-map/context-menu/context-menu.component.html @@ -180,6 +180,18 @@ [server]="server" [link]="links[0]" > + Style editor + +
+
+ + + + + + + + + + + +
+
+ +
+ + +
diff --git a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss new file mode 100644 index 00000000..38ca9c48 --- /dev/null +++ b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.scss @@ -0,0 +1,54 @@ + .item { + height: 25px; + font-size: 10pt; + margin-bottom: 10px; + } + + .item-name { + margin-bottom: 10px; + } + + .item-value { + width: 100%; + margin-bottom: 10px; + } + + .input-color { + padding: 0px; + border-width: 0px; + width: 100%; + background-color: transparent; + outline: none; + } + + input:focus { + outline: none; + } + + input[type='color'] { + -webkit-appearance: none; + border: none; + height: 25px; + } + + input[type='color']::-webkit-color-swatch-wrapper { + padding: 0; + } + + input[type='color']::-webkit-color-swatch { + border: none; + } + + .modal-form-container { + display: flex; + flex-direction: column; + } + + .modal-form-container > * { + width: 100%; + } + + .form-field { + width: 100%; + } + \ No newline at end of file diff --git a/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts new file mode 100644 index 00000000..51fd2bac --- /dev/null +++ b/src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef } from '@angular/material/dialog'; +import { Link } from '../../../../models/link'; +import { Project } from '../../../../models/project'; +import { Server } from '../../../../models/server'; +import { ToasterService } from '../../../../services/toaster.service'; +import { NonNegativeValidator } from '../../../../validators/non-negative-validator'; +import { LinkService } from '../../../../services/link.service'; + +@Component({ + selector: 'app-link-style-editor', + templateUrl: './link-style-editor.component.html', + styleUrls: ['./link-style-editor.component.scss'], +}) +export class LinkStyleEditorDialogComponent implements OnInit { + server: Server; + project: Project; + link: Link; + formGroup: FormGroup; + borderTypes = ["Solid", "Dash", "Dot", "Dash Dot"]; + + constructor( + public dialogRef: MatDialogRef, + private formBuilder: FormBuilder, + private toasterService: ToasterService, + private linkService: LinkService, + private nonNegativeValidator: NonNegativeValidator + ) { + this.formGroup = this.formBuilder.group({ + color: new FormControl('', [Validators.required, nonNegativeValidator.get]), + width: new FormControl('', [Validators.required, nonNegativeValidator.get]), + type: new FormControl('', [Validators.required, nonNegativeValidator.get]) + }); + } + + ngOnInit() { + this.formGroup.controls['color'].setValue(this.link.link_style.color); + this.formGroup.controls['width'].setValue(this.link.link_style.width); + this.formGroup.controls['type'].setValue(this.link.link_style.width); + } + + onNoClick() { + this.dialogRef.close(); + } + + onYesClick() { + if (this.formGroup.valid) { + this.link.link_style.color = this.formGroup.get('color').value; + this.link.link_style.width = this.formGroup.get('width').value; + this.link.link_style.type = this.formGroup.get('type').value; + + this.linkService.updateLink(this.server, this.link).subscribe(() => { + this.toasterService.success("Link updated"); + this.dialogRef.close(); + }); + } else { + this.toasterService.error(`Entered data is incorrect`); + } + } +} diff --git a/src/app/models/link-style.ts b/src/app/models/link-style.ts new file mode 100644 index 00000000..c19be32c --- /dev/null +++ b/src/app/models/link-style.ts @@ -0,0 +1,5 @@ +export class LinkStyle { + color: string; + width: number; + type: number; +} diff --git a/src/app/models/link.ts b/src/app/models/link.ts index bb7a26bb..46a898fd 100644 --- a/src/app/models/link.ts +++ b/src/app/models/link.ts @@ -1,6 +1,7 @@ import { Node } from '../cartography/models/node'; import { Filter } from './filter'; import { LinkNode } from './link-node'; +import { LinkStyle } from './link-style'; export class Link { capture_file_name: string; @@ -12,6 +13,7 @@ export class Link { nodes: LinkNode[]; project_id: string; suspend: boolean; + link_style?: LinkStyle; distance: number; // this is not from server length: number; // this is not from server