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

Dialog for editing project properties added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-05 02:27:56 -07:00
parent 7450dd6731
commit 903448f102
12 changed files with 149 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,6 +206,7 @@ import { ImportConfigActionComponent } from './components/project-map/context-me
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';
import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -340,7 +341,8 @@ if (environment.production) {
ImportConfigActionComponent,
ConsoleDeviceActionBrowserComponent,
ChangeSymbolDialogComponent,
ChangeSymbolActionComponent
ChangeSymbolActionComponent,
EditProjectDialogComponent
],
imports: [
BrowserModule,
@ -438,7 +440,8 @@ if (environment.production) {
ConfigEditorDialogComponent,
SaveProjectDialogComponent,
InfoDialogComponent,
ChangeSymbolDialogComponent
ChangeSymbolDialogComponent,
EditProjectDialogComponent
],
bootstrap: [AppComponent]
})

2
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
View File

@ -20,7 +20,7 @@ export class EditStyleActionComponent implements OnInit {
editStyle() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
width: '300px',
width: '800px',
autoFocus: false
});
let instance = dialogRef.componentInstance;

4
src/app/components/project-map/project-map.component.html
View File

@ -54,6 +54,10 @@
<mat-icon>save</mat-icon>
<span>Save project as</span>
</button>
<button mat-menu-item (click)="editProject()">
<mat-icon>edit</mat-icon>
<span>Edit project</span>
</button>
<button mat-menu-item (click)="exportProject()">
<mat-icon>call_made</mat-icon>
<span>Export portable project</span>

11
src/app/components/project-map/project-map.component.ts
View File

@ -58,6 +58,7 @@ import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-di
import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
import { MapSettingsService } from '../../services/mapsettings.service';
import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
@Component({
@ -460,6 +461,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
instance.project = this.project;
}
editProject() {
const dialogRef = this.dialog.open(EditProjectDialogComponent, {
width: '500px',
autoFocus: false
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
instance.project = this.project;
}
importProject() {
let uuid: string = '';
const dialogRef = this.dialog.open(ImportProjectDialogComponent, {

2
src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts
View File

@ -23,6 +23,8 @@ export class MockedProjectService {
auto_close: false,
auto_open: false,
auto_start: false,
drawing_grid_size: 10,
grid_size: 10,
filename: 'blank',
name: 'blank',
path: '',

2
src/app/components/projects/confirmation-dialog/confirmation-dialog.component.spec.ts
View File

@ -15,6 +15,8 @@ describe('ConfirmationDialogComponent', () => {
auto_close: false,
auto_open: false,
auto_start: false,
drawing_grid_size: 10,
grid_size: 10,
filename: 'blank',
name: 'blank',
path: '',

40
src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html Normal file
View File

@ -0,0 +1,40 @@
<h1 mat-dialog-title>Edit project</h1>
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<input matInput formControlName="projectName" placeholder="Project name" type="text">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="width" placeholder="Scene width (px)" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="height" placeholder="Scene height (px)" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="nodeGridSize" placeholder="Node grid size" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="drawingGridSize" placeholder="Drawing grid size" type="number">
</mat-form-field>
</form>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_open">
Open this project in the background when GNS3 server starts
</mat-checkbox>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.auto_start">
Start all nodes when this project is opened
</mat-checkbox>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="!project.auto_close">
Leave this project running in the background after closing
</mat-checkbox>
<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>

3
src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss Normal file
View File

@ -0,0 +1,3 @@
.form-field {
width: 100%;
}

64
src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts Normal file
View File

@ -0,0 +1,64 @@
import { Component, OnInit, Injectable } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { Server } from '../../../models/server';
import { Project } from '../../../models/project';
import { ToasterService } from '../../../services/toaster.service';
import { NonNegativeValidator } from '../../../validators/non-negative-validator';
import { ProjectService } from '../../../services/project.service';
@Component({
selector: 'app-edit-project-dialog',
templateUrl: './edit-project-dialog.component.html',
styleUrls: ['./edit-project-dialog.component.scss']
})
export class EditProjectDialogComponent implements OnInit {
server: Server;
project: Project;
formGroup: FormGroup;
constructor(
public dialogRef: MatDialogRef<EditProjectDialogComponent>,
private formBuilder: FormBuilder,
private projectService: ProjectService,
private toasterService: ToasterService,
private nonNegativeValidator: NonNegativeValidator
) {
this.formGroup = this.formBuilder.group({
projectName: new FormControl('', [Validators.required]),
width: new FormControl('', [Validators.required, nonNegativeValidator.get]),
height: new FormControl('', [Validators.required, nonNegativeValidator.get]),
nodeGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get])
});
}
ngOnInit() {
this.formGroup.controls['projectName'].setValue(this.project.name);
this.formGroup.controls['width'].setValue(this.project.scene_width);
this.formGroup.controls['height'].setValue(this.project.scene_height);
this.formGroup.controls['nodeGridSize'].setValue(this.project.grid_size);
this.formGroup.controls['drawingGridSize'].setValue(this.project.drawing_grid_size);
}
onNoClick() {
this.dialogRef.close();
}
onYesClick() {
if (this.formGroup.valid) {
this.project.name = this.formGroup.get('projectName').value;
this.project.scene_width = this.formGroup.get('width').value;
this.project.scene_height = this.formGroup.get('height').value;
this.project.drawing_grid_size = this.formGroup.get('drawingGridSize').value;
this.project.grid_size = this.formGroup.get('nodeGridSize').value;
this.projectService.update(this.server, this.project).subscribe((project: Project) => {
this.toasterService.success(`Project ${project.name} updated.`);
this.onNoClick();
})
} else {
this.toasterService.error(`Fill all required fields with correct values.`);
}
}
}

2
src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
View File

@ -28,6 +28,8 @@ export class MockedProjectService {
auto_close: false,
auto_open: false,
auto_start: false,
drawing_grid_size: 10,
grid_size: 10,
filename: 'blank',
name: 'blank',
path: '',

2
src/app/models/project.ts
View File

@ -2,7 +2,9 @@ export class Project {
auto_close: boolean;
auto_open: boolean;
auto_start: boolean;
drawing_grid_size: number;
filename: string;
grid_size: number;
name: string;
path: string;
project_id: string;

13
src/app/services/project.service.ts
View File

@ -45,6 +45,19 @@ export class ProjectService {
return this.httpServer.post<Project>(server, `/projects`, { name: project_name, project_id: project_id });
}
update(server: Server, project: Project) : Observable<Project> {
return this.httpServer.put<Project>(server, `/projects/${project.project_id}`, {
auto_close: project.auto_close,
auto_open: project.auto_open,
auto_start: project.auto_start,
drawing_grid_size: project.drawing_grid_size,
grid_size: project.grid_size,
name: project.name,
scene_width: project.scene_width,
scene_height: project.scene_height
});
}
delete(server: Server, project_id: string): Observable<any> {
return this.httpServer.delete(server, `/projects/${project_id}`);
}