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 8594x   26792x         279x     94x       94x 94x 94x 53584x 94x 53584x 94x       298x 130932x 130634x 298x 130932x     130634x 130634x 97x     28x   298x 173x   298x 298x 130634x 130634x 28x         298x 270x       298x 130634x 58610x 130x 130x 298x 130634x 59168x 267x   298x 6149x 36x   298x 130634x 58480x 23487x 107x   130x 298x   94x   96x 96x   94x  
<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>