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

Timestamp:

01/31/21 06:27:26 (4 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/facility-dialog

Files:

• facility-dialog.component.css (modified) (1 diff)
• facility-dialog.component.html (modified) (1 diff)
• facility-dialog.component.ts (modified) (2 diffs)

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

@@ +1 @@
+button {
+    float: right;
+}

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

@@ -1 @@
-<h3>Повеќе инфо</h3>
+<h3>Повеќе информации</h3>
+<table class="table table-striped">
+    <tbody>
+        <tr>
+            <td>Име</td>
+            <td>{{facility?.name}}</td>
+        </tr>
+        <tr>
+            <td>Општина</td>
+            <td>{{facility?.municipality}}</td>
+        </tr>
+        <tr>
+            <td>Тип на установа</td>
+            <td>{{facility?.type}}</td>
+        </tr>
+        <tr>
+            <td>Адреса</td>
+            <td>{{facility?.address}}</td>
+        </tr>
+        <tr>
+            <td>Е-пошта</td>
+            <td>{{facility?.email}}</td>
+        </tr>
+        <tr>
+            <td>Телефон</td>
+            <td>{{facility?.phone}}</td>
+        </tr>
+    </tbody>
+</table>
+
+<div style="height: 200px;" leaflet [leafletOptions]="options" *ngIf="mapShown"></div>
 <br>
-<p>ИД: {{facility.id}}</p>
-<p>Име: {{facility.name}}</p>
-<p>Општина: {{facility.municipality}}</p>
-<p>Тип на установа: {{facility.type}}</p>
-<p>Адреса: {{facility.address}}</p>
-<p>Адреса: {{facility.email}}</p>
-<p>Адреса: {{facility.phone}}</p>
-<br>
-<p><a (click)="close()">Затвори</a></p>
+<p><button mat-button color="primary" (click)="close()">Затвори</button></p>

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

@@ -2 +2 @@
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { IHealthFacilities } from '../../shared/interfaces';
+import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -10 +12 @@
 export class FacilityDialogComponent implements OnInit {
   facility: IHealthFacilities;
+  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<FacilityDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
+  constructor(private dialogRef: MatDialogRef<FacilityDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
     this.facility = data;
+    if(this.facility) {
+      this.addMarkers();
+    }
   }
 
   ngOnInit(): void {
   }
+
+  addMarkers() {
+    this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+this.facility?.municipality+'&street='+this.facility?.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/hospital-icon.png'
+            })
+          }).bindPopup("Аптека: "+this.facility?.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);
+  }
+
 
   close() {