From d4f6066ff1f7ac36ec691d08328ff6214bb40d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dante=20Al=C3=A9o?= <dsa17@inf.ufpr.br>
Date: Fri, 27 Mar 2020 10:30:34 -0300
Subject: [PATCH] solving bugs on corona component
---
.../_services/marker-corona.service.spec.ts | 15 ++
.../app/_services/marker-corona.service.ts | 66 +++++++
pinsisApp/src/app/_services/pop-up.service.ts | 8 +
pinsisApp/src/app/app-routing.module.ts | 4 +-
pinsisApp/src/app/app.module.ts | 7 +-
.../src/app/corona/corona.component.html | 29 +++
.../src/app/corona/corona.component.scss | 170 ++++++++++++++++++
.../src/app/corona/corona.component.spec.ts | 25 +++
pinsisApp/src/app/corona/corona.component.ts | 149 +++++++++++++++
.../src/app/maps-page/maps-page.component.ts | 2 +
10 files changed, 472 insertions(+), 3 deletions(-)
create mode 100644 pinsisApp/src/app/_services/marker-corona.service.spec.ts
create mode 100644 pinsisApp/src/app/_services/marker-corona.service.ts
create mode 100644 pinsisApp/src/app/corona/corona.component.html
create mode 100644 pinsisApp/src/app/corona/corona.component.scss
create mode 100644 pinsisApp/src/app/corona/corona.component.spec.ts
create mode 100644 pinsisApp/src/app/corona/corona.component.ts
diff --git a/pinsisApp/src/app/_services/marker-corona.service.spec.ts b/pinsisApp/src/app/_services/marker-corona.service.spec.ts
new file mode 100644
index 00000000..c4987a76
--- /dev/null
+++ b/pinsisApp/src/app/_services/marker-corona.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MarkerCoronaService } from './marker-corona.service';
+
+describe('MarkerCoronaService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [MarkerCoronaService]
+ });
+ });
+
+ it('should be created', inject([MarkerCoronaService], (service: MarkerCoronaService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/pinsisApp/src/app/_services/marker-corona.service.ts b/pinsisApp/src/app/_services/marker-corona.service.ts
new file mode 100644
index 00000000..d5a591e5
--- /dev/null
+++ b/pinsisApp/src/app/_services/marker-corona.service.ts
@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import * as L from 'leaflet';
+import { PopUpService } from './pop-up.service';
+import { HospitalService } from '../hospital.service';
+
+
+@Injectable()
+export class MarkerCoronaService {
+
+ capitals: string = '/assets/data/corona.json';
+
+
+static ScaledRadius(val: number, maxVal: number): number {
+ return 50 * (val / maxVal);
+ }
+
+ constructor(private http: HttpClient,
+ private popupService: PopUpService,
+ private hospitalService: HospitalService) {
+ }
+ makeCapitalMarkers(map: L.map): void {
+ this.hospitalService.getHospitals()
+ .subscribe(data => {
+ for (let hospital of data) {
+ let marker = L.marker([
+ hospital.geo_lat,
+ hospital.geo_long
+ ])
+ let properties = {
+ name: hospital.hospital_name,
+ city: hospital.hospital_city
+ }
+ marker.bindPopup(this.popupService.makeCapitalPopup(properties));
+ marker.addTo(map);
+ }
+ })
+ }
+
+ makeCapitalCircleMarkers(map: L.map): void {
+ this.http.get(this.capitals).subscribe((res: any) => {
+ console.log(res)
+ // Find the maximum population to scale the radii by.
+ const maxVal = Math.max(...res.features.map(x => x.infectados), 0);
+ console.log(maxVal)
+ for (let c of res.features) {
+ const lat = c.latitude;
+ const lon = c.longitude;
+
+ console.log(c);
+
+ let circle = L.circleMarker([lon, lat], {
+ radius: MarkerCoronaService.ScaledRadius(c.infectados, maxVal)
+ });
+
+ circle.bindPopup(this.popupService.makeCoronaPopup(c));
+
+ console.log(circle)
+
+ circle.addTo(map);
+ }
+ });
+}
+
+
+}
diff --git a/pinsisApp/src/app/_services/pop-up.service.ts b/pinsisApp/src/app/_services/pop-up.service.ts
index 2b3c1e01..29f8d06a 100644
--- a/pinsisApp/src/app/_services/pop-up.service.ts
+++ b/pinsisApp/src/app/_services/pop-up.service.ts
@@ -4,9 +4,17 @@ import { Injectable } from '@angular/core';
export class PopUpService {
constructor() { }
+
+
makeCapitalPopup(data: any): string {
return `` +
`<div>Hospital: ${ data.name }</div>` +
`<div>Cidade: ${ data.city }</div>` ;
}
+ makeCoronaPopup(data: any): string {
+ return `` +
+ `<div>Estado: ${ data.Estado }</div>` +
+ `<div>Infectados: ${ data.infectados }</div>` +
+ `<div>Óbitos: ${ data.obitos }</div>` ;
+ }
}
diff --git a/pinsisApp/src/app/app-routing.module.ts b/pinsisApp/src/app/app-routing.module.ts
index 6d53fb82..c5719df6 100644
--- a/pinsisApp/src/app/app-routing.module.ts
+++ b/pinsisApp/src/app/app-routing.module.ts
@@ -34,6 +34,7 @@ import { EditMachineComponent } from './edit-machine/edit-machine.component';
import { RegisterHospitalComponent } from './register-hospital/register-hospital.component';
import { MetricasComponent } from './metricas/metricas.component';
import { GraphsComponent } from './graphs/graphs.component';
+import { CoronaComponent } from './corona/corona.component';
const routes: Routes = [
@@ -49,7 +50,8 @@ const routes: Routes = [
{ path: 'edicao-equipamentos', component: EditMachineComponent },
{ path: 'registro-hospital', component: RegisterHospitalComponent },
{ path: 'metricas', component: MetricasComponent },
- { path: 'graficos-cnes', component: GraphsComponent }
+ { path: 'graficos-cnes', component: GraphsComponent },
+ { path: 'corona', component: CoronaComponent }
];
diff --git a/pinsisApp/src/app/app.module.ts b/pinsisApp/src/app/app.module.ts
index 3cea7f7a..531f982d 100644
--- a/pinsisApp/src/app/app.module.ts
+++ b/pinsisApp/src/app/app.module.ts
@@ -52,10 +52,12 @@ import { WebserviceReportService } from './report.service';
import { EditMachineComponent } from './edit-machine/edit-machine.component';
import { ShapeService } from './_services/shape.service';
import { MarkerService } from './_services/marker.service';
+import { MarkerCoronaService } from './_services/marker-corona.service';
import { PopUpService } from './_services/pop-up.service';
import { RegisterHospitalComponent } from './register-hospital/register-hospital.component';
import { MetricasComponent } from './metricas/metricas.component';
import { GraphsComponent } from './graphs/graphs.component';
+import { CoronaComponent } from './corona/corona.component';
@NgModule({
declarations: [
AppComponent,
@@ -78,7 +80,8 @@ import { GraphsComponent } from './graphs/graphs.component';
EditMachineComponent,
RegisterHospitalComponent,
MetricasComponent,
- GraphsComponent
+ GraphsComponent,
+ CoronaComponent
],
imports: [
BrowserModule,
@@ -92,7 +95,7 @@ import { GraphsComponent } from './graphs/graphs.component';
],
providers: [
DataApiService,
- { provide: 'ReportService', useClass: WebserviceReportService }, HospitalService, AuthService,AuthGuard, MachinesService, MarkerService,PopUpService,
+ { provide: 'ReportService', useClass: WebserviceReportService }, HospitalService, AuthService,AuthGuard, MachinesService, MarkerService, MarkerCoronaService,PopUpService,
ShapeService,
{
provide: HTTP_INTERCEPTORS,
diff --git a/pinsisApp/src/app/corona/corona.component.html b/pinsisApp/src/app/corona/corona.component.html
new file mode 100644
index 00000000..682ff160
--- /dev/null
+++ b/pinsisApp/src/app/corona/corona.component.html
@@ -0,0 +1,29 @@
+
+ <div class="container">
+
+
+
+ <div class="row row-hospital-selector">
+ <div class="map-container">
+ <div class="map-frame">
+ <div id="map"></div>
+ </div>
+ </div>
+
+ <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 class="hospital-card" id="hospital-card">
+ <img src='assets/images/{{selectedHospital.imagePath}}' alt='hospital image' style="height: 200px; margin-top:8px; max-width:100%;"/>
+ <p>Hospital: {{selectedHospital.name}}</p>
+ </div>
+ </div>
+
+
+ </div>
+
+</div>
diff --git a/pinsisApp/src/app/corona/corona.component.scss b/pinsisApp/src/app/corona/corona.component.scss
new file mode 100644
index 00000000..2d28f940
--- /dev/null
+++ b/pinsisApp/src/app/corona/corona.component.scss
@@ -0,0 +1,170 @@
+/*This file is part of the project Pinsis-Portal.
+ Copyright (C),2018, by C3SL(Centro de Computação CientÃfica e
+ Software Live)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
+
+@import '../../sass/styles';
+
+.map-container {
+ width:700px;
+ height:100%;
+ max-height:600px;
+ margin-left: auto;
+ margin-right: auto;
+ border: 3px solid $dark-purple;
+}
+
+
+.map-frame {
+ border: 2px solid black;
+ height: 100%;
+}
+
+#map {
+ height: 100%;
+
+}
+
+
+
+
+.hospital-selector{
+ border: 3px solid $dark-purple;
+ margin-left: auto;
+ margin-right: auto;
+ height: 285px;
+ max-height:285px;
+ background-color: #ffffff;
+}
+.row-hospital-selector{
+ height:600px;
+}
+
+.hosp-col{
+
+}
+
+@media screen and (max-width: 800px) {
+ .map-container {
+ margin-top: 10px;
+ width:92%;
+ height:400px;
+ margin-bottom: 10px;
+ }
+ .hospital-selector{
+ height:400px;
+ }
+ .row-hospital-selector{
+ height:auto;
+ }
+}
+
+.arrow_box {
+ position: relative;
+ background: #fff;
+ border: 1px solid #003c88;
+}
+.arrow_box:after, .arrow_box:before {
+ top: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
+.arrow_box:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-top-color: #fff;
+ border-width: 10px;
+ margin-left: -10px;
+}
+.arrow_box:before {
+ border-color: rgba(153, 153, 153, 0);
+ border-top-color: #003c88;
+ border-width: 11px;
+ margin-left: -11px;
+}
+
+.arrow_box {
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 50px;
+}
+
+.breadcrumb {
+ padding: 10px 16px;
+ list-style: none;
+ background-color: $white;
+
+ li {
+ display: inline;
+ font-size: 18px;
+
+ a {
+ color: $light-purple;
+ text-decoration: none;
+
+ &:hover {
+ color: $dark-purple;
+ text-decoration: none;
+ transition: cubic-bezier(0.075, 0.82, 0.165, 1);
+ }
+ }
+ }
+}
+
+.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;
+}
+
+.hospital-card {
+
+ background-color: $white;
+ border: 3px solid $dark-purple;
+ text-align: center;
+ font-size: 20px;
+
+ margin-top: 10px;
+ height: 250px;
+ display: none;
+}
diff --git a/pinsisApp/src/app/corona/corona.component.spec.ts b/pinsisApp/src/app/corona/corona.component.spec.ts
new file mode 100644
index 00000000..c5f21492
--- /dev/null
+++ b/pinsisApp/src/app/corona/corona.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoronaComponent } from './corona.component';
+
+describe('CoronaComponent', () => {
+ let component: CoronaComponent;
+ let fixture: ComponentFixture<CoronaComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CoronaComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CoronaComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/pinsisApp/src/app/corona/corona.component.ts b/pinsisApp/src/app/corona/corona.component.ts
new file mode 100644
index 00000000..7c90db57
--- /dev/null
+++ b/pinsisApp/src/app/corona/corona.component.ts
@@ -0,0 +1,149 @@
+import {Component, OnInit, ViewChild,AfterViewInit } from '@angular/core';
+import { DataApiService } from '../data-api.service';
+import * as L from 'leaflet';
+import { Icon, Marker } from 'leaflet';
+import { MarkerService } from '../_services/marker.service';
+import { MarkerCoronaService } from '../_services/marker-corona.service';
+import { ShapeService } from '../_services/shape.service';
+import { Hospital } from '../hospital';
+
+const iconRetinaUrl = "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon-2x.png";
+const iconUrl = "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png";
+const shadowUrl = "https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png";
+const iconDefault = L.icon({
+ iconRetinaUrl,
+ iconUrl ,
+ shadowUrl,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ tooltipAnchor: [16, -28],
+ shadowSize: [41, 41]
+});
+L.Marker.prototype.options.icon = iconDefault;
+
+
+@Component({
+ selector: 'app-corona',
+ templateUrl: './corona.component.html',
+ styleUrls: ['./corona.component.scss']
+})
+
+
+
+export class CoronaComponent implements AfterViewInit {
+ private map;
+ private states;
+ public geo;
+
+
+
+ constructor(private markerCoronaService: MarkerCoronaService,
+ private shapeService: ShapeService) { }
+
+ ngAfterViewInit(): void {
+ this.initMap();
+ this.markerCoronaService.makeCapitalMarkers(this.map);
+ this.shapeService.getStateShapes().subscribe(states => {
+ this.states = states;
+ this.initStatesLayer();
+});
+ }
+
+ private initMap(): void {
+ this.map = L.map('map', {
+ center: [-14.8282, -51.5795],
+ zoom: 4
+ });
+
+ const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 60,
+ minZoom: 3,
+ attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+ });
+
+ tiles.addTo(this.map);
+
+
+ }
+ private initStatesLayer() {
+ const stateLayer = L.geoJSON(this.states, {
+ style: (feature) => ({
+ weight: 3,
+ opacity: 0.5,
+ color: '#4e425b',
+ fillOpacity: 0.6,
+ fillColor: '#9795c9'
+ }),
+ onEachFeature: (feature, layer) => (
+ layer.on({
+ mouseover: (e) => (this.highlightFeature(e)),
+ mouseout: (e) => (this.resetFeature(e)),
+ click:(e) => (this.zoomToFeature(e)),
+
+
+ }))
+ });
+
+
+
+ this.map.addLayer(stateLayer);
+
+
+
+
+ }
+ private highlightFeature(e) {
+ const layer = e.target;
+ layer.setStyle({
+ weight: 7,
+ opacity: 1.0,
+ color: '#4e425b',
+ fillOpacity: 1.0,
+ fillColor: '#908ec5',
+ });
+
+
+
+
+ }
+ private resetFeature(e) {
+ const layer = e.target;
+ layer.setStyle({
+ weight: 3,
+ opacity: 0.5,
+ color: '#4e425b',
+ fillOpacity: 0.6,
+ fillColor: '#9795c9'
+ });
+
+ }
+ private zoomToFeature(e) {
+ this.map.fitBounds(e.target.getBounds());
+ }
+
+ selectedHospital: Hospital = {
+ name:'',
+ city: '',
+ latitude: '',
+ longitude: '',
+ image: new File([''], "nenhuma"),
+ imagePath: 'none'
+ };
+
+ showInfo(hospital) {
+ this.selectedHospital = {
+ name: hospital.hospital_name,
+ city: hospital.hospital_city,
+ latitude: hospital.geo_lat,
+ longitude: hospital.geo_long,
+ image: new File([''], "nenhuma"),
+ imagePath: hospital.file
+ };
+ let x = document.getElementById("hospital-card")
+ x.style.display = "block"
+ //console.log(this.selectedHospital)
+ }
+
+
+}
diff --git a/pinsisApp/src/app/maps-page/maps-page.component.ts b/pinsisApp/src/app/maps-page/maps-page.component.ts
index 206fa979..73c9276b 100644
--- a/pinsisApp/src/app/maps-page/maps-page.component.ts
+++ b/pinsisApp/src/app/maps-page/maps-page.component.ts
@@ -3,6 +3,8 @@ import { DataApiService } from '../data-api.service';
import * as L from 'leaflet';
import { Icon, Marker } from 'leaflet';
import { MarkerService } from '../_services/marker.service';
+import { MarkerCoronaService } from '../_services/marker-corona.service';
+
import { ShapeService } from '../_services/shape.service';
import { Hospital } from '../hospital';
--
GitLab