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 8574x   23524x         279x     74x       74x 74x 74x 47048x 74x 47048x 74x       246x 118506x 118260x 246x 118506x     118260x 118260x 79x     28x   246x 139x   246x 246x 118260x 118260x 28x         246x 218x       246x 118260x 53150x 106x 106x 246x 118260x 54054x 219x   246x 5076x 32x   246x 118260x 53044x 20935x 88x   106x 246x   74x   76x 76x   74x  
<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>