follow adding, and list of followers

pull/16/head
Corentin RICHARD 10 months ago
parent 4fc23ec9c8
commit d0e86b9201

@ -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;
@ -12,17 +13,17 @@ body {
margin: 20px auto;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
}
.profile-header {
.profile-header {
display: flex;
align-items: center;
border-bottom: 1px solid #5c5d7f;
padding-bottom: 10px;
margin-bottom: 20px;
}
}
.profile-image {
.profile-image {
border-radius: 50%;
width: 100px;
height: 100px;
@ -32,19 +33,24 @@ body {
.profile-info {
flex-grow: 1;
}
}
.profile-info h1 {
.profile-info h1 {
font-size: 24px;
margin: 0;
color: #1a2c4c;
}
}
.profile-info p {
margin: 5px 0;
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);
}

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

@ -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->render('profil/index.html.twig', [
'profil' => $profil,
'posts' => $posts
]);
return $this->redirectToRoute('profil_show', ['id' => $id]);
} else {
$this->addFlash('error','');
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')]

@ -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;
// guarantee every user at least has ROLE_USER
$roles[] = 'ROLE_USER';
return array_unique($roles);
return $this->following;
}
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->name;
return $this;
}
}

@ -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 %}

@ -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 %}

@ -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>
<p>Description: {{ profil.description }}</p>
<br>
<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 %}

Binary file not shown.
Loading…
Cancel
Save