TheCoreDev/WishList
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Nouvelle version, simplifiée

Browse Source
This commit is contained in:
TheCoreDev
2024-12-08 23:20:17 +01:00
parent c19140edc0
commit 07002843af
11 changed files with 129 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
public/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
public/Minecraft.ttf Normal file
View File

Binary file not shown.

BIN
public/minecraft_logo_icon_168974.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

6
public/script.js Normal file
View File

@@ -0,0 +1,6 @@
function afficherLaSuite() {
document.getElementById("nouveau-participant").setAttribute("type", "text");
document.getElementById("bouton-continuer").setAttribute("display", "inline");
}

71
public/styles.css
View File

@@ -1,16 +1,38 @@
@font-face {
font-family: 'Minecraft';
src: url('Minecraft.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.titre, .sous-titre {
font-family: 'Poppins', Geneva, Verdana, sans-serif;
text-align: center;
}
.titre {
font-size: xx-large;
font-weight: bold;
color: red;
}
.sous-titre {
color: #6c757d
}
.tableau ul { .tableau ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: left; text-align: center;
} }
.tableau li { .tableau li {
width: 80px; width: 80px;
} }
.tableau li:nth-child(2) { .tableau li:nth-child(1) {
width: 200px; width: 200px;
} }
.tableau li:nth-child(3) { .tableau li:nth-child(2) {
width: 20px; width: 20px;
} }
.tableau li { .tableau li {
@@ -18,12 +40,14 @@
list-style-type: none; list-style-type: none;
padding: 0px 4px; padding: 0px 4px;
align-self: center; align-self: center;
text-align: left;
} }
figure { figure {
margin: 4px 0px !important; margin: 4px 0px !important;
} }
.tableau li a:link {
text-decoration: none;
}
.tableau ul:nth-child(even) { .tableau ul:nth-child(even) {
background-color: #fff3f3; background-color: #fff3f3;
@@ -58,13 +82,14 @@ ul > li > a {
img { img {
height: 80px !important; height: 80px !important;
transition: transform .1s; transition: transform .4s;
} }
img:hover{ img:hover {
-ms-transform: scale(5); /* IE 9 */ -ms-transform: scale(5); /* IE 9 */
-webkit-transform: scale(5); /* Safari 3-8 */ -webkit-transform: scale(5); /* Safari 3-8 */
transform: scale(5); transform: scale(5);
transition: .4s;
} }
.offrants { .offrants {
@@ -85,3 +110,37 @@ img:hover{
text-align: center; text-align: center;
font-size: x-large; font-size: x-large;
} }
.participant {
width: 200px;
margin-top: 15px;
margin-bottom: 15px;
}
/* Résultats du vote */
.general {
width: 70%;
display: flex;
align-items: center;
background-color: lightgreen;
}
.logo img {
margin: 15px;
transition: none !important;
transform: none !important;
}
.emoticon {
font-size: 78px;
margin: 15px;
}
.vote {
width: inherit;
font-family: "Minecraft";
}
.btn-secondary {
margin-top: 25px;;
}

46
views/index.hbs
View File

@@ -1,67 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cadeaux de Noël pour Louisa</title> <title>Notre liste d'envies</title>
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="../styles.css">
<link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap.min.css" rel="stylesheet">
</head> </head>
</head> </head>
<body> <body>
<div class="container mt-4"> <div class="container mt-4">
<div class="mt-4 p-5 bg-danger text-white rounded"> <p class="titre">Notre liste d'envies</p>
<h1>Liste des cadeaux pour Louisa</h1> <p class="sous-titre">A court d'idée pour un cadeau ? De quoi vous inspirer...</p>
<p>{{ message }}</p>
</div>
</div> </div>
<br> <br>
<br> <br>
<div class="tableau"> <div class="tableau">
<ul style="display: none">
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>Qui va l'offrir ?</li>
<li>Statut</li>
<li>Noël ou son anniv' ?</li>
<li>Emballé ?</li>
</ul>
{{#each cadeaux}} {{#each cadeaux}}
<ul> <ul>
<li><a href="{{this.lien}}" target="_blank">Voir le produit</a></li>
<li> <li>
<figure class="figure"> <figure class="figure">
<img src="{{this.photo}}" class="figure-img img-fluid rounded" alt="Pas d'image" ob> <img src="{{this.photo}}" class="figure-img img-fluid rounded" alt="Pas d'image" ob>
<figcaption class="figure-caption">{{this.libelle}}</figcaption> <figcaption class="figure-caption"><a href="{{this.lien}}" target="_blank">{{this.libelle}}</a></figcaption>
</figure> </figure>
</li> </li>
<li>{{this.prix}} €</li> <li>{{this.prix}} €</li>
<li>{{#if this.acheteur}}{{this.acheteur}} <li>{{#if this.acheteur}}Réservé par {{this.acheteur}}
{{else}}<a href="/choix-offrant?cadeau={{this.id}}" class="btn">Le réserver</a>{{/if}} {{else}}<a href="/choix-offrant?cadeau={{this.id}}" class="btn">Le réserver</a>{{/if}}
</li> </li>
<li>
<div class="form-check form-switch">
{{#if this.achete}}
<label class="form-check-label">Déja acheté{{#equals this.responsableAchat "Les parents"}}{{#unless this.paye}}<br>A rembourser{{/unless}}{{/equals}}</label>
{{else}}
<label class="form-check-label">A acheter{{#equals this.responsableAchat "Les parents"}}{{#unless this.paye}}<br>A rembourser{{/unless}}{{/equals}}</label>
{{/if}}
</div>
<li>{{#if this.pourNoel}}Noël{{else}}Anniversaire{{/if}}</li>
<li>
{{#if this.achete}}
{{#if this.emballe}}
<label class="form-check-label">Emballé</label>
{{else}}
<label class="form-check-label"><b>A emballer</b></label>
{{/if}}
{{else}}
&nbsp;
{{/if}}
</li>
</ul> </ul>
{{/each}} {{/each}}
</div> </div>

27
views/offrant.hbs
View File

@@ -1,30 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Qui êtes-vous ?</title> <title>Réservation pour Louisa</title>
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
<link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/script.js"></script>
</head> </head>
</head> </head>
<body> <body>
<div class="container mt-4"> <div class="container mt-4">
<div class="mt-4 p-5 bg-danger text-white rounded"> <div class="mt-4 p-3 bg-danger text-white rounded">
<h1>Qui êtes-vous ?</h1> <h1>Qui es-tu ?</h1>
<p>{{ message }}</p> <p>{{ message }}</p>
</div> </div>
<input type="hidden" name="cadeau" id="cadeau-reg" value="{{cadeau}}"> <div class="saisie-offrant">
<div class="card" style="width: 30rem;"> <form action="/reservation" method="GET">
<div class="card-body"> <input type="hidden" name="cadeau" id="cadeau" value="{{cadeau}}">
{{#each listeOffrants}} <input type="text" name="offrant" id="offrant" class="participant" placeholder="Saisissez votre prénom" required>
<div class="mb-3"> <input type="submit" id="btn-continuer" class="btn btn-primary" value="Continuer">
<a href="reservation?cadeau={{../cadeau}}&offrant={{this.id}}" class="btn btn-primary offrants">{{this.prenom}}</a> </form>
</div>
{{/each}}
</div> </div>
<a href="/" class="btn btn-secondary">Retour aux cadeaux</a> <a href="/" class="btn btn-secondary"><< Annuler (retour aux cadeaux)</a>
</div> </div>
</body> </body>
</html> </html>

64
views/reservation.hbs
View File

@@ -1,85 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réserver un des cadeaux</title> <title>Réservation pour Louisa</title>
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
<link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap.min.css" rel="stylesheet">
</head> </head>
</head> </head>
<body> <body>
<div class="container mt-4"> <div class="container mt-4">
<div class="mt-4 p-5 bg-danger text-white rounded"> <div class="mt-4 p-3 bg-danger text-white rounded">
<h1>Réserver ce cadeau</h1> <h1>Merci {{offrant}} : voici le cadeau que tu as sélectionné</h1>
<p>{{ message }}</p> <p>{{ message }}</p>
</div> </div>
</div> </div>
<div class="container mt-4"> <div class="container mt-4">
<div class="card" style="width: 40rem;"> <div class="card">
<div class="card-header">{{infosCadeaux.libelle}}</div> <div class="card-header">{{infosCadeau.libelle}}</div>
<div class="card-body"> <div class="card-body">
<form action="/confirm-reservation" method="POST"> <form action="/confirm-reservation" method="POST">
<input type="hidden" name="cadeau" id="cadeau-id" value="{{infosCadeaux.id}}"> <input type="hidden" name="cadeau" id="cadeau-id" value="{{infosCadeau.id}}">
<input type="hidden" name="offrant" id="offrant-id" value="{{offrant.id}}"> <input type="hidden" name="offrant" id="offrant-id" value="{{offrant}}">
<div class="mb-3"> <div class="mb-3">
<img src="{{infosCadeaux.photo}}" class="image"> <img src="{{infosCadeau.photo}}" class="image">
</div> </div>
<div class="mb-3">
<label for="responsable-reg" class="form-label">Qui es-tu ?</label>
<input type="text" disabled id="offrant-reg" name="offrant" value="{{offrant.prenom}}">
<p class="depenses">Pour l'instant, tu as déjà dépensé : {{totalAchats}}€</p>
</div>
<br>
<div class="mb-3">
<label class="form-label">Le cadeau a-t-il déjà été acheté ?</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="achete" id="achete1" value="1" {{#if infosCadeaux.achete}}checked{{/if}}>
<label class="form-check-label" for="achete1">Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="achete" id="achete2" value="0" {{#unless infosCadeaux.achete}}checked{{/unless}}>
<label class="form-check-label" for="achete2">Non</label>
</div>
</div>
<div class="mb-3">
<label for="responsable-reg" class="form-label">Qui doit s'occuper de l'achat (toi y compris) ?</label>
<select name="responsableAchat" id="acheteur-reg" required class="form-select" aria-label="Default select example">
<option value="" disabled selected>Choisir dans la liste</option>
{{#each listeResponsables}}
<option value="{{this.id}}">{{this.prenom}}</option>
{{/each}}
</select>
</div>
<div class="mb-3">
<label class="form-label">Si quelqu'un d'autre doit acheter le cadeau, avez-vous déjà remboursé cette personne ?</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="paye" id="paye1" value="1" {{#if infosCadeaux.paye}}checked{{/if}}>
<label class="form-check-label" for="paye1">Oui</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="paye" id="paye2" value="0" {{#unless infosCadeaux.paye}}checked{{/unless}}>
<label class="form-check-label" for="paye2">Non</label>
</div>
</div>
<br>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Pour quelle occasion veux-tu l'offrir ?</label> <label class="form-label">Pour quelle occasion veux-tu l'offrir ?</label>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="occasion" id="occasion1" value="1" {{#if infosCadeaux.pourNoel}}checked{{/if}}> <input class="form-check-input" type="radio" name="occasion" id="occasion1" value="1" {{#if infosCadeau.pourNoel}}checked{{/if}}>
<label class="form-check-label" for="occasion1">Pour Noël</label> <label class="form-check-label" for="occasion1">Pour Noël</label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="occasion" id="occasion2" value="0" {{#unless infosCadeaux.pourNoel}}checked{{/unless}}> <input class="form-check-input" type="radio" name="occasion" id="occasion2" value="0" {{#unless infosCadeau.pourNoel}}checked{{/unless}}>
<label class="form-check-label" for="occasion2">Pour son anniversaire</label> <label class="form-check-label" for="occasion2">Pour son anniversaire</label>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Enregistrer</button> <button type="submit" class="btn btn-primary">Continuer</button>
<a href="/" class="btn btn-secondary">Retour aux cadeaux</a>
</form> </form>
</div> </div>
</div> </div>
<a href="/" class="btn btn-secondary"><< Annuler (retour aux cadeaux)</a>
</div> </div>
</body> </body>
</html> </html>

15
views/votre-vote.hbs
View File

@@ -9,11 +9,14 @@
</head> </head>
</head> </head>
<body> <body>
<br><br> <div class="general">
<div class="vote">{{#if present}}😁{{else}}☹️{{/if}} {{enfant}} {{#unless present}}ne{{/unless}} sera {{#unless present}}pas{{/unless}} là à l'anniversaire de Louisa le 17 décembre </div> <span class="logo">
<br> <img src="/minecraft_logo_icon_168974.png">
<br> </span>
{{#unless present}}<div class="vote-sm">Si vous changez d'avis, vous pouvez toujours nous contacter au <a href="tel:06.22.88.28.80">06.22.88.28.80</a> ou au <a href="tel:06.52.90.38.10">06.52.90.38.10</a></div>{{/unless}} <span class="vote">{{enfant}} {{#unless present}}ne{{/unless}} sera {{#unless present}}pas{{/unless}} la a l'anniversaire<br>de Louisa le 14 decembre 2024</span>
{{#if present}}<div class="vote-sm">Louisa a hâte de retrouver ses copains pour cette occasion !!</div>{{/if}} <span class="emoticon">
{{#if present}}😁{{else}}☹️{{/if}}
</span>
</div>
</body> </body>
</html> </html>

62
wishlist.js
View File

@@ -6,6 +6,10 @@ const path = require("path")
const publicDir = path.join(__dirname, './public') const publicDir = path.join(__dirname, './public')
var bodyParser = require('body-parser') var bodyParser = require('body-parser')
/* Pour le Javascript embarqué */
app.use('/js', express.static(__dirname + './../public'));
/* Connexion à la BDD MySQL */ /* Connexion à la BDD MySQL */
dotenv.config({ path: './.env'}) dotenv.config({ path: './.env'})
const db = mysql.createConnection({ const db = mysql.createConnection({
@@ -23,7 +27,6 @@ db.connect((error) => {
} }
}) })
app.set('view engine', 'hbs'); app.set('view engine', 'hbs');
app.use(express.static(publicDir)); app.use(express.static(publicDir));
/* Pour utiliser le bootstrap local */ /* Pour utiliser le bootstrap local */
@@ -48,7 +51,7 @@ hbs.registerHelper('equals', isEqual);
app.get("/", (req, res) => { app.get("/", (req, res) => {
db.query('SELECT c.id as "id", c.libelle as "libelle", c.prix, c.photo as "photo", c.lien, p.prenom as "acheteur", c.achete as "achete", c.paye as "paye", p2.prenom as "responsableAchat", c.pour_noel as "pourNoel", c.emballe as "emballe" FROM cadeau c LEFT OUTER JOIN participations pc on pc.cadeau = c.id LEFT OUTER JOIN participant p on p.id = pc.offrant LEFT OUTER JOIN participant p2 on p2.id = pc.responsable_achat ORDER BY c.pour_noel, c.prix', async (error, resultCadeaux) => { db.query('SELECT c.id as "id", c.libelle as "libelle", c.prix, c.photo as "photo", c.lien, pc.offrant as "acheteur", c.pour_noel as "pourNoel" FROM cadeau c LEFT OUTER JOIN participations pc on pc.cadeau = c.id ORDER BY c.pour_noel, c.prix', async (error, resultCadeaux) => {
let message; let message;
if(error){ if(error){
@@ -66,70 +69,35 @@ app.get("/", (req, res) => {
app.get("/choix-offrant", (req, res) => { app.get("/choix-offrant", (req, res) => {
let cadeau = req.query.cadeau; let cadeau = req.query.cadeau;
db.query('SELECT id, prenom FROM participant ORDER BY prenom', async (error, result) => { res.render('offrant', { "cadeau" : cadeau});
if(error) {
console.log(error);
}
if (result && result.length > 0) {
res.render('offrant', { "cadeau" : cadeau, "listeOffrants": result});
}
})
}) })
app.get("/reservation", (req, res) => { app.get("/reservation", (req, res) => {
let reqCadeau = req.query.cadeau; let cadeau = req.query.cadeau;
let reqOffrant = req.query.offrant; let offrant = req.query.offrant;
let totalAchats;
db.query('SELECT id, libelle, prix, photo, lien, achete, paye, pour_noel as "pourNoel" FROM cadeau WHERE id = ?', [reqCadeau], async (error, infosCadeau) => { db.query('SELECT id, libelle, prix, photo, lien, pour_noel as "pourNoel" FROM cadeau WHERE id = ?', [cadeau], async (error, infosCadeau) => {
if(error) { if(error) {
console.log(error); console.log(error);
} }
if (infosCadeau.length > 0) { res.render('reservation', { "infosCadeau": infosCadeau[0], "offrant" : offrant });
db.query('SELECT COALESCE(sum(c.prix),0) as "total" FROM cadeau c RIGHT OUTER JOIN participations pc ON pc.cadeau = c.id INNER JOIN participant p ON p.id = pc.offrant WHERE p.id=?', [reqOffrant], async (error, result) => { });
if(error) {
console.log(error);
}
if (result && result.length > 0) {
totalAchats = result[0]
}
db.query('SELECT id, prenom FROM participant WHERE id=?', [reqOffrant], async (error, result) => {
if(error) {
console.log(error);
}
if (result && result.length > 0) {
offrant = result[0];
}
});
db.query('SELECT id, prenom FROM participant ORDER BY prenom', async (error, listeResponsables) => {
if(error) {
console.log(error);
}
res.render('reservation', { "infosCadeaux": infosCadeau[0],
"offrant" : offrant,
"totalAchats": totalAchats.total,
"listeResponsables" : listeResponsables} );
})
})
}
})
}); });
app.post("/confirm-reservation", (req, res) => { app.post("/confirm-reservation", (req, res) => {
const { cadeau, offrant, achete, paye, occasion, responsableAchat } = req.body const { cadeau, offrant, occasion } = req.body
db.query('UPDATE cadeau SET achete=?, paye=?, pour_noel=? WHERE ID=?', [achete, paye, occasion, cadeau], function (err, result) { db.query('UPDATE cadeau SET pour_noel=? WHERE ID=?', [occasion, cadeau], function (err, result) {
if (err) throw err; if (err) throw err;
console.log("1 record updated"); console.log("1 record updated");
}); });
db.query('INSERT INTO participations (offrant, cadeau, responsable_achat) VALUES (?, ?, ?)', [offrant, cadeau, responsableAchat], function (err, result) { db.query('INSERT INTO participations (offrant, cadeau) VALUES (?, ?)', [offrant, cadeau], function (err, result) {
if (err) throw err; if (err) throw err;
console.log("1 record inserted"); console.log("1 record inserted");
}); });
@@ -143,7 +111,7 @@ app.get("/presence-anniversaire", (req, res) => {
var child_process = require("child_process"); var child_process = require("child_process");
let enfant = req.query.e; let enfant = req.query.e;
let present = req.query.p; let present = req.query.p;
let messageNotif = enfant + (present == 'true' ? "" : " ne") + " sera" + (present == 'true' ? "" : " pas") + " là le 17 décembre"; let messageNotif = enfant + (present == 'true' ? "" : " ne") + " sera" + (present == 'true' ? "" : " pas") + " là le 14 décembre 2024";
db.query("DELETE FROM anniversaire WHERE enfant = ?", [enfant], function (err, result) { db.query("DELETE FROM anniversaire WHERE enfant = ?", [enfant], function (err, result) {
if (err) throw err; if (err) throw err;