dashboard done + UI/UX fix
This commit is contained in:
Olivier PARPAILLON
135
templates/main/dashboard.html.twig
Normal file
135
templates/main/dashboard.html.twig
Normal file
@@ -0,0 +1,135 @@
|
||||
{% extends 'main/base.html.twig' %}
|
||||
{% block head %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
{% block title %}📣 Sortie.com {{ profile.pseudo }} 🔊{% endblock %}
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h3 class="text-center text-base mb-8 mt-4 font-bold uppercase">Bonjour, {{ profile.nom }} {{ profile.prenom }}</h3>
|
||||
{# Tableau des sorties globales#}
|
||||
<div class="flex flex-col bg-white shadow-lg rounded-lg mx-8 mb-10">
|
||||
<h4 class="text-start bg-gray-50 items-start justify-start text-base p-2 font-bold uppercase">Les sorties en cours</h4>
|
||||
<table class="min-w-full bg-white divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Etat</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adresse</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date début</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durée</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date limite inscription</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{% for sortie in sorties %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.nom }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.etat.libelle }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{{ sortie.lieu ? (sortie.lieu.ville ?: '') ~ ' ' ~ (sortie.lieu.codePostal ?: '') ~ ', ' ~ (sortie.lieu.rue ?: '') : '' }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.dateHeureDebut|date('d/m/Y H:i') }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.duree }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.dateLimiteInscription|date('d/m/Y H:i') }}</td>
|
||||
<td class="flex flex-row px-6 py-4 whitespace-nowrap text-base text-gray-900">
|
||||
{% if not sortie.participants.contains(app.user) and sortie.etat.libelle == 'Ouverte' %}
|
||||
<form action="{{ path('sortie_inscription', { id: sortie.idSortie }) }}" method="post">
|
||||
<button type="submit">🔔</button>
|
||||
</form>
|
||||
{% elseif sortie.participants.contains(app.user) and sortie.etat.libelle == 'Ouverte' %}
|
||||
<form method="post" action="{{ path('sortie_unsubscribe', { id: sortie.idSortie }) }}">
|
||||
<button type="submit">🔕</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ path('sortie_view', { id: sortie.idSortie }) }}">
|
||||
<button type="submit">👁️</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="px-6 py-4 text-center text-gray-500">Aucune participant trouvé</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap mx-8">
|
||||
{# Tableau des sorties dont je suis participant#}
|
||||
<div class="w-1/2 p-4 shadow-lg rounded-lg">
|
||||
<h4 class="text-start bg-gray-50 items-start justify-start text-base p-2 font-bold uppercase">Mes participations</h4>
|
||||
<table class="min-w-full bg-white divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adresse</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date début</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durée</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{% for sortie in sortiesParticipation %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.nom }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{{ sortie.lieu ? (sortie.lieu.ville ?: '') ~ ' ' ~ (sortie.lieu.codePostal ?: '') ~ ', ' ~ (sortie.lieu.rue ?: '') : '' }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.dateHeureDebut|date('d/m/Y H:i') }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.duree }}</td>
|
||||
<td class="flex flex-row px-6 py-4 whitespace-nowrap text-base text-gray-900">
|
||||
<a href={{ path('sortie_view', { id: sortie.idSortie }) }}>👁️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="px-6 py-4 text-center text-gray-500">Vous ne participez à aucune sortie</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{# Tableau des sorties dont je suis organisateur #}
|
||||
<div class="w-1/2 p-4 shadow-lg rounded-lg">
|
||||
<h4 class="text-start bg-gray-50 items-start justify-start text-base p-2 font-bold uppercase">Mes organisations</h4>
|
||||
<table class="min-w-full bg-white divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adresse</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date début</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durée</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{% for sortie in sortiesOrganisation %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.nom }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{{ sortie.lieu ? (sortie.lieu.ville ?: '') ~ ' ' ~ (sortie.lieu.codePostal ?: '') ~ ', ' ~ (sortie.lieu.rue ?: '') : '' }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.dateHeureDebut|date('d/m/Y H:i') }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ sortie.duree }}</td>
|
||||
<td class="flex flex-row px-6 py-4 whitespace-nowrap text-base text-gray-900">
|
||||
<a href={{ path('sortie_view', { id: sortie.idSortie }) }}>👁️</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="px-6 py-4 text-center text-gray-500">Vous n'organisez aucune sortie</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,4 +1,4 @@
|
||||
<footer class="w-full bg-green-700 text-white py-4">
|
||||
<footer class="w-full text-white py-4">
|
||||
<div class="flex justify-center">
|
||||
ENI © Sortie {{ "now"|date("Y") }}
|
||||
</div>
|
||||
|
||||
@@ -31,9 +31,10 @@
|
||||
</button>
|
||||
{% endif %}
|
||||
<ul id="navbar" class="hidden absolute top-20 right-0 w-max bg-white shadow-md p-4 pl-2 flex-col space-y-4">
|
||||
<li><a href="{{ path('home') }}" class="text-gray-700 font-bold hover:text-blue-500">Accueil</a></li>
|
||||
<li><a href="{{ path('participants') }}" class="text-gray-700 font-bold hover:text-blue-500">Participants</a></li>
|
||||
{% if app.user %}
|
||||
<li><a href="{{ path('home') }}" class="text-gray-700 font-bold hover:text-blue-500">Accueil</a></li>
|
||||
<li><a href="{{ path('sortie_list') }}" class="text-gray-700 font-bold hover:text-blue-500">Liste des sorties</a></li>
|
||||
<li><a href="{{ path('participants') }}" class="text-gray-700 font-bold hover:text-blue-500">Participants</a></li>
|
||||
<li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="text-gray-700 font-bold hover:text-blue-500">Mon profile</a></li>
|
||||
{% endif %}
|
||||
{% if app.user and ('ROLE_ADMIN' in app.user.roles) %}
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
{% extends 'main/base.html.twig' %}
|
||||
{% block head %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Liste des sorties</title>
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto p-6 bg-gray-50 rounded-lg shadow-lg mt-6">
|
||||
<h1 class="text-3xl font-bold text-center text-gray-800 mb-8">🎉 Liste des sorties</h1>
|
||||
|
||||
<form method="GET" action="{{ path('home') }}" class="bg-white rounded-lg shadow-md p-4 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<label for="search" class="block text-sm font-medium text-gray-700">🔍 Recherche</label>
|
||||
<input type="text" name="search" id="search" value="{{ app.request.query.get('search', '') }}"
|
||||
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="Nom de la sortie">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="site" class="block text-sm font-medium text-gray-700">📍 Site</label>
|
||||
<select name="site" id="site" class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
<option value="">Tous les sites</option>
|
||||
{% for site in sites %}
|
||||
<option value="{{ site.idSite }}" {% if site.idSite == app.request.query.get('site') %}selected{% endif %}>
|
||||
{{ site.nom }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="start_date" class="block text-sm font-medium text-gray-700">📅 Date de début</label>
|
||||
<input type="date" name="start_date" id="start_date" value="{{ app.request.query.get('start_date', '') }}"
|
||||
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="end_date" class="block text-sm font-medium text-gray-700">📅 Date de fin</label>
|
||||
<input type="date" name="end_date" id="end_date" value="{{ app.request.query.get('end_date', '') }}"
|
||||
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="organisateur" id="organisateur" value="1"
|
||||
{% if app.request.query.get('organisateur') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="organisateur" class="ml-2 text-sm text-gray-700">Sorties dont je suis l'organisateur/trice</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="inscrit" id="inscrit" value="1"
|
||||
{% if app.request.query.get('inscrit') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="inscrit" class="ml-2 text-sm text-gray-700">Sorties auxquelles je suis inscrit/e</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="non_inscrit" id="non_inscrit" value="1"
|
||||
{% if app.request.query.get('non_inscrit') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="non_inscrit" class="ml-2 text-sm text-gray-700">Sorties auxquelles je ne suis pas inscrit/e</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" name="passees" id="passees" value="1"
|
||||
{% if app.request.query.get('passees') %}checked{% endif %}
|
||||
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
|
||||
<label for="passees" class="ml-2 text-sm text-gray-700">Sorties passées</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600">
|
||||
🔎 Filtrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
|
||||
<a href="/sortie/creates">
|
||||
<div class="bg-white rounded-lg shadow-md p-4 text-center">
|
||||
<img src="/img/add.svg" alt="Créer une sortie" class="w-40 h-40 mx-auto mb-4">
|
||||
<h2 class="text-lg font-semibold">Créer une sortie</h2>
|
||||
</div>
|
||||
</a>
|
||||
{% for sortie in sorties %}
|
||||
<a href="{{ path('sortie_view', { id: sortie.idSortie }) }}" class="text-blue-500 hover:text-blue-700 font-medium">
|
||||
<div class="bg-white rounded-lg shadow-md p-4">
|
||||
<h2 class="text-lg font-semibold text-gray-800">{{ sortie.nom }}</h2>
|
||||
<p class="mt-2 text-gray-600">
|
||||
<strong>Date de début :</strong> {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}<br>
|
||||
<strong>Durée :</strong> {{ sortie.duree }} minutes<br>
|
||||
<strong>Inscriptions max :</strong> {{ sortie.nbInscriptionsMax }}<br>
|
||||
<strong>Infos :</strong> {{ sortie.infosSortie }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<p class="text-gray-600 text-center col-span-6">Aucune sortie ne correspond à vos critères.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -24,10 +24,9 @@
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{% for participant in participants %}
|
||||
<tr>
|
||||
<div class="relative">
|
||||
<img src="{{ participant.fileName ? asset('upload/image/profile/' ~ participant.fileName) : asset('upload/image/profile/default.png') }}"
|
||||
class="w-16 h-16 rounded-full mr-4" />
|
||||
</div>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
<img src="{{ participant.fileName ? asset('upload/image/profile/' ~ participant.fileName) : asset('upload/image/profile/default.png') }}" class="w-16 h-16 rounded-full mr-4" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ participant.pseudo }}</td>
|
||||
|
||||
Reference in New Issue
Block a user