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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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>
Note: See TracChangeset for help on using the changeset viewer.