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

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/home

Files:

• home.component.css (modified) (2 diffs)
• home.component.html (modified) (3 diffs)
• home.component.ts (modified) (5 diffs)

Farmatiko/ClientApp/src/app/home/home.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/home/home.component.html

@@ -14 +14 @@
         <tr>
           <th>Име</th>
-          <th>Јачина</th>
           <th>Форма</th>
-          <th>Начин на издавање</th>
-          <th>Производител</th>
           <th>Цена</th>
-          <th>Пакување</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let medicine of filteredMedicines">
-          <td><a (click)="openMedicineDialog(medicine)">{{ medicine.name }}</a></td>
-          <td>{{ medicine.strength }}</td>
+        <tr *ngFor="let medicine of filteredMedicines" (click)="openMedicineDialog(medicine)" class="tableRow">
+          <td>{{ medicine.name }}</td>
           <td>{{ medicine.form }}</td>
-          <td>{{ medicine.wayOfIssuing }}</td>
-          <td>{{ medicine.manufacturer }}</td>
           <td>{{ medicine.price }}</td>
-          <td>{{ medicine.packaging }}</td>
         </tr>
     </tbody>
@@ -39 +31 @@
   <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)="applyFilterPharmacies($event.target.value)" placeholder="Пронајди аптека">
@@ -49 +54 @@
           <th>Име</th>
           <th>Локација</th>
-          <th>Адреса</th>
           <th>Работи 27/7?</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let pharmacy of filteredPharmacies">
-          <td><a (click)="openPharmacyDialog(pharmacy)">{{ pharmacy.name }}</a></td>
+        <tr *ngFor="let pharmacy of filteredPharmacies" (click)="openPharmacyDialog(pharmacy)" class="tableRow">
+          <td>{{ pharmacy.name }}</td>
           <td>{{ pharmacy.location }}</td>
-          <td>{{ pharmacy.address }}</td>
-          <td>{{ pharmacy.workAllTime }}</td>
+          <td *ngIf="pharmacy.workAllTime == true">Да</td>
+          <td *ngIf="pharmacy.workAllTime != true">Не</td>
         </tr>
     </tbody>
   </table>
+
     </div>
     </mat-tab>

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

@@ -5 +5 @@
 import { MedicineDialogComponent } from '../dialogs/medicine-dialog/medicine-dialog.component';
 import { PharmacyDialogComponent } from '../dialogs/pharmacy-dialog/pharmacy-dialog.component';
+import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -16 +18 @@
   public filteredMedicines: IMedicine[] = [];
   public filteredPharmacies: IPharmacy[] = [];
+  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) {
+  constructor(private dataService: DataService, private dialog: MatDialog, private http: HttpClient) {
 
   }
@@ -34 +47 @@
         },
         (err: any) => console.log(err),
-        () => console.log('Pharmacy data retrieved'));
+        () => {
+          this.appendPharmacyMarkers(this.pharmacies);
+          console.log('Pharmacy 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);
+        }
+      });
+    }
   }
+
+  appendPharmacyMarkers(pharmas: IPharmacy[]) {
+    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("Вашата локација"));
+    }
+    pharmas.forEach((pharmacy) => {
+      this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+pharmacy.location+'&street='+pharmacy.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/pharmacy-icon.png'
+              })
+            }).bindPopup("Аптека: "+pharmacy.name);
+            this.options.layers.push(layer);
+          }
+        }, error => console.error(error));
+    });
+  }
+
 
   applyFilterMedicines(filterValue: string) {
@@ -60 +122 @@
           },
           (err: any) => console.log(err),
-          () => console.log('Pharmacy data retrieved')); 
+          () => {
+            this.appendPharmacyMarkers(this.filteredPharmacies);
+            if(this.showMap) {
+              this.showMap = false;
+              setTimeout(() => this.showMap = true, 300);
+            }
+            console.log('Pharmacy data retrieved')
+        }); 
     }
     else {
       this.filteredPharmacies = this.pharmacies;
+      this.appendPharmacyMarkers(this.pharmacies);
+      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);
+  }
+
 }