Merge pull request #555 from GNS3/Support-for-global-variables

Support for global variables

src/app/components/project-map/project-map.component.ts

@@ -697,7 +697,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   editProject() {
     const dialogRef = this.dialog.open(EditProjectDialogComponent, {
-      width: '500px',
+      width: '600px',
       autoFocus: false
     });
     let instance = dialogRef.componentInstance;

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

@@ -36,7 +36,8 @@ export class MockedProjectService {
       show_interface_labels: false,
       show_layers: false,
       show_grid: false,
-      snap_to_grid: false
+      snap_to_grid: false,
+      variables: []
     }
   ];
 

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

@@ -28,7 +28,8 @@ describe('ConfirmationDialogComponent', () => {
     show_interface_labels: false,
     show_layers: false,
     show_grid: false,
-    snap_to_grid: false
+    snap_to_grid: false,
+    variables: []
   };
 
   beforeEach(() => {

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html

@@ -1,42 +1,83 @@
 <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>
-
-<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.show_interface_labels">
-    Show interface labels at start
-</mat-checkbox>
+<div class="modal-form-container">
+    <mat-tab-group>
+        <mat-tab label="General">
+            <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>
+            
+            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="project.show_interface_labels">
+                Show interface labels at start
+            </mat-checkbox>
+        </mat-tab>
+        <mat-tab label="Global variables">
+            <form [formGroup]="variableFormGroup">
+                <mat-form-field class="form-field">
+                    <input matInput formControlName="name" placeholder="Name" type="text">
+                </mat-form-field>
+            
+                <mat-form-field class="form-field">
+                    <input matInput formControlName="value" placeholder="Value" type="text">
+                </mat-form-field>
+            </form>
+            <button class="form-field" mat-button (click)="addVariable()" mat-raised-button color="primary">Add variable</button>
+            <table class="table" mat-table [dataSource]="variables">
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef>Name</th>
+                    <td mat-cell *matCellDef="let element">{{element.name}} </td>
+                </ng-container>
+            
+                <ng-container matColumnDef="value">
+                    <th mat-header-cell *matHeaderCellDef>Value</th>
+                    <td mat-cell *matCellDef="let element">{{element.value}}</td>
+                </ng-container>
+            
+                <ng-container matColumnDef="actions">
+                    <th mat-header-cell *matHeaderCellDef>Actions</th>
+                    <td mat-cell *matCellDef="let element">
+                        <button mat-icon-button matTooltip="Delete variable" (click)="deleteVariable(element)">
+                            <mat-icon aria-label="Delete adapter">delete</mat-icon>
+                        </button>
+                    </td>
+                </ng-container>
+                
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </mat-tab>
+    </mat-tab-group>
+</div>
 
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss

@@ -1,3 +1,15 @@
 .form-field {
     width: 100%;
 }
+
+th {
+    border: 0px!important;
+}
+
+th.mat-header-cell {
+    padding-bottom: 15px;
+}
+
+td.mat-cell {
+    padding-top: 15px;
+}

src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts

@@ -2,7 +2,7 @@ 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 { Project, ProjectVariable } from '../../../models/project';
 import { ToasterService } from '../../../services/toaster.service';
 import { NonNegativeValidator } from '../../../validators/non-negative-validator';
 import { ProjectService } from '../../../services/project.service';
@@ -16,6 +16,11 @@ export class EditProjectDialogComponent implements OnInit {
   server: Server;
   project: Project;
   formGroup: FormGroup;
+  variableFormGroup: FormGroup;
+  projectVariables: ProjectVariable[];
+
+  displayedColumns: string[] = ['name', 'value', 'actions']; 
+  variables: ProjectVariable[] = [];
 
   constructor(
     public dialogRef: MatDialogRef<EditProjectDialogComponent>,
@@ -31,6 +36,11 @@ export class EditProjectDialogComponent implements OnInit {
       nodeGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get]),
       drawingGridSize: new FormControl('', [Validators.required, nonNegativeValidator.get])
     });
+
+    this.variableFormGroup = this.formBuilder.group({
+      name: new FormControl('', [Validators.required]),
+      value: new FormControl('', [Validators.required])
+    });
   }
 
   ngOnInit() {
@@ -39,6 +49,23 @@ export class EditProjectDialogComponent implements OnInit {
     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);
+    this.project.variables.forEach(n => this.variables.push(n));
+  }
+
+  addVariable() {
+    if (this.variableFormGroup.valid) {
+      let variable: ProjectVariable = {
+        name: this.variableFormGroup.get('name').value,
+        value: this.variableFormGroup.get('value').value
+      };
+      this.variables = this.variables.concat([variable]);
+    } else {
+      this.toasterService.error(`Fill all required fields with correct values.`);
+    }
+  }
+
+  deleteVariable(variable: ProjectVariable) {
+    this.variables = this.variables.filter(elem => elem!== variable);
   }
 
   onNoClick() {
@@ -47,18 +74,19 @@ export class EditProjectDialogComponent implements OnInit {
 
   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.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.project.variables = this.variables;
 
-        this.projectService.update(this.server, this.project).subscribe((project: Project) => {
-            this.toasterService.success(`Project ${project.name} updated.`);
-            this.onNoClick();
-        })
+      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.`);
+      this.toasterService.error(`Fill all required fields with correct values.`);
     }
   }
 }

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

@@ -41,7 +41,8 @@ export class MockedProjectService {
       show_interface_labels: false,
       show_layers: false,
       show_grid: false,
-      snap_to_grid: false
+      snap_to_grid: false,
+      variables: []
     }
   ];
 

src/app/models/project.ts

@@ -16,4 +16,10 @@ export class Project {
   show_layers: boolean;
   show_grid: boolean;
   snap_to_grid: boolean;
+  variables: ProjectVariable[];
+}
+
+export class ProjectVariable {
+  name: string;
+  value: string;
 }