From d5d2298f06afee349f07ba4c1ae9ecc3e98f1555 Mon Sep 17 00:00:00 2001
From: TheCoreDev <laurent@thecoredev.fr>
Date: Sat, 11 Nov 2023 22:49:47 +0100
Subject: [PATCH] =?UTF-8?q?Ca=20marche=20sur=20r=C3=A9servation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.js                | 13 +++++++-----
 public/styles.css     |  7 +++++++
 views/reservation.hbs | 47 +++++++++++++++++++++++++++++++++++++------
 3 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/app.js b/app.js
index ccdd5e1..5e04183 100644
--- a/app.js
+++ b/app.js
@@ -29,7 +29,7 @@ app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));
 app.use(express.json());
 
 app.get("/", (req, res) => { 
-    db.query('SELECT c.id, c.libelle, c.prix, c.photo, c.lien, p.prenom as "demandeur", c.achete as "achete", p2.prenom as "responsable" FROM cadeau c LEFT OUTER JOIN participations pc on pc.cadeau = c.id LEFT OUTER JOIN participant p on p.id = pc.personne LEFT OUTER JOIN participant p2 on p2.id = pc.responsable', 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 "demandeur", c.achete as "achete", p2.prenom as "responsable" FROM cadeau c LEFT OUTER JOIN participations pc on pc.cadeau = c.id LEFT OUTER JOIN participant p on p.id = pc.personne LEFT OUTER JOIN participant p2 on p2.id = pc.responsable', async (error, resultCadeaux) => {
         let message;
 
         if(error){
@@ -44,13 +44,16 @@ app.get("/", (req, res) => {
  });
 
 
-app.get("/reserve", (req, res) => { 
-    db.query('SELECT libelle, prix, photo, lien FROM cadeau WHERE id = ?', [req.query.id], async (error, result) => {
-        if(error){
+app.get("/reserve", (req, res) => {     
+    db.query('SELECT id, libelle, prix, photo, lien FROM cadeau WHERE id = ?', [req.query.id], async (error, result) => {
+        if(error) {
             console.log(error);
         }
         if (result.length > 0) {
-            res.render('reservation', { retour: result } );
+
+            db.query('SELECT id, prenom FROM participant', async (error, select) => {
+                res.render('reservation', { "id": result[0].id, "libelle": result[0].libelle, "photo": result[0].photo, "responsable": select } );
+            })
         }
     })
 });
diff --git a/public/styles.css b/public/styles.css
index f23176c..3a39435 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -26,6 +26,10 @@
     background-color: aliceblue;
 }
 
+.tableau ul:first-child li {
+    font-weight: bold;
+}
+
 figure img {
     height: 80px !important;
 }
@@ -34,3 +38,6 @@ figure img:hover {
     height: 180px !important;
 }
 
+.image {
+    width: 300px;
+}
\ No newline at end of file
diff --git a/views/reservation.hbs b/views/reservation.hbs
index 9276dd1..e135f56 100644
--- a/views/reservation.hbs
+++ b/views/reservation.hbs
@@ -16,13 +16,48 @@
             <p>{{ message }}</p>
         </div>
     </div>
-
     <div class="container mt-4">
-        <figure class="figure">
-            <img src="{{photo}}" class="figure-img img-fluid rounded" alt="Pas d'image">
-            <figcaption class="figure-caption text-center">{{libelle}}</figcaption>
-        </figure>
-        <span></span>
+        <input type="hidden" name="id" id="id-reg" value="{{id}}">
+        <div class="card" style="width: 30rem;">            
+            <div class="card-header">{{libelle}}</div>    
+            <div class="card-body">
+                <form action="/confirm-reservation" method="POST">
+                    <div class="mb-3">
+                        <img src="{{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="">
+                            <option value="" disabled selected>Choisir dans la liste</option>
+                            {{#each responsable}} 
+                            <option value="{{this.id}}">{{this.prenom}}</option>
+                            {{/each}}
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password-reg" 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">
+                                <label class="form-check-label" for="inlineRadio1">Oui</label>
+                            </div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="0" checked>
+                                <label class="form-check-label" for="inlineRadio2">Non</label>
+                            </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="responsable-reg" class="form-label">Qui doit s'en occuper ?</label>
+                        <select name="acheteur" id="acheteur-reg" class="">
+                            <option value="" disabled selected>Choisir dans la liste</option>
+                            {{#each responsable}} 
+                            <option value="{{this.id}}">{{this.prenom}}</option>
+                            {{/each}}
+                        </select>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Enregistrer</button>
+                </form>
+            </div>
+        </div>
     </div>
 
     <div class="container mt-4">