add register hospital page and service

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

@@ -31,7 +31,7 @@ import { AuthService } from './auth.service';
 import { AuthGuard } from './auth.guard';
 import { RegisterEquipmentComponent } from './register-equipment/register-equipment.component';
 import { EditMachineComponent } from './edit-machine/edit-machine.component';
-
+import { RegisterHospitalComponent } from './register-hospital/register-hospital.component';
 
 
 
@@ -45,7 +45,8 @@ const routes: Routes = [
   { path: 'equipamentos', component: EventsComponent },
   { path: 'special', component: SpecialEventsComponent, canActivate: [AuthGuard] },
   { path: 'registro-equipamentos', component: RegisterEquipmentComponent },
-  { path: 'edicao-equipamentos', component: EditMachineComponent }
+  { path: 'edicao-equipamentos', component: EditMachineComponent },
+  { path: 'registro-hospital', component: RegisterHospitalComponent }
 
 ];
 

pinsisApp/src/app/app.module.ts

@@ -43,12 +43,14 @@ import { EventsComponent } from './events/events.component';
 import { SpecialEventsComponent } from './special-events/special-events.component';
 import { AuthService } from './auth.service';
 import { MachinesService } from './machines.service';
+import { HospitalService } from './hospital.service';
 import { AuthGuard } from './auth.guard';
 import { TokenInterceptorService } from './token-interceptor.service';
 import { RegisterEquipmentComponent } from './register-equipment/register-equipment.component';
 import { KibanaGraphsComponent } from './kibana-graphs/kibana-graphs.component';
 import { WebserviceReportService } from './report.service';
 import { EditMachineComponent } from './edit-machine/edit-machine.component';
+import { RegisterHospitalComponent } from './register-hospital/register-hospital.component';
 
 
 @NgModule({
@@ -70,7 +72,8 @@ import { EditMachineComponent } from './edit-machine/edit-machine.component';
     SpecialEventsComponent,
     RegisterEquipmentComponent,
     KibanaGraphsComponent,
-    EditMachineComponent
+    EditMachineComponent,
+    RegisterHospitalComponent
   ],
   imports: [
     BrowserModule,
@@ -83,7 +86,7 @@ import { EditMachineComponent } from './edit-machine/edit-machine.component';
   ],
   providers: [
     DataApiService,
-    { provide: 'ReportService', useClass: WebserviceReportService },   AuthService,AuthGuard, MachinesService,
+    { provide: 'ReportService', useClass: WebserviceReportService },   AuthService,AuthGuard, MachinesService, HospitalService, 
       {
         provide: HTTP_INTERCEPTORS,
         useClass: TokenInterceptorService,

pinsisApp/src/app/hospital.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { HospitalService } from './hospital.service';
+
+describe('HospitalService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HospitalService]
+    });
+  });
+
+  it('should be created', inject([HospitalService], (service: HospitalService) => {
+    expect(service).toBeTruthy();
+  }));
+});

pinsisApp/src/app/hospital.service.ts

+import { Injectable } from '@angular/core';
+
+import { AuthService } from './auth.service';
+import { environment } from '../environments/environment';
+import { catchError, map, tap } from 'rxjs/operators';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Hospital } from './hospital';
+import 'rxjs/add/observable/of';
+import { Observable } from 'rxjs/Observable';
+
+
+@Injectable()
+export class HospitalService {
+
+  private hospitalURL = environment.webserviceUrl+"/api/data";
+  //get: private hospitalURL = environment.webserviceUrl+"/api/data/listagents";
+
+  httpOptions = { headers: new HttpHeaders({ }) };
+
+  private updateHttpHeader() {
+    this.httpOptions.headers = 
+      this.httpOptions.headers.set('Authorization', this.authService.getToken());
+   }
+
+  private translateToServer(hospital: Hospital) {
+
+    var send = {
+      name: hospital.name,
+      longitude: hospital.longitude,
+      latitude: hospital.latitude,
+      countie: hospital.city,
+      state: hospital.state,
+      region: hospital.region,
+    }
+    return send;
+
+  }
+
+  addHospital(hospital: Hospital): Observable<any> {
+    if (this.authService.loggedIn()) { this.updateHttpHeader() }
+
+    return this.http.post<any>(this.hospitalURL+"/agents", this.translateToServer(hospital), this.httpOptions)
+      .pipe(tap(_ => console.log("added "+hospital.name)),
+        catchError(this.handleError<Hospital>())
+      );
+  }
+
+  private handleError<T> (result?: T) {
+    return (error: any): Observable<T> => {
+      console.error(error);
+      return Observable.of(result as T);
+    }
+  }
+
+  constructor(private http: HttpClient,
+              private authService: AuthService
+              ) { }
+
+}

pinsisApp/src/app/hospital.ts

+//template para as maquinas (falta a imagem)
+export class Hospital {
+  name: string;
+  //address: string;
+  //building_number: string;
+  //district: string;
+  city: string;
+  state: string;
+  latitude: string;
+  longitude: string;
+  region: string;
+}

pinsisApp/src/app/maps-page/maps-page.component.html

@@ -38,13 +38,16 @@
   </ul>
 
 
-
   <div class="row row-hospital-selector">
 
     <div class="col-12 col-md-4">
+      <button routerLink="/registro-hospital" class="register_button">
+        Cadastrar novo hospital
+      </button>
       <div class="hospital-selector">
         <app-hospital-selector></app-hospital-selector>
       </div>
+
     </div>
 
     <div class="col-12 col-md-8">

pinsisApp/src/app/maps-page/maps-page.component.scss

@@ -31,7 +31,7 @@
   border: 3px solid $dark-purple;
 	margin-left: auto;
 	margin-right: auto;
-	height:100%;
+	height: 90%;
 	max-height:600px;
 }
 .row-hospital-selector{
@@ -94,6 +94,7 @@
     padding: 10px 16px;
     list-style: none;
     background-color: $white;
+    //width: 60%;
 
     li {
         display: inline;
@@ -111,6 +112,32 @@
         }
     }
 }
+
+.register_button {
+  color: $text-light;
+  background-color: $light-purple;
+  text-decoration: none;
+  text-align: center;
+  font-size: 20px;
+  padding: 5px 20px;
+
+  margin-top: 0px;
+  margin-bottom: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+
+  border-style: none;
+  border-radius: 4px;
+
+  &:hover {
+      background-color: $dark-purple;
+      text-decoration: none;
+      transition: cubic-bezier(0.075, 0.82, 0.165, 1);
+      cursor:pointer;
+  }
+}
+
 a:hover{
 	cursor:pointer;
 }

pinsisApp/src/app/register-hospital/register-hospital.component.html

+<section class="register-page" lang="pt">
+  <div class="register-card col-md-6 mx-auto">
+    <h2>Dados do hospital:</h2>
+    
+    <form #form="ngForm" (ngSubmit)="onSubmit()" class>
+      <div class="input-block">
+        <div class="input-text">Nome do hospital:</div>
+        <input type="text" name="name" [(ngModel)]="hospitalData.name" id="name">
+      </div>
+      <!--<div class="input-block">
+        <div class="input-text">Rua:</div>
+        <input type="text" name="address" [(ngModel)]="hospitalData.address" id="address">
+      </div>
+      <div class="input-block">
+        <div class="input-text">Número:</div>
+        <input type="text" name="building_number" [(ngModel)]="hospitalData.building_number" id="building_number">
+      </div>
+      <div class="input-block">
+        <div class="input-text">Bairro:</div>
+        <input type="text" name="district" [(ngModel)]="hospitalData.district" id="district">
+      </div>-->
+      <div class="input-block">
+        <div class="input-text">Cidade:</div>
+        <input type="text" name="city" [(ngModel)]="hospitalData.city" id="city">
+      </div>
+      <div class="input-block">
+        <div class="input-text">Estado:</div>
+        <input type="text" name="state" [(ngModel)]="hospitalData.state" id="state">
+      </div>
+      <div class="input-block">
+        <div class="input-text">Região:</div>
+        <input type="text" name="region" [(ngModel)]="hospitalData.region" id="region">
+      </div>
+      <div class="input-block">
+        <div class="input-text">Latitude:</div>
+        <input type="text" name="latitude" [(ngModel)]="hospitalData.latitude" id="latitude">
+      </div>
+      <div class="input-block">
+        <div class="input-text">Longitude:</div>
+        <input type="text" name="longitude" [(ngModel)]="hospitalData.longitude" id="longitude">
+      </div>
+      <button type="submit" align="right" class="submit-button">Confirmar</button>
+    </form>
+  </div>
+</section>

pinsisApp/src/app/register-hospital/register-hospital.component.scss

+@import '../../sass/styles';
+
+.register-page {
+  font-family: $font-default;
+  color: $text-dark;
+
+  h2 {
+    font-family: $font-header;
+    font-weight: bolder;
+    font-size: 28px;
+    margin: 5px 10px 0px 0px;
+    text-align: center;
+  }
+}
+
+input {
+  color: $text-dark;
+  font-size: 20px;
+  border-color: #9d9d9d;
+  border-radius: 4px;
+  border-style: solid;
+  //padding: 5px 10px; 
+}
+
+.register-card {
+
+  padding: 10px 20px;
+  background-color: $white;
+  border: 2px solid $text-dark;
+  border-radius: 10px;
+
+}
+
+.input-text {
+  font-size: 20px;
+  //padding: 5px 10px;
+  display: block;
+  margin-top:10px;
+}
+
+.input-block {
+  width: 45%;
+  display: inline-block;
+  margin-left: 3%;
+}
+
+.submit-button {
+  color: $text-light;
+  background-color: $bg-secondary;
+  text-align: center;
+  font-size: 20px;
+  padding: 5px 20px;
+
+  margin-right: 9%;
+  margin-left: auto;
+  margin-top: 20px;
+  display: block;
+
+  border-style: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+    background: $dark-purple;
+  }
+}

pinsisApp/src/app/register-hospital/register-hospital.component.spec.ts

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

pinsisApp/src/app/register-hospital/register-hospital.component.ts

+import { Component, OnInit } from '@angular/core';
+import { HospitalService } from '../hospital.service';
+import { Router } from '@angular/router';
+import { Hospital } from '../hospital';
+
+@Component({
+  selector: 'app-register-hospital',
+  templateUrl: './register-hospital.component.html',
+  styleUrls: ['./register-hospital.component.scss']
+})
+export class RegisterHospitalComponent implements OnInit {
+
+  hospitalData: Hospital = {
+    name: '',
+    //address: '',
+    //building_number: '',
+    //district: '',
+    city: '',
+    state: '',
+    latitude: '',
+    longitude: '',
+    region: '',
+  }
+
+  constructor(private hospitalService: HospitalService,
+              private _router: Router) { }
+
+  ngOnInit() {
+  }
+
+  private valid() {
+    
+    var v = true
+
+    for (let i in this.hospitalData) {
+      let x = document.getElementById(i)
+      if (this.hospitalData[i] === '') {
+        if (x != null) {x.style.borderColor = "#ff0000"}
+        else { console.log(i+" input not found")}
+        v = false
+      }
+      else {
+        if (x != null) {x.style.borderColor = "#9d9d9d"}
+      }
+    }
+    return v
+  }
+
+  async onSubmit() {
+
+    this.hospitalData.name = this.hospitalData.name.trim();
+    //this.hospitalData.address = this.hospitalData.address.trim();
+    //this.hospitalData.building_number = this.hospitalData.building_number.trim();
+    //this.hospitalData.district = this.hospitalData.district.trim();
+    this.hospitalData.city = this.hospitalData.city.trim();
+    this.hospitalData.state = this.hospitalData.state.trim();
+    this.hospitalData.latitude = this.hospitalData.latitude.trim();
+    this.hospitalData.longitude = this.hospitalData.longitude.trim();
+    this.hospitalData.region = this.hospitalData.region.trim();
+
+    if (await this.valid()) {
+
+/*
+      window.alert("Nome: "+this.hospitalData.name
+                  //+"\nRua: "+this.hospitalData.address
+                  //+"\nNumero: "+this.hospitalData.building_number
+                  //+"\nBairro: "+this.hospitalData.district
+                  +"\nCidade: "+this.hospitalData.city
+                  +"\nEstado: "+this.hospitalData.state
+                  +"\nRegião: "+this.hospitalData.region
+                  +"\nLatitude: "+this.hospitalData.latitude
+                  +"\nLongitude: "+this.hospitalData.longitude)
+*/
+      
+      this.hospitalService.addHospital(this.hospitalData)
+        .subscribe(res => {
+          window.alert("Hospital "+res.agent.hospital_name+" registrado com sucesso");
+          this.hospitalData.name = '';
+          //this.hospitalData.address = '';
+          //this.hospitalData.building_number = '';
+          //this.hospitalData.district = '';
+          this.hospitalData.city = '';
+          this.hospitalData.state = '';
+          this.hospitalData.latitude = '';
+          this.hospitalData.longitude = '';
+          this.hospitalData.region = '';
+          //console.log(res)
+        },
+        err => {
+          console.log("Error: "+err)
+          window.alert("Erro ao tentar registrar hospital")
+        }
+      );
+
+    }
+
+    else {
+      window.alert("Há campos inválidos")
+    }
+  }
+
+}