Ignore:
Timestamp:
01/31/21 06:27:26 (2 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:
3 edited

Legend:

Unmodified
Added
Removed
  • Farmatiko/ClientApp/src/app/dialogs/facility-dialog/facility-dialog.component.css

    r7520f88 r28d7d35  
     1button {
     2    float: right;
     3}
  • Farmatiko/ClientApp/src/app/dialogs/facility-dialog/facility-dialog.component.html

    r7520f88 r28d7d35  
    1 <h3>Повеќе инфо</h3>
     1<h3>Повеќе информации</h3>
     2<table class="table table-striped">
     3    <tbody>
     4        <tr>
     5            <td>Име</td>
     6            <td>{{facility?.name}}</td>
     7        </tr>
     8        <tr>
     9            <td>Општина</td>
     10            <td>{{facility?.municipality}}</td>
     11        </tr>
     12        <tr>
     13            <td>Тип на установа</td>
     14            <td>{{facility?.type}}</td>
     15        </tr>
     16        <tr>
     17            <td>Адреса</td>
     18            <td>{{facility?.address}}</td>
     19        </tr>
     20        <tr>
     21            <td>Е-пошта</td>
     22            <td>{{facility?.email}}</td>
     23        </tr>
     24        <tr>
     25            <td>Телефон</td>
     26            <td>{{facility?.phone}}</td>
     27        </tr>
     28    </tbody>
     29</table>
     30
     31<div style="height: 200px;" leaflet [leafletOptions]="options" *ngIf="mapShown"></div>
    232<br>
    3 <p>ИД: {{facility.id}}</p>
    4 <p>Име: {{facility.name}}</p>
    5 <p>Општина: {{facility.municipality}}</p>
    6 <p>Тип на установа: {{facility.type}}</p>
    7 <p>Адреса: {{facility.address}}</p>
    8 <p>Адреса: {{facility.email}}</p>
    9 <p>Адреса: {{facility.phone}}</p>
    10 <br>
    11 <p><a (click)="close()">Затвори</a></p>
     33<p><button mat-button color="primary" (click)="close()">Затвори</button></p>
  • Farmatiko/ClientApp/src/app/dialogs/facility-dialog/facility-dialog.component.ts

    r7520f88 r28d7d35  
    22import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
    33import { IHealthFacilities } from '../../shared/interfaces';
     4import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
     5import { HttpClient } from '@angular/common/http';
    46
    57@Component({
     
    1012export class FacilityDialogComponent implements OnInit {
    1113  facility: IHealthFacilities;
     14  mapShown: boolean = true;
     15  options = {
     16    layers: [
     17      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
     18    ],
     19    zoom: 7,
     20    center: latLng(41.61807, 21.74348)
     21  }
    1222
    13   constructor(private dialogRef: MatDialogRef<FacilityDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
     23  constructor(private dialogRef: MatDialogRef<FacilityDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
    1424    this.facility = data;
     25    if(this.facility) {
     26      this.addMarkers();
     27    }
    1528  }
    1629
    1730  ngOnInit(): void {
    1831  }
     32
     33  addMarkers() {
     34    this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+this.facility?.municipality+'&street='+this.facility?.address+'&format=json').subscribe(obj => {
     35      console.log(obj); 
     36      if(obj.length) {
     37          let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
     38            icon: icon({
     39              iconSize: [ 25, 41 ],
     40              iconAnchor: [ 13, 41 ],
     41              iconUrl: 'assets/hospital-icon.png'
     42            })
     43          }).bindPopup("Аптека: "+this.facility?.name);
     44          this.options.layers.push(layer);
     45          this.options.center = latLng(obj[0]?.lat, obj[0]?.lon);
     46          this.options.zoom = 13;
     47        }
     48      }, error => console.error(error));
     49      this.mapShown = false;
     50      setTimeout(() => this.mapShown = true, 300);
     51  }
     52
    1953
    2054  close() {
Note: See TracChangeset for help on using the changeset viewer.