source: Farmatiko/ClientApp/src/app/home/home.component.ts@ 8eb1e21

Last change on this file since 8eb1e21 was 28d7d35, checked in by Mile Jankuloski <mile.jankuloski@…>, 4 years ago

Maps, geolocation api, dialogs & more

  • Property mode set to 100644
File size: 5.4 KB
Line 
1import { Component, OnInit } from '@angular/core';
2import { IMedicine, IPharmacy } from '../shared/interfaces';
3import { DataService } from '../shared/data.service';
4import { MatDialog } from '@angular/material/dialog';
5import { MedicineDialogComponent } from '../dialogs/medicine-dialog/medicine-dialog.component';
6import { PharmacyDialogComponent } from '../dialogs/pharmacy-dialog/pharmacy-dialog.component';
7import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
8import { HttpClient } from '@angular/common/http';
9
10@Component({
11 selector: 'app-home',
12 templateUrl: './home.component.html',
13 styleUrls: ['./home.component.css']
14})
15export class HomeComponent implements OnInit {
16 public medicines: IMedicine[] = [];
17 public pharmacies: IPharmacy[] = [];
18 public filteredMedicines: IMedicine[] = [];
19 public filteredPharmacies: IPharmacy[] = [];
20 public lat;
21 public lng;
22 clicked = false;
23 showMap: boolean = false;
24 options = {
25 layers: [
26 tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
27 ],
28 zoom: 8,
29 center: latLng(41.61807, 21.74348)
30 }
31
32 constructor(private dataService: DataService, private dialog: MatDialog, private http: HttpClient) {
33
34 }
35
36 ngOnInit(): void {
37 this.dataService.getMedicines()
38 .subscribe((medicine: IMedicine[]) => {
39 this.medicines = this.filteredMedicines = medicine;
40 },
41 (err: any) => console.log(err),
42 () => console.log('Medicine data retrieved'));
43
44 this.dataService.getPharmacies()
45 .subscribe((pharmacy: IPharmacy[]) => {
46 this.pharmacies = this.filteredPharmacies = pharmacy;
47 },
48 (err: any) => console.log(err),
49 () => {
50 this.appendPharmacyMarkers(this.pharmacies);
51 console.log('Pharmacy data retrieved');
52 });
53 if (navigator.geolocation) {
54 navigator.geolocation.getCurrentPosition((position) => {
55 if (position) {
56 this.lat = position.coords.latitude;
57 this.lng = position.coords.longitude;
58 let layer = marker([ this.lat, this.lng ], {
59 icon: icon({
60 iconSize: [ 25, 41 ],
61 iconAnchor: [ 13, 41 ],
62 iconUrl: 'assets/home-icon.png'
63 })
64 }).bindPopup("Вашата локација");
65 this.options.layers.push(layer);
66 }
67 });
68 }
69 }
70
71 appendPharmacyMarkers(pharmas: IPharmacy[]) {
72 this.options.layers = [];
73 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'}));
74 if(this.lat && this.lng) {
75 this.options.layers.push(marker([ this.lat, this.lng ], {
76 icon: icon({
77 iconSize: [ 25, 41 ],
78 iconAnchor: [ 13, 41 ],
79 iconUrl: 'assets/home-icon.png'
80 })
81 }).bindPopup("Вашата локација"));
82 }
83 pharmas.forEach((pharmacy) => {
84 this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+pharmacy.location+'&street='+pharmacy.address+'&format=json').subscribe(obj => {
85 console.log(obj);
86 if(obj.length) {
87 let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
88 icon: icon({
89 iconSize: [ 25, 41 ],
90 iconAnchor: [ 13, 41 ],
91 iconUrl: 'assets/pharmacy-icon.png'
92 })
93 }).bindPopup("Аптека: "+pharmacy.name);
94 this.options.layers.push(layer);
95 }
96 }, error => console.error(error));
97 });
98 }
99
100
101 applyFilterMedicines(filterValue: string) {
102 console.log("applyFilterMedicines works!")
103 if(filterValue) {
104 this.dataService.searchMedicines(filterValue)
105 .subscribe((medicine: IMedicine[]) => {
106 this.filteredMedicines = medicine;
107 },
108 (err: any) => console.log(err),
109 () => console.log('Medicine data retrieved'));
110 }
111 else {
112 this.filteredMedicines = this.medicines;
113 }
114 }
115
116 applyFilterPharmacies(filterValue: string) {
117 console.log("applyFilterPharmacies works!")
118 if(filterValue) {
119 this.dataService.searchPharmacies(filterValue)
120 .subscribe((pharmacy: IPharmacy[]) => {
121 this.filteredPharmacies = pharmacy;
122 },
123 (err: any) => console.log(err),
124 () => {
125 this.appendPharmacyMarkers(this.filteredPharmacies);
126 if(this.showMap) {
127 this.showMap = false;
128 setTimeout(() => this.showMap = true, 300);
129 }
130 console.log('Pharmacy data retrieved')
131 });
132 }
133 else {
134 this.filteredPharmacies = this.pharmacies;
135 this.appendPharmacyMarkers(this.pharmacies);
136 if(this.showMap) {
137 this.showMap = false;
138 setTimeout(() => this.showMap = true, 300);
139 }
140 }
141 }
142
143 openMedicineDialog(medicine: IMedicine): void {
144 this.dialog.open(MedicineDialogComponent, {
145 width: '450px',
146 data: medicine
147 });
148 }
149
150 openPharmacyDialog(pharmacy: IPharmacy): void {
151 this.dialog.open(PharmacyDialogComponent, {
152 width: '450px',
153 data: pharmacy
154 });
155 }
156
157 toggleMap() {
158 this.showMap = !this.showMap;
159 }
160
161 refreshMap() {
162 this.showMap = false;
163 setTimeout(() => this.showMap = true, 300);
164 }
165
166}
Note: See TracBrowser for help on using the repository browser.