{% extends 'base.html.twig' %} {% block body %} <h1 class="page-header"> Gestion des Annonces </h1> <p> <a href="{{ path('app_'~access~'_alert_submit') }}" class="btn btn-success">Ajouter une Annonce</a> <a href="{{ path('app_'~access~'_alertcategory_submit') }}" class="btn btn-success">Ajouter une Catégorie</a> </p> <div class="row"> <div class="col-md-9"> <div id="listpending" class="card mb-5"> <div class="card-header"><h3 style="margin:0px"><i class="fa fa-pause fa-fw"></i> En Attente Publication</h3></div> <ul class="list-alert list-group list-group-flush"> {% for alert in alerts %} {% if alert.isPending %} <div class="alert-item list-group-item d-flex flex-column alertcategory-{{ alert.alertcategory.id }} {{ alert.isOnline ? "alertstatut-online" : ""}} {{ alert.isPending ? "alertstatut-pending" : ""}} {{ alert.isArchived ? "alertstatut-archived" : ""}} {% for group in alert.groups %}{{ ' group-' ~ group.id }}{% endfor %} {% for role in alert.roles %}{{ ' role-' ~ role }}{% endfor %} " data-alert-category-id="{{ alert.alertcategory.id }}" data-alert-id="{{ alert.id }}" style="background: {{ alert.alertcategory.color ? alert.alertcategory.color : 'var(--colorbgbodydark)' }};" > <div class="d-flex align-items-center"> <div class="d-flex align-items-center w-100" style="color: var(--colorftbodydark) !important"> <i class="fa fa-arrows-up-down fa-2x fa-fw me-1"></i> {% if alert.alertcategory.icon %} <img height="35" src="{{ path('app_minio_image',{file:alert.alertcategory.icon.label}) }}"> {% else %} <img height="35" src="{{ path('app_minio_image',{file:"icon/icon_megaphone.png"}) }}"> {% endif %} <a href="{{ path('app_'~access~'_alert_update', { id: alert.id }) }}" class="ms-3" style="color: var(--colorftbodydark) !important; font-family: var(--fonttitle); font-size:var(--fontsizeh3)"> {{ alert.title }} </a> </div> <a class="float-end" data-bs-toggle="collapse" href="#alert-{{ alert.id }}" role="button" aria-expanded="false" aria-controls="alert-{{ alert.id }}" style="color: var(--colorftbodydark) !important;"> <i class="fa fa-chevron-down fa-2x"></i> </a> </div> <div id="alert-{{ alert.id }}" class="ckeditor-content collapse pt-3" style="color: var(--colorftbodydark) !important;"> {{ alert.content|raw }} </div> </div> {% endif %} {% endfor %} </ul> </div> <div id="listonline" class="card mb-5"> <div class="card-header"><h3 style="margin:0px"><i class="fa fa-eye fa-fw"></i> En Ligne</h3></div> <ul class="list-alert list-group list-group-flush"> {% for alert in alerts %} {% if alert.isOnline %} <div class="alert-item list-group-item d-flex flex-column alertcategory-{{ alert.alertcategory.id }} {{ alert.isOnline ? "alertstatut-online" : ""}} {{ alert.isPending ? "alertstatut-pending" : ""}} {{ alert.isArchived ? "alertstatut-archived" : ""}} {% for group in alert.groups %}{{ ' group-' ~ group.id }}{% endfor %} {% for role in alert.roles %}{{ ' role-' ~ role }}{% endfor %} " data-alert-category-id="{{ alert.alertcategory.id }}" data-alert-id="{{ alert.id }}" style="background: {{ alert.alertcategory.color ? alert.alertcategory.color : 'var(--colorbgbodydark)' }};" > <div class="d-flex align-items-center"> <div class="d-flex align-items-center w-100" style="color: var(--colorftbodydark) !important"> <i class="fa fa-arrows-up-down fa-2x fa-fw me-1"></i> {% if alert.alertcategory.icon %} <img height="35" src="{{ path('app_minio_image',{file:alert.alertcategory.icon.label}) }}"> {% else %} <img height="35" src="{{ path('app_minio_image',{file:"icon/icon_megaphone.png"}) }}"> {% endif %} <a href="{{ path('app_'~access~'_alert_update', { id: alert.id }) }}" class="ms-3" style="color: var(--colorftbodydark) !important; font-family: var(--fonttitle); font-size:var(--fontsizeh3)"> {{ alert.title }} </a> </div> <a class="float-end" data-bs-toggle="collapse" href="#alert-{{ alert.id }}" role="button" aria-expanded="false" aria-controls="alert-{{ alert.id }}" style="color: var(--colorftbodydark) !important;"> <i class="fa fa-chevron-down fa-2x"></i> </a> </div> <div id="alert-{{ alert.id }}" class="ckeditor-content collapse pt-3" style="color: var(--colorftbodydark) !important;"> {{ alert.content|raw }} </div> </div> {% endif %} {% endfor %} </ul> </div> <div id="listarchived" class="card mb-5"> <div class="card-header"><h3 style="margin:0px"><i class="fa fa-history fa-fw"></i>Archivées</h3></div> <ul class="list-alert list-group list-group-flush"> {% for alert in alerts %} {% if alert.isArchived %} <div class="alert-item list-group-item d-flex flex-column alertcategory-{{ alert.alertcategory.id }} {{ alert.isOnline ? "alertstatut-online" : ""}} {{ alert.isPending ? "alertstatut-pending" : ""}} {{ alert.isArchived ? "alertstatut-archived" : ""}} {% for group in alert.groups %}{{ ' group-' ~ group.id }}{% endfor %} {% for role in alert.roles %}{{ ' role-' ~ role }}{% endfor %} " data-alert-category-id="{{ alert.alertcategory.id }}" data-alert-id="{{ alert.id }}" style="background: {{ alert.alertcategory.color ? alert.alertcategory.color : 'var(--colorbgbodydark)' }};" > <div class="d-flex align-items-center"> <div class="d-flex align-items-center w-100" style="color: var(--colorftbodydark) !important"> <i class="fa fa-arrows-up-down fa-2x fa-fw me-1"></i> {% if alert.alertcategory.icon %} <img height="35" src="{{ path('app_minio_image',{file:alert.alertcategory.icon.label}) }}"> {% else %} <img height="35" src="{{ path('app_minio_image',{file:"icon/icon_megaphone.png"}) }}"> {% endif %} <a href="{{ path('app_'~access~'_alert_update', { id: alert.id }) }}" class="ms-3" style="color: var(--colorftbodydark) !important; font-family: var(--fonttitle); font-size:var(--fontsizeh3)"> {{ alert.title }} </a> </div> <a class="float-end" data-bs-toggle="collapse" href="#alert-{{ alert.id }}" role="button" aria-expanded="false" aria-controls="alert-{{ alert.id }}" style="color: var(--colorftbodydark) !important;"> <i class="fa fa-chevron-down fa-2x"></i> </a> </div> <div id="alert-{{ alert.id }}" class="ckeditor-content collapse pt-3" style="color: var(--colorftbodydark) !important;"> {{ alert.content|raw }} </div> </div> {% endif %} {% endfor %} </ul> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-header"> <i class="fa fa-filter"></i> Afficher par Catégorie </div> <div id="category-filter" class="list-group list-group-flush"> {% for alertcategory in alertcategorys %} <div class="d-flex"> <a href="#" class="list-group-item active category-alert-item" data-category="{{ alertcategory.id }}" style="width:100%; border-left: 15px solid {{ alertcategory.color ? alertcategory.color : 'var(--colorbgbodydark)' }}; position: inherit;"> {% if alertcategory.icon %} <img height="25" src="{{ path('app_minio_image',{file:alertcategory.icon.label}) }}"> {% else %} <img height="25" src="{{ path('app_minio_image',{file:"icon/icon_megaphone.png"}) }}"> {% endif %} {{ alertcategory.label }} </a> <a class="btn btn-primary float-right" href="{{ path('app_'~access~'_alertcategory_update', { id: alertcategory.id }) }}" style="margin:4px"> <i class="fa fa-edit"></i> </a> </div> {% endfor %} </div> </div> <div class="card mt-3"> <div class="card-header"> <i class="fa fa-filter"></i> Afficher par Rôle </div> <ul id="role-filter" class="list-group list-group-flush"> <a class="active list-group-item filterfgall" id="allrole" style="cursor:pointer"> <i class="fa fa-users"></i> Toutes les Rôles <span class="badge bg-success float-end">{{ alerts|length }}</span> </a> <a class="list-group-item" data-role="ROLE_ANONYME" style="cursor:pointer"> <i class="fa fa-user"></i> Visiteur <span class="badge bg-success float-end"></span> </a> <a class="list-group-item" data-role="ROLE_USER" style="cursor:pointer"> <i class="fa fa-user"></i> Utilisateur <span class="badge bg-success float-end"></span> </a> <a class="list-group-item" data-role="ROLE_MANAGER" style="cursor:pointer"> <i class="fa fa-user"></i> Manager <span class="badge bg-success float-end"></span> </a> <a class="list-group-item" data-role="ROLE_MASTER" style="cursor:pointer"> <i class="fa fa-user"></i> Master <span class="badge bg-success float-end"></span> </a> <a class="list-group-item" data-role="ROLE_MODO" style="cursor:pointer"> <i class="fa fa-user"></i> Modérateur <span class="badge bg-success float-end"></span> </a> <a class="list-group-item" data-role="ROLE_ADMIN" style="cursor:pointer"> <i class="fa fa-user"></i> Administrateur <span class="badge bg-success float-end"></span> </a> </ul> </div> <div class="card mt-3"> <div class="card-header"> <i class="fa fa-filter"></i> Afficher par Groupes </div> <div id="group-filter" class="list-group list-group-flush"> <a href="#" class="active list-group-item filterfgall"> <i class="fa fa-users"></i> Tout les groupes <span class="badge bg-success float-end">{{ alerts|length }}</span> </a> {% for group in groups %} <a class="list-group-item" href="#" data-role="{{ group.id }}"> <i class="fa fa-user"></i> {{ group.label }} <span class="badge bg-success float-end">{{ group.alerts|length }}</span> </a> {% endfor %} </div> </div> <div class="card mt-3"> <div class="card-header"> <i class="fa fa-filter"></i> Afficher par statut </div> <div id="statut-filter" class="list-group list-group-flush"> <a class="list-group-item active filterfgall" data-statut="all" href="#"> <i class="fa fa-eye-slash"></i> Toutes </a> <a class="list-group-item" data-statut="online" href="#"> <i class="fa fa-eye"></i> En ligne </a> <a class="list-group-item" data-statut="pending" href="#"> <i class="fas fa-pause"></i> En attente de publication </a> <a class="list-group-item" data-statut="archived" href="#"> <i class="fa fa-history"></i> Archivées </a> </div> </div> </div> </div> {% endblock %} {% block localscript %} <script> $(document).ready(function() { $("a[data-role='ROLE_ANONYME']").children("span").html($('.role-ROLE_ANONYME').length); $("a[data-role='ROLE_USER']").children("span").html($('.role-ROLE_USER').length); $("a[data-role='ROLE_MANAGER']").children("span").html($('.role-ROLE_MANAGER').length); $("a[data-role='ROLE_MASTER']").children("span").html($('.role-ROLE_ANIM').length); $("a[data-role='ROLE_MODO']").children("span").html($('.role-ROLE_MODO').length); $("a[data-role='ROLE_ADMIN']").children("span").html($('.role-ROLE_ADMIN').length); function updateItems() { $('.alert-item').each(function(i) { var itemid = $(this).data('alert-id'); $(this).find('input[name="alert_item[rowOrder][]"]').val(i); // Mise à jour en base de l'order $.ajax({ method: "POST", url: "{{ path('app_'~access~'_alert_order') }}", data: { id:itemid, order:i } }); }); } if($(".alertstatut-pending").length==0) $("#listpending").hide(); if($(".alertstatut-online").length==0) $("#listonline").hide(); if($(".alertstatut-archived").length==0) $("#listarchived").hide(); $( ".list-alert" ).sortable({ axis: "y", placeholder: "alert.item placeholder", update: updateItems }); $("#category-filter a.category-alert-item").click(function(){ // On réactive les auters filtres à tout $('#role-filter a').removeClass('active'); $('#group-filter a').removeClass('active'); $('#statut-filter a').removeClass('active'); $(".filterfgall").addClass('active'); $(this).toggleClass('active'); $('.category-alert-item').each(function(i) { var $alerts = $('.alertcategory-'+$(this).data('category')); if($(this).hasClass('active')){ $alerts.each(function(i) { $(this).removeClass("hide"); }); } else { $alerts.each(function(i) { $(this).addClass("hide"); }); } }); return false; }); $('#role-filter a').click(function(){ // On réactive les auters filtres à tout $(".category-alert-item").addClass('active'); $('#group-filter a').removeClass('active'); $('#statut-filter a').removeClass('active'); $(".filterfgall").addClass('active'); // On rend actif la zone cliquée $('#role-filter a').removeClass('active'); $(this).addClass('active'); // On cache l'ensemble des elements $('.alert-item').each(function(i) { $(this).addClass("hide"); }); // On affiche les elements filtrés if($(this).hasClass('filterfgall')) var $alerts = $('.alert-item'); else var $alerts = $('.role-'+$(this).data('role')); $alerts.each(function(i) { $(this).removeClass("hide"); }); return false; }); $('#group-filter a').click(function(){ // On réactive les auters filtres à tout $(".category-alert-item").addClass('active'); $('#role-filter a').removeClass('active'); $('#statut-filter a').removeClass('active'); $(".filterfgall").addClass('active'); // On rend actif la zone cliquée $('#group-filter a').removeClass('active'); $(this).addClass('active'); // On cache l'ensemble des elements $('.alert-item').each(function(i) { $(this).addClass("hide"); }); // On affiche les elements filtrés if($(this).hasClass('filterfgall')) var $alerts = $('.alert-item'); else var $alerts = $('.group-'+$(this).data('role')); $alerts.each(function(i) { $(this).removeClass("hide"); }); return false; }); $("#statut-filter a").click(function(){ // On réactive les auters filtres à tout $(".category-alert-item").addClass('active'); $('#group-filter a').removeClass('active'); $("#group-filter .filterfgall").addClass('active'); // On rend actif la zone cliquée $('#statut-filter a').removeClass('active'); $(this).addClass('active'); // On cache l'ensemble des elements $('.alert-item').each(function(i) { $(this).addClass("hide"); }); // On affiche les elements filtrés if($(this).hasClass('filterfgall')) var $alerts = $('.alert-item'); else var $alerts = $('.alertstatut-'+$(this).data('statut')); $alerts.each(function(i) { $(this).removeClass("hide"); }); return false; }); } ); </script> {% endblock %}