source: Farmatiko/ClientApp/src/app/counter/counter.component.ts@ 28d7d35

Last change on this file since 28d7d35 was 28d7d35, checked in by Mile Jankuloski <mile.jankuloski@…>, 22 months ago

Maps, geolocation api, dialogs & more

  • Property mode set to 100644
File size: 5.4 KB
Line 
1import { Component, OnInit } from '@angular/core';
2import { IHealthFacilities, IHealthcareWorkers } from '../shared/interfaces';
3import { DataService } from '../shared/data.service';
4import { MatDialog } from '@angular/material/dialog';
5import { FacilityDialogComponent } from '../dialogs/facility-dialog/facility-dialog.component';
6import { WorkerDialogComponent } from '../dialogs/worker-dialog/worker-dialog.component';
7import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
8import { HttpClient } from '@angular/common/http';
9
10@Component({
11 selector: 'app-counter-component',
12 templateUrl: './counter.component.html',
13 styleUrls: ['./counter.component.css']
14})
15export class CounterComponent implements OnInit {
16 public facilities: IHealthFacilities[] = [];
17 public workers: IHealthcareWorkers[] = [];
18 public filteredFacilities: IHealthFacilities[] = [];
19 public filteredWorkers: IHealthcareWorkers[] = [];
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.getFacilities()
38 .subscribe((facility: IHealthFacilities[]) => {
39 this.facilities = this.filteredFacilities = facility;
40 },
41 (err: any) => console.log(err),
42 () => {
43 this.appendFacilityMarkers(this.facilities)
44 console.log('Facility data retrieved!');
45 });
46
47 this.dataService.getWorkers()
48 .subscribe((worker: IHealthcareWorkers[]) => {
49 this.workers = this.filteredWorkers = worker;
50 },
51 (err: any) => console.log(err),
52 () => console.log('Facility data retrieved!'));
53
54 if (navigator.geolocation) {
55 navigator.geolocation.getCurrentPosition((position) => {
56 if (position) {
57 this.lat = position.coords.latitude;
58 this.lng = position.coords.longitude;
59 let layer = marker([ this.lat, this.lng ], {
60 icon: icon({
61 iconSize: [ 25, 41 ],
62 iconAnchor: [ 13, 41 ],
63 iconUrl: 'assets/home-icon.png'
64 })
65 }).bindPopup("Вашата локација");
66 this.options.layers.push(layer);
67 }
68 });
69 }
70 }
71
72 appendFacilityMarkers(facils: IHealthFacilities[]) {
73 this.options.layers = [];
74 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'}));
75 if(this.lat && this.lng) {
76 this.options.layers.push(marker([ this.lat, this.lng ], {
77 icon: icon({
78 iconSize: [ 25, 41 ],
79 iconAnchor: [ 13, 41 ],
80 iconUrl: 'assets/home-icon.png'
81 })
82 }).bindPopup("Вашата локација"));
83 }
84 facils.forEach((facil) => {
85 this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+facil.municipality+'&street='+facil.address+'&format=json').subscribe(obj => {
86 console.log(obj);
87 if(obj.length) {
88 let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
89 icon: icon({
90 iconSize: [ 25, 41 ],
91 iconAnchor: [ 13, 41 ],
92 iconUrl: 'assets/hospital-icon.png'
93 })
94 }).bindPopup(facil.name);
95 this.options.layers.push(layer);
96 }
97 }, error => console.error(error));
98 });
99 }
100
101 applyFilterFacilities(filterValue: string) {
102 console.log("applyFilterFacilities works!")
103 if(filterValue) {
104 this.dataService.searchFacilities(filterValue)
105 .subscribe((facility: IHealthFacilities[]) => {
106 this.filteredFacilities = facility;
107 },
108 (err: any) => console.log(err),
109 () => {
110 this.appendFacilityMarkers(this.filteredFacilities);
111 if(this.showMap) {
112 this.showMap = false;
113 setTimeout(() => this.showMap = true, 300);
114 }
115 console.log('Facility data retrieved!');
116 });
117 }
118 else {
119 this.filteredFacilities = this.facilities;
120 this.appendFacilityMarkers(this.facilities);
121 if(this.showMap) {
122 this.showMap = false;
123 setTimeout(() => this.showMap = true, 300);
124 }
125 }
126 }
127
128 applyFilterWorkers(filterValue: string) {
129 console.log("applyFilterWorkers works!")
130 if(filterValue) {
131 this.dataService.searchWorkers(filterValue)
132 .subscribe((worker: IHealthcareWorkers[]) => {
133 this.filteredWorkers = worker;
134 },
135 (err: any) => console.log(err),
136 () => console.log('Worker data retrieved!'));
137 }
138 else {
139 this.filteredWorkers = this.workers;
140 }
141 }
142
143 openFacilityDialog(facility: IHealthFacilities): void {
144 this.dialog.open(FacilityDialogComponent, {
145 width: '450px',
146 data: facility
147 });
148 }
149
150 openWorkerDialog(worker: IHealthcareWorkers): void {
151 this.dialog.open(WorkerDialogComponent, {
152 width: '450px',
153 data: worker
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.