webnaplo-gulbaba-frontend/src/app/maintenance/list-all-maintenances/list-all-maintenances.component.html

<div class="ui main container">
    <h1 class="ui dividing header">Éves karbantartási feladatok</h1>
    <div class="ui two item stackable tabs menu">
        <a class="item" [class.active]="year==2018" [routerLink]="['/karbantartas/teljes-lista/2018']">2018</a>
        <a class="item" [class.active]="year==2019" [routerLink]="['/karbantartas/teljes-lista/2019']">2019</a>
        <a class="item" [class.active]="year==2020" [routerLink]="['/karbantartas/teljes-lista/2020']">2020</a>
    </div>
    <div class="ui raised segments">
        <div class="ui segment" *ngFor="let group of maintenances">
            <table class="ui celled striped selectable table">
                <thead>
                <tr>
                    <th colspan="3">
                        {{group.name}}
                    </th>
                </tr>
                </thead>
                <tbody>

                <tr *ngFor="let device of group.devices">
                    <td class="collapsing-off">{{device.name}}</td>
                    <td>{{device.workDescription}}</td>
                    <td>
                        <div class="date-card-holder">
                            <ng-container *ngFor="let task of device.tasks">
                                <div class="date-card" [ngClass]="dateCardClass(task)">
                                    <a *ngIf="hasPdf(task)" title="PDF letöltés"
                                       [href]="maintenancePdfUrl(task)" target="_blank">
                                        <i class="file pdf outline icon"></i>
                                    </a>
                                    <i *ngIf="!hasPdf(task)" class="icon {{taskIcon(task)}}"></i>
                                    <a *ngIf="canModify()" [routerLink]="['/karbantartas/szerkesztes', year, task.hash]"
                                       title="Szerkesztés">{{task?.shouldStartAt}}</a>
                                    <ng-container *ngIf="!canModify()">{{task?.shouldStartAt}}</ng-container>
                                </div>
                            </ng-container>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>