| 1 | <div class="flex flex-col justify-center items-center">
|
|---|
| 2 | <div class="w-full flex flex-col justify-center items-center p-10">
|
|---|
| 3 | <h1 class="text-3xl p-5">Create new fine</h1>
|
|---|
| 4 | <div class="w-1/3">
|
|---|
| 5 | <form (ngSubmit)="onSubmit($event)" class="flex flex-wrap gap-x-5" [formGroup]="fineForm">
|
|---|
| 6 | <mat-form-field>
|
|---|
| 7 | <mat-label>Iznos</mat-label>
|
|---|
| 8 | <input formControlName="iznos" matInput placeholder="1000" value="" type="number">
|
|---|
| 9 | </mat-form-field>
|
|---|
| 10 |
|
|---|
| 11 | <mat-checkbox class="w-1/3" formControlName="plateno">Plateno</mat-checkbox>
|
|---|
| 12 |
|
|---|
| 13 | <mat-form-field>
|
|---|
| 14 | <mat-label>Dokument</mat-label>
|
|---|
| 15 | <input formControlName="dokument" matInput placeholder="DC-1234" value="" type="text">
|
|---|
| 16 | </mat-form-field>
|
|---|
| 17 |
|
|---|
| 18 | <mat-form-field (click)="onClick()" [appearance]="'outline'">
|
|---|
| 19 | <mat-label>Select patnik (if is registered)</mat-label>
|
|---|
| 20 | <mat-select formControlName="patnikId">
|
|---|
| 21 | @for (passenger of passengers; track passenger.email) {
|
|---|
| 22 | <mat-option [value]="passenger.id">{{ passenger.name }} -> {{ passenger.email }}</mat-option>
|
|---|
| 23 | }
|
|---|
| 24 | </mat-select>
|
|---|
| 25 | </mat-form-field>
|
|---|
| 26 |
|
|---|
| 27 | <mat-form-field>
|
|---|
| 28 | <mat-label>Telefon</mat-label>
|
|---|
| 29 | <input formControlName="telefon" matInput placeholder="07x xxx xxx" value="" type="text">
|
|---|
| 30 | </mat-form-field>
|
|---|
| 31 |
|
|---|
| 32 | <mat-form-field>
|
|---|
| 33 | <mat-label>Adresa</mat-label>
|
|---|
| 34 | <input formControlName="adresa" matInput placeholder="ul. Jane Sandanski" value="" type="text">
|
|---|
| 35 | </mat-form-field>
|
|---|
| 36 |
|
|---|
| 37 | <mat-form-field>
|
|---|
| 38 | <mat-label>Ime</mat-label>
|
|---|
| 39 | <input formControlName="ime" matInput placeholder="Zoran Stojkovski" value="" type="text">
|
|---|
| 40 | </mat-form-field>
|
|---|
| 41 |
|
|---|
| 42 | <button class="w-3/4" type="submit" mat-flat-button>Create new fine</button>
|
|---|
| 43 | </form>
|
|---|
| 44 | </div>
|
|---|
| 45 | </div>
|
|---|
| 46 |
|
|---|
| 47 | <div class="relative overflow-x-auto">
|
|---|
| 48 | <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
|---|
| 49 | <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
|---|
| 50 | <tr>
|
|---|
| 51 | <th scope="col" class="px-6 py-3">#</th>
|
|---|
| 52 | <th scope="col" class="px-6 py-3">Conductor</th>
|
|---|
| 53 | <th scope="col" class="px-6 py-3">Passenger</th>
|
|---|
| 54 | <th scope="col" class="px-6 py-3">Date Created</th>
|
|---|
| 55 | <th scope="col" class="px-6 py-3">Payed</th>
|
|---|
| 56 | <th scope="col" class="px-6 py-3">Date Payed</th>
|
|---|
| 57 |
|
|---|
| 58 | </tr>
|
|---|
| 59 | </thead>
|
|---|
| 60 | <tbody>
|
|---|
| 61 |
|
|---|
| 62 | @for (fine of fines; track fine.id) {
|
|---|
| 63 | <tr>
|
|---|
| 64 | <td class="px-6 py-4">
|
|---|
| 65 | {{ fine.id }}
|
|---|
| 66 | </td>
|
|---|
| 67 | <td class="px-6 py-4">{{ fine.kondukter.name }}</td>
|
|---|
| 68 | <td class="px-6 py-4">{{ fine.ime }}{{ fine.patnik?.name }}</td>
|
|---|
| 69 | <td class="px-6 py-4">{{ fine.dateCreated }}</td>
|
|---|
| 70 | <td class="px-6 py-4">{{ fine.plateno }}</td>
|
|---|
| 71 | <td class="px-6 py-4">{{ fine.datePayed || 'not payed' }}</td>
|
|---|
| 72 | </tr>
|
|---|
| 73 | }
|
|---|
| 74 | </tbody>
|
|---|
| 75 | </table>
|
|---|
| 76 | </div>
|
|---|
| 77 |
|
|---|
| 78 | </div>
|
|---|
