From afc3b17ae3c5a3ea39ca4f8a3510dbc6c3ccd354 Mon Sep 17 00:00:00 2001
From: Julie Choquet <julie.choquet@ensiie.fr>
Date: Sun, 8 May 2016 16:40:16 +0200
Subject: [PATCH] click photo dans mes identifications

---
 Timeline/carousel.php  |  7 +++-
 Timeline/css/modal.css |  5 +++
 Timeline/js/modal.js   |  2 +-
 Timeline/mes_posts.php | 74 +++++++++++++++++++++++++++++++++++++++++-
 Timeline/timeline.php  | 17 ++--------
 5 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/Timeline/carousel.php b/Timeline/carousel.php
index ccab2c2..223c31b 100755
--- a/Timeline/carousel.php
+++ b/Timeline/carousel.php
@@ -120,6 +120,11 @@
         $i=0;
         foreach ($photos as $pic)
         {
+
+            $tab = $tabPhotos[$i];
+            $id = $tab[2];
+            $idsoiree = $tab[6];
+
             if($i == 0)
             {
                 echo "<div class='active item' data-slide-number='$i'>";
@@ -128,7 +133,7 @@
             {
                  echo "<div class='item' data-slide-number='$i'>";
             }
-            echo "<img src='$pic' class='img-responsive img-rounded' style='margin:0px auto;max-height:350px;'/>";
+            echo "<img src='$pic' id='$id' idsoiree='$idsoiree' class='img-responsive img-rounded' style='margin:0px auto;max-height:350px;' data-toggle='modal' data-target='#myModal'/>";
             echo '</div>';
            $i=$i+1;
         }
diff --git a/Timeline/css/modal.css b/Timeline/css/modal.css
index 8d0662b..ee521fc 100755
--- a/Timeline/css/modal.css
+++ b/Timeline/css/modal.css
@@ -43,3 +43,8 @@
     border-bottom-left-radius: 4px;
 }
 
+img {
+    margin-right: auto;
+    margin-left: auto;
+    max-height: 400px;
+}
\ No newline at end of file
diff --git a/Timeline/js/modal.js b/Timeline/js/modal.js
index 5bb45d3..cc72ba2 100755
--- a/Timeline/js/modal.js
+++ b/Timeline/js/modal.js
@@ -7,7 +7,7 @@ $(document).ready(function (){
 
             var src = $(this).attr('src');
             var idphoto = $(this).attr('id');
-            var idsoiree = '<?php echo $idsoiree; ?>';
+            var idsoiree =  $(this).attr('idsoiree');
             
             $('#image-content').html('<div class="thumbnail"><img src="' + src + '" class="img-responsive" /></div>');
 
diff --git a/Timeline/mes_posts.php b/Timeline/mes_posts.php
index cbe0090..206ea42 100755
--- a/Timeline/mes_posts.php
+++ b/Timeline/mes_posts.php
@@ -8,7 +8,7 @@
    function getPhotosMesPosts($db) {
 
       $id=$_SESSION['login'];
-      $stmt = $db->query("SELECT soiree.annee, soiree.name, photo.idphoto, photo.extension, photo.composteur, soiree.theme FROM photo INNER JOIN soiree ON photo.idsoiree=soiree.idsoiree WHERE photo.idposteur='$id'");
+      $stmt = $db->query("SELECT soiree.annee, soiree.name, photo.idphoto, photo.extension, photo.composteur, soiree.theme, soiree.idsoiree FROM photo INNER JOIN soiree ON photo.idsoiree=soiree.idsoiree WHERE photo.idposteur='$id'");
       $stmt->setFetchMode(PDO::FETCH_NUM);
       $result = $stmt->fetchAll();
       return $result;
@@ -58,10 +58,12 @@
 
    <!-- Js carousel -->
    <script src="js/carousel.js"></script>
+   <script type="text/javascript" src="js/modal.js"></script> 
 
    <!-- fichier css perso -->
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/mes_posts.css">
+   <link rel="stylesheet" type="text/css" href="css/modal.css">
 
 </head>
 
@@ -82,9 +84,79 @@
             echo '<div class="col-sm-3">';          
             echo '<button class="btn btn-default btn-block" id="button"><a href="ajout.php">Poster une photo</a></button>';
             echo '</div>';
+            echo '</div>';
           }
         ?>
 
 
+        <div id="myModal" class="modal fade" role="dialog">
+        <div class="modal-dialog modal-lg">
+
+            <div class="modal-content">
+
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title"></h4>
+                </div>
+           
+                <div class="modal-body">
+                <div class="row">
+                    <div class="col-lg-12 col-sm-12" id="image-content">
+                    <!-- Va contenir l'image -->
+                </div>
+                <div class="col-lg-12 col-sm-12 hidden-xs">
+                <div>
+                <div id="com-content" class="container-fluid">
+                <div class="row">
+
+                <div class="comment-tabs">
+                <ul class="nav nav-tabs" role="tablist">
+                  <li class="active"><a href="#list-comment" role="tab" data-toggle="tab"><h4>Commentaires</h4></a></li>
+                  <li><a href="#add-comment" role="tab" data-toggle="tab"><h4>Ajouter un commentaire</h4></a></li>
+                </ul>            
+                <div class="tab-content">
+                  <div class="tab-pane active" id="list-comment">                
+                      <ul class="media-list" style="overflow-y: scroll; max-height: 240px;">
+                                 
+                      </ul>
+                  </div>      
+                  <div class="tab-pane" id="add-comment">
+                      <form action="#" method="post" class="form-horizontal" id="commentForm" role="form"> 
+                          <div class="form-group">
+                              <label for="email" class="col-sm-2 control-label">Commentaire</label>
+                              <div class="col-sm-10">
+                                <textarea class="form-control" name="addComment" id="addComment" rows="5"></textarea>
+                              </div>
+                          </div>
+                          <div class="form-group">
+                              <div class="col-sm-offset-2 col-sm-10">                    
+                                  <button class="btn btn-success btn-circle text-uppercase" type="submit" id="submitComment"><span class="glyphicon glyphicon-send"></span>Envoyer</button>
+                              </div>
+                          </div>            
+                      </form>
+                  </div>
+                 
+                </div>
+                </div>
+                </div>
+                </div>
+                </div>
+
+                </div>
+
+                </div>    
+                </div> <!-- close modal body -->
+
+                <div class="modal-footer">
+                    <button class='btn btn-primary vote' data-toggle='tooltip' title='Vote pour la photo la plus trash'>Trash<span class='badge'>15</span></button>
+                    <button class='btn btn-primary vote' data-toggle='tooltip' title='Vote pour la photo où ça pécho sec'>Love<span class='badge'>15</span></button>
+                    <button class='btn btn-primary vote' data-toggle='tooltip' title='Photo de toute beauté'>Like<span class='badge'>15</span></button>
+                </div>
+          
+            </div>
+
+        </div>
+    </div>
+
  <?php include 'footer.php'; ?>
 
diff --git a/Timeline/timeline.php b/Timeline/timeline.php
index cc5527c..dc4b77d 100755
--- a/Timeline/timeline.php
+++ b/Timeline/timeline.php
@@ -63,19 +63,8 @@
 
     }
 
-    function test($tab) {
 
-	  	foreach($tab as $a)
-	  	{
-	  			
-
-	  			echo $a[0].$a[1]. PHP_EOL;
-	  		
-	  	}
-  	}
-    
-
-    function printTimeline($tab, $annee, $name) {
+    function printTimeline($tab, $annee, $name, $idsoiree) {
 
     	// $tab[0] idphoto
     	// 1 extension
@@ -140,7 +129,7 @@
 
 			echo "<div class='timeline-panel'>";
 			echo "<div class='timeline-heading'>";
-			echo "<img class='img-responsive' src='$path' id='$idphoto' data-toggle='modal' data-target='#myModal'/>";
+			echo "<img class='img-responsive' src='$path' id='$idphoto' idsoiree='$idsoiree' data-toggle='modal' data-target='#myModal'/>";
 			echo '</div>';
 			echo "<div class='timeline-body'>";
 			echo "<blockquote><p>".$com."</p><footer>D'après ".$surnom."</footer></blockquote>";
@@ -260,7 +249,7 @@
             </div>
             <ul class="timeline">
                 
-                <?php printTimeline($tabOrd, $annee, $name); ?>
+                <?php printTimeline($tabOrd, $annee, $name, $idsoiree); ?>
 
                 <li class="clearfix" style="float: none;"></li>
             </ul>
-- 
GitLab