johanleroy/ENI-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

patch test Signal use

Browse Source
This commit is contained in:
jleroy
2025-03-13 12:08:14 +01:00
parent eb89beffa4
commit 1482495524
6 changed files with 99 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
backend/controllers/videoController.js Normal file
View File

@@ -0,0 +1,22 @@
import pool from "../config/db.js";
export const getVideo = async (req, res) => {
let conn;
try {
conn = await pool.getConnection();
const data = await conn.query(`SELECT * FROM video ORDER BY created_at DESC`);
return res.status(200).json({
data
});
} catch (error) {
console.error('Erreur lors de la récupération de l\'utilisateur :', error);
return res.status(500).json({
message: 'Erreur lors de la récupération de l\'utilisateur.',
status: false
});
} finally {
if (conn) {
await conn.release();
}
}
};

4
backend/routes/apiRoutes.js
View File

@@ -11,6 +11,7 @@ import {verifyToken} from "../middleware/tokenJWTMiddleware.js";
import multer from "multer"; import multer from "multer";
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import path from "node:path"; import path from "node:path";
import {getVideo} from "../controllers/videoController.js";
router.get('', apiController); router.get('', apiController);
@@ -51,4 +52,7 @@ router.post('/auth/logout', logout);
router.get('/auth/user', verifyToken, getprofile); router.get('/auth/user', verifyToken, getprofile);
router.get('/auth/check-auth', verifyToken, checkAuth); router.get('/auth/check-auth', verifyToken, checkAuth);
// Récupérer vidéo
router.get('/video', getVideo)
export default router; export default router;

13
src/app/_models/video.ts Normal file
View File

@@ -0,0 +1,13 @@
export interface Videos {
data: Video[];
}
export interface Video {
id: number;
user_id: number;
name: string;
description: string;
link_miniature: string;
link_video: string;
created_at: Date;
updated_at: Date;
}

22
src/app/_services/video.service.ts Normal file
View File

@@ -0,0 +1,22 @@
import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Videos} from '../_models/video';
import {environment} from '../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class VideoService {
constructor(private http: HttpClient) { }
getVideo(): Observable<Videos> {
const headers = new HttpHeaders({
'Authorization': environment.apikey,
'Content-Type': 'application/json'
});
return this.http.get<Videos>(environment.apiurl + '/video', { headers });
}
}

90
src/app/public/pages/home/home.component.html
View File

@@ -1,85 +1,19 @@
<section class="text-gray-600 body-font"> <section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto"> <div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4"> <div class="flex flex-wrap -m-4">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full"> @for (video of videos; track video.name) {
<a class="block relative h-48 rounded overflow-hidden"> <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/420x260"> <a [href]="generatorLink()" target="_blank">
</a> <div class="block relative h-48 rounded overflow-hidden">
<div class="mt-4"> <img alt="ecommerce" class="object-cover object-center w-full h-full block" [src]="video.link_miniature">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3> </div>
<h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2> <div class="mt-4">
<p class="mt-1">$16.00</p> <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">Sortie le {{ video.created_at | date: 'dd/MM/yyyy' }}</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">{{ video.description }}</h2>
</div>
</a>
</div> </div>
</div> }
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/421x261">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/422x262">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
<p class="mt-1">$12.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/423x263">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
<p class="mt-1">$18.40</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/424x264">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
<p class="mt-1">$16.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/425x265">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
<p class="mt-1">$21.15</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/427x267">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
<p class="mt-1">$12.00</p>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/428x268">
</a>
<div class="mt-4">
<h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">CATEGORY</h3>
<h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
<p class="mt-1">$18.40</p>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>

28
src/app/public/pages/home/home.component.ts
View File

@@ -1,19 +1,43 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {Title} from '@angular/platform-browser'; import {Title} from '@angular/platform-browser';
import {VideoService} from '../../../_services/video.service';
import {Video} from '../../../_models/video';
import {DatePipe} from '@angular/common';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
imports: [], imports: [
DatePipe
],
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrl: './home.component.css' styleUrl: './home.component.css'
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
constructor(private title: Title) { videos: Video[] = []
constructor(private title: Title, private videoService: VideoService) {
} }
ngOnInit(): void { ngOnInit(): void {
this.title.setTitle('Accueil - YouVideo'); this.title.setTitle('Accueil - YouVideo');
this.videoService.getVideo().subscribe(v => {
this.videos = v.data;
})
}
generatorLink() {
const baseId = 'qiSOyusTaeo';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
const length = 11;
let randomPart = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
randomPart += characters.charAt(randomIndex);
}
return `https://youtube.com/watch?v=${randomPart}`;
} }
} }