Plik: app.componetn.txt

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [CommonModule]
})
export class AppComponent {
  images = [
    { id: 0, alt: "Mak", filename: "obraz1.jpg", category: 1, downloads: 35 },
    { id: 1, alt:"Bukiet", filename: "obraz2.jpg", category: 1, downloads: 43 },
    { id: 2, alt:"Dalmatyńczyk", filename: "obraz3.jpg", category: 2, downloads: 2 },
    { id: 3, alt:"Świnka morska", filename: "obraz4.jpg", category: 2, downloads: 53 },
    { id: 4, alt:"Rotwailer", filename: "obraz5.jpg", category: 2, downloads: 43 },
    { id: 5, alt:"Audi", filename: "obraz6.jpg", category: 3, downloads: 11 },
    { id: 6, alt:"kotki", filename: "obraz7.jpg", category: 2, downloads: 22 },
    { id: 7, alt:"Róża", filename: "obraz8.jpg", category: 1, downloads: 33 },
    { id: 8, alt:"Świnka morska", filename: "obraz9.jpg", category: 2, downloads: 123 },
    { id: 9, alt:"Foksterier", filename: "obraz10.jpg", category: 2, downloads: 22 },
    { id: 10, alt:"Szczeniak", filename: "obraz11.jpg", category: 2, downloads: 12 },
    { id: 11, alt:"Garbus", filename: "obraz12.jpg", category: 3, downloads: 321 }
  ];

  categories: { flowers: boolean, animals: boolean, cars: boolean } = {
    flowers: true,
    animals: true,
    cars: true
  };

  // Dodajemy typowanie dla category jako typu 'flowers', 'animals' lub 'cars'
  toggleCategory(category: 'flowers' | 'animals' | 'cars') {
    this.categories[category] = !this.categories[category];
  }

  incrementDownloads(imageId: number) {
    const image = this.images.find(img => img.id === imageId);
    if (image) {
      image.downloads++;
    }
  }

  getFilteredImages() {
    return this.images.filter(image => {
      if (image.category === 1 && this.categories.flowers) return true;
      if (image.category === 2 && this.categories.animals) return true;
      if (image.category === 3 && this.categories.cars) return true;
      return false;
    });
  }
}