Initial implementaion - global variables

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;

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

@@ -1,5 +1,8 @@
 <h1 mat-dialog-title>Edit project</h1>
 
+<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">
@@ -37,6 +40,21 @@
             <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>

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() {

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