follow adding, and list of followers

assets/styles/app.css

@@ -1,9 +1,10 @@
 body {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    /* background-color: #f0f0f0; */
     color: #1a2c4c;
 }
 
+
 .profile-container {
     background-color: #fff;
     border: 1px solid #5c5d7f;
@@ -45,6 +46,11 @@ body {
     color: #38476b;
 }
 
+.horizontal-layout {
+    display: flex;
+    align-items: center;
+}
+
 .follow-button {
     background-color: #38476b;
     color: #fff;
@@ -54,6 +60,30 @@ body {
     cursor: pointer;
     text-align: center;
     text-decoration: none;
+    margin: 4px;
+}
+
+.count-container {
+    display: flex;
+    margin-left: auto; /* Pushes the container to the right */
+}
+
+.count-button {
+    background-color: #38476b;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    margin: 4px;
+}
+
+
+
+.count-button:hover{
+    background-color: #5c5d7f;
 }
 
 .follow-button:hover {
@@ -102,3 +132,20 @@ body {
     text-decoration: none;
     cursor: pointer;
 }
+
+html {
+    --s: 257px;
+    /* control the size */
+    --c1: #38476b;
+    --c2: #bda3b6;
+  
+    --_c: var(--c1) calc(100% - var(--s)/2) 99%, #0000;
+    --_g: var(--s), #0000 calc(99% - var(--s)/2), var(--_c);
+    background:
+      radial-gradient(var(--s) at 100% var(--_g)),
+      radial-gradient(calc(var(--s)/4) at 50% calc(100%/3), var(--_c)) var(--s) 0,
+      radial-gradient(var(--s) at 0% var(--_g)) 0 calc(3*var(--s)) var(--c2);
+    background-size:
+      calc(2*var(--s)) calc(9*var(--s)/4),
+      calc(2*var(--s)) calc(3*var(--s)/4);
+  }

dbapplication.session.sql

@@ -1,3 +0,0 @@
-SELECT * FROM profil;
-
-SELECT * FROM profil_profil;

src/Controller/ProfilController.php

@@ -16,18 +16,20 @@ class ProfilController extends AbstractController
     {
     }
 
-    #[Route('/profil/{id}', requirements: ['page' => '\d+'])]
+    #[Route('/profil/{id}',name:'profil_show', requirements: ['page' => '\d+'])]
     public function profil(int $id): Response
     {
         $profil = $this->mgr->find(Profil::class, $id);
         $posts = $profil->getPosts();
         return $this->render('profil/index.html.twig', [
             'profil' => $profil,
-            'posts' => $posts
+            'posts' => $posts,
+            'followFlag' => $profil->getFollowers()->contains($this->getUser()),
+            'selfFlag' => $profil != $this->getUser()
         ]);
     }
 
-    #[Route('/profil/{id}/follow', requirements: ['page' => '\d+'])]
+    #[Route('/profil/{id}/follow',name:'profil_follow', requirements: ['page' => '\d+'])]
     public function followProfil(int $id): Response
     {
         $profil = $this->mgr->find(Profil::class, $id);
@@ -36,17 +38,49 @@ class ProfilController extends AbstractController
             $this->mgr->persist($profil);
             $this->mgr->flush();
             $this->addFlash('success','');
-            $posts = $profil->getPosts();
+            return $this->redirectToRoute('profil_show', ['id' => $id]);
-            return $this->render('profil/index.html.twig', [
+        } else {
-                'profil' => $profil,
+            $this->addFlash('error','');
-                'posts' => $posts
+            return $this->render('error.html.twig', []);
-            ]);
+        }
+    }
+
+    #[Route('/profil/{id}/unfollow',name:'profil_unfollow', requirements: ['page' => '\d+'])]
+    public function unfollowProfil(int $id): Response
+    {
+        $profil = $this->mgr->find(Profil::class, $id);
+        if ($profil instanceof Profil) {
+            $profil->removeFollower($this->getUser());
+            $this->mgr->persist($profil);
+            $this->mgr->flush();
+            $this->addFlash('success','');
+            return $this->redirectToRoute('profil_show', ['id' => $id]);
         } else {
             $this->addFlash('error','');
             return $this->render('error.html.twig', []);
         }
-        // $profil = $this->mgr->find(Profil::class,$id);
+    }
-        // 'profil' => $profil
+
+    #[Route('/profil/{id}/followers',name:'profil_followers', requirements: ['page'=> '\d'])]
+    public function getFollowers(int $id): Response
+    {
+        $profil = $this->mgr->find(Profil::class, $id);
+
+        return $this->render('profil/follow-list.html.twig', [
+            'title'=> 'Followers',
+            'profils' => $profil->getFollowers()
+            ]);
+    }
+
+    #[Route('/profil/{id}/following',name:'profil_following', requirements: ['page'=> '\d'])]
+    public function getFollowing(int $id): Response
+    {
+        $profil = $this->mgr->find(Profil::class, $id);
+
+        return $this->render('profil/follow-list.html.twig', [
+            'title'=> 'Following',
+            'profils' => $profil->getFollowing()
+            ]);
     }
 
     #[Route('/profil/new', name: 'profil_new')]

src/Entity/Profil.php

@@ -45,14 +45,23 @@ class Profil implements UserInterface, PasswordAuthenticatedUserInterface
     /**
      * @var Collection<int, self>
      */
-    #[ORM\ManyToMany(targetEntity: self::class, inversedBy: 'followers')]
+    #[ORM\ManyToMany(targetEntity: self::class, inversedBy: 'following')]
     private Collection $followers;
 
+    /**
+     * @var Collection<int, self>
+     */
+    #[ORM\ManyToMany(targetEntity: self::class, mappedBy: 'followers')]
+    private Collection $following;
+
+
     public function __construct()
     {
         $this->posts = new ArrayCollection();
         $this->commentaries = new ArrayCollection();
         $this->followers = new ArrayCollection();
+        $this->following = new ArrayCollection();
+        
     }
 
     public function getId(): ?int
@@ -161,6 +170,34 @@ class Profil implements UserInterface, PasswordAuthenticatedUserInterface
         return $this;
     }
 
+
+
+    public function getRoles(): array
+    {
+        $roles = $this->roles;
+        // guarantee every user at least has ROLE_USER
+        $roles[] = 'ROLE_USER';
+
+        return array_unique($roles);
+    }
+
+    public function setRoles(array $roles): self
+    {
+        $this->roles = $roles;
+
+        return $this;
+    }
+
+    public function eraseCredentials(): void
+    {
+        // TODO: Implement eraseCredentials() method.
+    }
+
+    public function getUserIdentifier(): string
+    {
+        return $this->name;
+    }
+
     /**
      * @return Collection<int, self>
      */
@@ -171,7 +208,7 @@ class Profil implements UserInterface, PasswordAuthenticatedUserInterface
 
     public function addFollower(self $follower): static
     {
-        if (!$this->followers->contains($follower)) {
+        if (!$this->followers->contains($follower) && $follower!=$this) {
             $this->followers->add($follower);
         }
 
@@ -185,29 +222,30 @@ class Profil implements UserInterface, PasswordAuthenticatedUserInterface
         return $this;
     }
 
-    public function getRoles(): array
+    /**
+     * @return Collection<int, self>
+     */
+    public function getFollowing(): Collection
     {
-        $roles = $this->roles;
+        return $this->following;
-        // guarantee every user at least has ROLE_USER
-        $roles[] = 'ROLE_USER';
-
-        return array_unique($roles);
     }
 
-    public function setRoles(array $roles): self
+    public function addFollowing(self $following): static
     {
-        $this->roles = $roles;
+        if (!$this->following->contains($following) && $following!=$this) {
+            $this->following->add($following);
+            $following->addFollower($this);
+        }
 
         return $this;
     }
 
-    public function eraseCredentials(): void
+    public function removeFollowing(self $following): static
     {
-        // TODO: Implement eraseCredentials() method.
+        if ($this->following->removeElement($following)) {
+            $following->removeFollower($this);
         }
 
-    public function getUserIdentifier(): string
+        return $this;
-    {
-        return $this->name;
     }
 }

templates/posts/post.detail.html.twig

@@ -1,70 +0,0 @@
-{# templates/post/show.html.twig #}
-
-{% extends 'base.html.twig' %}
-
-{% block title %}Post - {{ post.title }}{% endblock %}
-
-{% block stylesheets %}
-    <style>
-        .post-container {
-            
-            padding: 20px;
-            border-radius: 10px;
-            color: #fff;
-        }
-        .profile-name {
-            font-size: 1.5em;
-        }
-        .post-title {
-            font-size: 2em;
-            margin: 10px 0;
-        }
-        .post-text {
-            font-size: 1.2em;
-            margin-bottom: 20px;
-        }
-        .votes {
-            margin-bottom: 20px;
-        }
-        .tags {
-            margin-bottom: 20px;
-        }
-        .commentary {
-            background-color: #f0f0f0;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-        }
-        .commentary-author {
-            font-weight: bold;
-        }
-    </style>
-{% endblock %}
-
-{% block body %}
-    <div class="post-container" style="background-color: {{ post.isDream ? '#bda3b6' : '#1a2c4c' }}">
-        <h3 class="profile-name">{{ post.profil.name }}</h3>
-        <h2 class="post-title">{{ post.title }}</h2>
-        <p class="post-text">{{ post.text }}</p>
-        <div class="votes">
-            <span>Up Votes: {{ post.upVote }}</span> / <span>Down Votes: {{ post.downVote }}</span>
-        </div>
-        <div class="tags">
-            <h4>Tags:</h4>
-            <ul>
-                {% for tag in post.tags %}
-                    <li>{{ tag.name }}</li>
-                {% endfor %}
-            </ul>
-        </div>
-        <div class="commentaries">
-            <h4>Commentaires:</h4>
-            {% for commentary in post.commentaries %}
-                <div class="commentary">
-                    <div class="commentary-author">{{ commentary.profil.name }}</div>
-                    <div class="commentary-text">{{ commentary.text }}</div>
-                </div>
-            {% endfor %}
-        </div>
-    </div>
-{% endblock %}

templates/profil/follow-list.html.twig

@@ -0,0 +1,55 @@
+{# templates/profil/list.html.twig #}
+
+{% extends 'base.html.twig' %}
+
+{% block title %}Liste des Profils{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+    <link rel="stylesheet" href="{{ asset('public/css/components/profil.css') }}">
+    <style>
+        .profile-list {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .profile-card {
+            width: calc(100% / 5);
+            padding: 10px;
+            box-sizing: border-box;
+            text-align: center;
+            border: 1px solid #ddd;
+            margin: 5px;
+        }
+        .profile-card img {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+        }
+        .profile-card a {
+            display: block;
+            margin-top: 10px;
+            text-decoration: none;
+            color: #333;
+        }
+        .profile-card a:hover {
+            text-decoration: underline;
+        }
+    </style>
+{% endblock %}
+
+{% block body %}
+
+    <h1> {{title }} : </h1>
+    <div class="profile-list">
+        {% for profil in profils %}
+            <div class="profile-card">
+                <img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ profil.name }}" alt="Profile Image">
+                <a href="{{ path('profil_show', {id: profil.id}) }}">{{ profil.name }}</a>
+            </div>
+        {% endfor %}
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    <script src="{{ asset('scripts/scripts.js') }}"></script>
+{% endblock %}

templates/profil/index.html.twig

@@ -6,41 +6,44 @@
 
 {% block stylesheets %}
     <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
+    <link rel="stylesheet" href="{{ asset('public/css/components/profil.css') }}">
 {% endblock %}
 
 {% block body %}
     <div class="profile-container">
         <div class="profile-header">
-            <img src="{{ asset('images/userFiller.png') }}" alt="Profile Image" class="profile-image">
+            <img src="https://api.dicebear.com/8.x/big-smile/svg?seed={{ profil.name }}" alt="Profile Image" class="profile-image">
             <div class="profile-info">
                 <h1>{{ profil.name }}</h1>
-                <p>ID: {{ profil.id }}</p>
+                <br>
-                <p>Description: {{ profil.description }}</p>
+                <p>{{ profil.description }}</p>
+            </div>
+        </div>
+        <div class="horizontal-layout">
+        {% if selfFlag %}
+            {% if followFlag %}
+                <a href="{{ path('profil_unfollow', {id: profil.id}) }}" class="follow-button">Unfollow</a>
+            {% else %}
+                <a href="{{ path('profil_follow', {id: profil.id}) }}" class="follow-button">Follow</a>
+            {% endif %}
+        {% endif %}
+            {# <a href="{{ path('profil_follow', {id: profil.id}) }}" class="follow-button"></a> #}
+            <div class="count-container">
+                <a href="{{ path('profil_followers', {id: profil.id}) }}" class="count-button">{{ profil.followers.count() }} followers</a>
+                <a href="{{ path('profil_following', {id: profil.id}) }}" class="count-button">{{ profil.following.count() }} following</a>
             </div>
         </div>    
-        <button class="follow-button" onclick="openPopup()">Follow</button>
     </div>
 
     <div class="posts-container">
-        <h1> Posts </h1>
         {% if posts|length > 0 %}
             <ul>
                 {% for post in posts %}
-                {% include 'posts/post.detail.html.twig' with {'post': post} %}
+                    {% include 'post/post.html.twig' with {'post': post} %}
                 {% endfor %}
             </ul>
         {% endif %}
     </div>
-
-    <!-- Pop-up Modal -->
-    <div id="followPopup" class="popup">
-        <div class="popup-content">
-            <span class="close" onclick="closePopup()">&times;</span>
-            <p>Are you sure you want to follow {{ profil.name }}?</p>
-            <a href="{{ path('profile_follow', {id: profil.id}) }}" class="follow-button">Yes</a>
-            <button class="follow-button" onclick="closePopup()">No</button>
-        </div>
-    </div>
 {% endblock %}
 
 {% block javascripts %}