Code cleaned up

2025-01-19 03:06:31 +00:00 · 2019-09-11 04:33:42 -07:00 · 2019-09-11 04:33:42 -07:00 · 838359b4ac
commit 838359b4ac
parent 24ab40bfa9
12 changed files with 103 additions and 48 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -218,6 +218,7 @@ import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-
 import { PortsComponent } from './components/preferences/common/ports/ports.component';
 import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component';
 import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component';
+import { CustomAdaptersTableComponent } from './components/preferences/common/custom-adapters-table/custom-adapters-table.component';

 if (environment.production) {
  Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -363,7 +364,8 @@ if (environment.production) {
    ConfiguratorDialogEthernetSwitchComponent,
    PortsComponent,
    ConfiguratorDialogSwitchComponent,
-    ConfiguratorDialogVirtualBoxComponent
+    ConfiguratorDialogVirtualBoxComponent,
+    CustomAdaptersTableComponent
  ],
  imports: [
    BrowserModule,
--- a/src/app/cartography/models/node.ts
+++ b/src/app/cartography/models/node.ts
@ -7,6 +7,15 @@ export class PortsMapping {
 }

 export class Properties {
+  adapter_type: string;
+  adapters: number;
+  headless: boolean;
+  linked_clone: boolean;
+  on_close: string;
+  ram: number;
+  usage: string;
+  use_any_adapter: boolean;
+  vmname: string;
  ports_mapping: PortsMapping[];
  mappings: any;
 }
--- a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
+++ b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html
@ -0,0 +1,35 @@
+<table class="table" mat-table [dataSource]="adapters">
+    <ng-container matColumnDef="adapter_number">
+        <th mat-header-cell *matHeaderCellDef> Adapter number </th>
+        <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="port_name">
+        <th mat-header-cell *matHeaderCellDef> Port name </th>
+        <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="adapter_type">
+        <th mat-header-cell *matHeaderCellDef> Adapter type </th>
+        <td mat-cell *matCellDef="let element; let i = index;">
+            <mat-select placeholder="Type" [(ngModel)]="element.adapter_type">
+                <mat-option *ngFor="let type of networkTypes" [value]="type">
+                    {{type}}
+                </mat-option>
+            </mat-select>
+        </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 adapter" (click)="delete(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>
+<button mat-button class="form-field" (click)="onAdd()">Add</button>
--- a/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.ts
+++ b/src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.ts
@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CustomAdapter } from '../../../../models/qemu/qemu-custom-adapter';
+
+
+@Component({
+    selector: 'app-custom-adapters-table',
+    templateUrl: './custom-adapters-table.component.html',
+    styleUrls: ['../../preferences.component.scss']
+})
+export class CustomAdaptersTableComponent {
+    @Input() networkTypes = [];
+    @Input() displayedColumns: string[] = []; 
+    @Input() adapters: CustomAdapter[] = [];
+
+    public numberOfAdapters: number;
+
+    onAdd() {
+        let adapter: CustomAdapter = {
+            adapter_number: this.adapters.length,
+            adapter_type: this.networkTypes[0]
+        }
+        this.adapters.push(adapter);
+        console.log(this.adapters);
+        this.adapters = [adapter];
+    }
+
+    delete(adapter: CustomAdapter) {
+        this.adapters = this.adapters.filter(elem => elem!== adapter);
+    }
+}
--- a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
+++ b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.html
@ -6,31 +6,11 @@
    </div>
    <div class="default-content">
        <div class="container mat-elevation-z8">
-            <table class="table" mat-table [dataSource]="adapters">
-                <ng-container matColumnDef="adapter_number">
-                    <th mat-header-cell *matHeaderCellDef> Adapter number </th>
-                    <td mat-cell *matCellDef="let element"> Adapter {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="port_name">
-                    <th mat-header-cell *matHeaderCellDef> Port name </th>
-                    <td mat-cell *matCellDef="let element"> Ethernet {{element.adapter_number}} </td>
-                </ng-container>
-
-                <ng-container matColumnDef="adapter_type">
-                    <th mat-header-cell *matHeaderCellDef> Adapter type </th>
-                    <td mat-cell *matCellDef="let element; let i = index;">
-                        <mat-select placeholder="Type" [(ngModel)]="adapters[i].adapter_type">
-                            <mat-option *ngFor="let type of networkTypes" [value]="type[0]">
-                                {{type[1]}} ({{type[0]}})
-                            </mat-option>
-                        </mat-select>
-                    </td>
-                </ng-container>
-                
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
+            <app-custom-adapters-table 
+                [networkTypes]="networkTypes" 
+                [displayedColumns]="displayedColumns"
+                [adapters]="adapters"
+            ></app-custom-adapters-table>
        </div>
        <div class="buttons-bar">
            <button mat-button (click)="cancelConfigureCustomAdapters()">Cancel</button>
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
@ -31,7 +31,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
    binaries: QemuBinary[] = [];
    activateCpuThrottling: boolean = true;
    isConfiguratorOpened: boolean = false;
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
+    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    generalSettingsForm: FormGroup;

    @ViewChild("customAdaptersConfigurator", {static: false}) 
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
@ -24,7 +24,7 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
    onCloseOptions = [];
    categories = [];
    networkTypes = [];
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
+    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    isConfiguratorOpened: boolean = false;
    generalSettingsForm: FormGroup;
    networkForm: FormGroup
--- a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
+++ b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
@ -20,7 +20,7 @@ export class VmwareTemplateDetailsComponent implements OnInit {
    server: Server;
    vmwareTemplate: VmwareTemplate;
    generalSettingsForm: FormGroup;
-    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type'];
+    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    isConfiguratorOpened: boolean = false;
    isSymbolSelectionOpened: boolean = false;
    consoleTypes: string[] = [];
--- a/src/app/components/project-map/node-editors/configurator/configurator.component.scss
+++ b/src/app/components/project-map/node-editors/configurator/configurator.component.scss
@ -2,6 +2,10 @@
    width: 100%;
 }

+.configButton {
+    width: 100%;
+}
+
 .select {
    width: 100%;
 }
--- a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html
+++ b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html
@ -4,7 +4,7 @@
    <div class="content">
        <div class="default-content">
            <mat-card class="matCard">
-                <mat-tab-group>
+                <mat-tab-group *ngIf="name">
                    <mat-tab label="General settings">
                        <form [formGroup]="generalSettingsForm">
                            <mat-form-field class="form-field">
@ -21,41 +21,33 @@
                                Auto start console
                            </mat-checkbox>
                            <mat-form-field class="form-field">
-                                <input matInput formControlName="ram" type="number" [(ngModel)]="node.ram" placeholder="RAM">
+                                <input matInput formControlName="ram" type="number" [(ngModel)]="node.properties.ram" placeholder="RAM">
                            </mat-form-field>
                            <mat-form-field class="form-field">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="node.on_close">
+                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="node.properties.on_close">
                                    <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
                                        {{option[0]}}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </form>
-                        <mat-checkbox [(ngModel)]="node.headless">
+                        <mat-checkbox [(ngModel)]="node.properties.headless">
                            Start VM in headless mode
                        </mat-checkbox>
                    </mat-tab>
                    <mat-tab label="Network">
-                        <form [formGroup]="networkForm">
-                            <mat-form-field class="form-field">
-                                <input formControlName="adapters" matInput type="number" [(ngModel)]="node.adapters" placeholder="Adapters">
-                            </mat-form-field>
-                            <mat-form-field class="form-field">
-                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Type" [(ngModel)]="node.adapter_type">
-                                    <mat-option *ngFor="let type of networkTypes" [value]="type">
-                                        {{type}}
-                                    </mat-option>
-                                </mat-select>
-                            </mat-form-field>
-                        </form>
-                        <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
-                        <mat-checkbox [(ngModel)]="node.use_any_adapter">
+                        <mat-checkbox [(ngModel)]="node.properties.use_any_adapter">
                            Allow GNS3 to use any configured VirtualBox adapter
                        </mat-checkbox>
+                        <app-custom-adapters-table 
+                            [networkTypes]="networkTypes" 
+                            [displayedColumns]="displayedColumns"
+                            [adapters]="node.ports"
+                        ></app-custom-adapters-table>
                    </mat-tab>
                    <mat-tab label="Usage">
                        <mat-form-field class="form-field">
-                            <textarea matInput type="text" [(ngModel)]="node.usage"></textarea>
+                            <textarea matInput type="text" [(ngModel)]="node.properties.usage"></textarea>
                        </mat-form-field>
                    </mat-tab>
                </mat-tab-group>
--- a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
@ -21,6 +21,8 @@ export class ConfiguratorDialogVirtualBoxComponent implements OnInit {
    networkForm: FormGroup;
    consoleTypes: string[] = [];
    onCloseOptions = [];
+
+    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    networkTypes = [];

    constructor(
--- a/src/app/models/port.ts
+++ b/src/app/models/port.ts
@ -1,5 +1,6 @@
 export class Port {
  adapter_number: number;
+  adapter_type: string;
  link_type: string;
  name: string;
  port_number: number;