AlexAegis/loreplotter

<h1 mat-dialog-title>Edit actor</h1>
<mat-dialog-content class="actorDialog">
    <form [formGroup]="actorForm">
        <div class="main">
            <mat-label class="nameLabel">Name:</mat-label>
            <mat-form-field class="name" floatLabel="never">
                <mat-label>{{ originalData?.accumulator?.name.value }}</mat-label>
                <input formControlName="name" matInput />
            </mat-form-field>
            <div>
                <mat-form-field class="date" floatLabel="never">
                    <mat-label>{{ originalDate | amDateFormat: 'YYYY-MM-DD' }}</mat-label>
                    <input
                        [matDatepicker]="date"
                        formControlName="date"
                        [matTooltip]="'Date of event'"
                        id="dateInput"
                        matInput
                    />
                    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
                    <mat-datepicker #date></mat-datepicker>
                </mat-form-field>
                <mat-form-field class="time" floatLabel="never">
                    <mat-label>{{ originalTime }}</mat-label>
                    <input
                        [dropSpecialCharacters]="false"
                        [matTooltip]="'Time of the event'"
                        formControlName="time"
                        mask="Hh:m0:s0"
                        matInput
                    />
                </mat-form-field>
            </div>

            <mat-label class="maxSpeedLabel" [matTooltip]="'km/h'">Max Speed:</mat-label>
            <mat-form-field class="speed" floatLabel="never">
                <mat-label>{{ originalData?.accumulator?.maxSpeed.value }}</mat-label>
                <input [matTooltip]="'km/h'" formControlName="maxSpeed" mask="9*" matInput />
                <mat-error *ngIf="actorForm.hasError('slow', 'maxSpeed')">Too slow to reach next target!</mat-error>
            </mat-form-field>

            <mat-form-field class="color" floatLabel="never" [ngStyle]="{ backgroundColor: color }">
                <input
                    [(colorPicker)]="color"
                    [cpAlphaChannel]="'disabled'"
                    [matTooltip]="'Color, click for color picker'"
                    [style.background]="color"
                    matInput
                />
            </mat-form-field>
        </div>

        <hr class="divider" />
        <h2>Existing properties:</h2>
        <app-form-entry
            [parent]="properties"
            [index]="i"
            *ngFor="let control of properties.controls; let i = index"
            [control]="control"
            class="entries"
            [existing]="true"
        >
        </app-form-entry>
        <h2>New properties:</h2>
        <app-form-entry
            [parent]="newProperties"
            [index]="i"
            [control]="control"
            class="entries"
            *ngFor="let control of newProperties.controls; let i = index"
        >
        </app-form-entry>
    </form>
    <button (click)="addNewProperty()" aria-label="Add new property entry" class="add" color="accent" mat-flat-button>
        <fa-icon [icon]="plusIcon"></fa-icon>
    </button>
</mat-dialog-content>
<mat-dialog-actions>
    <button
        aria-label="Save Form"
        mat-flat-button
        color="accent"
        [mat-dialog-close]="result"
        class="save"
        [disabled]="!actorForm.valid"
    >
        Save
    </button>
</mat-dialog-actions>
<!--{{ actorForm.value | json }}-->