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

Legend:

Unmodified
Added
Removed

  • Farmatiko/ClientApp/src/app/dialogs/edit-pharmacy-head-dialog/edit-pharmacy-head-dialog.component.html

    r7520f88 r28d7d35  
    33    <div class="form-group">
    44      <label>ИД</label>
    5       <input type="text" class="form-control" name="id" [(ngModel)]="head.id" #id="ngModel" required>
     5      <input type="text" class="form-control" name="id" [(ngModel)]="head.id" #id="ngModel" required disabled>
    66      <div class="alert alert-danger">ID is required</div>
    77    </div>

  • 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() {

  • Farmatiko/ClientApp/src/app/dialogs/medicine-dialog/medicine-dialog.component.css

    r7520f88 r28d7d35  
     1button {
     2    float: right;
     3}

  • Farmatiko/ClientApp/src/app/dialogs/medicine-dialog/medicine-dialog.component.html

    r7520f88 r28d7d35  
    1 <h3>Повеќе инфо</h3>
    2 <br>
    3 <p>ИД: {{medicine.id}}</p>
    4 <p>Име: {{medicine.name}}</p>
    5 <p>Форма: {{medicine.form}}</p>
    6 <p>Пакување: {{medicine.packaging}}</p>
    7 <p>Цена: {{medicine.price}}</p>
    8 <p>Јачина: {{medicine.strength}}</p>
    9 <p>Начин на издавање: {{medicine.wayOfIssuing}}</p>
    10 <p>Производител: {{medicine.manufacturer}}</p>
    11 <br>
    12 <p><a (click)="close()">Затвори</a></p>
     1<h3>Повеќе информации</h3>
     2<table class="table table-striped">
     3    <tbody>
     4        <tr>
     5            <td>Име</td>
     6            <td>{{medicine?.name}}</td>
     7        </tr>
     8        <tr>
     9            <td>Форма</td>
     10            <td>{{medicine?.form}}</td>
     11        </tr>
     12        <tr>
     13            <td>Пакување</td>
     14            <td>{{medicine?.packaging}}</td>
     15        </tr>
     16        <tr>
     17            <td>Цена</td>
     18            <td>{{medicine?.price}}</td>
     19        </tr>
     20        <tr>
     21            <td>Јачина</td>
     22            <td>{{medicine?.strength}}</td>
     23        </tr>
     24        <tr>
     25            <td>Начин на издавање</td>
     26            <td>{{medicine?.wayOfIssuing}}</td>
     27        </tr>
     28        <tr>
     29            <td>Производител</td>
     30            <td>{{medicine?.manufacturer}}</td>
     31        </tr>
     32    </tbody>
     33</table>
     34<div *ngIf="medicine?.headNames">
     35    <h5>Достапен во аптеките на:</h5>
     36    <table class="table table-striped">
     37        <tbody>
     38            <tr *ngFor="let head of medicine?.headNames">
     39                <td>{{head}}</td>
     40            </tr>
     41        </tbody>
     42    </table>
     43</div>
     44<p><button mat-button color="primary" (click)="close()">Затвори</button></p>

  • Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.css

    r7520f88 r28d7d35  
     1button {
     2    float: right;
     3}
     4
     5div {
     6    white-space: nowrap;
     7}

  • Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-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>{{pharmacy?.name}}</td>
     7        </tr>
     8        <tr>
     9            <td>Општина</td>
     10            <td>{{pharmacy?.location}}</td>
     11        </tr>
     12        <tr>
     13            <td>Адреса</td>
     14            <td>{{pharmacy?.address}}</td>
     15        </tr>
     16        <tr>
     17            <td>Работи 24/7</td>
     18            <td><div *ngIf="pharmacy.workAllTime == true">Да</div><div *ngIf="pharmacy.workAllTime != true">Не</div></td>
     19        </tr>
     20        <tr>
     21            <td>Компанија</td>
     22            <td>{{pharmacy?.headName}}</td>
     23        </tr>
     24    </tbody>
     25</table>
     26
     27<div style="height: 200px;" leaflet [leafletOptions]="options" *ngIf="mapShown"></div>
    228<br>
    3 <p>ИД: {{pharmacy.id}}</p>
    4 <p>Име: {{pharmacy.name}}</p>
    5 <p>Општина: {{pharmacy.location}}</p>
    6 <p>Адреса: {{pharmacy.address}}</p>
    7 <p>Работи 24/7: {{pharmacy.workAllTime}}</p>
    8 <br>
    9 <p><a (click)="close()">Затвори</a></p>
     29<p><button mat-button color="primary" (click)="close()">Затвори</button></p>

  • Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.ts

    r7520f88 r28d7d35  
    1 import { Component, OnInit, Inject } from '@angular/core';
     1import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
    22import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
    33import { IPharmacy } from '../../shared/interfaces';
     4import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
     5import { HttpClient } from '@angular/common/http';
    46
    57@Component({
    … …  
    1012export class PharmacyDialogComponent implements OnInit {
    1113  pharmacy: IPharmacy;
     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<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
     23  constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
    1424    this.pharmacy = data;
     25    if(this.pharmacy) {
     26      this.addMarkers();
     27    }
    1528  }
    1629
    1730  ngOnInit(): void {
     31  }
     32
     33  addMarkers() {
     34    this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+this.pharmacy?.location+'&street='+this.pharmacy?.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/pharmacy-icon.png'
     42            })
     43          }).bindPopup("Аптека: "+this.pharmacy?.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);
    1851  }
    1952
    … …  
    2255  }
    2356
     57
    2458}

  • Farmatiko/ClientApp/src/app/dialogs/worker-dialog/worker-dialog.component.css

    r7520f88 r28d7d35  
     1button {
     2    float: right;
     3}

  • Farmatiko/ClientApp/src/app/dialogs/worker-dialog/worker-dialog.component.html

    r7520f88 r28d7d35  
    1 <h3>Повеќе инфо</h3>
     1<h3>Повеќе информации</h3>
    22<br>
    3 <p>ИД: {{worker.id}}</p>
    4 <p>Име: {{worker.name}}</p>
    5 <p>Гранка: {{worker.branch}}</p>
    6 <p>Титула: {{worker.title}}</p>
    7 <br>
    8 <p>Институција: {{worker.facility.name}}</p>
    9 <p>{{worker.facility.municipality}}</p>
    10 <p>{{worker.facility.type}}</p>
    11 <br>
    12 <p><a (click)="close()">Затвори</a></p>
     3<table class="table table-striped">
     4    <tbody>
     5        <tr>
     6            <td>Име</td>
     7            <td>{{worker?.name}}</td>
     8        </tr>
     9        <tr>
     10            <td>Гранка</td>
     11            <td>{{worker?.branch}}</td>
     12        </tr>
     13        <tr>
     14            <td>Титула</td>
     15            <td>{{worker?.title}}</td>
     16        </tr>
     17    </tbody>
     18    <br>
     19    <tbody *ngIf="worker?.facility">
     20        <tr>
     21            <td>Институција</td>
     22            <td>{{worker?.facility?.name}}</td>
     23        </tr>
     24        <tr *ngIf="isExpanded">
     25            <td>Општина</td>
     26            <td>{{worker?.facility?.municipality}}</td>
     27        </tr>
     28        <tr *ngIf="isExpanded">
     29            <td>Тип</td>
     30            <td>{{worker?.facility?.type}}</td>
     31        </tr>
     32        <tr *ngIf="isExpanded">
     33            <td>Адреса</td>
     34            <td>{{worker.facility?.address}}</td>
     35        </tr>
     36        <tr *ngIf="isExpanded">
     37            <td>Е-пошта</td>
     38            <td>{{worker.facility?.email}}</td>
     39        </tr>
     40        <tr *ngIf="isExpanded">
     41            <td>Телефон</td>
     42            <td>{{worker.facility?.phone}}</td>
     43        </tr>
     44    </tbody>
     45    <tbody *ngIf="!worker?.facility">
     46        <tr>
     47            <td>Институција</td>
     48            <td>Нема податок</td>
     49        </tr>
     50        <tr *ngIf="isExpanded">
     51            <td>Општина</td>
     52            <td>Нема податок</td>
     53        </tr>
     54        <tr *ngIf="isExpanded">
     55            <td>Тип</td>
     56            <td>Нема податок</td>
     57        </tr>
     58        <tr *ngIf="isExpanded">
     59            <td>Адреса</td>
     60            <td>Нема податок</td>
     61        </tr>
     62        <tr *ngIf="isExpanded">
     63            <td>Е-пошта</td>
     64            <td>Нема податок</td>
     65        </tr>
     66        <tr *ngIf="isExpanded">
     67            <td>Телефон</td>
     68            <td>Нема податок</td>
     69        </tr>
     70    </tbody>
     71</table>
     72<button mat-icon-button color="primary" *ngIf="!isExpanded" (click)="toggleExpansion()" style="min-width: 100%">
     73    <mat-icon>expand_more</mat-icon>
     74</button>
     75<button mat-icon-button color="primary" *ngIf="isExpanded" (click)="toggleExpansion()" style="min-width: 100%">
     76    <mat-icon>expand_less</mat-icon>
     77</button>
     78<p><button mat-button color="primary" (click)="close()">Затвори</button></p>

  • Farmatiko/ClientApp/src/app/dialogs/worker-dialog/worker-dialog.component.ts

    r7520f88 r28d7d35  
    1010export class WorkerDialogComponent implements OnInit {
    1111  worker: IHealthcareWorkers;
     12  isExpanded: boolean = false;
    1213
    1314  constructor(private dialogRef: MatDialogRef<WorkerDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
    … …  
    2223  }
    2324
     25  toggleExpansion() {
     26    this.isExpanded = !this.isExpanded;
     27  }
     28
    2429}
Note: See TracChangeset for help on using the changeset viewer.