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 8572x   22202x         279x     72x       72x 72x 72x 44404x 72x 44404x 72x       243x 110469x 110226x 243x 110469x     110226x 110226x 78x     28x   243x 137x   243x 243x 110226x 110226x 28x         243x 215x       243x 110226x 49375x 103x 103x 243x 110226x 50081x 215x   243x 5032x 33x   243x 110226x 49272x 19663x 86x   103x 243x   72x   74x 74x   72x  
<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>