From 5ed4e59c6186846a4e85ae7c64e1a2c8e4c66a4c Mon Sep 17 00:00:00 2001
From: nox <daniel.leporini@gmail.com>
Date: Mon, 14 Oct 2019 00:56:07 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20la=20gestion=20des=20photos=20du?=
 =?UTF-8?q?=20bien/service.=20Style=20banni=C3=A8re=20bootswatch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/ajax/addRecord.php                   | 14 +---
 public/ajax/deleteProduits.php              |  7 +-
 public/ajax/readRecords.php                 |  7 +-
 public/ajax/updateProduitsDetails.php       |  3 +-
 public/ajax/upload.php                      | 26 ++++++
 public/css/style.css                        |  8 +-
 public/js/script.js                         | 90 +++++++++++++++++----
 src/Product/views/admin/products/form.twig  | 13 +--
 src/Product/views/admin/products/index.twig | 38 ++++++---
 views/layout.twig                           | 11 +--
 10 files changed, 160 insertions(+), 57 deletions(-)
 create mode 100644 public/ajax/upload.php

diff --git a/public/ajax/addRecord.php b/public/ajax/addRecord.php
index ff98128..4ea1a9d 100644
--- a/public/ajax/addRecord.php
+++ b/public/ajax/addRecord.php
@@ -15,33 +15,27 @@ ini_set('display_errors', 0);
 		// Récupération des informations du formulaire
 		$params = array();
 		$params['name'] = $params['slug'] = $_POST['produit'];
+		$params['image'] = $_POST['image'];
 		$params['user_id'] = $_POST['id_user'];
 		//$params['cle_pub'] = $_POST['cle_pub'];
 		$params['quantite'] = $_POST['quantite'];
 		$params['prix'] = $_POST['prix'];
-		//$params['created_at'] = date('d-m-Y h:i:s');
+		//$params['created_at'] = date('d-m-Y');
 		$params['antenne_id'] = $antenne_id;
 		$params['content'] = '';
-		$params['image'] = '';
+
 		// Insertion dans la base
 		/*$requete = "INSERT INTO products(name, user_id, quantite, prix, created_at, antenne_id)
 					VALUES(':nom_produit', ':vendeur', ':quantite', :prix, ':created_at', ':antenne_id')";*/
-		//$stmt = $bdd->prepare($requete);
-		//$stmt->execute($params);
 		$fields = array_keys($params);
-		//var_dump($fields);
-		//die();
+
 		$values = join(', ', array_map(function ($field) {
 			return ':' . $field;
 		}, $fields));
 		$fields = join(', ', $fields);
-		//var_dump($fields);
-		//die();
 		$query = $bdd->prepare("INSERT INTO products ($fields) VALUES ($values)");
 		//$query = $bdd->prepare("INSERT INTO products (name,slug,user_id,quantite,prix,antenne_id,content,image)
 		//			VALUES ('test77','test77','1','1','55','1','','')");
-
 		$query->execute($params);
-		//echo json_encode("1 enregistrement ajouté !");
 	}
 ?>
diff --git a/public/ajax/deleteProduits.php b/public/ajax/deleteProduits.php
index 1077c41..8d4a11e 100644
--- a/public/ajax/deleteProduits.php
+++ b/public/ajax/deleteProduits.php
@@ -7,11 +7,14 @@ if($_POST['id'] !== null)
     $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
 
     $params['product_id'] = $_POST['id'];
-
+    $filename = $_POST['nom_image'];
     // Suppression du bien/service
     $requete = "DELETE FROM products WHERE id = :product_id";
-
     $stmt = $bdd->prepare($requete);
     $stmt->execute($params);
+    // Suppression de la photo du produit si elle existe
+    if (file_exists('../uploads/products/'.$filename)) {
+        unlink('../uploads/products/'.$filename);
+    }
 }
 
diff --git a/public/ajax/readRecords.php b/public/ajax/readRecords.php
index 8d66f72..82dcc1e 100644
--- a/public/ajax/readRecords.php
+++ b/public/ajax/readRecords.php
@@ -10,6 +10,7 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
 						<tr style="color: black;">
 							<th>No.</th>
 							<th>Bien / service</th>
+							<th>Photo</th>
 							<th>Vendeur</th>
 							<th>Clé publique</th>
 							<th>Quantité</th>
@@ -38,6 +39,7 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
 				<td>$number</td>";
 
             $data .= '<td>'.$row['name'].'</td>';
+            $data .= '<td><img src="/uploads/products/'.$row['image'].'" width="100" height="100" /></td>';
             $data .= '<td>'.$row['username'].'</td>';
             $data .= '<td>'.$row['cle_pub'].'</td>';
             $data .= '<td>'.$row['quantite'].'</td>';
@@ -53,7 +55,7 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
             } else {
                 $data .= ')" class=\'btn btn-info\' disabled=true';
             }
-            $data .= '>Mettre à jour';
+            $data .= '>Modifier';
             $data .= '</button>';
             $data .= '</td><td>';
             $data .= '<button onclick="DeleteProduits(\'';
@@ -61,6 +63,9 @@ $bdd = new \PDO("mysql:host=$host;dbname=$database_name", $username, $password);
             $data .= "'";
             $data .= ',';
             $data .= "'$antenne_slug'";
+            $data .= ",'";
+            $data .= $row['image'];
+            $data .= "'";
              if ($row['username'] ==  $_GET['nom_connecte'] ) {
                  $data .= ')" class=\'btn btn-danger\'';
              } else {
diff --git a/public/ajax/updateProduitsDetails.php b/public/ajax/updateProduitsDetails.php
index 86c39b8..cfdd1f4 100644
--- a/public/ajax/updateProduitsDetails.php
+++ b/public/ajax/updateProduitsDetails.php
@@ -10,9 +10,10 @@ if(isset($_POST))
     $name = $_POST['produit'];
     $quantite = $_POST['quantite'];
     $prix = $_POST['prix'];
+    $image = $_POST['image'];
     // Update Products details
 
-    $requete = "UPDATE products SET name = '$name', quantite = '$quantite', prix = $prix WHERE id = :id";
+    $requete = "UPDATE products SET name = '$name', quantite = '$quantite', prix = $prix, image = '$image' WHERE id = :id";
     $query = $bdd->prepare($requete);
     $query->execute($params);
 }
diff --git a/public/ajax/upload.php b/public/ajax/upload.php
new file mode 100644
index 0000000..c4d0b07
--- /dev/null
+++ b/public/ajax/upload.php
@@ -0,0 +1,26 @@
+<?php
+
+// Nom du fichier image
+$filename = $_FILES['image']['name'] ?? $_FILES['add_image']['name'];
+
+// Location
+$path = str_replace('\\', '/', dirname(realpath(__DIR__)));
+$location = $path.'/uploads/products/'.$filename;
+$location2 = '/uploads/products/'.$filename;
+
+// file extension
+$file_extension = pathinfo($location, PATHINFO_EXTENSION);
+$file_extension = strtolower($file_extension);
+
+// Valid image extensions
+$image_ext = array("jpg","png","jpeg");
+
+$response = 0;
+if(in_array($file_extension,$image_ext)){
+    // Upload du fichier
+    if(move_uploaded_file($_FILES['image']['tmp_name'] ?? $_FILES['add_image']['tmp_name'],$location)){
+        $response = $location2;
+    }
+}
+
+echo $response;
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index 79d7112..4767eb5 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -94,7 +94,7 @@ header.header img {
 .container {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.records_content th, .records_content2 th{
+.records_content th {
   background-color: lightgray;
   color: rgba(0,0,0,0.85);
 }
@@ -110,11 +110,11 @@ header.header img {
 
   .fond {
     background-color: black;
-    background-image: url("../toureiffel.jpeg");
+    background-image: url("../images/bildreich_1275.jpg");
     background-repeat: no-repeat;
-    background-attachment: fixed;
+    background-attachment: scroll;
     background-position: left;
-    background-size: cover;
+    background-size: contain;
   }
   .post-header {
     width: auto;
diff --git a/public/js/script.js b/public/js/script.js
index 5b465fb..91e4b33 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -2,6 +2,8 @@
 function addRecord(antenne_slug, nom_connecte, id_user) {
 
     var produit = $("#produit").val();
+    var image = $("#add_image").val();
+    var nom_image = image.substring(image.lastIndexOf("\\")+1);
     var vendeur = $("#vendeur").val();
     var cle_pub = $("#cle_pub").val();
     var quantite = $("#quantite").val();
@@ -9,6 +11,7 @@ function addRecord(antenne_slug, nom_connecte, id_user) {
     // Add record
     $.post("/ajax/addRecord.php", {
         produit: produit,
+        image: nom_image,
         vendeur: vendeur,
         cle_pub: cle_pub,
         quantite: quantite,
@@ -24,6 +27,7 @@ function addRecord(antenne_slug, nom_connecte, id_user) {
 
         // On efface les champs du popup
         $("#produit").val("");
+        $("#add_image").val("");
         $("#vendeur").val("");
         $("#cle_pub").val("");
         $("#quantite").val("");
@@ -35,12 +39,14 @@ function addRecord(antenne_slug, nom_connecte, id_user) {
 function addRecord2() {
     // get values
     var produit_r = $("#produit_r").val();
+    var image_r = $("#image_r").val();
     var vendeur_r = $("#vendeur_r").val();
     var cle_pub_r = $("#cle_pub_r").val();
     var prix_r = $("#prix_r").val();
     // Add record
     $.post("ajax/addRecord2.php", {
         produit_r: produit_r,
+        image_r: image_r,
         vendeur_r: vendeur_r,
         cle_pub_r: cle_pub_r,
         prix_r: prix_r
@@ -53,6 +59,7 @@ function addRecord2() {
 
         // clear fields from the popup
         $("#produit_r").val("");
+        $("#image_r").val("");
         $("#vendeur_r").val("");
         $("#cle_pub_r").val("");
         $("#prix_r").val("");
@@ -75,12 +82,13 @@ function readRecords2() {
     });
 }
 
-function DeleteProduits(id, antenne_slug) {
+function DeleteProduits(id, antenne_slug, nom_image) {
     $("#hidden_antenne_slug").val(antenne_slug);
     var conf = confirm("Etes-vous sûr(e) de vouloir supprimer ce bien ou service ?");
     if (conf == true) {
         $.post("/ajax/deleteProduits.php", {
-                id: id
+                id: id,
+                nom_image: nom_image
             },
             function (data, status) {
                 // Rechargement de la liste Biens/services
@@ -89,6 +97,7 @@ function DeleteProduits(id, antenne_slug) {
                 readRecords(antenne_slug, nom_connecte);
             }
         );
+
     }
 }
 function DeleteRecherches(id) {
@@ -112,57 +121,58 @@ function GetProduitsDetails(id, antenne_slug) {
             id: id
         },
         function (data, status) {
-
             var produit = JSON.parse(data);
             // Assign existing values to the modal popup fields
             $("#update_produit").val(produit.name);
+            $("#preview").html('<img src="/uploads/products/'+produit.image+'" />');
             $("#update_vendeur").val(produit.username);
             $("#update_quantite").val(produit.quantite);
             $("#update_prix").val(produit.prix);
         }
     );
-    // Open modal popup
+    // Ouverture de la fenêtre modale
     $("#update_user_modal").modal("show");
 }
 function GetRecherchesDetails(id) {
-    // Add Recherches ID to the hidden field for future usage
+    // Champ caché de l'id
     $("#hidden_user_id_r").val(id);
     $.post("ajax/readRecherchesDetails.php", {
             id_r: id
         },
         function (data, status) {
-            // PARSE json data
+
             var produit = JSON.parse(data);
-            // Assign existing values to the modal popup fields
+            // Assignation des variables aux champs du formulaire
             $("#update_produit_r").val(produit.produit);
             $("#update_vendeur_r").val(produit.vendeur);
             $("#update_cle_pub_r").val(produit.cle_pub);
             $("#update_prix_r").val(produit.prix);
         }
     );
-    // Open modal popup
+    // Ouverture de la fenêtre modale
     $("#update_user_modal2").modal("show");
 }
 function UpdateProduitsDetails(nom_connecte) {
-    // get values
+
     var produit = $("#update_produit").val();
-    //var vendeur = $("#update_vendeur").val();
+    var image = $("#image").val();
+    var nom_image = image.substring(image.lastIndexOf("\\")+1);
     var quantite = $("#update_quantite").val();
     var prix = $("#update_prix").val();
-    // get hidden field value
+    // Champs cachés
     var id = $("#hidden_user_id").val();
     var antenne_slug = $("#hidden_antenne_slug").val();
-    // Update the details by requesting to the server using ajax
     $.post("/ajax/updateProduitsDetails.php", {
             id: id,
             produit: produit,
+            image: nom_image,
             quantite: quantite,
             prix: prix
         },
-        function (data, status) {
-            // hide modal popup
+         function (data, status) {
+            // Fermeture de la fenêtre modale
             $("#update_user_modal").modal("hide");
-            // reload Produits by using readRecords();
+            // Réaffichage des biens/services
             readRecords(antenne_slug, nom_connecte);
         }
     );
@@ -170,6 +180,7 @@ function UpdateProduitsDetails(nom_connecte) {
 function UpdateRecherchesDetails() {
     // get values
     var produit = $("#update_produit_r").val();
+    var image = $("#update_image_r").val();
     var vendeur = $("#update_vendeur_r").val();
     var cle_pub = $("#update_cle_pub_r").val();
     var prix = $("#update_prix_r").val();
@@ -180,6 +191,7 @@ function UpdateRecherchesDetails() {
     $.post("ajax/updateRecherchesDetails.php", {
             id_r: id,
             produit_r: produit,
+            image_r: image,
             vendeur_r: vendeur,
             cle_pub_r: cle_pub,
             prix_r: prix
@@ -202,4 +214,52 @@ $(document).ready(function () {
     // READ records on page load
     readRecords(antenne_slug, nom_connecte);
     //readRecords2();
+    $('#add_image').change(function(){
+
+        var fd_add = new FormData();
+        var files = $('#add_image')[0].files[0];
+        fd_add.append('add_image',files);
+
+        // requête AJAX pour copier la photo et l'afficher
+        $.ajax({
+            url: '/ajax/upload.php',
+            type: 'post',
+            data: fd_add,
+            contentType: false,
+            processData: false,
+            success: function(response){
+                if(response != 0){
+                    // Show image preview
+                    $('#add_preview').html('');
+                    $('#add_preview').append("<img src='"+response+"' width='160' height='160' style='display: inline-block;'>");
+                } else {
+                    alert('L\'image n\'a pu être uploadée');
+                }
+            }
+        });
+    });
+    $('#image').change(function(){
+
+        var fd = new FormData();
+        var files = $('#image')[0].files[0];
+        fd.append('image',files);
+
+        // requête AJAX pour copier la photo et l'afficher
+        $.ajax({
+            url: '/ajax/upload.php',
+            type: 'post',
+            data: fd,
+            contentType: false,
+            processData: false,
+            success: function(response){
+                if(response != 0){
+                    // Show image preview
+                    $('#preview').html('');
+                    $('#preview').append("<img src='"+response+"' width='160' height='160' style='display: inline-block;'>");
+                } else {
+                    alert('L\'image n\'a pu être uploadée');
+                }
+            }
+        });
+    });
 });
diff --git a/src/Product/views/admin/products/form.twig b/src/Product/views/admin/products/form.twig
index 9ff7ab2..c77d95a 100644
--- a/src/Product/views/admin/products/form.twig
+++ b/src/Product/views/admin/products/form.twig
@@ -14,18 +14,19 @@
   </div>
 </div>
 <div class="row">
+  <div class="col-md-8">
+    {{ field('image', item.slug, "Image", {type: 'file'}) }}
+  </div>
   <div class="col-md-4">
     {% if item.image %}
       <img src="{{ item.thumb }}" alt="" style="width:100%;">
     {% endif %}
   </div>
-  <div class="col-md-4">
-    {{ field('image', item.slug, "Image", {type: 'file'}) }}
-  </div>
 
-  <div class="col-md-4">
-    {{ field('slug', item.slug, "Lien") }}
-  </div>
+
+ <!-- <div class="col-md-4">
+     field('slug', item.slug, "Lien")
+  </div>-->
 </div>
 {{ field('content', item.content, "Description", {type: 'textarea'}) }}
 
diff --git a/src/Product/views/admin/products/index.twig b/src/Product/views/admin/products/index.twig
index 597814b..0ab47a2 100644
--- a/src/Product/views/admin/products/index.twig
+++ b/src/Product/views/admin/products/index.twig
@@ -4,14 +4,6 @@
 
 {% block body %}
   <style>
-    .fond_paris {
-      background-image: url("../images/background_contacts.jpg");
-      background-repeat: no-repeat;
-      background-attachment:fixed;
-      background-position: center;
-      background-size: 100% auto;
-      font-family: Bree serif,"Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
     .tableau {
       width:100%;
       background-color: white;
@@ -89,7 +81,16 @@
                      <label for="produit">Bien ou service</label>
                      <input type="text" id="produit" placeholder="Bien ou service" class="form-control"/>
                  </div>
-
+                 <div class="form-group row">
+                      <div class="col-md-7">
+                          <form method='post' action='' enctype="multipart/form-data">
+                              Choisir l'image : <input type='file' name='file' id='add_image' class='form-control' ><br>
+                          </form>
+                      </div>
+                      <div class="col-md-5">
+                          <div id="add_preview" style="border:1px solid black;width:160px;height:160px;">&nbsp;</div>
+                      </div>
+                 </div>
                  <div class="form-group">
                      <label for="cle_pub">Clé publique</label>
                      <input type="text" id="cle_pub" placeholder="Clé publique" class="form-control"/>
@@ -120,17 +121,28 @@
           <div class="modal-dialog" role="document" style="color: black;">
               <div class="modal-content" style="text-align: left;">
                   <div class="modal-header">
-                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">Mettre à jour</h4>
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   </div>
                   <div class="modal-body">
+                      <div class="form-group">
+                          <label for="update_vendeur">Vendeur</label>
+                          <input type="input" disabled="disabled" id="update_vendeur" placeholder="Vendeur" class="form-control"/>
+                      </div>
                       <div class="form-group">
                           <label for="update_produit">Bien ou service</label>
                           <input type="text" id="update_produit" placeholder="Bien ou service proposé" class="form-control"/>
                       </div>
-                      <div class="form-group">
-                          <label for="update_vendeur">Vendeur</label>
-                          <input type="input" disabled="disabled" id="update_vendeur" placeholder="Vendeur" class="form-control"/>
+                      <div class="form-group row">
+                          <div class="col-md-7">
+                              <form method='post' action='' enctype="multipart/form-data">
+                                  Choisir l'image : <input type='file' name='file' id='image' class='form-control' ><br>
+                                  <!--<input type='button' class='btn btn-info' value='Upload image' id='upload'>-->
+                              </form>
+                          </div>
+                          <div class="col-md-5">
+                               <div id="preview" style="border:1px solid black;width:160px;height:160px;">&nbsp;</div>
+                          </div>
                       </div>
                       <div class="form-group has-error has-feedback">
                           <label for="update_quantite">Quantité</label>
diff --git a/views/layout.twig b/views/layout.twig
index f9471ca..d651942 100644
--- a/views/layout.twig
+++ b/views/layout.twig
@@ -20,11 +20,13 @@
     <a class="navbar-brand" href="#">Ğ1-Marché</a>
     <ul class="navbar-nav mr-auto">
         <li class="nav-item">
-            <a class="nav-link {% if regions %} active{% endif %}" href="{{ path('gmarche.index') }}">Accueil</a>
+            <a class="nav-link {% if regions %} active{% endif %}" style="font-size:14px;"
+               href="{{ path('gmarche.index') }}">Accueil</a>
         </li>
 
         <li class="nav-item">
-            <a class="nav-link {% if explodeUrl()[1]=='contact' %} active{% endif %}" href="{{ path('contact') }}">Qui sommes-nous ?</a>
+            <a class="nav-link {% if explodeUrl()[1]=='contact' %} active{% endif %}" style="font-size:14px;"
+               href="{{ path('contact') }}">Qui sommes-nous ?</a>
         </li>
         {% if antenne_name %}
             <button class="btn-custom">Produits</button>
@@ -40,7 +42,7 @@
             &nbsp; &nbsp;
             <form method="post" action="{{ path('auth.logout') }}">
                 <!-- csrf_input() }}-->
-                <button class="btn btn-danger">Se déconnecter</button>
+                <button class="btn btn-danger" style="font-size:14px;">Se déconnecter</button>
             </form>
         {% else %}
             <div class="nav-item active">
@@ -60,8 +62,7 @@
         </div>
     {% endif %}
 
-    <!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
-    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   {% block body %}{% endblock %}
 
 </div><!-- /.container -->