pojazdy.component.html

<app-sidebar></app-sidebar>
<div style="margin-left: 10%;">
<div class="zawartosc">
  <div class="row">

    <div class="col-md-12">

      <br>
      <h1>Baza pojazdów</h1>
    </div>

  </div>
  <div class="row">
    <div class="col-md-11">
      <p>Poniżej znajduje się baza pojazdów w danej fimie.
        <button type="button" id="add" name="submit" class="btn btn-success pull-right"
                mat-raised-button (click)="openDialog()"><img class="icons" alt="" src="../assets/icons8-add-32.png">
        </button>
        <button type="button" id="print" name="submit" class="btn btn-info pull-right"
                mat-raised-button (click)="openDialog3()"><img class="icons" alt="" src="../assets/icons8-print-32.png">
        </button>
      </p>
      <hr>
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
      <div class="mat-elevation-z8">
        <table mat-table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>
              <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()"
                            [aria-label]="checkboxLabel()">
              </mat-checkbox>
            </th>
            <td mat-cell *matCellDef="let row">
              <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null"
                            [checked]="selection.isSelected(row)"
                            [aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </td>
          </ng-container>
          <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No.</th>
            <td mat-cell *matCellDef="let element"> {{element.position}} </td>
          </ng-container>

          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Typ </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>


          <ng-container matColumnDef="marka">
            <th mat-header-cell *matHeaderCellDef> Marka</th>
            <td mat-cell *matCellDef="let element"> {{element.marka}} </td>
          </ng-container>


          <ng-container matColumnDef="regMod">
            <th mat-header-cell *matHeaderCellDef> Numer rejestracyjny</th>
            <td mat-cell *matCellDef="let element"> {{element.regMod}} </td>
          </ng-container>

          <ng-container matColumnDef="capacity">
            <th mat-header-cell *matHeaderCellDef> Pojemność</th>
            <td mat-cell *matCellDef="let element"> {{element.capacity}} </td>
          </ng-container>

          <ng-container matColumnDef="os">
            <th mat-header-cell *matHeaderCellDef> Osie</th>
            <td mat-cell *matCellDef="let element"> {{element.os}} </td>
          </ng-container>

          <ng-container matColumnDef="year">
            <th mat-header-cell *matHeaderCellDef> Rok produkcji.</th>
            <td mat-cell *matCellDef="let element"> {{element.year}} </td>
          </ng-container>

          <ng-container matColumnDef="dateBuy">
            <th mat-header-cell *matHeaderCellDef> Data nabycia pojazdu</th>
            <td mat-cell *matCellDef="let element"> {{element.dateBuy}} </td>
          </ng-container>

          <ng-container matColumnDef="dateLook">
            <th mat-header-cell *matHeaderCellDef> Data przeglądu</th>
            <td mat-cell *matCellDef="let element"> {{element.dateLook}} </td>
          </ng-container>

          <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef> Status</th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
          </ng-container>



          <ng-container matColumnDef="edit">
            <th mat-header-cell *matHeaderCellDef> Edytuj </th>
            <td mat-cell *matCellDef="let row"><button class="btn btn-warning" (click)="openDialog2()" ><img class="icons" alt="" src="../assets/icons8-edit-32.png"></button></td>
          </ng-container>

          <ng-container matColumnDef="delete">
            <th mat-header-cell *matHeaderCellDef> Usuń </th>
            <td mat-cell *matCellDef="let row"><button class="btn btn-danger" (click)="openDialog1()"><img class="icons" alt="" src="../assets/icons8-delete-bin-32.png"></button></td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">

          </tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
      </div>

    </div>
  </div>
</div>
  </div>