changements dans le css

config/config.php

@@ -14,6 +14,7 @@ $mdp   = '';
 
 $racine='/~marocher8/WF-Website';
 
+
 //Vues
 $vues['erreur']  = 'vue/erreur.php';
 $vues['accueil']  = 'vue/accueil.php';

index.php

@@ -23,10 +23,12 @@ $loader = new \Twig\Loader\FilesystemLoader('vue/templates');
 $twig   = new \Twig\Environment($loader, [
     'cache' => false,
 ]);
+
 global $racine;
 $twig->addGlobal('racine',$racine); // /~kekentin/WF/WF-Website
 
 
+
 $cont = new Controleur\FrontControler($co);
 
 

public/styles/styleQuote.css

@@ -2,12 +2,8 @@
 
 /* ====== DARK MODE ====== */
 body.dark-mode .card {
-    position: relative;
+    /* position: relative; */
     background-color: black;
-    border-radius: 15px;
-    width: 60%;
-    display: flex;
-    margin-left: 5%;
     border: 2px solid transparent;
 }
 
@@ -20,38 +16,34 @@ body.dark-mode .card-content {
 
 
 body.dark-mode .likes {
-    margin-left: 85%;
     font-size: 20px;
     color: #fff;
 }
 
 body.dark-mode .like-icon {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 35px;
     color: #fff;
     cursor: pointer;
 }
 
 body.dark-mode .share-icon {
-    position: absolute;
-    top: 70px;
-    right: 10px;
-    font-size: 35px;
     color: #fff;
     cursor: pointer;
 }
 
+body.dark-mode .commentaire{
+    background-color: black;
+    border: 2px solid transparent;
+}
+
+body.dark-mode .likeLien{
+    color:white;
+}
+
 /* ====== LIGHT MODE ====== */
 
 body.light-mode .card {
-    position: relative;
+    /* position: relative; */
     background-color: white;
-    border-radius: 15px;
-    width: 60%;
-    display: flex;
-    margin-left: 5%;
     border: 2px solid black;
 }
 
@@ -63,48 +55,169 @@ body.light-mode .card-content {
 
 
 body.light-mode .likes {
-    margin-left: 85%;
     font-size: 20px;
     color: black;
 }
 
 body.light-mode .like-icon {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 35px;
     color: black;
     cursor: pointer;
 }
 
 body.light-mode .share-icon {
-    position: absolute;
-    top: 70px;
-    right: 10px;
-    font-size: 35px;
     color: black;
     cursor: pointer;
 }
 
+body.light-mode .commentaire{
+    background-color: #fff;
+    border: 2px solid black;
+}
+
+body.light-mode .likeLien{
+    color:black;
+}
+
 /* ====== DEFAULT ====== */
+
+.central_container{
+    display: flex;
+    justify-content: space-around;
+}
+
+.card {
+    margin-top: 5vh;
+    border-radius: 15px;
+    width: 70vw;
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.commentaire{
+    margin-top: 5vh;
+    border-radius: 15px;
+    width: 25vw;
+    height: 70vh;
+    display: flex;
+    padding: 1%;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
 .infoQuote {
     list-style: none;
     font-size: 25px;
     line-height: 40px;
-    margin-top: 35%;
-    margin-left: -45%;
-    margin-bottom: 20px;
 }
 .card-image {
     border-radius: 10px;
-    width: 310px;
-    height: 270px;
+    width: 20vw;
+    height: 35vh;
+    object-fit: cover;
 }
 
 .quote {
-    margin-top: 10px;
+    margin-top: 2vh;
     font-size: 35px;
     font-weight: bold;
     font-style: italic;
-    margin-bottom: 15px;
+}
+
+.comAdd{
+    width : 20vw;
+    height : 4vh;
+    padding-left: 1vh;
+    border: none;
+    border-radius: 20px;
+}
+
+.btn{
+    width : 2vw;
+    height : 4vh;
+    padding-left: 1vh;
+    border: none;
+    border-radius: 20px;
+    text-align: center;
+}
+
+.formulaire{
+    display : flex;
+    flex-direction: row;
+}
+
+.comment_section{
+    margin-top: 2vh;
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    height: 55vh;
+}
+
+.com{
+    background-color: #fff;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    margin-top: 1vh;
+    margin-bottom: 1vh;
+    border-radius: 20px;
+    padding : 2%;
+}
+
+.date{
+    margin-bottom: 0.5vh;
+    font-size: small;
+}
+
+.icons{
+    margin: 2vh;
+}
+
+.like-icon{
+    font-size: 50px;
+    margin-bottom: 2vh;
+}
+
+.share-icon{
+    font-size: 50px;
+}
+
+.part1{
+    display: flex;
+}
+
+.part2{
+    display: flex;
+    justify-content: space-between;
+}
+
+.likes{
+    align-self: self-end;
+    padding: 2vh;
+}
+
+.infoQuote{
+    margin: 2vh;
+    height: 31vh;
+}
+
+.userName{
+    font-size: large;
+    display: inline-block;
+}
+
+.infCom{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1vh;
+}
+
+.comAdd :focus {
+    outline: none; /* Supprime la bordure bleue */
+    box-shadow: none; /* Supprime également toute ombre ajoutée */
+}
+
+.likeLien{
+    text-decoration: none;
 }

src/Controleur/FrontControler.php

@@ -13,13 +13,15 @@ Class FrontControler{
         global $twig,$racine;
 
         $this->listAction = ['visitor' => array('accueil','search','quote','login','signin','validlogin','validsignin'),
-                             'user' => array('quiz','commentary','logout','addComment','favorite','profil'),
+                             'user' => array('quiz','commentary','logout','addComment','favorite','profil','addFav','supFav'),
                              'admin' => array('null')];
 
         $dVueEreur = [];
 
         $router = new \AltoRouter();
+
         $router->setBasePath($racine); ///~kekentin/WF/WF-Website
+
         $router->map('GET', '/', 'VisitorControler','accueil');
 
         /*
@@ -43,6 +45,8 @@ Class FrontControler{
         $router->map('GET|POST', '/signin', 'VisitorControler','signin');
         $router->map('GET|POST', '/validlogin', 'VisitorControler','validlogin');
         $router->map('GET|POST', '/validsignin', 'VisitorControler','validsignin');
+        $router->map('GET|POST', '/addFav/[i:id]', 'UserControler','addFav');
+        $router->map('GET|POST', '/supFav/[i:id]', 'UserControler','supFav');
 
 
         $match = $router->match();

src/Controleur/UserControler.php

@@ -194,4 +194,19 @@ class UserControler {
         $mdl = new QuizModel($gw);
         return $mdl->getQuiz($id)->getNbQuestions();
     }
+
+    public function addFav(array $arg){
+        global $racine;
+        $id= $arg['id'] ?? 1;
+        $this->uMod->addFavorite($_SESSION["user"],$id);
+        header("Location:" . $racine . "/quote/$id");
+        
+    }
+
+    public function supFav(array $arg){
+        global $racine;
+        $id= $arg['id'] ?? 1;
+        $this->uMod->supFavorite($_SESSION["user"],$id);
+        header("Location:". $racine ."/quote/$id");
+    }
 }

src/Controleur/VisitorControler.php

@@ -23,7 +23,7 @@ Class VisitorControler {
     
     private UserGateway $gw;
 
-    private UserModel $mdl;
+    private UserModel $uMod;
 
     private array $errors;
 
@@ -37,8 +37,7 @@ Class VisitorControler {
         $this->qMod = new QuoteModel(new QuoteGateway($co));
         $this->cMod = new CommentaryModel(new CommentaryGateway($co));
         $this->sMod = new SearchModel(new QuoteGateway($co));
-        $this->gw = new UserGateway($co);
-        $this->mdl = new UserModel($this->gw);
+        $this->uMod = new UserModel(new UserGateway($co));
     }
 
     public function accueil(){
@@ -55,6 +54,7 @@ Class VisitorControler {
     public function quote(array $arg){
         global $vues;
         $id= $arg['idQuote'] ?? 1;
+        $f = $this->uMod->isFavorite($_SESSION["user"],$id);
         $q = $this->qMod->searchId($id);
         $c = $this->cMod->getComment($id);
         require_once $vues['quote'];
@@ -118,7 +118,7 @@ Class VisitorControler {
             $pseudo = $_POST['pseudo'] ?? null;
             $mdp = $_POST['mdp'] ?? null;
 
-            $user = $this -> mdl -> getUsername($pseudo);
+            $user = $this -> uMod -> getUsername($pseudo);
 
             if ($user)
             {
@@ -170,8 +170,8 @@ Class VisitorControler {
             $option = ['cost' => 12];
             $hmdp = password_hash($mdp, PASSWORD_BCRYPT, $option);
 
-            $isUserAlreadyUsed = $this -> mdl -> getUsername($pseudo);
-            $isEmailAlreadyUsed = $this -> mdl -> getEmail($email);
+            $isUserAlreadyUsed = $this -> uMod -> getUsername($pseudo);
+            $isEmailAlreadyUsed = $this -> uMod -> getEmail($email);
 
             if ($isUserAlreadyUsed and !$isEmailAlreadyUsed)  {
                 $errors[0] = "Pseudo déjà utilisé";
@@ -189,7 +189,7 @@ Class VisitorControler {
                 require_once $vues['signin'];   
                 exit();
             }
-            else echo $this->mdl->insertUser($pseudo, $email, $hmdp);
+            else echo $this->uMod->insertUser($pseudo, $email, $hmdp);
 
             $_SESSION["role"] = 'user';
             $_SESSION["user"] = $pseudo;

src/Entity/CommentaryEntity.php

@@ -13,11 +13,12 @@ class CommentaryEntity {
      * @param string $comment
      * @param string $date
      */
-    public function __construct(int $id_comment, string $comment, string $date)
+    public function __construct(int $id_comment, string $comment, string $date, string $user)
     {
         $this->id_comment = $id_comment;
         $this->comment = $comment;
         $this->date = $date;
+        $this->user = $user;
     }
 
     /**

src/Gateway/UserGateway.php

@@ -137,5 +137,30 @@ Class UserGateway extends Gateway{
         return $result;
     }
 
+    public function inFavorite(string $username, int $idq):bool{
+        $query = 'SELECT count(*) FROM Favorite f JOIN Users u ON f.users = u.id_user WHERE u.username = :user AND f.quote = :id';
+        $this->co->executeQuery($query, array(':user'=>array($username, PDO::PARAM_STR),':id'=>array($idq, PDO::PARAM_INT)));
+        $result = $this->co->getResults();
+        return ($result[0]['count'] >= 1);
+    }
+
+    public function addFavorite(string $username, int $id){
+        $query = 'INSERT INTO Favorite VALUES ((SELECT id_user FROM Users WHERE username = :username), :id)';
+        $this->co->executeQuery($query, array(':username' => array($username,PDO::PARAM_STR), ':id' => array($id,PDO::PARAM_INT)));
+        $query = 'UPDATE Quote SET likes = (likes + 1) WHERE id_quote = :id';
+        $this->co->executeQuery($query, array(':id' => array($id,PDO::PARAM_INT)));
+    }
+
+    public function supFavorite(string $username, int $id){
+        $query = 'SELECT id_user FROM Users WHERE username = :username';
+        $this->co->executeQuery($query, array(':username' => array($username,PDO::PARAM_STR)));
+        $result = $this->co->getResults()[0]['id_user'];
+        var_dump($result);
+        var_dump($id);
+        $query = 'DELETE FROM Favorite WHERE users = :user AND quote = :id;';
+        $this->co->executeQuery($query, array(':user' => array($result,PDO::PARAM_INT), ':id' => array($id,PDO::PARAM_INT)));
+        $query = 'UPDATE Quote SET likes = (likes - 1) WHERE id_quote = :id';
+        $this->co->executeQuery($query, array(':id' => array($id,PDO::PARAM_INT)));
+    }
 }
 ?>

src/Model/UserModel.php

@@ -108,6 +108,24 @@
             $res = $this->gateway->getIdUser($username);
             return $res[0]['id_user'];
         }
+
+        public function isFavorite(string $username, int $idq): bool {
+            if($_SESSION["user"] == null){
+                return false;
+            }
+            else{
+                $res = $this->gateway->inFavorite($_SESSION["user"],$idq);
+                return $res;
+            }
+        }
+
+        public function addFavorite(string $username, int $id){
+            $this->gateway->addFavorite($username,$id);
+        }
+
+        public function supFavorite(string $username, int $id){
+            $this->gateway->supFavorite($username,$id);
+        }
     }
 
 ?>

vue/quote.php

@@ -16,5 +16,6 @@
                         'dateSortie' => $q->getDateSrc(),
                         'nbLike' => $q->getLike(),
                         'idQuote' => $q->getId(),
-                        'com' => $c,));
+                        'com' => $c,
+                        'fav' => $f));
 ?>

vue/templates/login.html

@@ -1,37 +0,0 @@
-
-    <div class="container">
-        <div class="header">
-            <div class="nav"> 
-                <img src="images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false">
-                <img id="theme-icon" src="images/light.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
-                <img src="images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false">
-            </div>
-            <div class="logo">
-                <a href="{{racine}}/"><img src="images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
-            </div>
-            <div class="user">
-                <img src="images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false">
-            </div>
-        </div>
-    </div>
-    <h1>▶ Connexion ◀</h1>
-    <div class="login">
-        <p> <strong>Identifiant *</strong></p>
-        <input type="text" class="connexion" name="name" required />
-
-        <p> <strong> Mot de passe *</strong></p>
-        <input type="password" class="connexion" name="passwd" required />
-
-        <div class="createAccount">
-            <p class="createAccount">Vous n'avez pas de compte?</p>
-            <a href="{{racine}}/signin" class="createAccount">S'incrire</a>
-        </div>
-        
-
-        <div class="buttonSudmiteDiv">
-            <button class="buttonSudmite">Connexion</button>
-        </div>
-        
-    </div>
-</body>
-</html>

vue/templates/quote.html.twig

@@ -1,38 +1,64 @@
-<div class="card">
-    <img class="card-image" src="{{ srcImg }}" >
-    
-    <div class="card-content">
-        <h2 class="quote">“{{quoteContent}}”</h2>
-        <ul class="infoQuote">
-            <li>- {{sourceName}}</li>
-            <li>- {{nameCarac}}</li>
-            <li>- {{dateSortie}}</li>
-        </ul>
+<div class="central_container">
+    <div class="card">
+        <div class="part1">
+            <img class="card-image" src="{{ srcImg }}" >
+            
+            <div class="card-content">
+                <h2 class="quote">“{{quoteContent}}”</h2>
+            </div>
 
-        <div class="likes">
-            <p>{{nbLike}} ❤️</p>
+            <div class="icons">
+                {% if fav == false %}
+                    <div class="like-icon"><a class="likeLien" href="{{racine}}/addFav/{{idQuote}}">♡</a></div>
+                {% else %}
+                    <div class="like-icon"><a class="likeLien" href="{{racine}}/supFav/{{idQuote}}">❤️</a></div>
+                {% endif %}
+                <div class="share-icon" onclick="copyCurrentUrl()">🔗</div>
+            </div>
+        </div>
+        <div class="part2">
+            <div class="info">
+                <ul class="infoQuote">
+                    <li>- {{sourceName}}</li>
+                    <li>- {{nameCarac}}</li>
+                    <li>- {{dateSortie}}</li>
+                </ul>
+            </div>
+            
+            <div class="likes">
+                    <p>{{nbLike}} ❤️</p>
+            </div>
         </div>
     </div>
 
-    <div class="like-icon">❤️</div>
-    <div class="share-icon" onclick="copyCurrentUrl()">🔗</div>
-</div>
-
-<div class="commentaire">
-    <div>
-        <form action="{{racine}}/addComment" method="post">
-            <input type="text" class="comAdd" id="content" name="content" required>
-            <input type="hidden" class="hide" id="idQuote" name="idQuote" value="{{idQuote}}">
-            <input type="submit" class="btn" value=">" />
-        </form>
+    <div class="commentaire">
+        <div class="formulaire">
+            <form action="{{racine}}/addComment" method="post">
+                <input type="text" class="comAdd" id="content" name="content" required>
+                <input type="hidden" class="hide" id="idQuote" name="idQuote" value="{{idQuote}}">
+                <input type="submit" class="btn" value=">" />
+            </form>
+        </div>
+        {% if com|length > 0 %} 
+        <div class="comment_section">
+            {% for c in com %}
+                <div class="com">
+                    <div class="infCom">
+                        <strong class="userName">
+                            {{c.user}}
+                        </strong>
+                        <div class="date">
+                            {{ c.date }}
+                        </div>
+                    </div>
+                    <p class="cont">
+                        {{c.comment}}
+                    </p>
+                </div>
+            {% endfor %} 
+        </ul>
+        {% endif %}
     </div>
-    {% if com|length > 0 %} 
-    <ul>
-        {% for c in com %}
-            <li>{{c.comment}} - {{ c.date }}</li>
-        {% endfor %} 
-    </ul>
-    {% endif %}
 </div>
 </body>
 </html>