commencement de la partie admin
This commit is contained in:
MiharyR
parent
11472d0045
commit
de939b47f1
67 changed files with 1233 additions and 554 deletions
|
|
@ -0,0 +1,31 @@
|
|||
<div title="bobo" class="container" appDragAndDrop (fileDropped)="onFileDropped($event)">
|
||||
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
|
||||
<div style="font-weight: bold">Images</div>
|
||||
<img src="/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
|
||||
<div style="font-style: italic; margin-top: 10px">Glisser déposer</div>
|
||||
<div style="font-style: italic">ou</div>
|
||||
<div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>
|
||||
</div>
|
||||
|
||||
<mat-icon [title]=info_image>info</mat-icon>
|
||||
|
||||
<div class="files-list">
|
||||
<div class="single-file" *ngFor="let file of files; let i = index">
|
||||
<img src="/assets/uploadFile.png" width="45px" alt="file">
|
||||
<div class="info">
|
||||
<h4 class="name">
|
||||
{{ file?.name }}
|
||||
</h4>
|
||||
<p class="size">
|
||||
{{ formatBytes(file?.size) }}
|
||||
</p>
|
||||
<div class="progress-cont">
|
||||
<div class="progress" [style.width]="file?.progress + '%'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-icon-button class="delete" width="20px" alt="file" (click)="deleteFile(i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
.container {
|
||||
width: 450px;
|
||||
height: 180px;
|
||||
padding: 20px 0px 20px 0px;
|
||||
text-align: center;
|
||||
border: dashed 1px #979797;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.fileover {
|
||||
animation: shake 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.files-list {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.single-file {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: dashed 1px #979797;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
img.delete {
|
||||
margin-left: 0.5rem;
|
||||
cursor: pointer;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #353f4a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.size {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #a4a4a4;
|
||||
margin: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Shake animation */
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(1px, 1px) rotate(0deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate(-1px, -2px) rotate(-1deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(-3px, 0px) rotate(1deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(3px, 2px) rotate(0deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate(1px, -1px) rotate(1deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-1px, 2px) rotate(-1deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate(-3px, 1px) rotate(0deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate(3px, 1px) rotate(-1deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(-1px, -1px) rotate(1deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate(1px, 2px) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(1px, -2px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.progress-cont {
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
background-color: #d0d0d0;
|
||||
position: relative;
|
||||
|
||||
.progress {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 4px;
|
||||
background-color: #4c97cb;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DragAndDropComponent } from './drag-and-drop.component';
|
||||
|
||||
describe('DragAndDropComponent', () => {
|
||||
let component: DragAndDropComponent;
|
||||
let fixture: ComponentFixture<DragAndDropComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DragAndDropComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DragAndDropComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-drag-and-drop',
|
||||
templateUrl: './drag-and-drop.component.html',
|
||||
styleUrls: ['./drag-and-drop.component.scss']
|
||||
})
|
||||
export class DragAndDropComponent
|
||||
{
|
||||
@ViewChild("fileDropRef", { static: false }) fileDropEl: ElementRef;
|
||||
files: any[] = [];
|
||||
info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur durectangle \n • 5 la hauteur du rectangle" ;
|
||||
|
||||
|
||||
/**
|
||||
* on file drop handler
|
||||
*/
|
||||
onFileDropped($event) {
|
||||
this.prepareFilesList($event);
|
||||
}
|
||||
|
||||
/**
|
||||
* handle file from browsing
|
||||
*/
|
||||
fileBrowseHandler(files) {
|
||||
this.prepareFilesList(files);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete file from files list
|
||||
* @param index (File index)
|
||||
*/
|
||||
deleteFile(index: number) {
|
||||
if (this.files[index].progress < 100) {
|
||||
console.log("Upload in progress.");
|
||||
return;
|
||||
}
|
||||
this.files.splice(index, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulate the upload process
|
||||
*/
|
||||
uploadFilesSimulator(index: number) {
|
||||
setTimeout(() => {
|
||||
if (index === this.files.length) {
|
||||
return;
|
||||
} else {
|
||||
const progressInterval = setInterval(() => {
|
||||
if (this.files[index].progress === 100) {
|
||||
clearInterval(progressInterval);
|
||||
this.uploadFilesSimulator(index + 1);
|
||||
} else {
|
||||
this.files[index].progress += 5;
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert Files list to normal array list
|
||||
* @param files (Files List)
|
||||
*/
|
||||
prepareFilesList(files: Array<any>) {
|
||||
for (const item of files) {
|
||||
item.progress = 0;
|
||||
this.files.push(item);
|
||||
}
|
||||
this.fileDropEl.nativeElement.value = "";
|
||||
this.uploadFilesSimulator(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* format bytes
|
||||
* @param bytes (File size in bytes)
|
||||
* @param decimals (Decimals point)
|
||||
*/
|
||||
formatBytes(bytes, decimals = 2) {
|
||||
if (bytes === 0) {
|
||||
return "0 Bytes";
|
||||
}
|
||||
const k = 1024;
|
||||
const dm = decimals <= 0 ? 0 : decimals;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<mat-form-field class="example-chip-list" appearance="fill" style="font-size: small">
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-label>Tags</mat-label>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||
|
||||
<mat-chip
|
||||
*ngFor="let tag of myTags"
|
||||
[selectable]="selectable"
|
||||
[removable]="removable"
|
||||
(removed)="remove(tag)">
|
||||
{{tag}}
|
||||
<button matChipRemove *ngIf="removable">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip>
|
||||
|
||||
<input
|
||||
placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
|
||||
#tagInput
|
||||
[formControl]="formControl"
|
||||
[matAutocomplete]="auto"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
|
||||
</mat-chip-list>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||||
<mat-option *ngFor="let tag of filteredTags | async" [value]="tag">
|
||||
{{tag}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InputTagsComponent } from './input-tags.component';
|
||||
|
||||
describe('BarTagsComponent', () => {
|
||||
let component: InputTagsComponent;
|
||||
let fixture: ComponentFixture<InputTagsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ InputTagsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InputTagsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
83
src/app/advertiser/adList/input-tags/input-tags.component.ts
Normal file
83
src/app/advertiser/adList/input-tags/input-tags.component.ts
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
||||
import {COMMA, ENTER} from "@angular/cdk/keycodes";
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {Observable} from "rxjs";
|
||||
import {map, startWith} from "rxjs/operators";
|
||||
import {MatChipInputEvent} from "@angular/material/chips";
|
||||
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-tags',
|
||||
templateUrl: './input-tags.component.html',
|
||||
styleUrls: ['./input-tags.component.scss']
|
||||
})
|
||||
export class InputTagsComponent implements OnInit
|
||||
{
|
||||
selectable = true;
|
||||
removable = true;
|
||||
separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
formControl = new FormControl();
|
||||
filteredTags: Observable<string[]>;
|
||||
@Input() myTags: string[] = [];
|
||||
allTags: string[] = [];
|
||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||
|
||||
|
||||
constructor( private fictitiousDatasService: FictitiousDatasService,
|
||||
private messageService: MessageService ) {}
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.filteredTags = this.formControl.valueChanges.pipe(
|
||||
startWith(null),
|
||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allTags.slice()));
|
||||
|
||||
// --- FAUX CODE ---
|
||||
this.allTags = this.fictitiousDatasService.getTags();
|
||||
this.allTags.sort();
|
||||
}
|
||||
|
||||
|
||||
add(event: MatChipInputEvent): void
|
||||
{
|
||||
const value = (event.value || '').trim();
|
||||
if (value && (this.allTags.indexOf(value) !== -1))
|
||||
{
|
||||
this.myTags.push(value);
|
||||
event.chipInput!.clear();
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
remove(tag: string): void
|
||||
{
|
||||
const index = this.myTags.indexOf(tag);
|
||||
if (index >= 0) this.myTags.splice(index, 1);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
}
|
||||
|
||||
|
||||
selected(event: MatAutocompleteSelectedEvent): void
|
||||
{
|
||||
this.myTags.push(event.option.viewValue);
|
||||
this.tagInput.nativeElement.value = '';
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myTags);
|
||||
}
|
||||
|
||||
|
||||
private _filter(value: string): string[]
|
||||
{
|
||||
const filterValue = value.toLowerCase();
|
||||
return this.allTags.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
|
||||
<app-navbar-advertiser></app-navbar-advertiser><br><br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<div style="text-align: center">
|
||||
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<button mat-button class="btnAjouter" (click)="onAdd()">
|
||||
<mat-icon>add_circle</mat-icon> Ajouter une annonce
|
||||
</button>
|
||||
<br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
|
||||
<!-- Title Column -->
|
||||
<ng-container matColumnDef="title">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{advert.title}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tags Column -->
|
||||
<ng-container matColumnDef="tags">
|
||||
<th mat-header-cell *matHeaderCellDef> Tags </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<span *ngFor="let tag of advert.tags; let isLast = last;">
|
||||
<span *ngIf="!isLast"> {{tag}}, </span>
|
||||
<span *ngIf="isLast"> {{tag}} </span>
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- CreatedAt Column -->
|
||||
<ng-container matColumnDef="createdAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date de création </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- LastUpdate Column -->
|
||||
<ng-container matColumnDef="updatedAt">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Dernière modification </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Views Column -->
|
||||
<ng-container matColumnDef="views">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{advert.views}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- IsVisible Column -->
|
||||
<ng-container matColumnDef="isVisible">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Visible </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<span *ngIf="advert.isVisible"> <mat-icon>check</mat-icon> </span>
|
||||
<span *ngIf="!advert.isVisible"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Update Column -->
|
||||
<ng-container matColumnDef="update">
|
||||
<th mat-header-cell *matHeaderCellDef> Modifier </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onUpdate(advert)">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Delete Column -->
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef> Supprimer </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onDelete(advert)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Visualisation Column -->
|
||||
<ng-container matColumnDef="visualisation">
|
||||
<th mat-header-cell *matHeaderCellDef> Visualisation </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onVisualize(advert)">
|
||||
<mat-icon>aspect_ratio</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Directives -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<div style="width: 94%; margin: auto auto">
|
||||
<mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
|
||||
.btnAjouter {
|
||||
margin-left: 3%;
|
||||
padding: 5px 20px 5px 20px;
|
||||
font-size: small;
|
||||
}
|
||||
.lightTheme .btnAjouter {
|
||||
border-top: solid 1px #dcdcdc;
|
||||
border-right: solid 1px #dcdcdc;
|
||||
border-left: solid 1px #dcdcdc;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
.darkTheme .btnAjouter {
|
||||
border-top: solid 1px white;
|
||||
border-right: solid 1px white;
|
||||
border-left: solid 1px white;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
.darkTheme .btnAjouter:hover {
|
||||
background-color: #646464;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
width: 94%;
|
||||
font-size: small;
|
||||
}
|
||||
.darkTheme table { border: solid 2px white; }
|
||||
|
||||
th.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 30%;
|
||||
font-size: large;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageAdListAdvertiserComponent } from './page-ad-list-advertiser.component';
|
||||
|
||||
describe('PageAdvertiserComponent', () => {
|
||||
let component: PageAdListAdvertiserComponent;
|
||||
let fixture: ComponentFixture<PageAdListAdvertiserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageAdListAdvertiserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageAdListAdvertiserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatSort} from "@angular/material/sort";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-or-update-ad.component";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupDeleteAdAdvertiserComponent} from "../popup-delete-ad-advertiser/popup-delete-ad-advertiser.component";
|
||||
import {PopupVisualizeAdAdvertiserComponent} from "../popup-visualize-ad-advertiser/popup-visualize-ad-advertiser.component";
|
||||
import {MatPaginator} from "@angular/material/paginator";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-ad-list-advertiser',
|
||||
templateUrl: './page-ad-list-advertiser.component.html',
|
||||
styleUrls: ['./page-ad-list-advertiser.component.scss']
|
||||
})
|
||||
export class PageAdListAdvertiserComponent implements AfterViewInit
|
||||
{
|
||||
displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
|
||||
dataSource ;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
|
||||
this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource = this.dataSource;
|
||||
}
|
||||
|
||||
|
||||
applyFilter(event: Event): void
|
||||
{
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
onVisualize(advert: Advert): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { advert: advert }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupVisualizeAdAdvertiserComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {});
|
||||
}
|
||||
|
||||
|
||||
onAdd(): void
|
||||
{
|
||||
const config = {
|
||||
width: '40%',
|
||||
height: '80%',
|
||||
data: { action: "add", advert: null }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupAddOrUpdateAdComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( advertAdded => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((advertAdded === undefined) || (advertAdded === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
this.dataSource.data.push(advertAdded);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annoonce a bien été ajoutée ✔"
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onUpdate(advertToUpdate: Advert): void
|
||||
{
|
||||
const config = {
|
||||
width: '40%',
|
||||
height: '80%',
|
||||
data: { action: "update", advert: advertToUpdate }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupAddOrUpdateAdComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( advertUpdated => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((advertUpdated === undefined) || (advertUpdated === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt._id === advertToUpdate._id));
|
||||
this.dataSource.data.splice(index, 1, advertUpdated);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annonce a bien été modifiée ✔"
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onDelete(advert: Advert): void
|
||||
{
|
||||
const config = {
|
||||
data: { advert: advert }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupDeleteAdAdvertiserComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( retour => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((retour === undefined) || (retour === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt._id === advert._id));
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annonce a bien été supprimée ✔" ;
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
|
||||
<!-- Navbar -->
|
||||
<h1 mat-dialog-title>{{title}}</h1>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<div style="text-align: center; overflow-y: hidden">
|
||||
|
||||
<!-- Title -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label> Titre annonce </mat-label>
|
||||
<input matInput type="text" [(ngModel)]="advert.title">
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Images -->
|
||||
<br>
|
||||
<app-drag-and-drop></app-drag-and-drop>
|
||||
|
||||
<!-- Tags -->
|
||||
<app-input-tags [myTags]="advert.tags" (eventEmitter)="onEventInputTags($event)"></app-input-tags>
|
||||
|
||||
<!-- Comments -->
|
||||
<mat-form-field class="commentContainer" appearance="fill">
|
||||
<mat-label> Commentaire </mat-label>
|
||||
<textarea matInput [(ngModel)]="advert.comment"></textarea>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- IsVisible -->
|
||||
<mat-checkbox [(ngModel)]="advert.isVisible"> Visible </mat-checkbox>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- Actions -->
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="dialogRef.close()">Annuler</button>
|
||||
<button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
.lightTheme, .darkTheme {
|
||||
background-image: none;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
|
||||
.commentContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
border: solid 1px grey;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// --- LightTheme ---
|
||||
|
||||
// aura
|
||||
.lightTheme ::ng-deep .mat-checkbox-ripple .mat-ripple-element {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
// contenu coche
|
||||
.lightTheme ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
// indeterminate
|
||||
.lightTheme ::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||
border-color: black !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
// --- DarkTheme ---
|
||||
|
||||
// aura
|
||||
.darTheme ::ng-deep .mat-checkbox-ripple .mat-ripple-element {
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
// contenu coche
|
||||
.darkTheme ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
|
||||
background-color: black !important;
|
||||
}
|
||||
|
||||
// indeterminate
|
||||
.darkTheme ::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||
border-color: white !important;
|
||||
//background-color: white !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupAddOrUpdateAdComponent } from './popup-add-or-update-ad.component';
|
||||
|
||||
describe('PopupAddOrUpdateAdComponent', () => {
|
||||
let component: PopupAddOrUpdateAdComponent;
|
||||
let fixture: ComponentFixture<PopupAddOrUpdateAdComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupAddOrUpdateAdComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupAddOrUpdateAdComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
|
||||
|
||||
const ADVERT_VIDE: Advert = {
|
||||
_id: "",
|
||||
title: "",
|
||||
advertiser: "",
|
||||
images: [],
|
||||
tags: [],
|
||||
comment: "",
|
||||
views: 0,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
isVisible: true,
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-add-or-update-ad',
|
||||
templateUrl: './popup-add-or-update-ad.component.html',
|
||||
styleUrls: ['./popup-add-or-update-ad.component.scss']
|
||||
})
|
||||
export class PopupAddOrUpdateAdComponent implements OnInit
|
||||
{
|
||||
advert: Advert;
|
||||
urlBackend: string = "" ;
|
||||
title: string = "" ;
|
||||
tabWaitingFile: File[] = []; // fichiers selectionnés mais pas encore "validés"
|
||||
tabSelectedFile: File[] = []; // fichier "validés"
|
||||
_event;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupAddOrUpdateAdComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService,
|
||||
public themeService: ThemeService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
if(this.data.action === "add")
|
||||
{
|
||||
this.advert = Object.assign({}, ADVERT_VIDE);
|
||||
this.advert.tags = [];
|
||||
this.urlBackend = "advertiser/add/ad" ;
|
||||
this.title = "Ajouter annonce" ;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.advert = Object.assign({}, this.data.advert);
|
||||
this.advert.tags = this.data.advert.tags.slice();
|
||||
this.urlBackend = "advertiser/update/ad" ;
|
||||
this.title = "Modifier annonce" ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onValidate(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.dialogRef.close(this.advert);
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage(this.urlBackend, this.advert)
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") {
|
||||
console.log(retour);
|
||||
this.dialogRef.close(this.advert);
|
||||
}
|
||||
else {
|
||||
this.dialogRef.close(retour.data.advert);
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
onEventInputTags(myTags: string[]): void
|
||||
{
|
||||
this.advert.tags = myTags;
|
||||
}
|
||||
|
||||
|
||||
// Lorsque l'annonceur selectionne des fichiers
|
||||
onSelectFile(event)
|
||||
{
|
||||
const nbFileSelected = event.target.files.length ;
|
||||
for(let i=0 ; i<nbFileSelected ; i++) this.tabWaitingFile.push(event.target.files[i]);
|
||||
this._event = event;
|
||||
}
|
||||
|
||||
// Lorsque l'annonceur "valide" sont choix de fichier selectionné
|
||||
onValidateFiles(): void
|
||||
{
|
||||
const nbFile = this.tabWaitingFile.length;
|
||||
for(let i=0 ; i<nbFile ; i++) this.tabSelectedFile.push(this.tabWaitingFile[i]);
|
||||
this.tabWaitingFile = [];
|
||||
this._event.target.value = "";
|
||||
}
|
||||
|
||||
// Lorsque l'annonceur souhaite supprimer un fichier "validé"
|
||||
onDeleteFile(file: File)
|
||||
{
|
||||
const index = this.tabSelectedFile.findIndex(x => file);
|
||||
this.tabSelectedFile.splice(index, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<mat-dialog-content class="mat-typography">
|
||||
Êtes-vous sûr de vouloir supprimer l'annonce <i>{{advert.title}}</i> ?
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="dialogRef.close();">Annuler</button>
|
||||
<button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupDeleteAdAdvertiserComponent } from './popup-delete-ad-advertiser.component';
|
||||
|
||||
describe('PopupDeleteAdComponent', () => {
|
||||
let component: PopupDeleteAdAdvertiserComponent;
|
||||
let fixture: ComponentFixture<PopupDeleteAdAdvertiserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupDeleteAdAdvertiserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupDeleteAdAdvertiserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-delete-ad-advertiser',
|
||||
templateUrl: './popup-delete-ad-advertiser.component.html',
|
||||
styleUrls: ['./popup-delete-ad-advertiser.component.scss']
|
||||
})
|
||||
export class PopupDeleteAdAdvertiserComponent implements OnInit
|
||||
{
|
||||
advert: Advert;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupDeleteAdAdvertiserComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.advert = this.data.advert;
|
||||
}
|
||||
|
||||
|
||||
onValidate(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
this.dialogRef.close(true);
|
||||
|
||||
// --- VRAI CODE ---
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage("advertiser/delete/ad", {"advert": this.advert})
|
||||
.subscribe( retour => {
|
||||
|
||||
if(retour.status === "error") {
|
||||
console.log(retour);
|
||||
this.dialogRef.close();
|
||||
}
|
||||
else {
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
|
||||
<h1 mat-dialog-title>{{advert.title}}</h1>
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<mat-dialog-content>
|
||||
|
||||
<!-- Images -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel" style="padding-top: 10px"> Images: </div>
|
||||
<div class="col-6">
|
||||
<button mat-icon-button (click)="onVisualizeImages(advert.images)">
|
||||
<mat-icon>aspect_ratio</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel"> Tags: </div>
|
||||
<div class="col-6 myValue" style="border-left: solid 1px #e6e6e6">
|
||||
<div *ngFor="let tag of advert.tags"> • {{tag}} </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comment -->
|
||||
<div class="row myRow">
|
||||
<div class="col-6 myLabel"> Commentaire: </div>
|
||||
<div class="col-6 myValue"> {{advert.comment}} </div>
|
||||
</div>
|
||||
|
||||
<!-- Views -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Vues: </label>
|
||||
<div class="col-6 myValue"> {{advert.views}} </div>
|
||||
</div>
|
||||
|
||||
<!-- Created at -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Date de création: </label>
|
||||
<div class="col-6 myValue">
|
||||
{{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last updtade -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Date de dernière modification: </label>
|
||||
<div class="col-6 myValue">
|
||||
{{ advert.updatedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IsVisible -->
|
||||
<div class="row myRow">
|
||||
<label class="col-6 myLabel"> Visibilité: </label>
|
||||
<div class="col-6 myValue">
|
||||
<mat-icon *ngIf="advert.isVisible">checked</mat-icon>
|
||||
<mat-icon *ngIf="!advert.isVisible">close</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-dialog-content>
|
||||
|
||||
<!-- ----------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="dialogRef.close()">Fermer</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.lightTheme, .darkTheme {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
|
||||
.myRow {
|
||||
margin: 15px 0px 15px 0px;
|
||||
}
|
||||
|
||||
|
||||
.myLabel {
|
||||
text-align: right;
|
||||
padding: 0px 5px 0px 0px;
|
||||
margin: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.myValue {
|
||||
text-align: left;
|
||||
padding: 0px 0px 0px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupVisualizeAdAdvertiserComponent } from './popup-visualize-ad-advertiser.component';
|
||||
|
||||
describe('PopupVisualizeAdComponent', () => {
|
||||
let component: PopupVisualizeAdAdvertiserComponent;
|
||||
let fixture: ComponentFixture<PopupVisualizeAdAdvertiserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupVisualizeAdAdvertiserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupVisualizeAdAdvertiserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
import {PopupVisualizeImagesAdvertiserComponent} from "../popup-visualize-images-advertiser/popup-visualize-images-advertiser.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-visualize-ad-advertiser',
|
||||
templateUrl: './popup-visualize-ad-advertiser.component.html',
|
||||
styleUrls: ['./popup-visualize-ad-advertiser.component.scss']
|
||||
})
|
||||
export class PopupVisualizeAdAdvertiserComponent implements OnInit
|
||||
{
|
||||
advert: Advert;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupVisualizeAdAdvertiserComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
public themeService: ThemeService,
|
||||
public dialog: MatDialog ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.advert = this.data.advert;
|
||||
}
|
||||
|
||||
|
||||
onVisualizeImages(images: any[])
|
||||
{
|
||||
const config = {
|
||||
width: '400px',
|
||||
height: '950px',
|
||||
data: {
|
||||
images: images,
|
||||
width: 300,
|
||||
height: 800,
|
||||
}
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupVisualizeImagesAdvertiserComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<div mat-dialog-title class="dialog-title">
|
||||
<h2></h2>
|
||||
<button mat-icon-button aria-label="close dialog" mat-dialog-close>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; justify-content: center">
|
||||
<carousel [images]="tabImages"
|
||||
cellsToShow="1"
|
||||
[height]="height"
|
||||
[width]="width"></carousel>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
carousel {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupVisualizeImagesAdvertiserComponent } from './popup-visualize-images-advertiser.component';
|
||||
|
||||
describe('PopupVisualizeImagesComponent', () => {
|
||||
let component: PopupVisualizeImagesAdvertiserComponent;
|
||||
let fixture: ComponentFixture<PopupVisualizeImagesAdvertiserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupVisualizeImagesAdvertiserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupVisualizeImagesAdvertiserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-visualize-images-advertiser',
|
||||
templateUrl: './popup-visualize-images-advertiser.component.html',
|
||||
styleUrls: ['./popup-visualize-images-advertiser.component.scss']
|
||||
})
|
||||
export class PopupVisualizeImagesAdvertiserComponent implements OnInit
|
||||
{
|
||||
tabImages = [];
|
||||
width: number = 0;
|
||||
height: number = 0;
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupVisualizeImagesAdvertiserComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data ) { }
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.width = this.data.width;
|
||||
this.height = this.data.height;
|
||||
|
||||
for(let couple of this.data.images)
|
||||
{
|
||||
const elt = { path: "assets/pub/"+couple.url };
|
||||
this.tabImages.push(elt);
|
||||
}
|
||||
console.log(this.tabImages);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue