Ignore:
Timestamp:
07/27/20 23:36:14 (4 years ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
e42f61a
Parents:
d2e69be
Message:

Handled REST API calls, searchbars and paginators implemented, overall frontend improvment

Location:
Farmatiko/ClientApp
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • Farmatiko/ClientApp/package-lock.json

    rd2e69be ref1219a  
    26372637      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
    26382638    },
     2639    "angular-rename": {
     2640      "version": "1.0.7",
     2641      "resolved": "https://registry.npmjs.org/angular-rename/-/angular-rename-1.0.7.tgz",
     2642      "integrity": "sha512-exQd1ASkjHENW+b3dfF90Vsik4GQdiaGxhUKx8/EHPcWOeGDDSCHslWxcehYgQb7YfOe47Z4f22PBIIvldesxg==",
     2643      "requires": {
     2644        "fs": "0.0.1-security",
     2645        "path": "^0.12.7"
     2646      }
     2647    },
    26392648    "ansi-colors": {
    26402649      "version": "3.2.4",
    … …  
    41014110        }
    41024111      }
     4112    },
     4113    "countup.js": {
     4114      "version": "2.0.6",
     4115      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.0.6.tgz",
     4116      "integrity": "sha512-pcOaDNjW8dz3V5hCZTIwQpRDGm6tdxz0BRbcKEgCAr+j6jbJcdDdnumr4DpCSjhih7s1m/cWYZNC5MuFeSflFA=="
    41034117    },
    41044118    "coverage-istanbul-loader": {
    … …  
    55565570      }
    55575571    },
     5572    "fs": {
     5573      "version": "0.0.1-security",
     5574      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
     5575      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
     5576    },
    55585577    "fs-extra": {
    55595578      "version": "7.0.1",
    … …  
    80428061      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
    80438062      "dev": true
     8063    },
     8064    "ngx-countup": {
     8065      "version": "7.3.1",
     8066      "resolved": "https://registry.npmjs.org/ngx-countup/-/ngx-countup-7.3.1.tgz",
     8067      "integrity": "sha512-+nw3Axg/5R/09hjG1uOyOItdIxAxv8V1GNz0oR8MlB27tB5sH9aknCUPJiEfdPAGSCfMfG7nsURlz4WAoIDrhA==",
     8068      "requires": {
     8069        "countup.js": "^2.0.5",
     8070        "tslib": "^1.9.0"
     8071      }
    80448072    },
    80458073    "nice-try": {
    … …  
    89779005      "dev": true
    89789006    },
     9007    "path": {
     9008      "version": "0.12.7",
     9009      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
     9010      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
     9011      "requires": {
     9012        "process": "^0.11.1",
     9013        "util": "^0.10.3"
     9014      },
     9015      "dependencies": {
     9016        "inherits": {
     9017          "version": "2.0.3",
     9018          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
     9019          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
     9020        },
     9021        "util": {
     9022          "version": "0.10.4",
     9023          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
     9024          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
     9025          "requires": {
     9026            "inherits": "2.0.3"
     9027          }
     9028        }
     9029      }
     9030    },
    89799031    "path-browserify": {
    89809032      "version": "0.0.1",
    … …  
    92629314      "version": "0.11.10",
    92639315      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
    9264       "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
    9265       "dev": true
     9316      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
    92669317    },
    92679318    "process-nextick-args": {

  • Farmatiko/ClientApp/package.json

    rd2e69be ref1219a  
    2525    "@angular/router": "10.0.4",
    2626    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
     27    "angular-rename": "^1.0.7",
    2728    "aspnet-prerendering": "^3.0.1",
    2829    "big-integer": "^1.6.48",
    … …  
    3031    "core-js": "^3.3.3",
    3132    "jquery": "3.4.1",
     33    "ngx-countup": "^7.3.1",
    3234    "oidc-client": "^1.9.1",
    3335    "popper.js": "^1.16.0",

  • Farmatiko/ClientApp/src/app/admin/admin.component.html

    rd2e69be ref1219a  
    1818    </nav>
    1919</header>
    20 <mat-tab-group>
     20<mat-tab-group mat-stretch-tabs>
    2121      <mat-tab label="Claiming requests">
    2222        <div class="wrapper">

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

    rd2e69be ref1219a  
    11.wrapper {
    2   display: flex;
    3   justify-content: space-around;
    4   padding-top: 50px;
     2    display: flex;
     3    flex-direction: column;
     4    max-height: 500px;
     5    min-width: 300px;
    56}
    6 
    7 nav {
    8   float: right;
     7 
     8.mat-table {
     9    overflow: auto;
     10    max-height: 500px;
     11}
     12 
     13.header {
     14    min-height: 64px;
     15    padding: 8px 24px 0;
     16}
     17 
     18.mat-form-field {
     19    font-size: 14px;
     20    width: 100%;
    921}
    1022
    1123table {
    12   margin-top: 25px;
     24  width: 100%;
    1325}
     26
     27h2 {
     28    padding: 1em 0;
     29}

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

    rd2e69be ref1219a  
     1
    12<app-nav-menu></app-nav-menu>
    23
    3 <div class="wrapper">
    4     <div>
     4<mat-tab-group mat-stretch-tabs>
     5  <mat-tab class="tab" label="Здравствени установи">
     6  <div class="wrapper">
     7    <div class="header">
    58    <h2>Здравствени установи</h2>
    6     <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
    7     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="facilities">
    8         <thead>
    9             <tr>
    10             <th>Име</th>
    11             <th>Општина</th>
    12             <th>Адреса</th>
    13             <th>Тип на установа</th>
    14             <th>Е-пошта</th>
    15             <th>Телефон</th>
    16             </tr>
    17         </thead>
    18         <tbody>
    19           <tr *ngFor="let facility of facilities">
    20             <td>{{ facility.Name }}</td>
    21             <!--
    22   <td>{{ facility.Municipality }}</td>
    23   <td>{{ facility.Address }}</td>
    24   <td>{{ facility.Type }}</td>
    25   <td>{{ facility.Email }}</td>
    26   <td>{{ facility.Phone }}</td>-->
    27             <td>facility.Municipality</td>
    28             <td></td>
    29             <td></td>
    30             <td></td>
    31             <td>
    32              
    33             </td>
     9  <mat-form-field>
     10    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди установа">
     11  </mat-form-field>
     12    </div>
     13    <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     14      <ng-container matColumnDef="Име">
     15        <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     16        <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     17      </ng-container>
     18 
     19      <ng-container matColumnDef="Општина">
     20        <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     21        <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     22      </ng-container>
     23   
     24      <ng-container matColumnDef="Адреса">
     25        <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     26        <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     27      </ng-container>
     28     
     29      <ng-container matColumnDef="Тип">
     30        <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     31        <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     32      </ng-container>
     33 
     34      <ng-container matColumnDef="Е-пошта">
     35        <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     36        <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     37      </ng-container>
     38   
     39      <ng-container matColumnDef="Телефон">
     40        <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     41        <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     42      </ng-container>
    3443
    35           </tr>
    36         </tbody>
     44        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     45        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    3746    </table>
    38     <nav aria-label="Page navigation example">
    39         <ul class="pagination">
    40           <li class="page-item">
    41             <a class="page-link" href="#" aria-label="Previous">
    42               <span aria-hidden="true">&laquo;</span>
    43               <span class="sr-only">Previous</span>
    44             </a>
    45           </li>
    46           <li class="page-item"><a class="page-link" href="#">1</a></li>
    47           <li class="page-item"><a class="page-link" href="#">2</a></li>
    48           <li class="page-item"><a class="page-link" href="#">3</a></li>
    49           <li class="page-item">
    50             <a class="page-link" href="#" aria-label="Next">
    51               <span aria-hidden="true">&raquo;</span>
    52               <span class="sr-only">Next</span>
    53             </a>
    54           </li>
    55         </ul>
    56       </nav>
     47    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     48  </div>
     49  </mat-tab>
     50  <mat-tab class="tab" label="Здравствени работници">
     51  <div class="wrapper">
     52    <div class="header">
     53    <h2>Здравствени работници</h2>
     54    <mat-form-field>
     55      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди работник">
     56    </mat-form-field>
    5757    </div>
    58     <div>
    59     <h2>Здравствени работници</h2>
    60     <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
    61     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    62         <thead>
    63         <tr>
    64             <th>Placeholder1</th>
    65             <th>Placeholder2</th>
    66             <th>Placeholder3</th>
    67             <th>Placeholder4</th>
    68         </tr>
    69         </thead>
    70         <tbody>
    71         <tr *ngFor="">
    72             <td>data1</td>
    73             <td>data2</td>
    74             <td>data3</td>
    75             <td>data4</td>
    76         </tr>
    77         </tbody>
    78     </table>
    79     <nav aria-label="Page navigation example">
    80         <ul class="pagination">
    81           <li class="page-item">
    82             <a class="page-link" href="#" aria-label="Previous">
    83               <span aria-hidden="true">&laquo;</span>
    84               <span class="sr-only">Previous</span>
    85             </a>
    86           </li>
    87           <li class="page-item"><a class="page-link" href="#">1</a></li>
    88           <li class="page-item"><a class="page-link" href="#">2</a></li>
    89           <li class="page-item"><a class="page-link" href="#">3</a></li>
    90           <li class="page-item">
    91             <a class="page-link" href="#" aria-label="Next">
    92               <span aria-hidden="true">&raquo;</span>
    93               <span class="sr-only">Next</span>
    94             </a>
    95           </li>
    96         </ul>
    97       </nav>
     58      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     59        <ng-container matColumnDef="Име">
     60          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     61          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     62        </ng-container>
     63   
     64        <ng-container matColumnDef="Општина">
     65          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     66          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     67        </ng-container>
     68     
     69        <ng-container matColumnDef="Адреса">
     70          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     71          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     72        </ng-container>
     73       
     74        <ng-container matColumnDef="Тип">
     75          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     76          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     77        </ng-container>
     78   
     79        <ng-container matColumnDef="Е-пошта">
     80          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     81          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     82        </ng-container>
     83     
     84        <ng-container matColumnDef="Телефон">
     85          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     86          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     87        </ng-container>
     88 
     89          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     90          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     91      </table>
     92      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
    9893    </div>
    99 </div>
     94    </mat-tab>
     95  </mat-tab-group>

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

    rd2e69be ref1219a  
    1 import { Component, Inject } from '@angular/core';
     1import { Component, OnInit, ViewChild, Inject } from '@angular/core';
    22import { HttpClient } from '@angular/common/http';
    33import { HealthFacilities } from '../models/HealthFacilities';
     4import { MatTableDataSource } from '@angular/material/table';
     5import { MatPaginator } from '@angular/material/paginator';
     6import { MatSort } from '@angular/material/sort';
     7
    48@Component({
    59  selector: 'app-counter-component',
    … …  
    711  styleUrls: ['./counter.component.css']
    812})
    9 export class CounterComponent {
     13export class CounterComponent implements OnInit {
    1014  public facilities: HealthFacilities[];
     15  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
     16  dataSource = new MatTableDataSource<HealthFacilities>();
     17
     18  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
     19  @ViewChild(MatSort) sort: MatSort;
    1120
    1221  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    … …  
    1423      this.facilities = result;
    1524      console.log(this.facilities);
     25      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
    1626    }, error => console.error(error));
    1727  }
     28  ngOnInit(): void {
     29  }
     30
     31  ngAfterViewInit(): void {
     32    this.dataSource.paginator = this.paginator;
     33    this.dataSource.sort = this.sort;
     34  }
     35
     36  applyFilter(filterValue: string) {
     37    filterValue = filterValue.trim();
     38    filterValue = filterValue.toLowerCase();
     39    this.dataSource.filter = filterValue;
     40  }
    1841}
    19 /*interface healthFacilities {
    20   Name: string;
    21   Municipality: string;
    22   Address: string;
    23   Type: string;
    24   Email: string;
    25   Phone: string;
    26 }*/
    27 

  • Farmatiko/ClientApp/src/app/dashboard/dashboard.component.css

    rd2e69be ref1219a  
    44.wrapper {
    55    display: flex;
    6     justify-content: space-around;
    7     padding-top: 50px;
     6    flex-direction: column;
     7    max-height: 500px;
     8    min-width: 300px;
    89}
    910 
    10 .wrapper nav {
    11     float: right;
     11.mat-table {
     12    overflow: auto;
     13    max-height: 500px;
    1214}
    1315 
     16.header {
     17    min-height: 64px;
     18    padding: 8px 24px 0;
     19}
     20 
     21.mat-form-field {
     22    font-size: 14px;
     23    width: 100%;
     24}
     25
    1426table {
    15     margin-top: 25px;
     27  width: 100%;
    1628}
     29
     30h2 {
     31    padding: 1em 0;
     32}

  • Farmatiko/ClientApp/src/app/dashboard/dashboard.component.html

    rd2e69be ref1219a  
    22    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    33      <div class="container">
    4         <a class="navbar-brand" [routerLink]="['/']"><img src="../../assets/logo.png"></a>
     4        <a class="navbar-brand" [routerLink]="['/dashboard']"><img src="../../assets/logo.png"></a>
    55        <button class="navbar-toggler"
    66                type="button"
    … …  
    1515          </ul>
    1616        </div>
     17       
     18        <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
     19        <mat-menu #menu="matMenu">
     20          <button mat-menu-item (click)="openDialog()"><mat-icon>person_add</mat-icon>View homepage</button>
     21          <button mat-menu-item (click)="test()"><mat-icon> directions</mat-icon>Go to homepage</button>
     22        </mat-menu>
    1723      </div>
    1824    </nav>
    1925</header>
    20 <main>
    21     <div class="wrapper">
    22     <div>
    23       <h2>Мои аптеки</h2>
    24       <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    25         <thead>
    26           <tr>
    27             <th>Placeholder1</th>
    28             <th>Placeholder2</th>
    29             <th>Placeholder3</th>
    30             <th>Placeholder4</th>
    31           </tr>
    32         </thead>
    33         <tbody>
    34           <tr *ngFor="">
    35             <td>data1</td>
    36             <td>data2</td>
    37             <td>data3</td>
    38             <td>data4</td>
    39           </tr>
    40         </tbody>
    41       </table>
    42       <nav aria-label="Page navigation example">
    43         <ul class="pagination">
    44           <li class="page-item">
    45             <a class="page-link" href="#" aria-label="Previous">
    46               <span aria-hidden="true">&laquo;</span>
    47               <span class="sr-only">Previous</span>
    48             </a>
    49           </li>
    50           <li class="page-item"><a class="page-link" href="#">1</a></li>
    51           <li class="page-item"><a class="page-link" href="#">2</a></li>
    52           <li class="page-item"><a class="page-link" href="#">3</a></li>
    53           <li class="page-item">
    54             <a class="page-link" href="#" aria-label="Next">
    55               <span aria-hidden="true">&raquo;</span>
    56               <span class="sr-only">Next</span>
    57             </a>
    58           </li>
    59         </ul>
    60       </nav>
     26
     27<mat-tab-group mat-stretch-tabs>
     28  <mat-tab class="tab" label="Мои аптеки">
     29  <div class="wrapper">
     30    <div class="header">
     31    <h2>Мои аптеки</h2>
    6132    </div>
    62     <div>
    63       <h2>Сите аптеки</h2>
    64       <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
    65       <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    66         <thead>
    67           <tr>
    68             <th>Placeholder1</th>
    69             <th>Placeholder2</th>
    70             <th>Placeholder3</th>
    71             <th>Placeholder4</th>
    72           </tr>
    73         </thead>
    74         <tbody>
    75           <tr *ngFor="">
    76             <td>data1</td>
    77             <td>data2</td>
    78             <td>data3</td>
    79             <td>data4</td>
    80           </tr>
    81         </tbody>
    82       </table>
    83       <nav aria-label="Page navigation example">
    84         <ul class="pagination">
    85           <li class="page-item">
    86             <a class="page-link" href="#" aria-label="Previous">
    87               <span aria-hidden="true">&laquo;</span>
    88               <span class="sr-only">Previous</span>
    89             </a>
    90           </li>
    91           <li class="page-item"><a class="page-link" href="#">1</a></li>
    92           <li class="page-item"><a class="page-link" href="#">2</a></li>
    93           <li class="page-item"><a class="page-link" href="#">3</a></li>
    94           <li class="page-item">
    95             <a class="page-link" href="#" aria-label="Next">
    96               <span aria-hidden="true">&raquo;</span>
    97               <span class="sr-only">Next</span>
    98             </a>
    99           </li>
    100         </ul>
    101       </nav>
    102     </div>
    103   </div>
    104 
    105   <div>
    106     <h2>Достапни лекови</h2>
    107     <input type="text" class="form-control" name="apteka" placeholder="Пронајди лек">
    10833    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    10934      <thead>
    … …  
    11641      </thead>
    11742      <tbody>
    118         <tr *ngFor="">
     43        <tr *ngFor="let facility of facilities">
    11944          <td>data1</td>
    12045          <td>data2</td>
    … …  
    12449      </tbody>
    12550    </table>
    126     <nav aria-label="Page navigation example">
    127       <ul class="pagination">
    128         <li class="page-item">
    129           <a class="page-link" href="#" aria-label="Previous">
    130             <span aria-hidden="true">&laquo;</span>
    131             <span class="sr-only">Previous</span>
    132           </a>
    133         </li>
    134         <li class="page-item"><a class="page-link" href="#">1</a></li>
    135         <li class="page-item"><a class="page-link" href="#">2</a></li>
    136         <li class="page-item"><a class="page-link" href="#">3</a></li>
    137         <li class="page-item">
    138           <a class="page-link" href="#" aria-label="Next">
    139             <span aria-hidden="true">&raquo;</span>
    140             <span class="sr-only">Next</span>
    141           </a>
    142         </li>
    143       </ul>
    144     </nav>
    14551  </div>
    146 </main>
     52  </mat-tab>
     53  <mat-tab class="tab" label="Сите аптеки">
     54  <div class="wrapper">
     55    <div class="header">
     56    <h2>Сите аптеки</h2>
     57    <mat-form-field>
     58      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
     59    </mat-form-field>
     60    </div>
     61      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     62        <ng-container matColumnDef="Име">
     63          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     64          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     65        </ng-container>
     66   
     67        <ng-container matColumnDef="Општина">
     68          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     69          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     70        </ng-container>
     71     
     72        <ng-container matColumnDef="Адреса">
     73          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     74          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     75        </ng-container>
     76       
     77        <ng-container matColumnDef="Тип">
     78          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     79          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     80        </ng-container>
     81   
     82        <ng-container matColumnDef="Е-пошта">
     83          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     84          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     85        </ng-container>
     86     
     87        <ng-container matColumnDef="Телефон">
     88          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     89          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     90        </ng-container>
     91 
     92          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     93          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     94      </table>
     95      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     96    </div>
     97    </mat-tab>
     98  </mat-tab-group>
     99
     100<div class="wrapper">
     101    <div class="header">
     102    <h2>Достапни лекови</h2>
     103    <mat-form-field>
     104      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
     105    </mat-form-field>
     106    </div>
     107      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     108        <ng-container matColumnDef="Име">
     109          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     110          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     111        </ng-container>
     112   
     113        <ng-container matColumnDef="Општина">
     114          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     115          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     116        </ng-container>
     117     
     118        <ng-container matColumnDef="Адреса">
     119          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     120          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     121        </ng-container>
     122       
     123        <ng-container matColumnDef="Тип">
     124          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     125          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     126        </ng-container>
     127   
     128        <ng-container matColumnDef="Е-пошта">
     129          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     130          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     131        </ng-container>
     132     
     133        <ng-container matColumnDef="Телефон">
     134          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     135          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     136        </ng-container>
     137 
     138          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     139          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     140      </table>
     141      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     142</div>

  • Farmatiko/ClientApp/src/app/dashboard/dashboard.component.ts

    rd2e69be ref1219a  
    1 import { Component, OnInit, Input, ViewChild } from '@angular/core';
     1import { Component, OnInit, ViewChild, Inject, Output, EventEmitter } from '@angular/core';
    22import { Pharmacy } from '../models/Pharmacy';
    33import { MatTableDataSource } from '@angular/material/table';
    44import { MatPaginator } from '@angular/material/paginator';
    55import { MatSort } from '@angular/material/sort';
     6import { HealthFacilities } from '../models/HealthFacilities';
     7import { HttpClient } from '@angular/common/http';;
     8import { MatDialog } from '@angular/material/dialog';
     9import { MatSnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
     10import { Router, RouterModule } from '@angular/router';
     11import { HomeComponent } from '../home/home.component';
    612
    713@Component({
    … …  
    1117})
    1218export class DashboardComponent implements OnInit {
     19  public facilities: HealthFacilities[];
     20  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
     21  dataSource = new MatTableDataSource<HealthFacilities>();
    1322
    14   constructor() { }
     23  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
     24  @ViewChild(MatSort) sort: MatSort;
    1525
    16   ngOnInit(): void { }
     26  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, private dialog: MatDialog, private _snackBar: MatSnackBar, private router: Router) {
     27    http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
     28      this.facilities = result;
     29      console.log(this.facilities);
     30      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
     31    }, error => console.error(error));
     32  }
     33  ngOnInit(): void {
     34  }
     35
     36  ngAfterViewInit(): void {
     37    this.dataSource.paginator = this.paginator;
     38    this.dataSource.sort = this.sort;
     39  }
     40
     41  applyFilter(filterValue: string) {
     42    filterValue = filterValue.trim();
     43    filterValue = filterValue.toLowerCase();
     44    this.dataSource.filter = filterValue;
     45  }
     46  test(): void {
     47    console.log('Snackbar works!');
     48    this.openSnackBar("Are you sure?", "Yes").onAction().subscribe(() => {
     49      this.router.navigate(['/']);
     50    });
     51  }
     52
     53  openDialog():void {
     54    let dialogRef = this.dialog.open(HomeComponent, {
     55      width: '70%'
     56    });
     57    dialogRef.afterClosed().subscribe(result => {
     58      if(result) {
     59        this.openSnackBar("Success", "OK");
     60      }
     61    });
     62  }
     63
     64  openSnackBar(message: string, action: string) : MatSnackBarRef<SimpleSnackBar> {
     65    return this._snackBar.open(message, action, {
     66      duration: 10000,
     67    });
     68  }
    1769}

  • Farmatiko/ClientApp/src/app/fetch-data/fetch-data.component.ts

    rd2e69be ref1219a  
    1212    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
    1313      this.forecasts = result;
     14      console.log(this.forecasts);
    1415    }, error => console.error(error));
    1516  }

  • Farmatiko/ClientApp/src/app/home/home.component.css

    rd2e69be ref1219a  
    11.wrapper {
    22  display: flex;
    3   justify-content: space-around;
    4   padding-top: 50px;
     3  flex-direction: column;
     4  max-height: 500px;
     5  min-width: 300px;
    56}
    67
    7 nav {
    8   float: right;
     8.mat-table {
     9  overflow: auto;
     10  max-height: 500px;
     11}
     12
     13.header {
     14  min-height: 64px;
     15  padding: 8px 24px 0;
     16}
     17
     18.mat-form-field {
     19  font-size: 14px;
     20  width: 100%;
    921}
    1022
    1123table {
    12   margin-top: 25px;
     24width: 100%;
    1325}
     26
     27h2 {
     28  padding: 1em 0;
     29}

  • Farmatiko/ClientApp/src/app/home/home.component.html

    rd2e69be ref1219a  
    11<app-nav-menu></app-nav-menu>
    22
    3 <div class="wrapper">
    4   <div>
     3<mat-tab-group mat-stretch-tabs>
     4  <mat-tab class="tab" label="Лекови">
     5  <div class="wrapper">
     6    <div class="header">
    57    <h2>Лекови</h2>
    6     <input type="text" class="form-control" name="lek" placeholder="Пронајди лек">
    7     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    8       <thead>
    9         <tr>
    10           <th>Placeholder1</th>
    11           <th>Placeholder2</th>
    12           <th>Placeholder3</th>
    13           <th>Placeholder4</th>
    14         </tr>
    15       </thead>
    16       <tbody>
    17         <tr *ngFor="">
    18           <td>data1</td>
    19           <td>data2</td>
    20           <td>data3</td>
    21           <td>data4</td>
    22         </tr>
    23       </tbody>
     8  <mat-form-field>
     9    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
     10  </mat-form-field>
     11    </div>
     12    <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     13      <ng-container matColumnDef="Име">
     14        <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     15        <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     16      </ng-container>
     17 
     18      <ng-container matColumnDef="Општина">
     19        <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     20        <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     21      </ng-container>
     22   
     23      <ng-container matColumnDef="Адреса">
     24        <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     25        <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     26      </ng-container>
     27     
     28      <ng-container matColumnDef="Тип">
     29        <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     30        <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     31      </ng-container>
     32 
     33      <ng-container matColumnDef="Е-пошта">
     34        <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     35        <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     36      </ng-container>
     37   
     38      <ng-container matColumnDef="Телефон">
     39        <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     40        <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     41      </ng-container>
     42
     43        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     44        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    2445    </table>
    25     <nav aria-label="Page navigation example">
    26       <ul class="pagination">
    27         <li class="page-item">
    28           <a class="page-link" href="#" aria-label="Previous">
    29             <span aria-hidden="true">&laquo;</span>
    30             <span class="sr-only">Previous</span>
    31           </a>
    32         </li>
    33         <li class="page-item"><a class="page-link" href="#">1</a></li>
    34         <li class="page-item"><a class="page-link" href="#">2</a></li>
    35         <li class="page-item"><a class="page-link" href="#">3</a></li>
    36         <li class="page-item">
    37           <a class="page-link" href="#" aria-label="Next">
    38             <span aria-hidden="true">&raquo;</span>
    39             <span class="sr-only">Next</span>
    40           </a>
    41         </li>
    42       </ul>
    43     </nav>
     46    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
    4447  </div>
    45   <div>
     48  </mat-tab>
     49  <mat-tab class="tab" label="Аптеки">
     50  <div class="wrapper">
     51    <div class="header">
    4652    <h2>Аптеки</h2>
    47     <input type="text" class="form-control" name="apteka" placeholder="Пронајди аптека">
    48     <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
    49       <thead>
    50         <tr>
    51           <th>Placeholder1</th>
    52           <th>Placeholder2</th>
    53           <th>Placeholder3</th>
    54           <th>Placeholder4</th>
    55         </tr>
    56       </thead>
    57       <tbody>
    58         <tr *ngFor="">
    59           <td>data1</td>
    60           <td>data2</td>
    61           <td>data3</td>
    62           <td>data4</td>
    63         </tr>
    64       </tbody>
    65     </table>
    66     <nav aria-label="Page navigation example">
    67       <ul class="pagination">
    68         <li class="page-item">
    69           <a class="page-link" href="#" aria-label="Previous">
    70             <span aria-hidden="true">&laquo;</span>
    71             <span class="sr-only">Previous</span>
    72           </a>
    73         </li>
    74         <li class="page-item"><a class="page-link" href="#">1</a></li>
    75         <li class="page-item"><a class="page-link" href="#">2</a></li>
    76         <li class="page-item"><a class="page-link" href="#">3</a></li>
    77         <li class="page-item">
    78           <a class="page-link" href="#" aria-label="Next">
    79             <span aria-hidden="true">&raquo;</span>
    80             <span class="sr-only">Next</span>
    81           </a>
    82         </li>
    83       </ul>
    84     </nav>
    85   </div>
    86 </div>
     53    <mat-form-field>
     54      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди аптека">
     55    </mat-form-field>
     56    </div>
     57      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
     58        <ng-container matColumnDef="Име">
     59          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
     60          <td mat-cell *matCellDef="let facilities"> {{facilities.name}} </td>
     61        </ng-container>
     62   
     63        <ng-container matColumnDef="Општина">
     64          <th mat-header-cell *matHeaderCellDef mat-sort-header> Општина </th>
     65          <td mat-cell *matCellDef="let facilities"> {{facilities.municipality}} </td>
     66        </ng-container>
     67     
     68        <ng-container matColumnDef="Адреса">
     69          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
     70          <td mat-cell *matCellDef="let facilities"> {{facilities.address}} </td>
     71        </ng-container>
     72       
     73        <ng-container matColumnDef="Тип">
     74          <th mat-header-cell *matHeaderCellDef mat-sort-header> Тип </th>
     75          <td mat-cell *matCellDef="let facilities"> {{facilities.type}} </td>
     76        </ng-container>
     77   
     78        <ng-container matColumnDef="Е-пошта">
     79          <th mat-header-cell *matHeaderCellDef mat-sort-header> Е-пошта </th>
     80          <td mat-cell *matCellDef="let facilities"> {{facilities.email}} </td>
     81        </ng-container>
     82     
     83        <ng-container matColumnDef="Телефон">
     84          <th mat-header-cell *matHeaderCellDef mat-sort-header> Телефон </th>
     85          <td mat-cell *matCellDef="let facilities"> {{facilities.phone}} </td>
     86        </ng-container>
     87 
     88          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     89          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     90      </table>
     91      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
     92    </div>
     93    </mat-tab>
     94  </mat-tab-group>

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

    rd2e69be ref1219a  
    1 import { Component, OnInit, Input, ViewChild } from '@angular/core';
     1import { Component, OnInit, ViewChild, Inject } from '@angular/core';
     2import { HttpClient } from '@angular/common/http';
     3import { HealthFacilities } from '../models/HealthFacilities';
     4import { MatTableDataSource } from '@angular/material/table';
     5import { MatPaginator } from '@angular/material/paginator';
     6import { MatSort } from '@angular/material/sort';
     7
    28
    39@Component({
    … …  
    612  styleUrls: ['./home.component.css']
    713})
    8 export class HomeComponent {
     14export class HomeComponent implements OnInit {
     15  public facilities: HealthFacilities[];
     16  displayedColumns = ['Име','Општина','Адреса', 'Тип', 'Е-пошта', 'Телефон'];
     17  dataSource = new MatTableDataSource<HealthFacilities>();
     18
     19  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
     20  @ViewChild(MatSort) sort: MatSort;
     21
     22  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
     23    http.get<HealthFacilities[]>(baseUrl + 'HealthFacilities/Get?').subscribe(result => {
     24      this.facilities = result;
     25      console.log(this.facilities);
     26      this.dataSource = new MatTableDataSource<HealthFacilities>(this.facilities);
     27    }, error => console.error(error));
     28  }
     29  ngOnInit(): void {
     30  }
     31
     32  ngAfterViewInit(): void {
     33    this.dataSource.paginator = this.paginator;
     34    this.dataSource.sort = this.sort;
     35  }
     36
     37  applyFilter(filterValue: string) {
     38    filterValue = filterValue.trim();
     39    filterValue = filterValue.toLowerCase();
     40    this.dataSource.filter = filterValue;
     41  }
    942}

  • Farmatiko/ClientApp/src/app/korona/korona.component.css

    rd2e69be ref1219a  
    2727  color: #4ad1e5;
    2828}
     29
     30.pads {
     31  padding: 1em 0;
     32}

  • Farmatiko/ClientApp/src/app/korona/korona.component.html

    rd2e69be ref1219a  
    1212
    1313  </div>
    14   <div class="row text-center">
     14  <div class="row text-center pads">
    1515    <div class="col">
    1616      <div class="counter">
    1717        <i class="fa fa-code fa-2x">0</i>
    1818        <h2 class="timer count-title count-number" data-to="100" data-speed="1500"></h2>
    19         <p class="count-text ">Placeholder1</p>
     19        <p class="count-text ">Вкупно случаи во земјата</p>
    2020      </div>
    2121    </div>
    … …  
    2424        <i class="fa fa-coffee fa-2x">0</i>
    2525        <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
    26         <p class="count-text ">Placeholder2</p>
     26        <p class="count-text ">Активни случаи во земјата</p>
    2727      </div>
    2828    </div>
    … …  
    3131        <i class="fa fa-lightbulb-o fa-2x">0</i>
    3232        <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
    33         <p class="count-text ">Placeholder3</p>
     33        <p class="count-text ">Смртни случаи во земјата</p>
    3434      </div>
    3535    </div>
    … …  
    3838        <i class="fa fa-bug fa-2x">0</i>
    3939        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
    40         <p class="count-text ">Placeholder4</p>
     40        <p class="count-text ">Нови случаи во земјата</p>
    4141      </div>
    4242    </div>
    4343  </div>
     44  <div class="row text-center pads">
     45    <div class="col">
     46      <div class="counter">
     47        <i class="fa fa-bug fa-2x">0</i>
     48        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
     49        <p class="count-text ">Вкупно случаи глобално</p>
     50      </div>
     51    </div>
     52    <div class="col">
     53      <div class="counter">
     54        <i class="fa fa-bug fa-2x">0</i>
     55        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
     56        <p class="count-text ">Активни случаи глобално</p>
     57      </div>
     58    </div>
     59    <div class="col">
     60      <div class="counter">
     61        <i class="fa fa-bug fa-2x">0</i>
     62        <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
     63        <p class="count-text ">Смртни случаи глобално</p>
     64      </div>
     65    </div>
     66    </div>
    4467</div>

  • Farmatiko/ClientApp/src/app/login/login.component.css

    rd2e69be ref1219a  
    2929    display: flex;
    3030    justify-content: center;
     31    text-align: center;
     32    align-items: center;
    3133}
    3234

  • Farmatiko/ClientApp/src/app/models/HealthFacilities.ts

    rd2e69be ref1219a  
    11export class HealthFacilities {
    2   Name: string;
    3   Municipality: string;
    4   Address: string;
    5   Type: string;
    6   Email: string;
    7   Phone: string;
     2  address: string;
     3  createdOn: string;
     4  deletedOn: string;
     5  email: string;
     6  id: number;
     7  municipality: string;
     8  name: string;
     9  phone: string;
     10  type: string;
    811}

  • Farmatiko/ClientApp/src/app/models/Pandemic.ts

    rd2e69be ref1219a  
    11export class Pandemic {
    22  Name: string;
    3   TotalMK: BigInteger;
    4   ActiveMK: BigInteger;
    5   DeathsMK: BigInteger;
    6   NewMK: BigInteger;
    7   TotalGlobal: BigInteger;
    8   DeathsGlobal: BigInteger;
    9   ActiveGlobal: BigInteger;
     3  TotalMK: number;
     4  ActiveMK: number;
     5  DeathsMK: number;
     6  NewMK: number;
     7  TotalGlobal: number;
     8  DeathsGlobal: number;
     9  ActiveGlobal: number;
    1010}
Note: See TracChangeset for help on using the changeset viewer.