All files / src/app/components/themes-list themes-list.component.html

98.94% Statements 94/95
100% Branches 10/10
100% Functions 6/6
98.11% Lines 52/53

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 8568x   21594x         279x     68x       68x 68x 68x 43188x 68x 43188x 68x       227x 107805x 107578x 227x 107805x     107578x 107578x 72x     28x   227x 127x   227x 227x 107578x 107578x 28x         227x 199x       227x 107578x 48025x 97x 97x 227x 107578x 48871x 201x   227x 4918x 31x   227x 107578x 47928x 19185x 82x   97x 227x   68x   70x 70x   68x  
<p-table #dt1 [value]="graphThemes" [paginator]="true" [rows]="5" [rowsPerPageOptions]="[5, 10]"
    [showCurrentPageReport]="true" currentPageReportTemplate="{first} - {last} of {totalRecords} phases"
    [rowHover]="true" emptymessage="No graph themes to display" [globalFilterFields]="['name', 'signal_id']">
    <ng-template pTemplate="caption">
        <div class="columns">
            <div class="column is-flex is-justify-content-right">
                <span>
                    <input id="filterInput" class="input" type="text" (input)="dt1.filterGlobal(this.getFilter($event), 'contains')" placeholder="Filter" />
                </span>
            </div>
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
            <th pSortableColumn="signal_id">Signal <p-sortIcon field="signal_id"></p-sortIcon></th>
            <th>Style</th>
            <th *ngIf="canBeActive">Active</th>
            <th></th>
            <th *ngIf="canBeActive"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-theme let-i="rowIndex">
        <tr>
            <td>
                {{ theme.name }}
                <i *ngIf="theme.created_by_user" class="pi pi-crown icon-small" title="Created by user"></i>
            </td>
            <td>{{ theme.signal_id }}</td>
            <td>
                <div class="preview">
                    <span [ngStyle]="{'color': theme.value_color}" class="preview" title="Value line">
                        @if (theme.value_line_style === "dotted") {
                            <i class="pi pi-ellipsis-h"></i>
                        }
                        @else if(theme.value_line_style === "dashed") {
                            ---
                        }
                        @else {
                            <i class="pi pi-minus"></i>
                        }
                    </span>
                    |
                    <span [ngStyle]="{'color': theme.forced_value_color}" class="preview" title="Forced value line">
                        @if (theme.forced_value_line_style === "dotted") {
                            <i class="pi pi-ellipsis-h"></i>
                        }
                        @else if(theme.forced_value_line_style === "dashed") {
                            ---
                        }
                        @else {
                            <i class="pi pi-minus"></i>
                        }
                    </span>
                </div>
            </td>
            <td *ngIf="canBeActive">
                <p-toggleswitch [(ngModel)]="theme.active_for_user" [disabled]="!theme.in_user_library"
                    (onChange)="handleThemeActivation($event, theme)"></p-toggleswitch>
            </td>
            <td>
                @if (theme.in_user_library) {
                <p-button icon="pi pi-heart" [rounded]="true" size="small"
                    (onClick)="handleThemeFavoriting(theme, false)"></p-button>
                }
                @else {
                <p-button icon="pi pi-heart" [rounded]="true" size="small" outlined="true"
                    (onClick)="handleThemeFavoriting(theme, true)"></p-button>
                }
            </td>
            <td *ngIf="canBeActive">
                @if (theme.created_by_user) {
                <p-button icon="pi pi-pen-to-square" [rounded]="true" size="small" [text]="true"
                    (onClick)="editTheme(theme.id)" />
                }
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr>
            <td colspan="6">No graph themes to display.</td>
        </tr>
    </ng-template>
</p-table>