ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-01 00:45:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Form validation for VPCS components

Browse Source
This commit is contained in:
Piotr Pekala 2019-01-29 03:25:48 -08:00
parent 250e3bdd6f
commit 5a21d117ca
4 changed files with 69 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app-routing.module.ts
View File

@ -29,7 +29,8 @@ const routes: Routes = [
{ path: 'server/:server_id/projects', component: ProjectsComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'server/:server_id/preferences', component: PreferencesComponent },
{ path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
// temporary disabled
// { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
// temporary disabled
// { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
{ path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },

5
src/app/components/preferences/preferences.component.html
View File

@ -7,11 +7,6 @@
<div class="default-content">
<div class="example-container mat-elevation-z8">
<mat-nav-list>
<mat-list-item>
<button mat-button routerLink="/server/{{serverId}}/preferences/general">
General
</button>
</mat-list-item>
<mat-list-item>
<button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
VPCS

76
src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html
View File

@ -5,35 +5,53 @@
</div>
</div>
<div class="default-content" *ngIf="vpcsTemplate">
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="vpcsTemplate.name" placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="vpcsTemplate.default_name_format" placeholder="Default name format">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="vpcsTemplate.base_script_file" placeholder="Base script file">
</mat-form-field>
<mat-form-field class="row">
<input matInput type="text" [(ngModel)]="vpcsTemplate.symbol" placeholder="Symbol">
</mat-form-field>
<mat-form-field class="row">
<mat-select placeholder="Category" [(ngModel)]="vpcsTemplate.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" [(ngModel)]="vpcsTemplate.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox [(ngModel)]="vpcsTemplate.console_auto_start">
Auto start console
</mat-checkbox>
<form [formGroup]="inputForm">
<mat-form-field class="row">
<input
matInput type="text"
[(ngModel)]="vpcsTemplate.name"
formControlName="templateName"
placeholder="Template name">
</mat-form-field>
<mat-form-field class="row">
<input
matInput type="text"
[(ngModel)]="vpcsTemplate.default_name_format"
formControlName="defaultName"
placeholder="Default name format">
</mat-form-field>
<mat-form-field class="row">
<input
matInput type="text"
[(ngModel)]="vpcsTemplate.base_script_file"
formControlName="scriptFile"
placeholder="Base script file">
</mat-form-field>
<mat-form-field class="row">
<input
matInput type="text"
[(ngModel)]="vpcsTemplate.symbol"
formControlName="symbol"
placeholder="Symbol">
</mat-form-field>
<mat-form-field class="row">
<mat-select placeholder="Category" [ngModelOptions]="{standalone: true}" [(ngModel)]="vpcsTemplate.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)]="vpcsTemplate.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="vpcsTemplate.console_auto_start">
Auto start console
</mat-checkbox>
</form>
<div class="buttons-bar">
<button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
</div>

26
src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { ServerService } from '../../../../services/server.service';
import { Server } from '../../../../models/server';
import { ToasterService } from '../../../../services/toaster.service';
import { VpcsService } from '../../../../services/vpcs.service';
import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
@ -15,6 +16,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
export class VpcsTemplateDetailsComponent implements OnInit {
server: Server;
vpcsTemplate: VpcsTemplate;
inputForm: FormGroup;
consoleTypes: string[] = ['telnet', 'none'];
categories = [["Default", "guest"],
@ -27,8 +29,16 @@ export class VpcsTemplateDetailsComponent implements OnInit {
private route: ActivatedRoute,
private serverService: ServerService,
private vpcsService: VpcsService,
private toasterService: ToasterService
) {}
private toasterService: ToasterService,
private formBuilder: FormBuilder
) {
this.inputForm = this.formBuilder.group({
templateName: new FormControl('', Validators.required),
defaultName: new FormControl('', Validators.required),
scriptFile: new FormControl('', Validators.required),
symbol: new FormControl('', Validators.required)
});
}
ngOnInit() {
const server_id = this.route.snapshot.paramMap.get("server_id");
@ -43,8 +53,12 @@ export class VpcsTemplateDetailsComponent implements OnInit {
}
onSave() {
this.vpcsService.saveTemplate(this.server, this.vpcsTemplate).subscribe((vpcsTemaple: VpcsTemplate) => {
this.toasterService.success("Changes saved");
});
if( this.inputForm.invalid) {
this.toasterService.error(`Fill all required fields`);
} else {
this.vpcsService.saveTemplate(this.server, this.vpcsTemplate).subscribe((vpcsTemaple: VpcsTemplate) => {
this.toasterService.success("Changes saved");
});
}
}
}