Ca commence à fonctionner

app.js

@@ -4,6 +4,8 @@ const dotenv = require('dotenv')
 const app = express()
 const path = require("path")
 const publicDir = path.join(__dirname, './public')
+var bodyParser = require('body-parser')
+
 
 /* Connexion à la BDD MySQL */
 dotenv.config({ path: './.env'})
@@ -22,14 +24,19 @@ db.connect((error) => {
     }
 })
 
+
 app.set('view engine', 'hbs');
 app.use(express.static(publicDir));
 /* Pour utiliser le bootstrap local */
 app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));
-app.use(express.json());
+/* configure the Express.js server to receive the form values as JSON */
+app.use(bodyParser.urlencoded({extended: false}));
+app.use(express.json())
+
 
 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 "responsable_achat" 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', async (error, resultCadeaux) => {
+
+    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 "responsable_achat" 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.prix', async (error, resultCadeaux) => {
         let message;
 
         if(error){
@@ -44,16 +51,57 @@ app.get("/", (req, res) => {
  });
 
 
-app.get("/reserve", (req, res) => {     
+app.get("/choix-offrant", (req, res) => { 
-    db.query('SELECT id, libelle, prix, photo, lien FROM cadeau WHERE id = ?', [req.query.id], async (error, result) => {
+    let cadeau = req.query.cadeau;
+
+    db.query('SELECT id, prenom FROM participant ORDER BY prenom', async (error, result) => {
         if(error) {
             console.log(error);
         }
         if (result.length > 0) {
-            db.query('SELECT id, prenom, FROM participant', async (error, selectOffrant) => {
+            res.render('offrant', { "cadeau" : cadeau, "listeOffrants": result});
+        }
+    })
+})
 
-                db.query('SELECT sum(c.prix) FROM cadeau c LEFT OUTER JOIN participations pc on pc.cadeau = c.id WHERE pc.offrant = ?', [], async (error, totalAchats) => {
+
-                    res.render('reservation', { "id": result[0].id, "libelle": result[0].libelle, "photo": result[0].photo, "offrant": selectOffrant, "totalDepenses": totalAchats } );
+app.get("/reservation", (req, res) => { 
+
+    let reqCadeau = req.query.cadeau;
+    let reqOffrant = req.query.offrant;
+
+    let totalAchats;
+
+    db.query('SELECT id, libelle, prix, photo, lien, achete, paye FROM cadeau WHERE id = ?', [reqCadeau], async (error, infosCadeau) => {
+        if(error) {
+            console.log(error);
+        }
+        if (infosCadeau.length > 0) {
+            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.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.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} );
                 })
             })
         }
@@ -61,6 +109,27 @@ app.get("/reserve", (req, res) => {
 });
 
 
+
+app.post("/confirm-reservation", (req, res) => { 
+
+    const { cadeau, offrant, achete, paye, responsableAchat } = req.body
+
+    db.query('UPDATE cadeau SET achete=?, paye=? WHERE ID=?', [achete, paye, cadeau], function (err, result) {
+        if (err) throw err;
+        console.log("1 record updated");
+      });
+
+    db.query('INSERT INTO participations (offrant, cadeau, responsable_achat) VALUES (?, ?, ?)', [offrant, cadeau, responsableAchat], function (err, result) {
+        if (err) throw err;
+        console.log("1 record updated");
+      });
+
+
+    res.redirect('/');
+
+});
+
+
 app.listen(5006, ()=> {
     console.log("server started on port 5006")
 });

public/styles.css

@@ -4,15 +4,14 @@
     text-align: left;
 }
 
-.tableau li:nth-child(1) {
+/*
-    width: 300px;
-}
 .tableau li:nth-child(2),
 .tableau li:nth-child(3),
 .tableau li:nth-child(4),
 .tableau li:nth-child(5) {
     width: 100px;
 }
+*/
 
 .tableau li {
     flex: auto;
@@ -30,14 +29,22 @@
     font-weight: bold;
 }
 
-figure img {
+img {
     height: 80px !important;
+    transition: transform .1s;
 }
 
-figure img:hover {
+img:hover{
-    height: 180px !important;
+    -ms-transform: scale(5); /* IE 9 */
+    -webkit-transform: scale(5); /* Safari 3-8 */
+    transform: scale(5);
 }
 
-.image {
+.offrants {
-    width: 300px;
+    width: 100%;
+}
+
+.depenses {
+    font-weight: bold;
+    color: red;;
 }

views/index.hbs

@@ -11,7 +11,7 @@
 </head>
 <body>
     <div class="container mt-4">
-        <div class="mt-4 p-5 bg-primary text-white rounded">
+        <div class="mt-4 p-5 bg-danger text-white rounded">
             <h1>Liste des cadeaux de Noël pour Louisa</h1>
             <p>{{ message }}</p>
         </div>
@@ -24,12 +24,13 @@
             <li>&nbsp;</li>
             <li>&nbsp;</li>
             <li>&nbsp;</li>
-            <li>Réservé par</li>
+            <li>Qui va l'offrir ?</li>
             <li>&nbsp;</li>
             <li>Qui l'achète ?</li>
         </ul>
         {{#each cadeaux}}
         <ul>
+            <li><a href="{{this.lien}}" target="_blank">Voir le produit</a></li>
             <li>
                 <figure class="figure">
                     <img src="{{this.photo}}" class="figure-img img-fluid rounded" alt="Pas d'image" ob>
@@ -37,9 +38,8 @@
                 </figure>
             </li>
             <li>{{this.prix}} €</li>
-            <li><a href="{{this.lien}}" target="_blank">Voir le produit</a></li>
             <li>{{#if this.acheteur}}{{this.acheteur}}
-                {{else}}<a href="/reserve?id={{this.id}}" class="btn btn-primary">Le réserver</a>{{/if}}
+                {{else}}<a href="/choix-offrant?cadeau={{this.id}}" class="btn btn-primary">Le réserver</a>{{/if}}
             </li>
             <li>
                 <div class="form-check form-switch">

views/offrant.hbs

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Qui êtes-vous ?</title>
+    <link rel="stylesheet" href="/styles.css">
+    <link href="/css/bootstrap.min.css" rel="stylesheet">
+  </head>
+</head>
+<body>
+    <div class="container mt-4">
+        <div class="mt-4 p-5 bg-danger text-white rounded">
+            <h1>Qui êtes-vous ?</h1>
+            <p>{{ message }}</p>
+        </div>
+        <input type="hidden" name="cadeau" id="cadeau-reg" value="{{cadeau}}">
+        <div class="card" style="width: 30rem;">
+            <div class="card-body">
+            {{#each listeOffrants}}
+                <div class="mb-3">
+                    <a href="reservation?cadeau={{../cadeau}}&offrant={{this.id}}" class="btn btn-primary offrants">{{this.prenom}}</a>
+                </div>
+            {{/each}}
+        </div>
+        <a href="/" class="btn btn-secondary">Retour aux cadeaux</a>
+    </div>
+</body>
+</html>

views/reservation.hbs

@@ -11,49 +11,58 @@
 </head>
 <body>
     <div class="container mt-4">
-        <div class="mt-4 p-5 bg-primary text-white rounded">
+        <div class="mt-4 p-5 bg-danger text-white rounded">
             <h1>Réserver ce cadeau</h1>
             <p>{{ message }}</p>
         </div>
     </div>
     <div class="container mt-4">
-        <input type="hidden" name="id" id="id-reg" value="{{id}}">
+        <div class="card" style="width: 30rem;">     
-        <div class="card" style="width: 30rem;">            
+            <div class="card-header">{{infosCadeaux.libelle}}</div>    
-            <div class="card-header">{{libelle}}</div>    
             <div class="card-body">
                 <form action="/confirm-reservation" method="POST">
+                    <input type="hidden" name="cadeau" id="cadeau-id" value="{{infosCadeaux.id}}">
+                    <input type="hidden" name="offrant" id="offrant-id" value="{{offrant.id}}">
                     <div class="mb-3">
-                        <img src="{{photo}}" class="image">                        
+                        <img src="{{infosCadeaux.photo}}" class="image">                        
                     </div>
                     <div class="mb-3">
                         <label for="responsable-reg" class="form-label">Qui es-tu ?</label>
-                        <select name="responsable" id="responsable-reg" class="">
+                        <input type="text" disabled id="offrant-reg" name="offrant" value="{{offrant.prenom}}">
-                            <option value="" disabled selected>Choisir dans la liste</option>
+                        <p class="depenses">Pour l'instant, tu as déjà dépensé : {{totalAchats}}€</p>
-                            {{#each responsable}} 
-                            <option value="{{this.id}}">{{this.prenom}}</option>
-                            {{/each}}
-                        </select>
                     </div>
+                    <br>
                     <div class="mb-3">
-                        <label for="password-reg" class="form-label">Le cadeau a-t-il déjà été acheté ?</label>
+                        <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="inlineRadioOptions" id="inlineRadio1" value="1">
+                                <input class="form-check-input" type="radio" name="achete" id="achete1" value="1" {{#if infosCadeaux.achete}}checked{{/if}}>
-                                <label class="form-check-label" for="inlineRadio1">Oui</label>
+                                <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="inlineRadioOptions" id="inlineRadio2" value="0" checked>
+                                <input class="form-check-input" type="radio" name="achete" id="achete2" value="0" {{#unless infosCadeaux.achete}}checked{{/unless}}>
-                                <label class="form-check-label" for="inlineRadio2">Non</label>
+                                <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 ?</label>
-                        <select name="acheteur" id="acheteur-reg" class="">
+                        <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 responsable}} 
+                            {{#each listeResponsables}} 
                             <option value="{{this.id}}">{{this.prenom}}</option>
                             {{/each}}
                         </select>
                     </div>
+                    <div class="mb-3">
+                        <label class="form-label">Le cadeau a-t-il déjà été payé ?</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>
                     <button type="submit" class="btn btn-primary">Enregistrer</button>
                     <a href="/" class="btn btn-secondary">Retour aux cadeaux</a>
                 </form>