256 lines
14 KiB
HTML
256 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:param name="page" value="#{evenementsBean}"/>
|
|
<ui:define name="title">Participation aux Événements - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<!-- En-tête -->
|
|
<ui:include src="/templates/components/layout/page-header.xhtml">
|
|
<ui:param name="icon" value="pi pi-calendar-check text-purple-500" />
|
|
<ui:param name="title" value="Participation aux Événements" />
|
|
<ui:param name="description" value="Consultez et inscrivez-vous aux événements disponibles" />
|
|
<ui:define name="actions">
|
|
<h:form id="formActionsParticipation">
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
|
<ui:param name="icon" value="pi pi-refresh" />
|
|
<ui:param name="action" value="#{evenementsBean.actualiser}" />
|
|
<ui:param name="update" value="@form" />
|
|
<ui:param name="title" value="Actualiser" />
|
|
<ui:param name="rounded" value="true" />
|
|
<ui:param name="text" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-outlined ui-button-secondary" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<!-- Filtres -->
|
|
<div class="card">
|
|
<h:form id="formFiltres">
|
|
<h5>Filtres</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-4">
|
|
<p:selectOneMenu value="#{evenementsBean.filtres.type}" styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
|
<f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
|
|
<f:selectItem itemLabel="Formation" itemValue="FORMATION" />
|
|
<f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
|
|
<f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
|
|
<p:ajax event="change" update=":formListe" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-4">
|
|
<p:selectOneMenu value="#{evenementsBean.filtres.statut}" styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
|
<f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
|
|
<f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
|
|
<f:selectItem itemLabel="En cours" itemValue="EN_COURS" />
|
|
<p:ajax event="change" update=":formListe" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-4">
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="Rechercher"
|
|
icon="pi pi-search"
|
|
action="#{evenementsBean.rechercher}"
|
|
update=":formListe"
|
|
styleClass="p-button-primary" />
|
|
<p:commandButton value="Réinitialiser"
|
|
icon="pi pi-filter-slash"
|
|
action="#{evenementsBean.reinitialiserFiltres}"
|
|
update="@form :formListe"
|
|
styleClass="p-button-outlined" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Liste des événements disponibles -->
|
|
<div class="card">
|
|
<h:form id="formListe">
|
|
<h5>Événements Disponibles</h5>
|
|
|
|
<p:dataTable id="dtEvenements"
|
|
value="#{evenementsBean.evenementsFiltres}"
|
|
var="evenement"
|
|
paginator="true"
|
|
rows="10"
|
|
emptyMessage="Aucun événement disponible"
|
|
rowKey="#{evenement.id}">
|
|
|
|
<p:column headerText="Événement" style="width: 40%;">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="#{evenement.typeEvenementIcon} text-2xl text-#{evenement.typeEvenementSeverity}"></i>
|
|
<div>
|
|
<div class="font-semibold text-lg">#{evenement.titre}</div>
|
|
<div class="text-sm text-600">#{evenement.description}</div>
|
|
</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Date et Heure">
|
|
<div>
|
|
<div class="font-medium">#{evenement.dateDebutFormatee}</div>
|
|
<div class="text-sm text-600">
|
|
<i class="pi pi-clock"></i> #{evenement.heureDebutFormatee} - #{evenement.heureFinFormatee}
|
|
</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Lieu">
|
|
<div>
|
|
<div class="font-medium">#{evenement.lieu}</div>
|
|
<div class="text-sm text-600">#{evenement.ville}</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Places">
|
|
<div>
|
|
<div class="font-medium">#{evenement.participantsInscrits} / #{evenement.capaciteMax}</div>
|
|
<p:progressBar value="#{evenement.tauxRemplissage}"
|
|
showValue="true"
|
|
styleClass="mt-1" />
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Statut">
|
|
<p:tag value="#{evenement.statutLibelle}"
|
|
severity="#{evenement.statutSeverity}"
|
|
icon="#{evenement.statutIcon}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Actions" style="width: 150px;">
|
|
<div class="flex gap-1">
|
|
<p:commandButton value="Voir détails"
|
|
icon="pi pi-eye"
|
|
styleClass="p-button-text p-button-sm"
|
|
action="#{evenementsBean.selectionnerEvenement(evenement)}"
|
|
update=":formDetails:dlgDetails"
|
|
oncomplete="PF('dlgDetails').show();" />
|
|
|
|
<p:commandButton value="S'inscrire"
|
|
icon="pi pi-check"
|
|
styleClass="p-button-success p-button-sm"
|
|
rendered="#{evenement.sontInscriptionsOuvertes()}"
|
|
action="#{evenementsBean.sinscrireEvenement(evenement)}"
|
|
update="@form"
|
|
onclick="return confirm('Confirmer votre inscription à cet événement ?');" />
|
|
|
|
<p:tag value="Complet"
|
|
severity="error"
|
|
rendered="#{evenement.isComplet()}" />
|
|
</div>
|
|
</p:column>
|
|
</p:dataTable>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Dialog Détails -->
|
|
<h:form id="formDetails">
|
|
<p:dialog id="dlgDetails" header="Détails de l'Événement"
|
|
widgetVar="dlgDetails"
|
|
modal="true"
|
|
resizable="false"
|
|
style="width: 90vw; max-width: 800px;">
|
|
<div class="grid" rendered="#{evenementsBean.evenementSelectionne != null}">
|
|
<div class="col-12">
|
|
<h3>#{evenementsBean.evenementSelectionne.titre}</h3>
|
|
<p class="text-600 mt-2">#{evenementsBean.evenementSelectionne.description}</p>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-semibold">Type</label>
|
|
<p:tag value="#{evenementsBean.evenementSelectionne.typeEvenementLibelle}"
|
|
severity="#{evenementsBean.evenementSelectionne.typeEvenementSeverity}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-semibold">Statut</label>
|
|
<p:tag value="#{evenementsBean.evenementSelectionne.statutLibelle}"
|
|
severity="#{evenementsBean.evenementSelectionne.statutSeverity}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-semibold">Date de début</label>
|
|
<div>#{evenementsBean.evenementSelectionne.dateDebutFormatee}</div>
|
|
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.heureDebutFormatee}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-semibold">Date de fin</label>
|
|
<div>#{evenementsBean.evenementSelectionne.dateFinFormatee}</div>
|
|
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.heureFinFormatee}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="field">
|
|
<label class="font-semibold">Lieu</label>
|
|
<div>#{evenementsBean.evenementSelectionne.adresseComplete}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-semibold">Participants</label>
|
|
<div>#{evenementsBean.evenementSelectionne.participantsInscrits} / #{evenementsBean.evenementSelectionne.capaciteMax}</div>
|
|
<p:progressBar value="#{evenementsBean.evenementSelectionne.tauxRemplissage}"
|
|
showValue="true" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-semibold">Organisateur</label>
|
|
<div>#{evenementsBean.evenementSelectionne.organisateur}</div>
|
|
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.emailOrganisateur}</div>
|
|
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.telephoneOrganisateur}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12" rendered="#{evenementsBean.evenementSelectionne.instructions != null}">
|
|
<div class="field">
|
|
<label class="font-semibold">Instructions</label>
|
|
<div class="surface-50 p-3 border-round">#{evenementsBean.evenementSelectionne.instructions}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<f:facet name="footer">
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="S'inscrire"
|
|
icon="pi pi-check"
|
|
rendered="#{evenementsBean.evenementSelectionne != null and evenementsBean.evenementSelectionne.sontInscriptionsOuvertes()}"
|
|
action="#{evenementsBean.sinscrireEvenement(evenementsBean.evenementSelectionne)}"
|
|
update="@form"
|
|
onclick="PF('dlgDetails').hide(); return confirm('Confirmer votre inscription ?');" />
|
|
<p:commandButton value="Fermer"
|
|
icon="pi pi-times"
|
|
onclick="PF('dlgDetails').hide();"
|
|
styleClass="p-button-secondary p-button-outlined" />
|
|
</div>
|
|
</f:facet>
|
|
</p:dialog>
|
|
</h:form>
|
|
</ui:define>
|
|
|
|
</ui:composition>
|