Compare commits

..

2 commits

Author SHA1 Message Date
DarkMax31
1096fb1a18 modif couleur 2025-08-29 10:24:17 +02:00
DarkMax31
4853271bfe ajout du graph aux details restos 2025-08-29 10:20:43 +02:00
8 changed files with 263 additions and 206 deletions

Binary file not shown.

View file

@ -1,14 +1,13 @@
const axios = require("axios"); const axios = require("axios");
const { getUserByGId } = require('../users/getUsers'); const { getUserByDId } = require('../users/getUsers');
const { postUser } = require('../users/postUsers'); const { postUser } = require('../users/postUsers');
const CLIEN_ID = "71229835507-9413gbpdamv2qbcb2ov8oda2oqgcsk8q.apps.googleusercontent.com"; const CLIEN_ID = "71229835507-9413gbpdamv2qbcb2ov8oda2oqgcsk8q.apps.googleusercontent.com";
const GOOGLE_SECRET = "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"; const GOOGLE_SECRET = "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";
const GOOGLE_REDIRECT_URI = "http://localhost:3000/auth/google/callback"; const REDIRECT_URI = "http://localhost:3000/auth/google/callback";
exports.handleGoogleAuth = async (req, res) => { exports.handleGoogleAuth = async (code, res) => {
const code = req.query.code;
if (!code) return res.status(400).json({ error: "Code de validation manquant" }); if (!code) return res.status(400).json({ error: "Code de validation manquant" });
try { try {
const params = new URLSearchParams(); const params = new URLSearchParams();
@ -42,6 +41,8 @@ exports.handleGoogleAuth = async (req, res) => {
const newUser = { const newUser = {
username: userData.name || userData.email, username: userData.name || userData.email,
google_id: userData.id, google_id: userData.id,
email: userData.email,
avatar: userData.picture || null,
}; };
savedUser = await postUser(newUser); savedUser = await postUser(newUser);
} }

View file

@ -1,111 +0,0 @@
main {
text-align: left !important;
}
.restaurant-page {
width: 90%;
max-width: 1200px;
margin: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20px;
}
.restaurant-info h1 {
margin: 0;
font-size: 24px;
}
.heart {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ececec;
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 20px;
margin-left: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.rating {
display: flex;
align-items: center;
margin: 10px 0;
gap: 10px;
}
.btn {
background: #999;
border: none;
color: white;
padding: 5px 10px;
cursor: pointer;
}
.chart-placeholder {
width: 200px;
height: 200px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.main-image {
width: 100%;
height: 200px;
background: #ccc;
margin: 20px 0;
}
.description {
background: #f9f9f9;
padding: 15px;
margin-bottom: 20px;
}
.gallery {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.gallery-item {
width: 32%;
height: 150px;
background: #ddd;
}
.reviews-title {
background: #eee;
padding: 10px;
margin: 0;
}
.reviews {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.review {
background: #f5f5f5;
padding: 15px;
border: 1px solid #ddd;
}
.review h3 {
margin-top: 0;
}
.review-rating div {
margin-top: 5px;
}

View file

@ -3,11 +3,6 @@ const router = express.Router();
// Page d'accueil // Page d'accueil
router.get('/', (req, res) => { router.get('/', (req, res) => {
res.render('index', { user: req.session.user });
});
// Page resto
router.get('/resto/:id', (req, res) => {
res.render('resto', { user: req.session.user }); res.render('resto', { user: req.session.user });
}); });
@ -22,17 +17,6 @@ router.get('/auth/discord', (req, res) => {
router.get('/auth/discord/callback', require('./modules/auth/discord').handleDiscordAuth); router.get('/auth/discord/callback', require('./modules/auth/discord').handleDiscordAuth);
// Auth Google
router.get('/auth/google', (req, res) => {
const clientId = '71229835507-9413gbpdamv2qbcb2ov8oda2oqgcsk8q.apps.googleusercontent.com';
const redirectUri = 'http://localhost:3000/auth/google/callback';
const scope = 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile';
const googleAuthUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
res.redirect(googleAuthUrl);
});
router.get('/auth/google/callback', require('./modules/auth/google').handleGoogleAuth);
// Déconnexion // Déconnexion
router.get('/logout', (req, res) => { router.get('/logout', (req, res) => {
req.session.destroy((err) => { req.session.destroy((err) => {

76
views/graphique.ejs Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Diagramme Radar avec Chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 35%; margin: 0 auto;">
<canvas id="radarChart"></canvas>
</div>
<script>
const ctx = document.getElementById('radarChart').getContext('2d');
const radarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Qualité des plats', 'Ambiance', 'Accessibilité', 'Service', 'Tradition'],
datasets: [
{
label: 'Moyenne des notes',
data: [4.7, 4.6, 4.4, 4.3, 4.8],
fill: true,
backgroundColor: 'rgba(25, 80, 233, 0.2)',
borderColor: 'rgb(25, 80, 233, 10)',
pointBackgroundColor: 'rgb(55, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)',
pointStyle: 'circle',
pointRadius: 5,
pointRotation: 0,
},
]
},
options: {
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += context.formattedValue;
return label;
}
}
}
},
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 1,
callback: function(value, index, values) {
return value.toFixed(1);
}
}
}
},
elements: {
line: {
borderWidth: 3
}
}
}
});
</script>
</body>
</html>

View file

@ -1,5 +1,6 @@
<div style="display:flex; justify-content: center; align-items: center;"> <div style="display:flex; justify-content: center; align-items: center;">
<h2 style="margin-right: 20px;">LEPICURIEN</h2> <h2 style="margin-right: 20px;">LEPICURIEN</h2>
<!-- Vérification du logo : le fichier "logo.png" doit être présent dans le dossier public ou assets -->
<img style="height: 70px; width: 70px; object-fit: contain;" alt="Logo de l'entreprise" src="logo.png" onerror="this.onerror=null;this.src='https://via.placeholder.com/70?text=Logo';" /> <img style="height: 70px; width: 70px; object-fit: contain;" alt="Logo de l'entreprise" src="logo.png" onerror="this.onerror=null;this.src='https://via.placeholder.com/70?text=Logo';" />
</div> </div>
<div class="sections"> <div class="sections">
@ -7,7 +8,6 @@
<div class="section"> <div class="section">
<h3>Restaurants les plus proches</h3> <h3>Restaurants les plus proches</h3>
<div class="cards"> <div class="cards">
<a href="/resto/1" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>Le Canard Toulousain</h4> <h4>Le Canard Toulousain</h4>
@ -16,8 +16,6 @@
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=1" /> <img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=1" />
</div> </div>
</a>
<a href="/resto/2" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>Chez Pépé Louis</h4> <h4>Chez Pépé Louis</h4>
@ -26,8 +24,6 @@
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=2" /> <img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=2" />
</div> </div>
</a>
<a href="/resto/3" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>La Table Rose</h4> <h4>La Table Rose</h4>
@ -36,7 +32,6 @@
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=3" /> <img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=3" />
</div> </div>
</a>
</div> </div>
</div> </div>
@ -44,7 +39,6 @@
<div class="section"> <div class="section">
<h3>Restaurants les plus populaires</h3> <h3>Restaurants les plus populaires</h3>
<div class="cards"> <div class="cards">
<a href="/resto/4" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>Bistro Occitan</h4> <h4>Bistro Occitan</h4>
@ -53,8 +47,6 @@
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=4" /> <img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=4" />
</div> </div>
</a>
<a href="/resto/5" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>LAssiette du Sud</h4> <h4>LAssiette du Sud</h4>
@ -63,8 +55,6 @@
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=5" /> <img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=5" />
</div> </div>
</a>
<a href="/resto/6" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>Le Petit Cassoulet</h4> <h4>Le Petit Cassoulet</h4>
@ -73,6 +63,5 @@
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=6" /> <img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=6" />
</div> </div>
</a>
</div> </div>
</div> </div>

View file

@ -18,9 +18,7 @@
<a href="/" class="logo-link"> <a href="/" class="logo-link">
<img src="/logo.png" alt="Logo L'EPICURIEN" class="logo" /> <img src="/logo.png" alt="Logo L'EPICURIEN" class="logo" />
</a> </a>
<a href="/" class="">
<h1 style="text-decoration: none; color: white;">L'EPICURIEN</h1> <h1 style="text-decoration: none; color: white;">L'EPICURIEN</h1>
</a>
</div> </div>
<div class="header-center"> <div class="header-center">
<div class="search-bar"> <div class="search-bar">

View file

@ -1,23 +1,13 @@
<link rel="stylesheet" href="/resto.css" /> <body>
<div class="restaurant-page">
<div class="restaurant-page">
<!-- En-tête restaurant --> <!-- En-tête restaurant -->
<div class="header"> <div class="header">
<div class="restaurant-info"> <div class="restaurant-info">
<h1> <h1>Nom restaurant <span class="heart">❤️</span></h1>
Nom restaurant
<span class="heart">
<% if (user) { %>
❤️
<% } else { %>
🤍
<% } %>
</span>
</h1>
<p class="address">Adresse</p> <p class="address">Adresse</p>
<div class="rating"> <div class="rating">
<span>⭐️⭐️⭐️⭐️⭐️</span> <span>⭐️⭐️⭐️⭐️⭐️</span>
<a href="#avis" class="btn">Voir tous les avis</a> <button class="btn">Voir tous les avis</button>
</div> </div>
</div> </div>
<div class="chart"> <div class="chart">
@ -50,7 +40,7 @@
</div> </div>
<!-- Avis --> <!-- Avis -->
<h2 class="reviews-title" id="avis">Avis</h2> <h2 class="reviews-title">Avis</h2>
<div class="reviews"> <div class="reviews">
<div class="review"> <div class="review">
<h3>Titre avis</h3> <h3>Titre avis</h3>
@ -98,6 +88,136 @@
</div> </div>
</div> </div>
<!-- Footer -->
<footer>
<a href="#">Mentions légales</a>
<a href="#">Politique de confidentialité</a>
<a href="#">CGU</a>
</footer>
</div>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #fff;
}
.restaurant-page {
width: 90%;
max-width: 1200px;
margin: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20px;
}
.restaurant-info h1 {
margin: 0;
font-size: 24px;
}
.heart {
color: red;
}
.rating {
display: flex;
align-items: center;
margin: 10px 0;
gap: 10px;
}
.btn {
background: #999;
border: none;
color: white;
padding: 5px 10px;
cursor: pointer;
}
.chart-placeholder {
width: 200px;
height: 200px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.main-image {
width: 100%;
height: 200px;
background: #ccc;
margin: 20px 0;
}
.description {
background: #f9f9f9;
padding: 15px;
margin-bottom: 20px;
}
.gallery {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.gallery-item {
width: 32%;
height: 150px;
background: #ddd;
}
.reviews-title {
background: #eee;
padding: 10px;
margin: 0;
}
.reviews {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.review {
background: #f5f5f5;
padding: 15px;
border: 1px solid #ddd;
}
.review h3 {
margin-top: 0;
}
.review-rating div {
margin-top: 5px;
}
footer {
background: #eee;
padding: 10px;
text-align: center;
display: flex;
justify-content: space-around;
margin-top: 30px;
}
footer a {
text-decoration: none;
color: black;
}
</style>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>