Changeset 28d7d35 for Farmatiko/ClientApp/src/app/home/home.component.ts

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

File:

• Farmatiko/ClientApp/src/app/home/home.component.ts (modified) (5 diffs)

Farmatiko/ClientApp/src/app/home/home.component.ts

@@ -5 +5 @@
 import { MedicineDialogComponent } from '../dialogs/medicine-dialog/medicine-dialog.component';
 import { PharmacyDialogComponent } from '../dialogs/pharmacy-dialog/pharmacy-dialog.component';
+import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -16 +18 @@
   public filteredMedicines: IMedicine[] = [];
   public filteredPharmacies: IPharmacy[] = [];
+  public lat;
+  public lng;
+  clicked = false;
+  showMap: boolean = false;
+  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: 8,
+    center: latLng(41.61807, 21.74348)
+  }
 
-  constructor(private dataService: DataService, private dialog: MatDialog) {
+  constructor(private dataService: DataService, private dialog: MatDialog, private http: HttpClient) {
 
   }
@@ -34 +47 @@
         },
         (err: any) => console.log(err),
-        () => console.log('Pharmacy data retrieved'));
+        () => {
+          this.appendPharmacyMarkers(this.pharmacies);
+          console.log('Pharmacy data retrieved');
+        });
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        if (position) {
+          this.lat = position.coords.latitude;
+          this.lng = position.coords.longitude;
+          let layer = marker([ this.lat, this.lng ], {
+            icon: icon({
+              iconSize: [ 25, 41 ],
+              iconAnchor: [ 13, 41 ],
+              iconUrl: 'assets/home-icon.png'
+            })
+          }).bindPopup("Вашата локација");
+          this.options.layers.push(layer);
+        }
+      });
+    }
   }
+
+  appendPharmacyMarkers(pharmas: IPharmacy[]) {
+    this.options.layers = [];
+    this.options.layers.push(tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}));
+    if(this.lat && this.lng) {
+      this.options.layers.push(marker([ this.lat, this.lng ], {
+        icon: icon({
+          iconSize: [ 25, 41 ],
+          iconAnchor: [ 13, 41 ],
+          iconUrl: 'assets/home-icon.png'
+        })
+      }).bindPopup("Вашата локација"));
+    }
+    pharmas.forEach((pharmacy) => {
+      this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+pharmacy.location+'&street='+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("Аптека: "+pharmacy.name);
+            this.options.layers.push(layer);
+          }
+        }, error => console.error(error));
+    });
+  }
+
 
   applyFilterMedicines(filterValue: string) {
@@ -60 +122 @@
           },
           (err: any) => console.log(err),
-          () => console.log('Pharmacy data retrieved')); 
+          () => {
+            this.appendPharmacyMarkers(this.filteredPharmacies);
+            if(this.showMap) {
+              this.showMap = false;
+              setTimeout(() => this.showMap = true, 300);
+            }
+            console.log('Pharmacy data retrieved')
+        }); 
     }
     else {
       this.filteredPharmacies = this.pharmacies;
+      this.appendPharmacyMarkers(this.pharmacies);
+      if(this.showMap) {
+        this.showMap = false;
+        setTimeout(() => this.showMap = true, 300);
+      }
     }
   }
@@ -80 +154 @@
     });
   }
+
+  toggleMap() {
+    this.showMap = !this.showMap;
+  }
+
+  refreshMap() {
+    this.showMap = false;
+    setTimeout(() => this.showMap = true, 300);
+  }
+
 }