5c79480aa4
Un día sin tareas muestra una tarjeta con la mascota del niño en vez de una pantalla en blanco; la columna de tarde vacía tiene su propio mensaje. El feedback de recompensa suma una vibración corta (Vibration API) que se dispara junto al sonido sobre el mismo evento.
73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
|
|
import { I18nService } from '../../core/i18n.service';
|
|
import { TaskView } from '../../core/models';
|
|
import { TaskCardComponent, ToggleEvent } from './task-card.component';
|
|
|
|
/** Vista TABLERO: dos columnas (cole / tarde) con las tareas del día. */
|
|
@Component({
|
|
selector: 'app-board-view',
|
|
imports: [TaskCardComponent],
|
|
template: `
|
|
<div class="board">
|
|
<section class="col">
|
|
<h2 class="col__head">🎒 {{ i18n.t('school') }}</h2>
|
|
@if (morning.length) {
|
|
@for (task of morning; track task.id) {
|
|
<app-task-card [task]="task" [ttsEnabled]="ttsEnabled" (toggle)="toggle.emit($event)" />
|
|
}
|
|
} @else {
|
|
<div class="empty">🏖️ {{ i18n.t('noSchool') }}</div>
|
|
}
|
|
</section>
|
|
|
|
<section class="col">
|
|
<h2 class="col__head">🌙 {{ i18n.t('afternoon') }}</h2>
|
|
@if (afternoon.length) {
|
|
@for (task of afternoon; track task.id) {
|
|
<app-task-card [task]="task" [ttsEnabled]="ttsEnabled" (toggle)="toggle.emit($event)" />
|
|
}
|
|
} @else {
|
|
<div class="empty">🌈 {{ i18n.t('freeAfternoon') }}</div>
|
|
}
|
|
</section>
|
|
</div>
|
|
`,
|
|
styles: [
|
|
`
|
|
.board {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-5);
|
|
}
|
|
@media (max-width: 760px) {
|
|
.board { grid-template-columns: 1fr; }
|
|
}
|
|
.col { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
.col__head {
|
|
margin: 0 0 var(--space-2);
|
|
font-size: 1.4rem;
|
|
color: var(--text-1);
|
|
}
|
|
.empty {
|
|
padding: var(--space-6) var(--space-4);
|
|
text-align: center;
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 1.3rem;
|
|
color: var(--text-2);
|
|
background: var(--surface);
|
|
border: 2px dashed var(--border-2);
|
|
border-radius: var(--radius-card);
|
|
}
|
|
`,
|
|
],
|
|
})
|
|
export class BoardViewComponent {
|
|
@Input() morning: TaskView[] = [];
|
|
@Input() afternoon: TaskView[] = [];
|
|
@Input() ttsEnabled = true;
|
|
@Output() toggle = new EventEmitter<ToggleEvent>();
|
|
|
|
protected readonly i18n = inject(I18nService);
|
|
}
|