Plik: odp.txt

app.module.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Photo {
  id: number;
  alt: string;
  filename: string;
  category: number;
  downloads: number;
}

@Component({
  selector: 'app-photo-gallery',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class PhotoGalleryComponent implements OnInit {
  photos: Photo[] = [];
  showFlowers: boolean = true;
  showAnimals: boolean = true;
  showCars: boolean = true;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.loadPhotos();
  }

  loadPhotos(): void {
    this.http.get<Photo[]>('../src/assets/dane.txt').subscribe(data => {
      this.photos = data;
    });
  }

  toggleCategory(category: number): void {
    if (category === 1) this.showFlowers = !this.showFlowers;
    if (category === 2) this.showAnimals = !this.showAnimals;
    if (category === 3) this.showCars = !this.showCars;
  }

  downloadPhoto(photo: Photo): void {
    photo.downloads++;
  }
}

app.component.ts:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Import CommonModule

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [CommonModule] // Add CommonModule here
})
export class AppComponent {
  title = 'Photo Categorization';

  categories = ['Kwiaty', 'Zwierzęta', 'Samochody'];

  photos = [
    { url: 'assets/obraz1.jpg', category: 'Kwiaty' },
    { url: 'assets/obraz2.jpg', category: 'Kwiaty' },
    { url: 'assets/obraz8.jpg', category: 'Kwiaty' },
    { url: 'assets/obraz3.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz4.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz5.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz7.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz9.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz10.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz11.jpg', category: 'Zwierzęta' },
    { url: 'assets/obraz6.jpg', category: 'Samochody' },
    { url: 'assets/obraz12.jpg', category: 'Samochody' },
  ];

  // Aktualnie wybrana kategoria
  selectedCategory = 'Kwiaty';

  // Filtruj zdjęcia według wybranej kategorii
  getFilteredPhotos() {
    return this.photos.filter(photo => photo.category === this.selectedCategory);
  }
}
zrób mi do tego app.component.html tak aby wyświetlał nagłówek z podpisem Kategorie zdjęć
3 checkboxy sprawdzające category
wyświetlające zdjęcia w danej category pod zdjeciami