From 62b2b9482e410279f7a600d5248302c68a421628 Mon Sep 17 00:00:00 2001 From: Andrii Moskalenko <av.moskalenko@csltd.com.ua> Date: Thu, 19 Mar 2020 17:09:07 +0200 Subject: [PATCH 1/3] serverless simpleMap ready --- src/app/app.component.html | 24 ++++++++++++++++----- src/app/app.component.less | 43 +++++++++++++++++++++++++++++++++++++- src/app/app.component.ts | 6 ++++++ src/app/app.constants.ts | 37 +++++++++++++++++++++++--------- 4 files changed, 94 insertions(+), 16 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 8def4fc..77dfb87 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,7 @@ -<agm-map [fullscreenControl]="true" +<h2>Поширення COVID-19 в Україні</h2> +<div class="map-wrapper"> + + <agm-map [fullscreenControl]="true" (mapClick)="onMapClick($event)" [maxZoom]="10" [zoom]="6" @@ -10,13 +13,24 @@ <agm-marker (markerClick)="onMarkerClick($event, window)" [iconUrl]="marker.icon" [latitude]="marker.lat" [longitude]="marker.lng"> <agm-info-window #window> <div class="info-wraper"> - <div>{{marker.name}}</div> - <div class="cases-counter">{{marker.cases}} захворювань</div> - <div *ngIf="marker.deaths" class="death-counter">{{marker.deaths}} смертей</div> + <div class="region-name">{{marker.name}}</div> + <div class="cases-counter">захворювань: {{marker.cases}}</div> + <div *ngIf="marker.deaths" class="death-counter">смертей: {{marker.deaths}}</div> </div> </agm-info-window> </agm-marker> </ng-container> -</agm-map> + </agm-map> + + <div class="map-description"> + <img src="assets/icons/circle-orange.png" alt="" class="src"><div>- регіон де виявили захворювання на короновірус</div> + </div> + <div class="general-info"> + <div>Усього випадків: {{ casesAll }}</div> + <div>Усього смертей: {{ deathsAll }}</div> + </div> +</div> + + diff --git a/src/app/app.component.less b/src/app/app.component.less index 3d02f4f..369dfc4 100644 --- a/src/app/app.component.less +++ b/src/app/app.component.less @@ -1,4 +1,45 @@ agm-map { height: 600px; width: 1000px; - } \ No newline at end of file +} +h2 { + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} + +img { + display: block; +} +.region-name { + font-weight: bold; + padding-bottom: 3px; +} + +.death-counter { + font-family: Arial, Helvetica, sans-serif; +} + +.cases-counter { + padding-bottom: 3px; + font-family: Arial, Helvetica, sans-serif; +} + +.map-description { + display: grid; + grid-template-columns: 35px auto; + margin-top: 15px; + margin-left: 10px; +} + +.map-wrapper { + height: 600px; + width: 1000px; + margin: auto; + font-family: Arial, Helvetica, sans-serif; +} + +.general-info { + margin-top: 30px; + font-size: 20px; + line-height: 3rem; +} \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e104fb7..99dd4bc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -11,6 +11,8 @@ export class AppComponent implements OnInit { lat = 48.4070118; lng = 32.6144772; markers = []; + casesAll = 0; + deathsAll = 0; private previous; constructor(private map: MapService) { } @@ -19,6 +21,10 @@ export class AppComponent implements OnInit { this.markers = markers.map(marker => { return {...marker, icon: 'assets/icons/circle-orange.png'}; }); + this.markers.forEach(marker => { + if (Number(marker.cases)) { this.casesAll += marker.cases; } + if (Number(marker.deaths)) { this.deathsAll += marker.deaths; } + }); } public onMarkerClick(e, infowindow) { diff --git a/src/app/app.constants.ts b/src/app/app.constants.ts index d29d617..e55bc85 100644 --- a/src/app/app.constants.ts +++ b/src/app/app.constants.ts @@ -1,16 +1,33 @@ export const markers = [ - { - id: 0, - name: 'Харківська область', - lat: 50.02, - lng: 36.14, - cases: 0 - }, { id: 0, name: 'Київська область', lat: 50.27, - lng: 30.30, - cases: 7 + lng: 30.45, + cases: 2 + }, + { + id: 2, + name: 'Житомирська область', + lat: 50.05, + lng: 28.63, + cases: 1, + deaths: 1 + }, + { + id: 2, + name: 'Чернівецька область', + lat: 48.12, + lng: 26.05, + cases: 10, + deaths: 1 + }, + { + id: 3, + name: 'Донецька область', + lat: 47.85, + lng: 37.73, + cases: 1, + deaths: 0 } -] \ No newline at end of file +]; From 1970f105869b40a59a490c71c34416e346aa2860 Mon Sep 17 00:00:00 2001 From: Andrii Moskalenko <av.moskalenko@csltd.com.ua> Date: Thu, 19 Mar 2020 17:22:44 +0200 Subject: [PATCH 2/3] build prod --- package.json | 2 +- src/app/app.component.html | 4 ++-- src/app/app.component.less | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index c8c8a2d..cf84ba0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "scripts": { "ng": "ng", "start": "ng serve", - "build": "ng build", + "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" diff --git a/src/app/app.component.html b/src/app/app.component.html index 77dfb87..92183d9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -28,8 +28,8 @@ <h2>Поширення COVID-19 в Україні</h2> <img src="assets/icons/circle-orange.png" alt="" class="src"><div>- регіон де виявили захворювання на короновірус</div> </div> <div class="general-info"> - <div>Усього випадків: {{ casesAll }}</div> - <div>Усього смертей: {{ deathsAll }}</div> + <div style="color: #aaa;">Усього випадків виявлено: {{ casesAll }}</div> + <div style="color: #696969;">Усього смертей: {{ deathsAll }}</div> </div> </div> diff --git a/src/app/app.component.less b/src/app/app.component.less index 369dfc4..8d4f689 100644 --- a/src/app/app.component.less +++ b/src/app/app.component.less @@ -5,6 +5,7 @@ agm-map { h2 { text-align: center; font-family: Arial, Helvetica, sans-serif; + color: #555; } img { From 60c669cc28ddb3e8740668a76061232ea954e8f7 Mon Sep 17 00:00:00 2001 From: Andrii Moskalenko <av.moskalenko@csltd.com.ua> Date: Thu, 19 Mar 2020 17:29:17 +0200 Subject: [PATCH 3/3] dist path changed --- angular.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular.json b/angular.json index a6847d9..bb290ef 100644 --- a/angular.json +++ b/angular.json @@ -13,7 +13,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/corona-map", + "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts",