Configuration ethernet switches

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html

@@ -5,49 +5,122 @@
         </div>
     </div>
     <div class="default-content" *ngIf="ethernetSwitchTemplate">
-        <form [formGroup]="inputForm">
-            <mat-form-field class="row">
-                <input 
-                    matInput type="text" 
-                    [(ngModel)]="ethernetSwitchTemplate.name" 
-                    formControlName="templateName"
-                    placeholder="Template name">
-            </mat-form-field>
-            <mat-form-field class="row">
-                <input 
-                    matInput type="text" 
-                    [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
-                    formControlName="defaultName"
-                    placeholder="Default name format">
-            </mat-form-field>
-            <mat-form-field class="row">
-                <input 
-                    matInput type="text" 
-                    [(ngModel)]="ethernetSwitchTemplate.symbol" 
-                    formControlName="symbol"
-                    placeholder="Symbol">
-            </mat-form-field>
-            <mat-form-field class="row">
-                <mat-select 
-                    placeholder="Category" 
-                    [ngModelOptions]="{standalone: true}" 
-                    [(ngModel)]="ethernetSwitchTemplate.category">
-                    <mat-option *ngFor="let category of categories" [value]="category[1]">
-                        {{category[0]}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field class="select">
-                <mat-select 
-                placeholder="Console type" 
-                [ngModelOptions]="{standalone: true}" 
-                [(ngModel)]="ethernetSwitchTemplate.console_type">
-                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
-                        {{type}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-        </form>
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        General settings
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="row">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="ethernetSwitchTemplate.name" 
+                            formControlName="templateName"
+                            placeholder="Template name">
+                    </mat-form-field>
+                    <mat-form-field class="row">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
+                            formControlName="defaultName"
+                            placeholder="Default name format">
+                    </mat-form-field>
+                    <mat-form-field class="row">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="ethernetSwitchTemplate.symbol" 
+                            formControlName="symbol"
+                            placeholder="Symbol">
+                    </mat-form-field>
+                    <mat-form-field class="row">
+                        <mat-select 
+                            placeholder="Category" 
+                            [ngModelOptions]="{standalone: true}" 
+                            [(ngModel)]="ethernetSwitchTemplate.category">
+                            <mat-option *ngFor="let category of categories" [value]="category[1]">
+                                {{category[0]}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field class="select">
+                        <mat-select 
+                            placeholder="Console type" 
+                            [ngModelOptions]="{standalone: true}" 
+                            [(ngModel)]="ethernetSwitchTemplate.console_type">
+                                <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                                    {{type}}
+                                </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </form>
+            </mat-expansion-panel>
+            <mat-expansion-panel *ngIf="newPort">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Port settings
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <table class="table" mat-table [dataSource]="dataSource">
+                    <ng-container matColumnDef="port_number">
+                        <th mat-header-cell *matHeaderCellDef> Port number </th>
+                        <td mat-cell *matCellDef="let element"> {{element.port_number}} </td>
+                    </ng-container>
+    
+                    <ng-container matColumnDef="vlan">
+                        <th mat-header-cell *matHeaderCellDef> VLAN </th>
+                        <td mat-cell *matCellDef="let element"> {{element.vlan}} </td>
+                    </ng-container>
+    
+                    <ng-container matColumnDef="type">
+                        <th mat-header-cell *matHeaderCellDef> Type </th>
+                        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
+                    </ng-container>
+
+                    <ng-container matColumnDef="ethertype">
+                        <th mat-header-cell *matHeaderCellDef> EtherType </th>
+                        <td mat-cell *matCellDef="let element"> {{element.ethertype}} </td>
+                    </ng-container>
+                    
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table><br/>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="newPort.port_number" 
+                        placeholder="Port">
+                </mat-form-field>
+                <mat-form-field class="row">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="newPort.vlan" 
+                        placeholder="VLAN">
+                </mat-form-field>
+                <mat-form-field class="select">
+                    <mat-select 
+                        placeholder="Type" 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="newPort.type">
+                        <mat-option *ngFor="let type of portTypes" [value]="type">
+                            {{type}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="select">
+                    <mat-select 
+                        placeholder="EtherType" 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="newPort.ethertype">
+                            <mat-option *ngFor="let type of etherTypes" [value]="type">
+                                {{type}}
+                            </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <button mat-raised-button class="row" (click)="onAdd()">Add</button>
+            </mat-expansion-panel>
+        </mat-accordion>
         <div class="buttons-bar">
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.scss

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

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts

@@ -6,6 +6,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
+import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
 
 
 @Component({
@@ -17,6 +18,9 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     server: Server;
     ethernetSwitchTemplate: EthernetSwitchTemplate;
     inputForm: FormGroup;
+    ethernetPorts: PortsMappingEntity[] = [];
+    dataSource: PortsMappingEntity[] = [];
+    newPort: PortsMappingEntity;
 
     categories = [["Default", "guest"],
                     ["Routers", "router"],
@@ -24,6 +28,9 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
                     ["End devices", "end_device"],
                     ["Security devices", "security_device"]];
     consoleTypes: string[] = ['telnet', 'none'];
+    portTypes: string[] = ['access', 'dot1q', 'qinq'];
+    etherTypes: string[] = ['0x8100', '0x88A8', '0x9100', '0x9200'];
+    displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype'];
 
     constructor(
         private route: ActivatedRoute,
@@ -37,6 +44,11 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
             defaultName: new FormControl('', Validators.required),
             symbol: new FormControl('', Validators.required)
         });
+
+        this.newPort = {
+            name: '',
+            port_number: 0,
+        };
     }
 
     ngOnInit() {
@@ -47,10 +59,22 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
 
             this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
                 this.ethernetSwitchTemplate = ethernetSwitchTemplate;
+                this.ethernetPorts = this.ethernetSwitchTemplate.ports_mapping;
+                this.dataSource =  this.ethernetSwitchTemplate.ports_mapping;
             });
         });
     }
 
+    onAdd() {
+        this.ethernetPorts.push(this.newPort);
+        this.dataSource = [...this.ethernetPorts];
+        
+        this.newPort = {
+            name: '',
+            port_number: 0,
+        };
+    }
+
     onSave() {
         if (this.inputForm.invalid) {
             this.toasterService.error(`Fill all required fields`);