continuation de la page 'search', mise en place des pubs

src/app/utils/components/advert/advert.component.html

@@ -0,0 +1,6 @@
+<div [class]="themeService.getClassTheme()">
+    <div class="myContainer">
+        <span class="helper"></span>
+        <img [src]="'assets/pub/'+ad.images[idxImage].url" [alt]="ad.images[idxImage].url">
+    </div>
+</div>

src/app/utils/components/advert/advert.component.scss

@@ -0,0 +1,28 @@
+.myContainer {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  border: solid 3px;
+  vertical-align: middle;
+}
+.lightTheme img {
+  border-color: black;
+}
+.darkTheme img {
+  border-color: white;
+}
+
+
+.helper {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}

src/app/utils/components/advert/advert.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PubComponent } from './pub.component';
+import { AdvertComponent } from './advert.component';
 
 describe('PubComponent', () => {
-  let component: PubComponent;
-  let fixture: ComponentFixture<PubComponent>;
+  let component: AdvertComponent;
+  let fixture: ComponentFixture<AdvertComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PubComponent ]
+      declarations: [ AdvertComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PubComponent);
+    fixture = TestBed.createComponent(AdvertComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/utils/components/advert/advert.component.ts

@@ -0,0 +1,27 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Advert} from "../../interfaces/advert";
+import {ThemeService} from "../../services/theme/theme.service";
+
+
+
+@Component({
+    selector: 'app-advert',
+    templateUrl: './advert.component.html',
+    styleUrls: ['./advert.component.scss']
+})
+export class AdvertComponent implements OnInit
+{
+    @Input() ad: Advert;
+    idxImage: number = 0;
+
+
+    constructor(public themeService: ThemeService) { }
+
+
+    ngOnInit(): void
+    {
+        const nbImages = this.ad.images.length;
+        this.idxImage = Math.floor(Math.random() * nbImages);
+    }
+
+}

src/app/utils/components/nav-bar/nav-bar.component.html

@@ -1,38 +1,41 @@
-<!-- pour les 3 roles -->
-<div *ngIf="pour === '3roles'">
-    <ul>
-        <li>
-            <a routerLink="/connexion" class="StreamNotFound"> StreamNotFound </a>
-        </li>
-        <li style="float:right; margin-right: 20px;">
-            <mat-slide-toggle></mat-slide-toggle>
-        </li>
-    </ul>
-</div>
+<div [class]="themeService.getClassTheme()">
 
+    <!-- pour les 3 roles -->
+    <div *ngIf="pour === '3roles'">
+        <ul>
+            <li>
+                <a routerLink="/connexion" class="StreamNotFound"> StreamNotFound </a>
+            </li>
+            <li style="float:right; margin-right: 20px;">
+                <mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
+            </li>
+        </ul>
+    </div>
+
+    <!-- pour User -->
+    <div *ngIf="pour === 'user'">
+        <ul>
+            <li>
+                <a routerLink="/search" class="StreamNotFound"> StreamNotFound </a>
+            </li>
+            <li class="cliquable">
+                <a routerLink="/search"> Rechercher </a>
+            </li>
+            <li class="cliquable">
+                <a routerLink="/search"> Mes playlists </a>
+            </li>
+            <li class="cliquable">
+                <a routerLink="/search"> Historique </a>
+            </li>
+            <li style="float:right; margin-right: 20px;">
+                <a routerLink="/search">
+                    <mat-icon>settings</mat-icon>
+                </a>
+            </li>
+            <li style="float:right; margin-right: 20px;">
+                <mat-slide-toggle (click)="onClick()"></mat-slide-toggle>
+            </li>
+        </ul>
+    </div>
 
-<!-- pour User -->
-<div *ngIf="pour === 'user'">
-    <ul>
-        <li>
-            <a routerLink="/search" class="StreamNotFound"> StreamNotFound </a>
-        </li>
-        <li class="cliquable">
-            <a routerLink="/search"> Rechercher </a>
-        </li>
-        <li class="cliquable">
-            <a routerLink="/search"> Mes playlists </a>
-        </li>
-        <li class="cliquable">
-            <a routerLink="/search"> Historique </a>
-        </li>
-        <li style="float:right; margin-right: 20px;">
-            <a routerLink="/search">
-                <mat-icon>settings</mat-icon>
-            </a>
-        </li>
-        <li style="float:right; margin-right: 20px;">
-            <mat-slide-toggle></mat-slide-toggle>
-        </li>
-    </ul>
 </div>

src/app/utils/components/nav-bar/nav-bar.component.scss

@@ -24,6 +24,7 @@ ul {
   background-color: black;
   height: 70px;
   color: white;
+  border-bottom: solid 2px white;
 }
 
 
@@ -52,11 +53,11 @@ li a {
 
 
 ::ng-deep .mat-slide-toggle-thumb {
-  background-color: #ffffff;
+  background-color: #c8c8c8;
 }
 
 ::ng-deep .mat-slide-toggle-bar {
-  background-color: #c8c8c8;
+  background-color: #ffffff;
 }
 
 ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {

src/app/utils/components/nav-bar/nav-bar.component.ts

@@ -1,17 +1,19 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {ThemeService} from "../../services/theme/theme.service";
 
 @Component({
   selector: 'app-nav-bar',
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.scss']
 })
-export class NavBarComponent implements OnInit
+export class NavBarComponent
 {
   @Input() pour = "3roles";
 
-  constructor() { }
+  constructor(public themeService: ThemeService) { }
 
-  ngOnInit(): void {
+  onClick(): void {
+      this.themeService.isLightTheme = !this.themeService.isLightTheme
   }
 
 }

src/app/utils/components/pub/pub.component.html

@@ -1,6 +0,0 @@
-<div class="conteneur">
-    <span>debut</span>
-    <img src="assets/logo_plateforms/Youtube.png" width="40px" height="40px" alt="image Youtube logo">
-    <img src="assets/pub/Youtube.png" width="40px" height="40px" alt="image Youtube">
-    <span>fin</span>
-</div>

src/app/utils/components/pub/pub.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-
-
-@Component({
-    selector: 'app-pub',
-    templateUrl: './pub.component.html',
-    styleUrls: ['./pub.component.scss']
-})
-export class PubComponent implements OnInit
-{
-
-    constructor() { }
-
-
-    ngOnInit(): void {
-    }
-
-}

src/app/utils/interfaces/advert.ts

@@ -0,0 +1,13 @@
+export interface Advert
+{
+    _id: string,
+    advertiser: string,
+    images: {
+        url: string,
+        description: string,
+    }[]
+    text: string,
+    subjectTarget: any[]
+    seen: number,
+    date: Date,
+}

src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import {Video} from "../../interfaces/video";
 import {Playlist} from "../../interfaces/playlist";
+import {Advert} from "../../interfaces/advert";
 
 @Injectable({
     providedIn: 'root'
@@ -53,4 +54,22 @@ export class FictitiousDatasService
         return tabTabPlaylist
     }
 
+
+    getAdvert(): Advert
+    {
+        return {
+            _id: "monId",
+            advertiser: "nutella",
+            images: [
+                { url: "nutella_v_1.jpeg", description: "image nutella 1" },
+                { url: "nutella_v_2.png", description: "image nutella 2" },
+                { url: "nutella_v_3.jpg", description: "image nutella 3" }
+            ],
+            text: "Voici du bon nutella",
+            subjectTarget: [],
+            seen: 4,
+            date: new Date(),
+        }
+    }
+
 }

src/app/utils/services/theme/theme.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/utils/services/theme/theme.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService
+{
+    isLightTheme = true;
+
+    getClassTheme(): string
+    {
+        if(this.isLightTheme) return "lightTheme" ;
+        else return "darkTheme"
+    }
+}