Changeset 28d7d35 for Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog

Timestamp:

01/31/21 06:27:26 (3 years ago)

Author:

Mile Jankuloski <mile.jankuloski@…>

Branches:

master

Children:

de9d697

Parents:

7520f88

Message:

Maps, geolocation api, dialogs & more

Location:

Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog

Files:

• pharmacy-dialog.component.css (modified) (1 diff)
• pharmacy-dialog.component.html (modified) (1 diff)
• pharmacy-dialog.component.ts (modified) (3 diffs)

Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.css

@@ +1 @@
+button {
+    float: right;
+}
+
+div {
+    white-space: nowrap;
+}

Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.html

@@ -1 @@
-<h3>Повеќе инфо</h3>
+<h3>Повеќе информации</h3>
+<table class="table table-striped">
+    <tbody>
+        <tr>
+            <td>Име</td>
+            <td>{{pharmacy?.name}}</td>
+        </tr>
+        <tr>
+            <td>Општина</td>
+            <td>{{pharmacy?.location}}</td>
+        </tr>
+        <tr>
+            <td>Адреса</td>
+            <td>{{pharmacy?.address}}</td>
+        </tr>
+        <tr>
+            <td>Работи 24/7</td>
+            <td><div *ngIf="pharmacy.workAllTime == true">Да</div><div *ngIf="pharmacy.workAllTime != true">Не</div></td>
+        </tr>
+        <tr>
+            <td>Компанија</td>
+            <td>{{pharmacy?.headName}}</td>
+        </tr>
+    </tbody>
+</table>
+
+<div style="height: 200px;" leaflet [leafletOptions]="options" *ngIf="mapShown"></div>
 <br>
-<p>ИД: {{pharmacy.id}}</p>
-<p>Име: {{pharmacy.name}}</p>
-<p>Општина: {{pharmacy.location}}</p>
-<p>Адреса: {{pharmacy.address}}</p>
-<p>Работи 24/7: {{pharmacy.workAllTime}}</p>
-<br>
-<p><a (click)="close()">Затвори</a></p>
+<p><button mat-button color="primary" (click)="close()">Затвори</button></p>

Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.ts

@@ -1 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { IPharmacy } from '../../shared/interfaces';
+import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -10 +12 @@
 export class PharmacyDialogComponent implements OnInit {
   pharmacy: IPharmacy;
+  mapShown: boolean = true;
+  options = {
+    layers: [
+      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
+    ],
+    zoom: 7,
+    center: latLng(41.61807, 21.74348)
+  }
 
-  constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
+  constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
     this.pharmacy = data;
+    if(this.pharmacy) {
+      this.addMarkers();
+    }
   }
 
   ngOnInit(): void {
+  }
+
+  addMarkers() {
+    this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+this.pharmacy?.location+'&street='+this.pharmacy?.address+'&format=json').subscribe(obj => {
+      console.log(obj);  
+      if(obj.length) {
+          let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
+            icon: icon({
+              iconSize: [ 25, 41 ],
+              iconAnchor: [ 13, 41 ],
+              iconUrl: 'assets/pharmacy-icon.png'
+            })
+          }).bindPopup("Аптека: "+this.pharmacy?.name);
+          this.options.layers.push(layer);
+          this.options.center = latLng(obj[0]?.lat, obj[0]?.lon);
+          this.options.zoom = 13;
+        }
+      }, error => console.error(error));
+      this.mapShown = false;
+      setTimeout(() => this.mapShown = true, 300);
   }
 
@@ -22 +55 @@
   }
 
+
 }