{% extends 'base_front.html.twig' %}
{% set queryParams = app.request.query.all %}
{% block title %}{{ parent() }} | {{ r.nom }} | {{ ssr.nom }}{% endblock %}
{% block h1 %}
{{ ssr.nom }}
{% if app.user and is_granted('ROLE_MODO') %}
<a target="_blank" href="{{ path('app_admin_sous_rubrique_show', {'uuid': ssr.uuid}) }}"><i class="text-danger" data-feather="unlock"></i></a>
{% endif %}
{% endblock %}
{% block ariane %}
<nav class="navigateur" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ path("home") }}">{{ config.titreAccueil }}</a></li>
<li class="breadcrumb-item"><a href="{{ path('rubriques', {slug:r.slug })}}">{{ r.nom }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ ssr.nom }}</li>
</ol>
</nav>
{% endblock %}
{% macro filter(queryParams) %}
<div class="col-4" id="filterZone">
<input id="searchInput" class="form-control bg-white rounded pl-40" placeholder="Rechercher" {% if queryParams is not empty and queryParams.recherche is defined %} value="{{queryParams.recherche}}" {% endif %}>
<i id="searchBtn" class="toggle-password-alone fa fa-search text-primary" ></i>
{% if queryParams is not empty and queryParams.recherche is defined %}
<i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>
{% endif %}
</div>
{% set options = [
{
'k' : '',
'v' : 'Trier par :'
},
{
'k' : 'titre-croissant',
'v' : 'Titre A-Z'
},
{
'k' : 'titre-decroissant',
'v' : 'Titre Z-A'
},
{
'k' : 'date-croissante',
'v' : 'Date croissante'
},
{
'k' : 'date-decroissante',
'v' : 'Date décroissante'
},
] %}
<div class="col-2">
<select class="bg-white rounded form-control" id="ordonnance">
{% for option in options %}
<option {% if queryParams is not empty and queryParams.ordre is defined and queryParams.ordre == option.k %} selected {% endif %} value="{{option.k}}">{{option.v|raw}}</option>
{% endfor %}
</select>
</div>
{% endmacro %}
{% block body %}
{% if ssr.phrase %}
<div class="my-4 mx-12 bg-white p-4 rounded ck">{{ ssr.phrase|raw }}</div>
{% endif %}
{% if ssr.srcImg %}
<div class="mx-12">
<img
src="{{ asset('images/sousrubrique/' ~ ssr.srcImg) }}"
{% if ssr.altImg %}
alt="{{ ssr.altImg }}"
{% endif %}
{% if ssr.titleImg %}
title="{{ ssr.titleImg }}"
{% endif %}
class="imgRatio rounded"
>
</div>
{% endif %}
{% if ssr.description %}
<div class="my-4 mx-12 bg-white p-4 rounded ck">{{ ssr.description|raw }}</div>
{% endif %}
{% if items %}
<div class="row justify-content-between mx-0 mt-4">
<div class="col-6"></div>
{{ _self.filter(queryParams) }}
</div>
<div id="zoneContent">
{% include "front/_ssr22_conferences.html.twig" %}
</div>
{# <div class="text-end me-2">
<button type="button" class="btnTransparent text-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
{% include "svg/svg-filter.html.twig" %} ({{ count }})
</button>
</div>
<div class="row justify-content-center mx-0">
{% for conference in conferences %}
<div class="col-sm-12 col-md-12 col-lg-12 mt-4">
<div class="p-4 bg-white rounded">
<h3 class="text-center titreH3">{{ conference.titre }}</h3>
{% if conference.description %}
<div class="text-center ck">
{{ conference.description|raw }}
</div>
{% endif %}
{% if conference.lien %}
<div class="text-end">
<a href="{{ conference.lien }}" target="_blank" class="lien">{{ conference.lien }}<a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div> #}
{# {% else %}
<h4 class="text-center text-danger fst-italic my-4 mx-12 bg-white p-4 rounded">{{ config.messageDefault }}</h4> #}
{% endif %}
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/cardShow.js') }}"></script>
<script>
$("#searchBtn").click(function() {
updateData();
});
$("#ordonnance").change(function() {
updateData();
});
$('body').on('click', '#resetBtn', function() {
$("#searchInput").val('');
$('#ordonnance').prop('selectedIndex', 0);
updateData();
});
function updateData(){
var inputValue = $("#searchInput").val();
const selectElement = document.querySelector("#ordonnance");
const selectedValue = selectElement.value;
const Params = new URLSearchParams();
Params.append('page', "{{page}}");
if(inputValue){
Params.append('recherche', inputValue);
}
if(selectedValue){
Params.append('ordre', selectedValue);
}
const Url = new URL(window.location.href);
fetch(Url.pathname + "?" + Params.toString() + "&ajax=xxx", {
headers: {
"X-Requested-With": "XMLHttpRequest"
}
}).then(response => {
return response.json()
}).then(data => {
const content = document.querySelector("#zoneContent");
content.innerHTML = data.content;
history.pushState({}, null, Url.pathname + "?" + Params.toString());
var elements = document.querySelectorAll(".taille");
sizeCard(elements);
if ($('#resetBtn').length > 0) {
$('#resetBtn').remove();
}
if (inputValue){
$('#filterZone').each(function() {
$(this).append('<i id="resetBtn" class="refresh fa fa-refresh text-danger"></i>');
});
}
}).catch(e => alert(e));
}
var elements = document.querySelectorAll(".taille");
sizeCard(elements);
$(window).on('resize', function() {
var elements = document.querySelectorAll(".taille");
sizeCard(elements);
});
</script>
{% endblock %}