Changeset 28d7d35 for Farmatiko/ClientApp/src/app/counter

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

Location:

Farmatiko/ClientApp/src/app/counter

Files:

• counter.component.css (modified) (2 diffs)
• counter.component.html (modified) (3 diffs)
• counter.component.ts (modified) (6 diffs)

Farmatiko/ClientApp/src/app/counter/counter.component.css

@@ -2 +2 @@
     display: flex;
     flex-direction: column;
-    max-height: 500px;
     min-width: 300px;
 }
@@ -27 +26 @@
     padding: 1em 0;
 }
+.tableRow:hover {
+    background-color: #D4F2CD;
+    transform: scale(1.0005);
+}
+
+h2 button {
+    float: right;
+    padding: 0 5em;
+}
+
+#map {
+    height: 100%;
+}
+
+.map-frame {
+    border: 2px solid black;
+    height: 100%;
+}
+
+.map-wrapper {
+    margin: 0 3em 3em 3em;
+    min-height: 400px;
+}

Farmatiko/ClientApp/src/app/counter/counter.component.html

@@ -6 +6 @@
   <div class="wrapper">
     <div class="header">
-    <h2>Здравствени установи</h2>
+    <h2>Здравствени установи 
+      <button mat-icon-button color="primary" (click)="refreshMap()" [disabled]="!showMap">
+        <mat-icon>refresh</mat-icon>Освежи
+      </button>
+      <button mat-icon-button color="accent" [disabled]="clicked" (click)="toggleMap(); clicked = true">
+        <mat-icon>map</mat-icon>Активирај
+      </button>
+    </h2>
+    <div class="map-wrapper" *ngIf="showMap">
+      <div class="map-frame">
+        <div id="map" style="height: 400px;" leaflet [leafletOptions]="options"></div>
+      </div>
+    </div>
+
   <mat-form-field>
     <input matInput (keyup)="applyFilterFacilities($event.target.value)" placeholder="Пронајди установа">
@@ -16 +29 @@
           <th>Име</th>
           <th>Општина</th>
-          <th>Адреса</th>
           <th>Тип</th>
-          <th>Е-пошта</th>
-          <th>Телефон</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let facility of filteredFacilities">
-          <td><a (click)="openFacilityDialog(facility)">{{ facility.name }}</a></td>
+        <tr *ngFor="let facility of filteredFacilities" (click)="openFacilityDialog(facility)" class="tableRow">
+          <td>{{ facility.name }}</td>
           <td>{{ facility.municipality }}</td>
-          <td>{{ facility.address }}</td>
           <td>{{ facility.type }}</td>
-          <td>{{ facility.email }}</td>
-          <td>{{ facility.phone }}</td>
         </tr>
     </tbody>
@@ -48 +55 @@
           <th>Име</th>
           <th>Гранка</th>
-          <th>Установа</th>
-          <th>Назив</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let worker of filteredWorkers">
-          <td><a (click)="openWorkerDialog(worker)">{{ worker.name }}</a></td>
+        <tr *ngFor="let worker of filteredWorkers" (click)="openWorkerDialog(worker)" class="tableRow">
+          <td>{{ worker.name }}</td>
           <td>{{ worker.branch }}</td>
-          <td>{{ worker.facility }}</td>
-          <td>{{ worker.title }}</td>
         </tr>
     </tbody>

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

@@ -5 +5 @@
 import { FacilityDialogComponent } from '../dialogs/facility-dialog/facility-dialog.component';
 import { WorkerDialogComponent } from '../dialogs/worker-dialog/worker-dialog.component';
+import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -16 +18 @@
   public filteredFacilities: IHealthFacilities[] = [];
   public filteredWorkers: IHealthcareWorkers[] = [];
-
-  constructor(private dataService: DataService, private dialog: MatDialog) {
+  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, private http: HttpClient) {
     
   }
@@ -27 +40 @@
         },
         (err: any) => console.log(err),
-        () => console.log('Facility data retrieved!'));
+        () => {
+          this.appendFacilityMarkers(this.facilities)
+          console.log('Facility data retrieved!');
+        });
 
     this.dataService.getWorkers()
@@ -35 +51 @@
         (err: any) => console.log(err),
         () => console.log('Facility 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);
+        }
+      });
+    }
+  }
+
+  appendFacilityMarkers(facils: IHealthFacilities[]) {
+    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("Вашата локација"));
+    }
+    facils.forEach((facil) => {
+      this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+facil.municipality+'&street='+facil.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/hospital-icon.png'
+              })
+            }).bindPopup(facil.name);
+            this.options.layers.push(layer);
+          }
+        }, error => console.error(error));
+    });
   }
 
@@ -45 +107 @@
           },
           (err: any) => console.log(err),
-          () => console.log('Facility data retrieved!'));
+          () => {
+            this.appendFacilityMarkers(this.filteredFacilities);
+            if(this.showMap) {
+              this.showMap = false;
+              setTimeout(() => this.showMap = true, 300);
+            }
+            console.log('Facility data retrieved!');
+          });
     }
     else {
       this.filteredFacilities = this.facilities;
+      this.appendFacilityMarkers(this.facilities);
+      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);
+  }
+
 }