Jucundus/client/src/app/features/pictures/pictures-page/pictures-page.component.ts

82 lines
2.1 KiB
TypeScript

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { apiLotService } from 'src/app/core/services/api/api.lot.service';
@Component({
selector: 'app-pictures-page',
templateUrl: './pictures-page.component.html',
styleUrls: ['./pictures-page.component.css']
})
export class PicturesPageComponent implements OnInit {
@Input() value: any;
@Output() valueChange = new EventEmitter<any>();
url: string = '';
images: any[] = [];
position: "bottom" | "top" | "left" | "right" | undefined = 'top';
responsiveOptions: any[] | undefined;
constructor(
private titleService: Title,
private apiLotService: apiLotService,
) {
}
ngOnInit() {
this.titleService.setTitle('Jucundus - Users');
this.responsiveOptions = [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
];
}
getPictures(): void {
this.apiLotService.getPictures(this.url).subscribe( Pictures => {
this.images = [];
const newImages = [...this.images];
Pictures.forEach((picture: any) => {
newImages.push({
itemImageSrc: picture,
thumbnailImageSrc: picture,
alt: "img",
title: "img1"
});
})
this.images = newImages;
console.log(this.images);
this.updateValue(this.images);
})
}
updateValue(newValue: any) {
this.value = newValue;
this.valueChange.emit(this.value);
}
openFullscreen(event: any) {
const element = event.target;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
}
}