Find view

frontend/package.json

@@ -24,6 +24,7 @@
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "^4.0.0",
     "@types/googlemaps": "^3.39.7",
+    "ngx-spinner": "^9.0.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

frontend/src/app/app.component.html

@@ -1,2 +1,4 @@
 <button mat-raised-button (click)="openErrorDialog()">Open error dialog</button>
-<button mat-raised-button (click)="openInformationsDialog()">Open informations dialog</button>
+<button mat-raised-button (click)="openInformationsDialog()">Open informations dialog</button>
+
+<app-find-server-field></app-find-server-field>

frontend/src/app/app.module.ts

@@ -12,7 +12,11 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { DialogErrorComponent } from './dialogs/dialog-error/dialog-error.component';
 import { DialogInformationsComponent } from './dialogs/dialog-informations/dialog-informations.component';
-
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule, MatInput} from '@angular/material/input';
+import { FindServerFieldComponent } from './find-server-field/find-server-field.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgxSpinnerModule } from "ngx-spinner";
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
 }
@@ -21,7 +25,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     declarations: [
         AppComponent,
         DialogErrorComponent,
-        DialogInformationsComponent
+        DialogInformationsComponent,
+        FindServerFieldComponent
     ],
     imports: [
         BrowserModule,
@@ -31,6 +36,10 @@ export function HttpLoaderFactory(http: HttpClient) {
         MatButtonModule,
         MatIconModule,
         HttpClientModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        NgxSpinnerModule,
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,

frontend/src/app/find-server-field/find-server-field.component.css

@@ -0,0 +1,11 @@
+.find-server-container{
+    text-align: center;
+}
+
+.find-server-button-container{
+    margin-top: 10px;
+}
+
+.find-server-button-container > button {
+    padding: 0 20px;
+}

frontend/src/app/find-server-field/find-server-field.component.html

@@ -0,0 +1,23 @@
+<div class="find-server-container">
+  <h1>
+    Check details about server
+  </h1>
+  <div class="find-server-field-container">
+    <mat-form-field class="find-server-form-field" [floatLabel]="'always'">
+      <mat-label>IP address</mat-label>
+      <input matInput type="text" placeholder="Enter IP address" [formControl]="addressFormControl">
+      <button mat-button *ngIf="addressFormControl.value" matSuffix mat-icon-button aria-label="Clear"
+        (click)="addressFormControl.reset()">
+        <mat-icon>close</mat-icon>
+      </button>
+      <mat-error *ngIf="addressFormControl.hasError('required')">IP address is required</mat-error>
+      <mat-error *ngIf="addressFormControl.hasError('pattern')">IP address is not valid</mat-error>
+    </mat-form-field>
+  </div>
+  <div class="find-server-button-container">
+    <button mat-raised-button color="accent" [disabled]="!addressFormControl.valid" (click)="onCheckServer()">check</button>
+  </div>
+
+  <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "cube-transition" [fullScreen] = "true"><p style="color: white" > Loading... </p></ngx-spinner>
+
+</div>

frontend/src/app/find-server-field/find-server-field.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { FindServerFieldComponent } from './find-server-field.component';
+
+describe('FindServerFieldComponent', () => {
+  let component: FindServerFieldComponent;
+  let fixture: ComponentFixture<FindServerFieldComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FindServerFieldComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FindServerFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/find-server-field/find-server-field.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-find-server-field',
+  templateUrl: './find-server-field.component.html',
+  styleUrls: ['./find-server-field.component.css'],
+})
+export class FindServerFieldComponent implements OnInit {
+  private readonly addressIpPattern =
+    '^((25[0-5]|(2[0-4]|1[0-9]|[1-9]|)[0-9])(.(?!$)|$)){4}$';
+  addressFormControl = new FormControl('', [
+    Validators.required,
+    Validators.pattern(this.addressIpPattern),
+  ]);
+  constructor(private spinner: NgxSpinnerService) {}
+
+  ngOnInit() {}
+
+  onCheckServer(): void {
+    this.spinner.show();
+    setTimeout(_=> this.spinner.hide(), 3000);
+    // TODO do request to backend
+  }
+}