From 98f93901ecb8e3f389a3f9748f0660c3fc99a6e1 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Fri, 25 Oct 2019 00:43:13 -0700
Subject: [PATCH 1/3] Initial implementaion - global variables

---
 .../project-map/project-map.component.ts      |  2 +-
 .../edit-project-dialog.component.html        | 92 +++++++++++--------
 .../edit-project-dialog.component.ts          |  9 +-
 src/app/models/project.ts                     |  6 ++
 4 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index fa92a4d1..58f4d3a8 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@@ -545,7 +545,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   editProject() {
     const dialogRef = this.dialog.open(EditProjectDialogComponent, {
-      width: '500px',
+      width: '600px',
       autoFocus: false
     });
     let instance = dialogRef.componentInstance;
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
index 8539641a..52550f0c 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
@@ -1,42 +1,60 @@
 <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="number">
+                </mat-form-field>
+            </form>
+            
+        </mat-tab>
+    </mat-tab-group>
+</div>
 
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
index baaac059..acc8ed3f 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
+++ b/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,8 @@ export class EditProjectDialogComponent implements OnInit {
   server: Server;
   project: Project;
   formGroup: FormGroup;
+  variableFormGroup: FormGroup;
+  projectVariables: ProjectVariable[];
 
   constructor(
     public dialogRef: MatDialogRef<EditProjectDialogComponent>,
@@ -31,6 +33,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() {
diff --git a/src/app/models/project.ts b/src/app/models/project.ts
index d9e5d809..799629de 100644
--- a/src/app/models/project.ts
+++ b/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;
 }

From e80aec68feb21f16176a573f5bc609b63350da8d Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Mon, 28 Oct 2019 01:12:20 -0700
Subject: [PATCH 2/3] Fix for unit tests

---
 .../add-blank-project-dialog.component.spec.ts                 | 3 ++-
 .../confirmation-dialog/confirmation-dialog.component.spec.ts  | 3 ++-
 .../import-project-dialog.component.spec.ts                    | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts
index 4177e8f6..d8d34e84 100644
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.spec.ts
+++ b/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: []
     }
   ];
 
diff --git a/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.spec.ts b/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.spec.ts
index 739f54f5..eab2a656 100644
--- a/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.spec.ts
+++ b/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(() => {
diff --git a/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts b/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
index a6084930..0e33b2ad 100644
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts
+++ b/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: []
     }
   ];
 

From d51f024a16513e65552d7a58e5f19805a741b9f7 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Mon, 28 Oct 2019 03:39:36 -0700
Subject: [PATCH 3/3] Support for global variables added

---
 .../edit-project-dialog.component.html        | 27 +++++++++++-
 .../edit-project-dialog.component.scss        | 12 ++++++
 .../edit-project-dialog.component.ts          | 41 ++++++++++++++-----
 3 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
index 52550f0c..94d562cf 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.html
@@ -42,16 +42,39 @@
             </mat-checkbox>
         </mat-tab>
         <mat-tab label="Global variables">
-            <form [formGroup]="variableformGroup">
+            <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="number">
+                    <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>
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
index 9c2173c2..00dc4971 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.scss
+++ b/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;
+}
diff --git a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
index acc8ed3f..2493bf0c 100644
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
@@ -19,6 +19,9 @@ export class EditProjectDialogComponent implements OnInit {
   variableFormGroup: FormGroup;
   projectVariables: ProjectVariable[];
 
+  displayedColumns: string[] = ['name', 'value', 'actions']; 
+  variables: ProjectVariable[] = [];
+
   constructor(
     public dialogRef: MatDialogRef<EditProjectDialogComponent>,
     private formBuilder: FormBuilder,
@@ -46,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() {
@@ -54,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.`);
     }
   }
 }