Commit 70d26b6f authored by Barbora Kompišová's avatar Barbora Kompišová
Browse files

components

parent d300554b

src/app/components/component-create/component-create.component.html

0 → 100644
+51 −0
Original line number Diff line number Diff line 
<div class="container">

  <div class="page-object-header">

    <h1>

      Create a component

    </h1>

    <hr />

    <div class="col-md-9">

      <form [formGroup]="createData" class="form-signin">

        <div class="form-group row">

          <label for="name" class="col-lg-3 control-label">Name:</label>

          <div class="col-lg-8">

            <input type="text" id="name" formControlName="name"

                   class="form-control" placeholder="Name" required

                   pattern="\w+" autofocus>

          </div>

        </div>



        <div class="form-group row">

          <label for="secret" class="col-lg-3 control-label">Secret:</label>

          <div class="col-lg-8">

            <input type="text" id="secret" formControlName="secret"

                   class="form-control" placeholder="Secret" required>

          </div>

        </div>



        <div class="form-group row">

          <label for="type" class="col-lg-3 control-label">Type:</label>

          <div class="col-lg-8">

            <input type="text" id="type" formControlName="type"

                   class="form-control" placeholder="Type" required>

          </div>

        </div>



        <div class="form-group row">

          <label for="ipAddress" class="col-lg-3 control-label">Ip address:</label>

          <div class="col-lg-8">

            <input type="text" id="ipAddress" formControlName="ipAddress"

                   class="form-control" placeholder="IP Address" required>

          </div>

        </div>



        <div class="form-group row">

          <button [attr.disabled]="(createData.status === 'VALID') ? null : true"

                  class="btn btn-lg btn-primary btn-signin"

                  type="submit" (click)="doCreate()">Create

          </button>

        </div>

      </form>

    </div>

  </div>

</div>

src/app/components/component-create/component-create.component.scss

0 → 100644
+0 −0

Empty file added.

src/app/components/component-create/component-create.component.spec.ts

0 → 100644
+25 −0
Original line number Diff line number Diff line 
import { async, ComponentFixture, TestBed } from '@angular/core/testing';



import { ComponentCreateComponent } from './component-create.component';



describe('ComponentCreateComponent', () => {

  let component: ComponentCreateComponent;

  let fixture: ComponentFixture<ComponentCreateComponent>;



  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [ ComponentCreateComponent ]

    })

    .compileComponents();

  }));



  beforeEach(() => {

    fixture = TestBed.createComponent(ComponentCreateComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });



  it('should create', () => {

    expect(component).toBeTruthy();

  });

});

src/app/components/component-create/component-create.component.ts

0 → 100644
+64 −0
Original line number Diff line number Diff line 
import { Component, OnDestroy, OnInit } from '@angular/core';

import { Subscription } from 'rxjs/Subscription';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { FlashMessagesService } from 'angular2-flash-messages/module/flash-messages.service';

import { Router } from '@angular/router';

import { ComponentService } from '../../services/component.service';



@Component({

  selector: 'app-component-create',

  templateUrl: './component-create.component.html',

  styleUrls: [ './component-create.component.scss' ]

})

export class ComponentCreateComponent implements OnInit, OnDestroy {



  createData: FormGroup;

  subscriptions: Subscription[] = [];



  constructor(private service: ComponentService,

              private router: Router,

              private fb: FormBuilder,

              private flashMessagesService: FlashMessagesService) {

    this.createForm();

  }



  ngOnInit() {

  }



  ngOnDestroy() {

    this.subscriptions.forEach(subscription => subscription.unsubscribe());

  }



  createForm() {

    this.createData = this.fb.group({

      name: [ '', Validators.required ],

      secret: [ '', Validators.required ],

      ipAddress: [ '', Validators.required ],

      type: [ '', Validators.required ],

    });

  }



  doCreate() {

    const data = this.createData.value;

    if (this.createData.status !== 'VALID') {

      console.log('invalid form submitted');

      return;

    }

    console.log('[CREATE] Component create form data: ', data);



    this.subscriptions.push(this.service.createComponent(data).subscribe(

      () => {

        this.router.navigateByUrl('/components').then(() => {

          this.flashMessagesService.show(`Created component ${data[ 'name' ]}.`, { cssClass: 'alert-success' });

        });

      }, (error: any) => {

        console.error('Error creating component: ', error);

        this.flashMessagesService.show(`Error creating component ${data[ 'name' ]}.`, { cssClass: 'alert-danger', timeout: 10000 });

        // TODO: error handling

        console.error('Response data: ', error.error);

        this.flashMessagesService.show(`${error.error.message}`, { cssClass: 'alert-danger', timeout: 10000 });

      }));

  }





}

src/app/components/component-detail/component-detail.component.html

0 → 100644
+87 −0
Original line number Diff line number Diff line 
<div class="container">

  <div class="page-object-header">

    <h1>

      Component: {{component?.name}}

    </h1>

    <hr/>

  </div>



  <div class="page-object-controls">

    <button data-toggle="modal" data-target="#delete_component_modal"

            class="btn btn-danger pull-right">

      Delete

    </button>

  </div>



  <div class="page-object-body col-md-9 component-info">

    <form [formGroup]="updateFormData">

      <div class="form-group row">

        <label for="name" class="col-lg-3 control-label">Name:</label>

        <div class="col-lg-8">

          <input type="text" id="name"

                 formControlName="name" class="form-control" required>

        </div>

      </div>

      <div class="form-group row">

        <label for="type" class="col-lg-3 control-label">Type:</label>

        <div class="col-lg-8">

          <input type="text" id="type"

                 formControlName="type" class="form-control" required>

        </div>

      </div>



      <div class="form-group row">

        <label for="ipAddress" class="col-lg-3 control-label">Ip Address:</label>

        <div class="col-lg-8">

          <input type="text" id="ipAddress"

                 formControlName="ipAddress" class="form-control" required>

        </div>

      </div>



      <div class="form-group row">

        <label for="secret" class="col-lg-3 control-label">Secret:</label>

        <div class="col-lg-8">

          <input type="text" id="secret"

                 formControlName="secret" class="form-control" required>

        </div>

      </div>



      <div class="form-group row">

        <label class="col-md-3 control-label"></label>

        <div class="col-md-8">

          <button [attr.disabled]="updateFormData.status === 'VALID' ? null : true" class="btn btn-primary btn-signin"

                  type="submit"

                  (click)="updateComponent()">

            Update

          </button>

          <span></span>

          <input type="submit" class="btn btn-default" value="Revert" (click)="resetForm()">

        </div>

      </div>

    </form>

  </div>

</div>





<div id="delete_component_modal" class="modal" tabindex="-1" role="dialog">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title">Delete component</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        <p>

          Do you wish to delete component:

          <strong>{{component?.name}}</strong>?

        </p>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="deleteComponent()">Yes</button>

        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>

      </div>

    </div>

  </div>

</div>