All files / src/app/components/theme-builder theme-builder.component.html

89.77% Statements 79/88
70% Branches 7/10
100% Functions 4/4
93.75% Lines 45/48

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 7613222x   48x 48x 48x 26444x 1x     48x   48x 48x 48x       13222x     13222x     26444x       48x   48x 48x   26444x 48x 26444x     48x   48x 48x   26444x 48x 26444x     48x   48x 48x 48x   48x 48x 26444x   1014x 5x 1014x 5x 5x   5x 5x 5x   48x   50x 25430x 50x     48x  
<form [formGroup]="graphThemeForm">
    <div class="field">
        <label class="label" htmlFor="themeName">Name</label>
        <div class="control has-icons-right">
            <input class="input" formControlName="themeName" type="text" id="themeName">
            @if (this.isInvalid('themeName')) {
                <p-message severity="error" size="small" variant="simple">Name of at least 5 characters is required.</p-message>
            }
        </div>
    </div>
    <div class="field">
        <label class="label" htmlFor="targetSignalId">Signal ID</label>
        <div class="control has-icons-right">
            <p-select
                class="signal-select"
                appendTo="body"
                formControlName="targetSignalId"
                [options]="signalIds"
                [filter]="true"
                [virtualScroll]="true"
                [virtualScrollItemSize]="40"
                placeholder="Select a signal"
                id="targetSignalId" />
            @if (this.isInvalid('targetSignalId')) {
                <p-message severity="error" size="small" variant="simple">Signal ID is required.</p-message>
            }
        </div>
    </div>
    <div class="field">
        <label class="label" htmlFor="valueColor">Value styling</label>
        <div class="control has-icons-right line-style">
            <p-colorpicker formControlName="valueColor" />
            <p-select formControlName="valueLineStyle" [options]="lineStyles" placeholder="Select a line style" id="valueLineStyle" />
        </div>
        @if (this.isInvalid('valueLineStyle')) {
            <p-message severity="error" size="small" variant="simple">Line style is required.</p-message>
        }
    </div>
    <div class="field">
        <label class="label" htmlFor="forcedValueColor">Forced value styling</label>
        <div class="control has-icons-right line-style">
            <p-colorpicker formControlName="forcedValueColor" />
            <p-select formControlName="forcedValueLineStyle" [options]="lineStyles" placeholder="Select a line style" id="forcedValueLineStyle" />
        </div>
        @if (this.isInvalid('forcedValueLineStyle')) {
            <p-message severity="error" size="small" variant="simple">Line style is required.</p-message>
        }
    </div>
    <div class="field">
        <label class="label" htmlFor="isShared">Share with others</label>
        <div class="control has-icons-right">
            <p-toggleswitch name="isShared" formControlName="isShared" id="isShared" />
        </div>
    </div>
    <div>
        @if (this.editMode) {
            <div class="buttons is-flex is-justify-content-center">
                <button (click)="editTheme()" class="button" [disabled]="graphThemeForm.invalid"
                    id="editTheme">Save theme</button>
                <button (click)="deleteTheme()" class="button is-danger" [disabled]="graphThemeForm.invalid"
                    id="deleteTheme">Delete theme</button>
            </div>
            <div class="buttons is-justify-content-center">
                <button (click)="cancelEdit()" class="button"
                    id="cancelEdit">Cancel</button>
            </div>
        }
        @else {
            <div class="buttons is-justify-content-center">
                <button (click)="createTheme()" class="button"
                    [disabled]="graphThemeForm.invalid" id="createTheme">Create new theme</button>
            </div>
        }
    </div>
</form>