Projekt — część 1: przeglądanie wydarzeń

export interface Wydarzenie {
    id: number;
    tytul: string;
    kategoria: string;
    data: string;          // RRRR-MM-DD
    sala: string;
    limit: number;
    zapisani: string[];
}

[
  { "id": 1, "tytul": "Turniej retro", "kategoria": "gry", "data": "2026-10-16", "sala": "12", "limit": 8, "zapisani": ["Ala", "Bartek", "Celina"] },
  { "id": 2, "tytul": "Noc robotów", "kategoria": "technika", "data": "2026-10-24", "sala": "7", "limit": 4, "zapisani": ["Darek", "Ela", "Filip", "Gosia"] },
  { "id": 3, "tytul": "Warsztat druku 3D", "kategoria": "technika", "data": "2026-11-04", "sala": "14", "limit": 5, "zapisani": ["Hubert"] },
  { "id": 4, "tytul": "Liga planszówek", "kategoria": "gry", "data": "2026-11-13", "sala": "Biblioteka", "limit": 10, "zapisani": [] },
  { "id": 5, "tytul": "Grafika komputerowa", "kategoria": "sztuka", "data": "2026-11-20", "sala": "15", "limit": 6, "zapisani": ["Iga", "Jan"] },
  { "id": 6, "tytul": "Hackathon klasowy", "kategoria": "technika", "data": "2026-12-04", "sala": "Aula", "limit": 20, "zapisani": [] }
]

import { Service, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Wydarzenie } from './wydarzenie';

@Service()
export class WydarzeniaSerwis {
    private readonly http = inject(HttpClient);

    private readonly _lista = signal<Wydarzenie[]>([]);
    readonly lista = this._lista.asReadonly();
    readonly ladowanie = signal(false);
    readonly blad = signal('');

    wczytaj(): void {
        if (this._lista().length > 0 || this.ladowanie()) {
            return;
        }
        this.ladowanie.set(true);
        this.http.get<Wydarzenie[]>('/dane/projekt.json').subscribe({
            next: dane => {
                this._lista.set(dane);
                this.ladowanie.set(false);
            },
            error: () => {
                this.blad.set('Nie udało się wczytać wydarzeń.');
                this.ladowanie.set(false);
            }
        });
    }

    znajdz(id: number): Wydarzenie | undefined {
        return this._lista().find(w => w.id === id);
    }
}

import { Component, inject } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { WydarzeniaSerwis } from './wydarzenia-serwis';

@Component({
    selector: 'app-demo',
    imports: [RouterOutlet, RouterLink, RouterLinkActive],
    templateUrl: './demo.html'
})
export class Demo {
    private readonly serwis = inject(WydarzeniaSerwis);

    constructor() {
        this.serwis.wczytaj();
    }
}

<div class="p-3" style="max-width: 60rem">
  <nav class="navbar navbar-expand bg-dark rounded px-3 mb-3" data-bs-theme="dark">
    <span class="navbar-brand">Klub ZSMI</span>
    <div class="navbar-nav">
      <a class="nav-link" routerLink="wydarzenia" routerLinkActive="active">Wydarzenia</a>
    </div>
  </nav>
  <router-outlet />
</div>

import { Routes } from '@angular/router';
import { Lista } from './lista';

export const trasy: Routes = [
    { path: '', redirectTo: 'wydarzenia', pathMatch: 'full' },
    { path: 'wydarzenia', component: Lista },
    { path: '**', redirectTo: 'wydarzenia' },
];

import { Component, inject } from '@angular/core';
import { WydarzeniaSerwis } from './wydarzenia-serwis';

@Component({
    selector: 'app-lista',
    imports: [],
    templateUrl: './lista.html'
})
export class Lista {
    readonly serwis = inject(WydarzeniaSerwis);
}

<h4 class="mb-3">Nadchodzące wydarzenia</h4>

@if (serwis.ladowanie()) {
  <p><span class="spinner-border spinner-border-sm"></span> Wczytywanie…</p>
} @else if (serwis.blad()) {
  <div class="alert alert-danger">{{ serwis.blad() }}</div>
} @else {
  <ul class="list-group">
    @for (w of serwis.lista(); track w.id) {
      <li class="list-group-item">{{ w.tytul }} — {{ w.data }}, sala {{ w.sala }}</li>
    }
  </ul>
}

import { Component, computed, input } from '@angular/core';
import { DatePipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { Wydarzenie } from './wydarzenie';

@Component({
    selector: 'app-karta',
    imports: [DatePipe, RouterLink],
    templateUrl: './karta.html'
})
export class Karta {
    readonly wydarzenie = input.required<Wydarzenie>();

    readonly wolne = computed(() => this.wydarzenie().limit - this.wydarzenie().zapisani.length);
    readonly procent = computed(() =>
        Math.round(this.wydarzenie().zapisani.length / this.wydarzenie().limit * 100)
    );
}

<div class="card h-100">
  <div class="card-body">
    <span class="badge text-bg-secondary mb-2">{{ wydarzenie().kategoria }}</span>
    <h5 class="card-title">{{ wydarzenie().tytul }}</h5>
    <p class="card-text mb-2">
      {{ wydarzenie().data | date:'EEEE, d MMMM' }}<br>
      sala {{ wydarzenie().sala }}
    </p>
    <div class="progress mb-2" style="height: 6px">
      <div class="progress-bar" [class.bg-danger]="wolne() === 0" [style.width.%]="procent()"></div>
    </div>
    <p class="small mb-0" [class.text-danger]="wolne() === 0">
      {{ wolne() > 0 ? 'Wolnych miejsc: ' + wolne() : 'Brak miejsc' }}
    </p>
  </div>
  <div class="card-footer bg-transparent">
    <a class="btn btn-sm btn-outline-primary" [routerLink]="['../wydarzenie', wydarzenie().id]">Szczegóły</a>
  </div>
</div>

import { Component, inject } from '@angular/core';
import { WydarzeniaSerwis } from './wydarzenia-serwis';
import { Karta } from './karta';

@Component({
    selector: 'app-lista',
    imports: [Karta],
    templateUrl: './lista.html'
})
export class Lista {
    readonly serwis = inject(WydarzeniaSerwis);
}

<h4 class="mb-3">Nadchodzące wydarzenia</h4>

@if (serwis.ladowanie()) {
  <p><span class="spinner-border spinner-border-sm"></span> Wczytywanie…</p>
} @else if (serwis.blad()) {
  <div class="alert alert-danger">{{ serwis.blad() }}</div>
} @else {
  <div class="row g-3">
    @for (w of serwis.lista(); track w.id) {
      <div class="col-md-4">
        <app-karta [wydarzenie]="w" />
      </div>
    }
  </div>
}

import { Component, computed, inject } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { DatePipe } from '@angular/common';
import { toSignal } from '@angular/core/rxjs-interop';
import { WydarzeniaSerwis } from './wydarzenia-serwis';

@Component({
    selector: 'app-szczegoly',
    imports: [RouterLink, DatePipe],
    templateUrl: './szczegoly.html'
})
export class Szczegoly {
    private readonly trasa = inject(ActivatedRoute);
    private readonly serwis = inject(WydarzeniaSerwis);

    readonly parametry = toSignal(this.trasa.paramMap);
    readonly id = computed(() => Number(this.parametry()?.get('id')));
    readonly wydarzenie = computed(() => this.serwis.znajdz(this.id()));
    readonly ladowanie = this.serwis.ladowanie;
}

<a class="btn btn-sm btn-link px-0 mb-2" routerLink="../../wydarzenia">← Wszystkie wydarzenia</a>

@if (wydarzenie(); as w) {
  <div class="card">
    <div class="card-body">
      <span class="badge text-bg-secondary">{{ w.kategoria }}</span>
      <h3 class="card-title mt-2">{{ w.tytul }}</h3>
      <p class="card-text">{{ w.data | date:'EEEE, d MMMM y' }} · sala {{ w.sala }}</p>
      <h6>Zapisani ({{ w.zapisani.length }} / {{ w.limit }})</h6>
      <ol class="mb-0">
        @for (osoba of w.zapisani; track $index) {
          <li>{{ osoba }}</li>
        } @empty {
          <li class="text-secondary">Nikt się jeszcze nie zapisał.</li>
        }
      </ol>
    </div>
  </div>
} @else if (ladowanie()) {
  <p>Wczytywanie…</p>
} @else {
  <div class="alert alert-warning">Nie ma wydarzenia o numerze {{ parametry()?.get('id') }}.</div>
}

import { Routes } from '@angular/router';
import { Lista } from './lista';
import { Szczegoly } from './szczegoly';

export const trasy: Routes = [
    { path: '', redirectTo: 'wydarzenia', pathMatch: 'full' },
    { path: 'wydarzenia', component: Lista },
    { path: 'wydarzenie/:id', component: Szczegoly },
    { path: '**', redirectTo: 'wydarzenia' },
];