nineskeletor/templates/Page/updatewidget.html.twig

552 lines
18 KiB
Twig

{% extends 'base.html.twig' %}
{% block localstyle %}
<style>
#gridtemplate {
border: 1px solid #cdcdcd;
padding:20px;
margin: 0px;
}
#gridtemplate .row {
height: 500px;
border: 1px solid #cdcdcd;
margin: 0px 0px 20px 0px;
background-color: #c8f7c5;
}
#gridtemplate .rowcontainer {
float:left;
width:90%;
height:80%;
}
#gridtemplate .rowcontainer .row {height:33.333333333333333%; margin:0px}
#gridtemplate .rowcontainer .maxright, #gridtemplate .rowcontainer .maxleft {height:90% !important; width:20% !important; }
#gridtemplate .rowcontainer .rowcontainer {width:60% !important;}
#gridtemplate .rowcontainer .addRow {display:none;}
#gridtemplate .rowcontainer .colcontainer {padding:5px;}
#gridtemplate .addRow {
width: 100%;
height: 10%;
padding: 2px;
max-height: 30px
}
#gridtemplate .delRow {
height:100%;
width: 5%;
background-color: #e74c3c;
color: #fff;
text-align:center;
float: left;
cursor: pointer;
}
#gridtemplate .delRow i {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#gridtemplate .colcontainer {
width:90%;
height:100% !important;
float:left;
padding:15px;
}
#gridtemplate .colcontainer .col {
border: 1px solid #cdcdcd;
height:100%;
padding: 0px;
background-color:#fff;
}
#gridtemplate .addCol {
height:100%;
width: 5%;
background-color: #2c3e50;
color: #fff;
text-align:center;
float: right;
cursor: pointer;
}
#gridtemplate .addCol i {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#gridtemplate .colcontainer .col .delCol {
height:10%;
width: 100%;
background-color: #e74c3c;
color: #fff;
text-align:center;
float: right;
cursor: pointer;
}
#gridtemplate .colcontainer .col .delCol i {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#gridtemplate .colcontainer .col .maxleft {
height:80%;
width: 5%;
background-color: #2c3e50;
color: #fff;
text-align:center;
float: left;
cursor: pointer;
}
#gridtemplate .colcontainer .col .maxleft i {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#gridtemplate .colcontainer .col .maxright {
height:80%;
width: 5%;
background-color: #2c3e50;
color: #fff;
text-align:center;
float: right;
cursor: pointer;
}
#gridtemplate .colcontainer .col .maxright i {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
{% endblock %}
{% block body %}
{{ form_start(form) }}
<h1 class="page-header">
{% if mode=="update" %}
{% if usage=="template" %}
Modification Modèle de Page = {{page.name}}
{% else %}
Modification Page Widget = {{page.name}}
{% endif %}
{% elseif mode=="submit" %}
Création Page Widget
{% endif %}
</h1>
<p>
{{ form_widget(form.submit) }}
{% if access=="admin" %}
<a class="btn btn-secondary" href="{{ path('app_'~access~'_page_'~usage~'_view',{id:page.id}) }}">Annuler</a>
{% else %}
<a class="btn btn-secondary" href="{{ path('app_home',{id:page.id}) }}">Annuler</a>
{% endif %}
{% if mode=="update" %}
<a href={{ path('app_'~access~'_page_'~usage~'_delete',{'id':page.id}) }}
class="btn btn-danger float-end"
data-method="delete" data-csrf="_token:{{ 'csrf' }}"
data-confirm="Êtes-vous sûr de vouloir supprimer cette page ?">
Supprimer
</a>
{% endif %}
</p>
{% if app.session.flashbag.has('error') %}
<div class='alert alert-danger' style='margin: 5px 0px'>
<strong>Erreur</strong><br>
{% for flashMessage in app.session.flashbag.get('error') %}
{{ flashMessage }}<br>
{% endfor %}
</div>
{% endif %}
{% if app.session.flashbag.has('notice') %}
<div class='alert alert-info' style='margin: 5px 0px'>
<strong>Information</strong><br>
{% for flashMessage in app.session.flashbag.get('notice') %}
{{ flashMessage }}<br>
{% endfor %}
</div>
{% endif %}
<div class="form-group row clearfix">
{% if form.roles is defined %}
<div class="col-md-8">
{% else %}
<div class="col-md-12">
{% endif %}
<div class="card">
<div class="card-header">
<i class="fa fa-pencil fa-fw"></i> Informations
</div>
<div class="card-body">
{{ form_row(form.name) }}
{{ form_row(form.roworder) }}
{{ form_row(form.fonticon) }}
{{ form_row(form.maxwidth) }}
{{ form_row(form.template) }}
</div>
</div>
</div>
{% if form.roles is defined %}
<div class="col-md-4">
<div class="card">
<div class="card-header">
<i class="fa fa-link fa-fw"></i> Affectations
</div>
<div class="card-body">
{{ form_row(form.user) }}
{{ form_row(form.roles) }}
{{ form_row(form.groups) }}
</div>
</div>
</div>
{% endif %}
</div>
<div class="card mt-3">
<div class="card-header">
<i class="fas fa-table-columns fa-fw"></i> Template de Mise en Page
</div>
<div class="card-body">
<div id="gridtemplate">
</div>
</div>
{{ form_end(form) }}
{% endblock %}
{% block localscript %}
<script>
var defcol = [];
defcol[1] = ["col-12"];
defcol[2] = ["col-6","col-6"];
defcol[3] = ["col-4","col-4","col-4"];
defcol[4] = ["col-3","col-3","col-3","col-3"];
defcol[5] = ["col-4","col-2","col-2","col-2","col-2"];
defcol[6] = ["col-2","col-2","col-2","col-2","col-2","col-2"];
var defaultcol = ""
defaultcol+="<div class='delCol'>";
defaultcol+="<i class='fa fa-trash'></i>";
defaultcol+="</div>";
defaultcol+="<div class='maxleft'>";
defaultcol+="<i class='fa fa-chevron-left'></i>";
defaultcol+="</div>";
defaultcol+="<div class='rowcontainer'>";
defaultcol+="</div>";
defaultcol+="<div class='maxright'>";
defaultcol+="<i class='fa fa-chevron-right'></i>";
defaultcol+="</div>";
defaultcol+="<a class='addRow btn btn-info'>Ajouter une Ligne</a>";
$('document').ready(function(){
// Template de base
if($(page_update_widget_template).val()=="") {
myrow ="<div class='row'>";
myrow+="<div class='delRow'><i class='fa fa-trash'></i></div>";
myrow+="<div class='row colcontainer'>";
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
myrow+="</div>"
myrow+="<div class='addCol'><i class='fa fa-plus'></i></div>";
myrow+="</div>"
$("#gridtemplate").append(myrow);
}
// Interprétation du template sauvegardé
else {
var json = jQuery.parseJSON($(page_update_widget_template).val());
var mygrid="";
$.each(json.rows, function( index, rownv01 ) {
mygrid+="<div class='row'>";
mygrid+="<div class='delRow'><i class='fa fa-trash'></i></div>";
mygrid+="<div class='row colcontainer'>";
$.each(rownv01.cols, function( index, colnv01 ) {
mygrid+="<div class='col col-"+colnv01.size+"'>";
mygrid+="<div class='delCol'>";
mygrid+="<i class='fa fa-trash'></i>";
mygrid+="</div>";
mygrid+="<div class='maxleft'>";
mygrid+="<i class='fa fa-chevron-left'></i>";
mygrid+="</div>";
mygrid+="<div class='rowcontainer'>";
$.each(colnv01.rows, function( index, rownv02 ) {
mygrid+="<div class='row'>";
mygrid+="<div class='delRow'><i class='fa fa-trash'></i></div>";
mygrid+="<div class='row colcontainer'>";
$.each(rownv02.cols, function( index, colnv02 ) {
mygrid+="<div class='col col-"+colnv02.size+"'>"+defaultcol+"</div>";
});
mygrid+="</div>";
mygrid+="<div class='addCol'><i class='fa fa-plus'></i></div>";
mygrid+="</div>";
});
mygrid+="</div>";
mygrid+="<div class='maxright'>";
mygrid+="<i class='fa fa-chevron-right'></i>";
mygrid+="</div>";
mygrid+="<a class='addRow btn btn-info'>Ajouter une Ligne</a>";
mygrid+="</div>";
});
mygrid+="</div>";
mygrid+="<div class='addCol'><i class='fa fa-plus'></i></div>";
mygrid+="</div>";
});
$("#gridtemplate").append(mygrid);
}
$("#gridtemplate").append("<a class='addRow btn btn-info'>Ajouter une Ligne</a>");
// Ajout d'une ligne
$(document).on('click','.addRow', function(event){
lastrow=$(this).parent().children('.row').last();
parentid=$(this).parent().attr("id");
if(parentid=="gridtemplate") {
nbrow=$(this).parent().children('.row').length;
nbmax=5;
}
else {
nbrow=$(this).parent().children(".rowcontainer").children('.row').length;
nbmax=4;
}
nbrow++;
if(nbrow==nbmax)
alert("Vous ne pouvez pas insérer plus de "+(nbmax-1)+" lignes");
else {
myrow ="<div class='row'>";
myrow+="<div class='delRow'><i class='fa fa-trash'></i></div>";
myrow+="<div class='row colcontainer'>";
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
myrow+="</div>"
myrow+="<div class='addCol'><i class='fa fa-plus'></i></div>";
myrow+="</div>"
if(lastrow.length)
lastrow.after(myrow);
else
$(this).parent().children(".rowcontainer").append(myrow);
}
});
// Suppression d'une ligne
$(document).on('click','.delRow', function(event){
// On compte le nombre de row de ce niveau et on bloque s'il en reste plus qu'une et que l'on est sur le premier niveau de ligne
if($( this ).parent().parent().children(".row").length==1 && $( this ).parent().parent().attr("id")=="gridtemplate")
{
alert("Votre page doit avoir au minimum une ligne");
}
// Si ce n'est pas le cas on la supprime
else {
$( this ).parent().remove();
}
});
// Ajout d'une Colonne
$(document).on('click','.addCol', function(event){
// On récupère la ligne
row=$( this ).parent();
colcontainer=row.children(".colcontainer");
// On compte le nombre de colonne
nbcol=colcontainer.children(".col").length;
nbcol++;
if(nbcol>6) {
alert("Votre page ne peut avoir plus de 6 colonnes");
}
else {
// Pour chaque colonne on applique la répartition de taille en fonction du nombre de colonne total
colcontainer.children('.col').each(function( index ) {
$(this).removeClass();
$(this).attr("class","col "+defcol[nbcol][index]);
});
// On ajoute une colonne après la derniere colonne de la ligne
lastcol=colcontainer.children('.col').last();
lastcol.after("<div class='col "+defcol[nbcol][nbcol-1]+"'>"+defaultcol+"</div>");
}
});
// Suppression d'une Colonne
$(document).on('click','.delCol', function(event){
// On récupère la colonne
col=$( this ).parent();
colcontainer=col.parent();
// On compte le nombre de colonne
nbcol=colcontainer.children(".col").length;
nbcol--;
if(nbcol<1) {
alert("Au minimum 1 colonne");
}
else {
// On détruit la colonne
col.remove();
// Pour chaque colonne on applique la répartition de taille en fonction du nombre de colonne total
colcontainer.children('.col').each(function( index ) {
$(this).removeClass();
$(this).attr("class","col "+defcol[nbcol][index]);
});
}
});
// Agrandissement colonne sur la droite
$(document).on('click','.maxright', function(event){
// On récupère la colonne
col=$( this ).parent();
colcontainer=col.parent();
// On recherche la colonne suivante
colnext=col.next();
if(colnext.length) {
// uniquement si taille de la colonne suivant n'est pas col-1
if(colnext.attr("class")!="col col-1") {
// On récupére la taille de la colonne suivante et en cours
taillenext=parseInt(colnext.attr("class").replace("col-","").replace("col ",""));
taille=parseInt(col.attr("class").replace("col-","").replace("col ",""));
// On applique la nouvelle taille à la colonne en cours
col.removeClass();
col.attr("class","col col-"+(taille+1));
// On applique la nouvelle taille à la colonne suivante
colnext.removeClass();
colnext.attr("class","col col-"+(taillenext-1));
}
}
});
// Agrandissement colonne sur la gauche
$(document).on('click','.maxleft', function(event){
console.log("here");
// On récupère la colonne
col=$( this ).parent();
colcontainer=col.parent();
// On recherche la colonne suivante
colprev=col.prev();
if(colprev.length) {
// uniquement si taille de la colonne précédente n'est pas col-1
if(colprev.attr("class")!="col col-1") {
console.log(colprev.attr("class"));
// On récupére la taille de la colonne précédente et en cours
tailleprev=parseInt(colprev.attr("class").replace("col-","").replace("col ",""));
taille=parseInt(col.attr("class").replace("col-","").replace("col ",""));
console.log(taille);
// On applique la nouvelle taille à la colonne en cours
col.removeClass();
col.attr("class","col col-"+(taille+1));
// On applique la nouvelle taille à la colonne suivante
colprev.removeClass();
colprev.attr("class","col col-"+(tailleprev-1));
}
}
});
// Sur validation formulaire
$( "form" ).submit(function( event ) {
//event.preventDefault();
template='{"rows":[';
// Pour chaque ligne de niveau 01 de la grille
nbrownv01=$("#gridtemplate").children('.row').length;
$("#gridtemplate").children('.row').each(function( index ) {
template+='{';
template+='"id":'+index+',';
// Pour chaque colonne de la ligne de niveau 01
nbcolnv01=$(this).children('.colcontainer').children('.col').length;
template+='"cols":[';
$(this).children('.colcontainer').children('.col').each(function( index ) {
template+='{';
template+='"id":'+index+',';
template+='"size": '+parseInt($(this).attr("class").replace("col-","").replace("col ",""))+',';
// Pour chaque ligne de niveau 02
template+='"rows":[';
nbrownv02=$(this).children('.rowcontainer').children('.row').length;
$(this).children('.rowcontainer').children('.row').each(function( index ) {
template+='{';
template+='"id":'+index+',';
nbcolnv02=$(this).children('.colcontainer').children('.col').length;
template+='"cols":[';
$(this).children('.colcontainer').children('.col').each(function( index ) {
template+='{';
template+='"id":'+index+',';
template+='"size": '+parseInt($(this).attr("class").replace("col-","").replace("col ",""));
template+='}';
if(index+1<nbcolnv02) template+=',';
});
template+=']';
template+='}';
if(index+1<nbrownv02) template+=',';
});
template+=']';
template+='}';
if(index+1<nbcolnv01) template+=',';
});
template+=']';
template+='}';
if(index+1<nbrownv01) template+=',';
});
template+=']}';
$("#page_update_widget_template").val(template);
});
});
</script>
{% endblock %}