{% extends 'front/base.html.twig' %}
{% block body %}
<!-- case loading -->
{% if page.template.loadingHtml is not null %}
{{ page.template.loadingHtml|raw }}
{% endif %}
<!-- end case loading -->
<!-- case pageConstruction -->
{% if page.etat == 2 %}
{% include "front/cases/pageConstruction.html.twig" %}
{% endif %}
<!-- end case pageConstruction -->
<!-- case navbar -->
{# {% if page.template.nom == "Append" %} #}
{# {% include "charte/append/cases/navbar.html.twig" %} #}
{# {% elseif page.template.nom == "cycloflore" %}
{% include "/charte/cycloflore/body.html.twig" %}
{% elseif page.template.nom == "3D style" %}
{% include "/charte/3DStyles/body.html.twig" %} #}
{# {% elseif page.template.nom == "Parisglobe" %}
{% else %} #}
{# include "charte/woody/cases/navbar.html.twig" #}
{# {% endif %} #}
<!-- end case navbar -->
<!-- boucle les éléments elemDiv -->
{# {% for elemDiv in page.modElemDivs|sort((a, b) => a.ordre <=> b.ordre) %} #}
<!-- Début ElemDiv -->
{# {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %} #}
{# {{ elemDiv.type.ouverture|replace({'id': 'id="elem_'~elemDiv.id~'"', 'class': 'class="'~elemDiv.class~'"', 'style': 'style="'~elemDiv.styles~' border: 2px dashed pink;"' })|raw }} #}
{# {% else %} #}
{# {{ elemDiv.type.ouverture|replace({'id': 'id="elem_'~elemDiv.id~'"', 'class': 'class="'~elemDiv.class~'"', 'style': 'style="'~elemDiv.styles~'"' })|raw }} #}
{# {% endif %} #}
<!-- Début contenu ElemDiv -->
<!-- fin contenu ElemDiv -->
<!-- ROLE_ADMIN -->
{# {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %} #}
{# <div id="divActions_{{ elemDiv.id }}" style="display:none; border:1px solid crimson; border-radius:12px; padding:6px 12px; background-color: white;">
<!-- nom div -->
<div style="display:inline; color:crimson;">
{{ elemDiv.type.nom }}.{{ elemDiv.id }}
</div>
<!-- bouton ajouter dedans -->
<button id="btnNewElemDivDansElemDiv_{{ elemDiv.id }}" class="btn btn-sm btn-default" title="Ajoute élément dans {{ elemDiv.type.nom }}">
<i class="fa-solid fa-square-arrow-up-right" style="color:crimson;"></i>
</button>
<!-- bouton monter div -->
<button id="monteElem_{{ elemDiv.id }}" class="btn btn-sm btn-default" {% if elemDiv.ordre == 1 %}disabled{% endif %} title="Monte l'élément">
<i class="fa-solid fa-circle-chevron-up" style="color:crimson;"></i>
</button>
<!-- bouton descendre div -->
<button id="descendElem_{{ elemDiv.id }}" class="btn btn-sm btn-default" {% if elemDiv.ordre == page.modElemDivs|length %}disabled{% endif %} title="Descendre l'élément">
<i class="fa-solid fa-circle-chevron-down" style="color:crimson;"></i>
</button>
<!-- bouton configurer div -->
<button id="modifElem_{{ elemDiv.id }}" class="btn btn-sm btn-default" title="Modifier l'élément">
<i class="fa-solid fa-gear" style="color:crimson;"></i>
</button>
<!-- bouton supprimer div -->
<button id="supprElem_{{ elemDiv.id }}" class="btn btn-sm btn-default" title="Supprimer l'élément">
<i class="fa-solid fa-trash-can" style="color:crimson;"></i>
</button>
</div> #}
{# {% endif %} #}
{# {{ elemDiv.type.fermeture|raw }} #}
<!-- // Fin Div -->
{# {% endfor %} #}
<!-- boucle les éléments -->
{# {% for div in page.modDivs|sort((a, b) => a.ordre <=> b.ordre) %} #}
<!-- Début Div -->
{# <div id="div_{{ div.id }}" class="{% if div.container == 1 %}container{% elseif div.container == 2 %}container-fluid{% endif %}" {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %}style="border: 2px dashed pink;"{% endif %}> #}
{# <div class="row" style="{% if div.hauteur > 0 %}min-height:{{ div.hauteur }}px;{% endif %}"> #}
{# {% for col in div.modDivCols|sort((a, b) => a.ordre <=> b.ordre) %} #}
<!-- Début col -->
{# <div id="div_{{ div.id }}_col_{{ col.id }}" class="{% if col.largeur != 0 %}col-{{ col.largeur }} {% endif %}{% if col.sm != 0 %}col-sm-{{ col.sm }} {% endif %}{% if col.md != 0 %}col-md-{{ col.md }} {% endif %}{% if col.lg != 0 %}col-lg-{{ col.lg }} {% endif %}{% if col.xl != 0 %}col-xl-{{ col.xl }} {% endif %}{% if col.xxl != 0 %}col-xxl-{{ col.xxl }} {% endif %}" {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %}style="border: 2px dashed pink;"{% endif %}> #}
{# {% for case in col.contCases %} #}
{# {% set numeroDeCaseRecherche = case.id %}
{% set numeroDElementRecherche = case.element.id %}
{% set codeTrouve = null %} #}
{# {% for element in mesCases %}
{% set numeroDeCase = element[0] %}
{% set numeroDElement = element[1] %}
{% if numeroDeCase == numeroDeCaseRecherche and numeroDElement == numeroDElementRecherche %}
{% set codeTrouve = element[2] %}
{% endif %}
{% endfor %} #}
{# {% if codeTrouve is not null %}
{{ codeTrouve|raw }}
{% else %}
<i class="fa-solid fa-plug-circle-xmark"></i>
{% endif %} #}
{#
{% set case = case.element.code|raw %}
{% if '[IMG]' in case %}
{% set case = case|replace({'[IMG]': "oranges"}) %}
{% endif %}
{{ case|raw }}
#}
{# {% endfor %} #}
<!-- ROLE_ADMIN -->
{# {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %}
<div style="display:inline; color:crimson; ">
col.{{ col.id }}
<!-- btnNewElement -->
<button id="btnNewElem_{{ col.id }}" class="btn btn-sm btn-default" style="color:crimson;border-color:crimson; border-radius:12px;">
<i class="fa-regular fa-square-plus"></i> élément
</button>
</div>
{% endif %} #}
{# </div> #}
<!-- // fin col -->
{# {% else %}
pas de colonne
{% endfor %} #}
{# </div> #}
<!-- ROLE_ADMIN -->
{# {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %}
<div id="divActions_{{ div.id }}" style="display:none; border:1px solid crimson; border-radius:12px; padding:6px 12px; background-color: white;">
<!-- nom div -->
<div style="display:inline; color:crimson;">
Div.{{ div.id }}
</div>
<!-- bouton monter div -->
<button id="montedDiv_{{ div.id }}" class="btn btn-sm btn-default" {% if div.ordre == 1 %}disabled{% endif %}>
<i class="fa-solid fa-circle-chevron-up" style="color:crimson;"></i>
</button>
<!-- bouton descendre div -->
<button id="descendDiv_{{ div.id }}" class="btn btn-sm btn-default" {% if div.ordre == page.modDivs|length %}disabled{% endif %}>
<i class="fa-solid fa-circle-chevron-down" style="color:crimson;"></i>
</button>
<!-- bouton configurer div -->
<button id="modifDiv_{{ div.id }}" class="btn btn-sm btn-default">
<i class="fa-solid fa-gear" style="color:crimson;"></i>
</button>
<!-- bouton supprimer div -->
<button id="supprDiv_{{ div.id }}" class="btn btn-sm btn-default">
<i class="fa-solid fa-trash-can" style="color:crimson;"></i>
</button>
</div>
{% endif %} #}
{# </div> #}
<!-- // Fin Div -->
{# {% endfor %} #}
<!-- ROLE_ADMIN -->
{# {% if user.roles[0] is defined and user.roles[0] == "ROLE_ADMIN" %}
<div class="container mt-4">
<div class="row">
<div class="col-12" style="text-align: center;">
<!-- btnNewElement -->
<button id="btnNewDiv" class="btn btn-sm btn-default" style="color:crimson;border-color:crimson; border-radius:12px;">
<i class="fa-regular fa-square-plus"></i>
Ajouter une div
</button>
<!-- btnNewElement -->
<button id="btnNewElemDivSurPage" class="btn btn-sm btn-default" style="color:crimson;border-color:crimson; border-radius:12px;">
<i class="fa-regular fa-square-plus"></i>
Ajouter une elemDiv
</button>
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
<button id="action" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endif %} #}
<!-- boucle les éléments elemDiv -->
{% for case in mesCases %}
{{ case[1]|raw }}
{% endfor %}
{% endblock %}
{% block javascripts %}
<script>
function addFormToCollection($collectionHolderClass) {
console.log("collectionHolderClass");
console.log($collectionHolderClass);
// Get the ul that holds the collection of tags
var $collectionHolder = $('.' + $collectionHolderClass);
console.log("collectionHolder");
console.log($collectionHolder);
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
console.log("prototype");
console.log(prototype);
// get the new index
var index = $collectionHolder.data('index');
console.log("index");
console.log(index);
var newForm = prototype;
// You need this only if you didn't set 'label' => false in your tags field in TaskType
// Replace '__name__label__' in the prototype's HTML to
// instead be a number based on how many items we have
// newForm = newForm.replace(/__name__label__/g, index);
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
newForm = newForm.replace(/__name__/g, index);
// increase the index with one for the next item
$collectionHolder.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<li></li>').append(newForm);
// Add the new form at the end of the list
$collectionHolder.append($newFormLi);
// add a delete link to the new form
addTagFormDeleteLink($newFormLi, $collectionHolderClass);
}
function addTagFormDeleteLink($tagFormLi, $collectionHolderClass) {
console.log($collectionHolderClass);
if($collectionHolderClass == 'ModDivCol' )
{
var $removeFormButton = $('<button type="button" class="btn btn-sm btnImmemory rouge">Supprimer la colonne</button>');
var $removeFormButtonX = ' - <button type="button" class="add_item_link btn btn-sm btnImmemory vert" data-collection-holder-class="ModDivCol">Ajouter la colonne</button>';
}
else
{
var $removeFormButton = $('<button type="button" class="btn btn-sm btnImmemory rouge">Supprimer le timer</button>');
var $removeFormButtonX = ' - <button type="button" class="add_item_link btn btn-sm btnImmemory vert" data-collection-holder-class="timers">Ajouter un timer</button>';
}
$tagFormLi.append($removeFormButton);
$tagFormLi.append($removeFormButtonX);
$removeFormButton.on('click', function(e) {
// remove the li for the tag form
$tagFormLi.remove();
});
}
$(function(){
});
</script>
<!-- boucle les éléments elemDiv -->
{% for case in mesCases %}
{% if case[3] != "" %}
{% include case[3] %}
{% endif %}
{% endfor %}
{# {% for div in page.modDivs|sort((a, b) => a.ordre <=> b.ordre) %}
{% for col in div.modDivCols|sort((a, b) => a.ordre <=> b.ordre) %}
{% for case in col.contCases %}
{% if case.element.head is defined and case.element.head is not null %}
{% include case.element.head %}
{% endif %}
{% endfor %}
{% else %}
pas de colonne
{% endfor %}
{% endfor %} #}
{% endblock %}