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   22034x         279x     72x       72x 72x 72x 44068x 72x 44068x 72x       239x 110331x 110092x 239x 110331x     110092x 110092x 76x     28x   239x 135x   239x 239x 110092x 110092x 28x         239x 211x       239x 110092x 49321x 103x 103x 239x 110092x 50060x 213x   239x 4986x 31x   239x 110092x 49218x 19657x 86x   103x 239x   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>