Edit link style dialog created

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,

src/app/cartography/converters/map/link-to-map-link-converter.ts

@@ -15,6 +15,7 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
     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 })

src/app/cartography/converters/map/map-link-to-link-converter.ts

@@ -16,6 +16,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
     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;

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

src/app/components/project-map/context-menu/actions/edit-link-style-action/edit-link-style-action.component.html

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="editStyle()">
+    <mat-icon>style</mat-icon>
+    <span>Edit style</span>
+</button>

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;
+  }
+}

src/app/components/project-map/context-menu/context-menu.component.html

@@ -180,6 +180,18 @@
       [server]="server"
       [link]="links[0]"
     ></app-reset-link-action>
+    <app-edit-link-style-action
+      *ngIf="
+        !projectService.isReadOnly(project) &&
+        drawings.length === 0 &&
+        nodes.length === 0 &&
+        links.length === 1 &&
+        linkNodes.length === 0
+      "
+      [server]="server"
+      [project]="project"
+      [link]="links[0]"
+    ></app-edit-link-style-action>
     <app-lock-action
       *ngIf="!projectService.isReadOnly(project) && (drawings.length > 0 || nodes.length > 0)"
       [server]="server"

src/app/components/project-map/drawings-editors/link-style-editor/link-style-editor.component.html

@@ -0,0 +1,35 @@
+<h1 mat-dialog-title>Style editor</h1>
+
+<div class="modal-form-container">
+  <form [formGroup]="formGroup">
+    <mat-form-field class="form-field">
+      <input
+        matInput
+        placeholder="Color"
+        formControlName="color" 
+        type="color"
+      />
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+      <input 
+        matInput 
+        formControlName="width" 
+        placeholder="Width" 
+        type="number" />
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+        <input 
+          matInput 
+          formControlName="type" 
+          placeholder="Type" 
+          type="text" />
+    </mat-form-field>
+  </form>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

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%;
+  }
+  

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<LinkStyleEditorDialogComponent>,
+    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`);
+    }
+  }
+}

src/app/models/link-style.ts

@@ -0,0 +1,5 @@
+export class LinkStyle {
+    color: string;
+    width: number;
+    type: number;
+}

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