132 lines
3.8 KiB
HTML
132 lines
3.8 KiB
HTML
<!-- src/app/view/components/list-item/list-item.component.html -->
|
|
<div [class]="rowClass" (click)="onRowClick()">
|
|
|
|
<!-- Edit Action -->
|
|
<div class="item-column actions-column">
|
|
<button
|
|
class="action-btn edit-btn"
|
|
(click)="onEditClick()"
|
|
[disabled]="isEditing()"
|
|
[title]="'Edit title sheet'"
|
|
type="button">
|
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Last Name -->
|
|
<div class="item-column data-column" (click)="onCellClick('LastName', $event)">
|
|
@if (isFieldEditing('LastName')) {
|
|
<input
|
|
#editInput
|
|
type="text"
|
|
class="edit-input"
|
|
[value]="getFieldValue('LastName')"
|
|
(input)="onInputChange('LastName', $event)"
|
|
(keydown)="onInputKeyDown($event)"
|
|
(blur)="onInputBlur()"
|
|
placeholder="Last name..."
|
|
maxlength="50">
|
|
} @else {
|
|
<span class="cell-content" [class.empty]="!titleSheet().LastName">
|
|
{{ titleSheet().LastName || 'No last name' }}
|
|
</span>
|
|
}
|
|
</div>
|
|
|
|
<!-- First Name -->
|
|
<div class="item-column data-column" (click)="onCellClick('FirstName', $event)">
|
|
@if (isFieldEditing('FirstName')) {
|
|
<input
|
|
#editInput
|
|
type="text"
|
|
class="edit-input"
|
|
[value]="getFieldValue('FirstName')"
|
|
(input)="onInputChange('FirstName', $event)"
|
|
(keydown)="onInputKeyDown($event)"
|
|
(blur)="onInputBlur()"
|
|
placeholder="First name..."
|
|
maxlength="50">
|
|
} @else {
|
|
<span class="cell-content" [class.empty]="!titleSheet().FirstName">
|
|
{{ titleSheet().FirstName || 'No first name' }}
|
|
</span>
|
|
}
|
|
</div>
|
|
|
|
<!-- Function 1 -->
|
|
<div class="item-column data-column" (click)="onCellClick('Function1', $event)">
|
|
@if (isFieldEditing('Function1')) {
|
|
<input
|
|
#editInput
|
|
type="text"
|
|
class="edit-input"
|
|
[value]="getFieldValue('Function1')"
|
|
(input)="onInputChange('Function1', $event)"
|
|
(keydown)="onInputKeyDown($event)"
|
|
(blur)="onInputBlur()"
|
|
placeholder="Primary function..."
|
|
maxlength="100">
|
|
} @else {
|
|
<span class="cell-content" [class.empty]="!titleSheet().Function1">
|
|
{{ titleSheet().Function1 || 'No function' }}
|
|
</span>
|
|
}
|
|
</div>
|
|
|
|
<!-- Function 2 -->
|
|
<div class="item-column data-column" (click)="onCellClick('Function2', $event)">
|
|
@if (isFieldEditing('Function2')) {
|
|
<input
|
|
#editInput
|
|
type="text"
|
|
class="edit-input"
|
|
[value]="getFieldValue('Function2')"
|
|
(input)="onInputChange('Function2', $event)"
|
|
(keydown)="onInputKeyDown($event)"
|
|
(blur)="onInputBlur()"
|
|
placeholder="Secondary function..."
|
|
maxlength="100">
|
|
} @else {
|
|
<span class="cell-content" [class.empty]="!titleSheet().Function2">
|
|
{{ titleSheet().Function2 || 'No secondary function' }}
|
|
</span>
|
|
}
|
|
</div>
|
|
|
|
<!-- Control Actions -->
|
|
<div class="item-column controls-column">
|
|
<div class="control-buttons">
|
|
|
|
<!-- Play Button -->
|
|
@if (!isPlaying()) {
|
|
<button
|
|
class="control-btn play-btn"
|
|
(click)="onPlayClick()"
|
|
[title]="'Play rundown'"
|
|
type="button">
|
|
<i class="fas fa-play" aria-hidden="true"></i>
|
|
</button>
|
|
} @else {
|
|
<button
|
|
class="control-btn stop-btn"
|
|
(click)="onStopClick()"
|
|
[title]="'Stop rundown'"
|
|
type="button">
|
|
<i class="fas fa-stop" aria-hidden="true"></i>
|
|
</button>
|
|
}
|
|
|
|
<!-- Delete Button -->
|
|
<button
|
|
class="control-btn delete-btn"
|
|
(click)="onDeleteClick()"
|
|
[title]="'Delete title sheet'"
|
|
type="button">
|
|
<i class="fas fa-trash" aria-hidden="true"></i>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|