ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-08 02:54:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Ability to change symbol by context menu added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-04 05:14:29 -07:00
parent df8e5825cc
commit 7450dd6731
11 changed files with 136 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,6 +204,8 @@ import { BringToFrontActionComponent } from './components/project-map/context-me
import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component';
import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component';
import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component';
import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component';
import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -336,7 +338,9 @@ if (environment.production) {
BringToFrontActionComponent,
ExportConfigActionComponent,
ImportConfigActionComponent,
ConsoleDeviceActionBrowserComponent
ConsoleDeviceActionBrowserComponent,
ChangeSymbolDialogComponent,
ChangeSymbolActionComponent
],
imports: [
BrowserModule,
@ -433,7 +437,8 @@ if (environment.production) {
StartCaptureDialogComponent,
ConfigEditorDialogComponent,
SaveProjectDialogComponent,
InfoDialogComponent
InfoDialogComponent,
ChangeSymbolDialogComponent
],
bootstrap: [AppComponent]
})

11
src/app/components/preferences/common/symbols/symbols.component.html
View File

@ -15,8 +15,15 @@
<mat-icon>add</mat-icon>
Add symbol
</button>
</div><br/>
<input matInput type="text" [(ngModel)]="searchText" placeholder="Search by filename"><br/><br/>
</div>
<form>
<mat-form-field class="example-full-width">
<input matInput
placeholder="Search by filename"
[(ngModel)]="searchText"
[ngModelOptions]="{standalone: true}">
</mat-form-field>
</form>
<div class="wrapper">
<div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
<button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">

4
src/app/components/preferences/common/symbols/symbols.component.scss
View File

@ -53,3 +53,7 @@
.non-visible {
display: none;
}
.example-full-width {
width: 100%;
}

12
src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.html Normal file
View File

@ -0,0 +1,12 @@
<h1 mat-dialog-title>Change symbol for node: {{node.name}}</h1>
<div class="modal-form-container">
<div class="symbolsWrapper">
<app-symbols [server]="server" [symbol]="symbol" (symbolChanged)="symbolChanged($event)"></app-symbols>
</div>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onCloseClick()" color="accent">Cancel</button>
<button mat-button (click)="onSelectClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>

19
src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.scss Normal file
View File

@ -0,0 +1,19 @@
.symbolsWrapper {
height: 350px;
overflow-y: scroll;
scrollbar-color: darkgrey #263238;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 0.5em;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid #263238;
}

41
src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { Component, Input, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { Message } from '../../../models/message';
import { Server } from '../../../models/server';
import { Node } from '../../../cartography/models/node';
import { Symbol } from '../../../models/symbol';
import { NodeService } from '../../../services/node.service';
@Component({
selector: 'app-change-symbol-dialog',
templateUrl: './change-symbol-dialog.component.html',
styleUrls: ['./change-symbol-dialog.component.scss']
})
export class ChangeSymbolDialogComponent implements OnInit {
@Input() server: Server;
@Input() node: Node;
symbol: string;
constructor(
public dialogRef: MatDialogRef<ChangeSymbolDialogComponent>,
private nodeService: NodeService
) {}
ngOnInit() {
this.symbol = this.node.symbol;
}
symbolChanged(chosenSymbol: string) {
this.symbol = chosenSymbol;
}
onCloseClick() {
this.dialogRef.close();
}
onSelectClick() {
this.nodeService.updateSymbol(this.server, this.node, this.symbol).subscribe(() => {
this.onCloseClick()
});
}
}

4
src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item (click)="changeSymbol()">
<mat-icon>edit</mat-icon>
<span>Change symbol</span>
</button>

0
src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.spec.ts Normal file
View File

29
src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts Normal file
View File

@ -0,0 +1,29 @@
import { Component, OnInit, Input } from '@angular/core';
import { Server } from '../../../../../models/server';
import { Node } from '../../../../../cartography/models/node';
import { MatDialog } from '@angular/material';
import { ChangeSymbolDialogComponent } from '../../../change-symbol-dialog/change-symbol-dialog.component';
@Component({
selector: 'app-change-symbol-action',
templateUrl: './change-symbol-action.component.html'
})
export class ChangeSymbolActionComponent implements OnInit {
@Input() server: Server;
@Input() node: Node;
constructor(private dialog: MatDialog) {}
ngOnInit() {}
changeSymbol() {
const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
width: '1000px',
height: '500px',
autoFocus: false
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
instance.node = this.node;
}
}

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

@ -16,6 +16,11 @@
*ngIf="!projectService.isReadOnly(project) && nodes.length===1 && !isElectronApp && nodes[0].console_type!=='none'"
[node]="nodes[0]"
></app-console-device-action-browser>
<app-change-symbol-action
*ngIf="!projectService.isReadOnly(project) && nodes.length===1"
[server]="server"
[node]="nodes[0]"
></app-change-symbol-action>
<app-duplicate-action *ngIf="drawings.length>0 || nodes.length>0"
[server]="server"
[project]="project"

6
src/app/services/node.service.ts
View File

@ -72,6 +72,12 @@ export class NodeService {
});
}
updateSymbol(server: Server, node: Node, changedSymbol: string): Observable<Node> {
return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
symbol: changedSymbol
});
}
update(server: Server, node: Node): Observable<Node> {
return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
x: Math.round(node.x),