Merge branch '53-criar-pagina-editavel-aceleracao-dos-visualizadores' into 'development'

Create edit machine page

Closes #53

See merge request !61

pinsisApp/src/app/app-routing.module.ts

+import { EditMachineComponent } from './edit-machine/edit-machine.component';
 // This file is part of the project Pinsis-Portal.
 //  Copyright (C),2018, by C3SL(Centro de Computação Científica e
 //  Software Live)
@@ -41,11 +42,10 @@ const routes: Routes = [
   { path: 'mapas', component: MapsPageComponent },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
-  { path: 'events', component: EventsComponent },
+  { path: 'equipamentos', component: EventsComponent },
   { path: 'special', component: SpecialEventsComponent, canActivate: [AuthGuard] },
-
-  { path: 'registro-equipamentos', component: RegisterEquipmentComponent }
-
+  { path: 'registro-equipamentos', component: RegisterEquipmentComponent },
+  { path: 'edicao-equipamentos', component: EditMachineComponent }
 
 ];
 

pinsisApp/src/app/app.module.ts

@@ -50,6 +50,7 @@ import { RegisterEquipmentComponent } from './register-equipment/register-equipm
 import { KibanaGraphsComponent } from './kibana-graphs/kibana-graphs.component';
 import { MachineComponent } from './machine/machine.component';
 import { WebserviceReportService } from './report.service';
+import { EditMachineComponent } from './edit-machine/edit-machine.component';
 
 
 @NgModule({
@@ -71,7 +72,8 @@ import { WebserviceReportService } from './report.service';
     SpecialEventsComponent,
     RegisterEquipmentComponent,
     KibanaGraphsComponent,
-    MachineComponent
+    MachineComponent,
+    EditMachineComponent
   ],
   imports: [
     BrowserModule,

pinsisApp/src/app/edit-machine/edit-machine.component.html

+<section class="photos-page" lang="pt">
+    <div class="container">
+          <!-- Título -->
+          <h2> Visualização dos Aceleradores
+          <button class="btn" style="float: right;" routerLink="/registro-equipamentos">Cadastrar novo equipamento</button>
+          </h2>
+
+      <!-- Row  -->
+      <div class="row justify-content-center">
+            <div class="col-sm-5 col-md-5 pt-4" *ngFor="let event of events; let i = index">
+                <div class="container photos-btn">
+                  <img src='../assets/images/logo.png' alt="Avatar" class="img">
+                 
+                 <h3> {{serial_number}} </h3>
+                 <button class="btn"(click)="changeButton(i)">Mais Informações</button>
+                  <span class="more_text"> 
+
+                        <!-- Formulario  -->
+                        <form>
+                          <div class="form-group">
+                            <h4>Informações Gerais</h4>
+                            <label for="serial_number">Número de Série: <input [(ngModel)]="serial_number" name="serial_number" type="text" class="form-style"></label>
+                            <label for="room"> Sala: <input [(ngModel)]="room" name="room" type="text" class="form-style"></label>
+                            <label for="date_last_maintenance"> Data da última manutenção: <input [(ngModel)]="date_last_maintenance" name="date_last_maintenance" type="text" class="form-style"></label>
+                            <label for="date_next_maintenance"> Data da próxima manutenção: <input [(ngModel)]="date_next_maintenance" name="date_next_maintenance" type="text" class="form-style"></label>
+                            <label for="Status">Estado: <input [(ngModel)]="Status" name="Status" type="text" class="form-style"></label>            
+
+                            <h4>Endereço</h4>
+                            <label for="address">Rua: <input [(ngModel)]="address" name="address" type="text" class="form-style"></label>
+                            <label for="address_number">Número: <input [(ngModel)]="address_number" name="address_number" type="text" class="form-style"></label>
+                            <label for="district">Bairro: <input [(ngModel)]="district" name="district" type="text" class="form-style"></label>
+                            <label for="city">Cidade: <input [(ngModel)]="city" name="city" type="text" class="form-style"></label>
+                            <label for="state">Estado: <input [(ngModel)]="state" name="state" type="text" class="form-style"></label>
+
+                          </div>
+                        </form>
+                        <!-- Botao "salvar alteracoes" -->
+                        <div class="text-right"> <button class="btn text-right" (click)="put"> Salvar alterações </button></div>
+
+                  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+  </section>
\ No newline at end of file

pinsisApp/src/app/edit-machine/edit-machine.component.scss

+// Importando os estilos globais
+@import '../../sass/styles';
+
+// Letras 
+.photos-page {
+    hyphens: auto;
+    font-family: $font-default;
+    color: $text-dark;
+  
+    h2 {
+      font-family: $font-header;
+      font-weight: bolder;
+      font-size: 36px;
+    }
+  
+    h3 {
+      padding: 10px;
+    }
+    
+    h4 {
+      font-size: 22px;
+      margin-top: 30px;
+      font-weight: bolder;
+    }
+
+    label {
+      font-size: 18px;
+      width: 100%;
+    }
+  }
+
+// Botao "Mais Informacoes"
+.btn {
+    border-width: 4px;
+    border-radius: 8px;
+    cursor: pointer;
+    color: $text-dark;
+    display: inline-block;
+    font-size: 18px;
+    font-family: $font-default;
+
+  }
+
+//Tag para o botao "Mais informacoes"
+.more_text {
+  display: none;
+}
+
+// Imagem 
+.img {
+    max-width: 100%;
+    max-height: 100%;
+    width: 270px;
+    height: 270px;
+    align-items: center;
+    border-radius: 50%;
+    padding: 10px;
+  }
+  
+
+//Card que encapsula a imagem
+.photos-btn {
+    align-items: center;
+    background-color: #b0cfed;
+    border-radius: 3%;
+    padding: 5px;
+}
+
+//Formulario 
+.form-style {
+    background: #c5dcf2;
+    border-radius: 3%;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom-color: $text-dark;
+    margin-top: 20px;
+    width: 100%;
+} 
+
+input {
+  color:$text-dark;
+  }
+  
+  
\ No newline at end of file

pinsisApp/src/app/edit-machine/edit-machine.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditMachineComponent } from './edit-machine.component';
+
+describe('EditMachineComponent', () => {
+  let component: EditMachineComponent;
+  let fixture: ComponentFixture<EditMachineComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditMachineComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditMachineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pinsisApp/src/app/edit-machine/edit-machine.component.ts

+import { Component, OnInit } from '@angular/core';
+import { EventService } from '../event.service';
+
+@Component({
+  selector: 'app-edit-machine',
+  templateUrl: './edit-machine.component.html',
+  styleUrls: ['./edit-machine.component.scss'],
+})
+export class EditMachineComponent implements OnInit {
+  changeButton (i) {
+    var text = document.getElementsByClassName("more_text") as HTMLCollectionOf<HTMLElement>;
+    if (text[i].style.display === "none") {
+      text[i].style.display = "inline";
+    } else {
+      text[i].style.display = "none";
+    }
+  }
+
+  events = []
+  constructor(private _eventService: EventService) { }
+  ngOnInit() {
+    this._eventService.getEvents().subscribe(
+        res => this.events = res,
+        err => console.log(err)
+      )
+  }
+}