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/counter
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • Farmatiko/ClientApp/src/app/counter/counter.component.css

    r7520f88 r28d7d35  
    22    display: flex;
    33    flex-direction: column;
    4     max-height: 500px;
    54    min-width: 300px;
    65}
     
    2726    padding: 1em 0;
    2827}
     28.tableRow:hover {
     29    background-color: #D4F2CD;
     30    transform: scale(1.0005);
     31}
     32
     33h2 button {
     34    float: right;
     35    padding: 0 5em;
     36}
     37
     38#map {
     39    height: 100%;
     40}
     41
     42.map-frame {
     43    border: 2px solid black;
     44    height: 100%;
     45}
     46
     47.map-wrapper {
     48    margin: 0 3em 3em 3em;
     49    min-height: 400px;
     50}
  • Farmatiko/ClientApp/src/app/counter/counter.component.html

    r7520f88 r28d7d35  
    66  <div class="wrapper">
    77    <div class="header">
    8     <h2>Здравствени установи</h2>
     8    <h2>Здравствени установи
     9      <button mat-icon-button color="primary" (click)="refreshMap()" [disabled]="!showMap">
     10        <mat-icon>refresh</mat-icon>Освежи
     11      </button>
     12      <button mat-icon-button color="accent" [disabled]="clicked" (click)="toggleMap(); clicked = true">
     13        <mat-icon>map</mat-icon>Активирај
     14      </button>
     15    </h2>
     16    <div class="map-wrapper" *ngIf="showMap">
     17      <div class="map-frame">
     18        <div id="map" style="height: 400px;" leaflet [leafletOptions]="options"></div>
     19      </div>
     20    </div>
     21
    922  <mat-form-field>
    1023    <input matInput (keyup)="applyFilterFacilities($event.target.value)" placeholder="Пронајди установа">
     
    1629          <th>Име</th>
    1730          <th>Општина</th>
    18           <th>Адреса</th>
    1931          <th>Тип</th>
    20           <th>Е-пошта</th>
    21           <th>Телефон</th>
    2232        </tr>
    2333      </thead>
    2434      <tbody>
    25         <tr *ngFor="let facility of filteredFacilities">
    26           <td><a (click)="openFacilityDialog(facility)">{{ facility.name }}</a></td>
     35        <tr *ngFor="let facility of filteredFacilities" (click)="openFacilityDialog(facility)" class="tableRow">
     36          <td>{{ facility.name }}</td>
    2737          <td>{{ facility.municipality }}</td>
    28           <td>{{ facility.address }}</td>
    2938          <td>{{ facility.type }}</td>
    30           <td>{{ facility.email }}</td>
    31           <td>{{ facility.phone }}</td>
    3239        </tr>
    3340    </tbody>
     
    4855          <th>Име</th>
    4956          <th>Гранка</th>
    50           <th>Установа</th>
    51           <th>Назив</th>
    5257        </tr>
    5358      </thead>
    5459      <tbody>
    55         <tr *ngFor="let worker of filteredWorkers">
    56           <td><a (click)="openWorkerDialog(worker)">{{ worker.name }}</a></td>
     60        <tr *ngFor="let worker of filteredWorkers" (click)="openWorkerDialog(worker)" class="tableRow">
     61          <td>{{ worker.name }}</td>
    5762          <td>{{ worker.branch }}</td>
    58           <td>{{ worker.facility }}</td>
    59           <td>{{ worker.title }}</td>
    6063        </tr>
    6164    </tbody>
  • Farmatiko/ClientApp/src/app/counter/counter.component.ts

    r7520f88 r28d7d35  
    55import { FacilityDialogComponent } from '../dialogs/facility-dialog/facility-dialog.component';
    66import { WorkerDialogComponent } from '../dialogs/worker-dialog/worker-dialog.component';
     7import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
     8import { HttpClient } from '@angular/common/http';
    79
    810@Component({
     
    1618  public filteredFacilities: IHealthFacilities[] = [];
    1719  public filteredWorkers: IHealthcareWorkers[] = [];
    18 
    19   constructor(private dataService: DataService, private dialog: MatDialog) {
     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) {
    2033   
    2134  }
     
    2740        },
    2841        (err: any) => console.log(err),
    29         () => console.log('Facility data retrieved!'));
     42        () => {
     43          this.appendFacilityMarkers(this.facilities)
     44          console.log('Facility data retrieved!');
     45        });
    3046
    3147    this.dataService.getWorkers()
     
    3551        (err: any) => console.log(err),
    3652        () => 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    });
    3799  }
    38100
     
    45107          },
    46108          (err: any) => console.log(err),
    47           () => console.log('Facility data retrieved!'));
     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          });
    48117    }
    49118    else {
    50119      this.filteredFacilities = this.facilities;
     120      this.appendFacilityMarkers(this.facilities);
     121      if(this.showMap) {
     122        this.showMap = false;
     123        setTimeout(() => this.showMap = true, 300);
     124      }
    51125    }
    52126  }
     
    80154    });
    81155  }
     156 
     157  toggleMap() {
     158    this.showMap = !this.showMap;
     159  }
     160
     161  refreshMap() {
     162    this.showMap = false;
     163    setTimeout(() => this.showMap = true, 300);
     164  }
     165
    82166}
Note: See TracChangeset for help on using the changeset viewer.