Data, czas i kolor: date, time, color

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-demo',
    imports: [FormsModule, DatePipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly data = signal('2026-10-16');
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="data">Data turnieju</label>
  <input id="data" name="data" type="date" class="form-control" [(ngModel)]="data">

  @if (data()) {
    <p class="mt-3 mb-1">W sygnale: <code>{{ data() }}</code></p>
    <p class="fs-5">{{ data() | date:'EEEE, d MMMM y' }}</p>
  } @else {
    <p class="mt-3 text-danger">Wybierz datę.</p>
  }
</div>

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly cenaZaNoc = 95;
    readonly przyjazd = signal('2027-07-05');
    readonly wyjazd = signal('2027-07-10');

    readonly noce = computed(() => {
        if (!this.przyjazd() || !this.wyjazd() || this.wyjazd() <= this.przyjazd()) {
            return 0;
        }
        const ms = new Date(this.wyjazd()).getTime() - new Date(this.przyjazd()).getTime();
        return Math.round(ms / (1000 * 60 * 60 * 24));
    });
}

<div class="card m-3 p-3" style="width: 26rem">
  <label class="form-label" for="przyjazd">Przyjazd</label>
  <input id="przyjazd" name="przyjazd" type="date" class="form-control mb-2" [(ngModel)]="przyjazd">

  <label class="form-label" for="wyjazd">Wyjazd</label>
  <input id="wyjazd" name="wyjazd" type="date" class="form-control mb-3" [min]="przyjazd()" [(ngModel)]="wyjazd">

  @if (noce() > 0) {
    <p class="mb-1">Liczba nocy: <strong>{{ noce() }}</strong></p>
    <p class="fs-5 mb-0">Koszt: {{ noce() * cenaZaNoc }} zł</p>
  } @else {
    <p class="text-danger mb-0">Wyjazd musi być później niż przyjazd.</p>
  }
</div>

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly start = signal('16:30');
    readonly minuty = signal<number | null>(90);

    readonly koniec = computed(() => {
        if (!this.start() || this.minuty() === null) {
            return '';
        }
        const [g, m] = this.start().split(':').map(Number);
        const razem = g * 60 + m + this.minuty()!;
        const godz = Math.floor(razem / 60) % 24;
        const min = razem % 60;
        return String(godz).padStart(2, '0') + ':' + String(min).padStart(2, '0');
    });
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="start">Początek warsztatu</label>
  <input id="start" name="start" type="time" class="form-control mb-2" [(ngModel)]="start">

  <label class="form-label" for="minuty">Czas trwania (min)</label>
  <input id="minuty" name="minuty" type="number" min="15" step="15" class="form-control mb-3"
         [(ngModel)]="minuty">

  @if (koniec()) {
    <p class="fs-5">Warsztat: {{ start() }} – {{ koniec() }}</p>
  }
</div>

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly tytul = signal('NOC ROBOTÓW');
    readonly tlo = signal('#212529');
    readonly tekst = signal('#ffc107');
}

<div class="p-3">
  <div class="row g-4" style="max-width: 50rem">
    <div class="col-md-5">
      <label class="form-label" for="tytul">Tytuł</label>
      <input id="tytul" name="tytul" class="form-control mb-3" [(ngModel)]="tytul">

      <div class="d-flex gap-4">
        <div>
          <label class="form-label d-block" for="tlo">Tło</label>
          <input id="tlo" name="tlo" type="color" class="form-control form-control-color" [(ngModel)]="tlo">
        </div>
        <div>
          <label class="form-label d-block" for="tekst">Tekst</label>
          <input id="tekst" name="tekst" type="color" class="form-control form-control-color" [(ngModel)]="tekst">
        </div>
      </div>
      <p class="small text-secondary mt-3">tło: {{ tlo() }}, tekst: {{ tekst() }}</p>
      @if (tlo() === tekst()) {
        <p class="text-danger">Tekst zlewa się z tłem!</p>
      }
    </div>

    <div class="col-md-7">
      <div class="rounded p-5 text-center fw-bold fs-2"
           [style.background-color]="tlo()" [style.color]="tekst()">
        {{ tytul() }}
      </div>
    </div>
  </div>
</div>