source: Farmatiko/ClientApp/src/app/dashboard/dashboard.component.html@ a6bbad1

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
      <div class="container">
        <a class="navbar-brand" [routerLink]="['/dashboard']"><img src="../../assets/logo.png"></a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target=".navbar-collapse"
                aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
          <ul class="navbar-nav flex-grow">
            <li>Logged as  <!--{{head.Name}}--> </li>
          </ul>
        </div>
        
        <button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="openDialog()"><mat-icon>person_add</mat-icon>View homepage</button>
          <button mat-menu-item (click)="test()"><mat-icon>directions</mat-icon>Go to homepage</button>
        </mat-menu>
      </div>
    </nav>
</header>

<mat-tab-group mat-stretch-tabs>
  <mat-tab class="tab" label="Мои аптеки"> 
  <div class="wrapper">
    <div class="header">
    <h2>Мои аптеки</h2>
    <p *ngIf="!mypharmacies"><em>Loading...</em></p>
    </div>
    <table class='table table-striped table-bordered table-sm' cellspacing="0" width="100%" aria-labelledby="tableLabel" *ngIf="true">
      <thead>
        <tr>
          <th>Име</th>
          <th>Локација</th>
          <th>Адреса</th>
          <th>Работи 24/7</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let pharmacies of mypharmacies">
          <td>{{pharmacies.name}}</td>
          <td>{{pharmacies.location}}</td>
          <td>{{pharmacies.address}}</td>
          <td>{{pharmacies.workAllTime}}</td>
          <td><a (click)="works24hrs(pharmacies)">Работи 24/7</a> | <a (click)="doesntWork24hrs(pharmacies)">Не работи 24/7</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  </mat-tab>
  <mat-tab class="tab" label="Сите аптеки"> 
  <div class="wrapper">
    <div class="header">
    <h2>Сите аптеки</h2>
    <mat-form-field>
      <input matInput (keyup)="applyFilterPharmacies($event.target.value)" placeholder="Пронајди аптека">
    </mat-form-field>
    </div>
      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
        <ng-container matColumnDef="Име">a
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.name}} </td>
        </ng-container>
    
        <ng-container matColumnDef="Локација">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Локација </th>
          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.location}} </td>
        </ng-container>
      
        <ng-container matColumnDef="Адреса">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Адреса </th>
          <td mat-cell *matCellDef="let pharmacies"> {{pharmacies.address}} </td>
        </ng-container>

        <ng-container matColumnDef="Actions">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
          <td mat-cell *matCellDef="let pharmacies"> <a (click)="claimPharmacy(pharmacies)">Claim Pharmacy</a> </td>
        </ng-container>
  
          <tr mat-header-row *matHeaderRowDef="displayedColumnsPharmacies"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumnsPharmacies;"></tr>
      </table>
      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
    </div>
    </mat-tab>
  </mat-tab-group>

  <div class="statusbar">{{status}}</div>

<div class="wrapper">
    <div class="header">
    <h2>Достапни лекови</h2>
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Пронајди лек">
    </mat-form-field>
      </div>
      <table [dataSource]="dataSource" mat-table matSort class="mat-elevation-z8">
        <ng-container matColumnDef="Име">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Име </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.name}} </td>
        </ng-container>
    
        <ng-container matColumnDef="Јачина">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Јачина </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.strength}} </td>
        </ng-container>
      
        <ng-container matColumnDef="Форма">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Форма </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.form}} </td>
        </ng-container>
        
        <ng-container matColumnDef="Начин на издавање">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Начин на издавање </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.wayOfIssuing}} </td>
        </ng-container>
    
        <ng-container matColumnDef="Производител">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Производител </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.manufacturer}} </td>
        </ng-container>
      
        <ng-container matColumnDef="Цена">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Цена </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.price}} </td>
        </ng-container>
  
        <ng-container matColumnDef="Пакување">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Пакување </th>
          <td mat-cell *matCellDef="let mymedicines"> {{mymedicines.packaging}} </td>
        </ng-container>
  
        <ng-container matColumnDef="Actions">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
          <td mat-cell *matCellDef="let mymedicines"> <a (click)="medicineExists(mymedicines)">Exists</a> | <a (click)="medicineDoesntSell(mymedicines)">Doesnt sell</a> </td>
        </ng-container>
  
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 100]"></mat-paginator>
</div>