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

96.59% Statements 85/88
90% Branches 9/10
100% Functions 4/4
97.82% Lines 45/46

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 6711762x   37x 37x 37x 23524x 1x     37x   37x 37x 11762x 23524x       37x   37x 37x   23524x 37x 23524x 2x   37x   37x 37x   23524x 37x 23524x 2x   37x   37x 37x 37x   37x 37x 23524x   932x 5x 932x 5x 5x   5x 5x 5x   37x   39x 22592x 39x     37x  
<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" formControlName="targetSignalId" [options]="signalIds" [filter]="true" 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>