nineskeletor/templates/Page/pages.html.twig

462 lines
20 KiB
Twig

{% extends 'base.html.twig' %}
{% block localstyle %}
<style>
body{
overflow-y:hidden
}
#page{
padding:0px !important;
overflow-y:hidden;
}
</Style>
{% endblock %}
{% block menuapp %}
<ul id="menupagesportal" class="navbar-nav">
{% for page in pagesportal %}
<li id="menupage-{{page.id}}" class="menupage nav-item" style="cursor:pointer">
<a onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','portal','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
{% if page.fonticon %}
<i class="{{ page.fonticon }} fa-fw"></i>
{% elseif loop.first %}
<i class="fas fa-home fa-fw"></i>
{% else %}
<i class="fas fa-door-closed fa-fw"></i>
{% endif %}
{{ page.name }}
</a>
</li>
{% endfor %}
</ul>
<ul id="menupagesuser" class="navbar-nav">
{% for page in pagesuser %}
<li id="menupage-{{page.id}}" class="menupage nav-item" style="cursor:pointer">
<a onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','user','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
{% if page.fonticon %}
<i class="{{ page.fonticon }} fa-fw"></i>
{% else %}
<i class="fas fa-user fa-fw"></i>
{% endif %}
{{ page.name }}
</a>
</li>
{% endfor %}
</ul>
{% if groups|length > 0 and groups|length < 10 %}
<ul id="menupagesgroup" class="navbar-nav">
{% for groupshared in groups %}
{% if groupshared.pagesshared|length > 1 %}
<li id="menugroup-{{groupshared.id}}" class="nav-item menupage dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-users fa-fw"></i>
{{ groupshared.label }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% endif %}
{% for page in groupshared.pagesshared %}
{% if groupshared.pagesshared|length == 1 %}
<li id="menupage-{{page.id}}" class="menupage nav-item">
{%endif%}
<a id="menupage-{{page.id}}" style="cursor:pointer" class="{{ groupshared.pagesshared|length > 1 ? "menupage dropdown-item" : "" }}" onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','group','{{page.pagecategory.id==1?page.toreload:true}}',{{groupshared.id}},'{{page.name}}')">
{% if page.fonticon %}
<i class="{{ page.fonticon }} fa-fw"></i>
{% else %}
<i class="fa fa-users fa-fw"></i>
{% endif %}
{{ page.name }}
</a>
{% if groupshared.pagesshared|length == 1 %}
</li>
{%endif%}
{% endfor %}
{% if groupshared.pagesshared|length > 1 %}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% elseif groups|length > 0 %}
<ul id="menupagesgroup" class="navbar-nav">
<li class="nav-item" style="cursor:pointer">
<a onclick="$('#selmenu').modal('show');">
<i class="fa fa-users fa-fw"></i> Mes Groupes
</a>
</li>
</ul>
{% endif %}
{% endblock %}
{% block menuuser %}
{% if canadd and app.user %}
<a id="menusubmit" style="cursor:pointer" onclick="submitPage()" title='Ajouter une page'><i class='fa fa-plus fa-fw'></i></a>
{% endif %}
<a id="menuupdate" style="cursor:pointer;display:none" onclick="updatePage()" title='Modifier une page'><i class='fa fa-file fa-fw'></i></a>
<a id="menushare" style="cursor:pointer;display:none" onclick="sharePage()" title='Partager une page'><i class='fa fa-share-alt fa-fw'></i></a>
<a id="menudelete" style="cursor:pointer;display:none" onclick="deletePage()" title='Supprimer une page'><i class='fa fa-trash fa-fw'></i></a>
<a id="menuwidgetuser" class="btn-modal" style='cursor:pointer' data-modalid='selwidgetuser' title='Ajouter un widget'><i class='fa fa-cubes fa-fw'></i></a></li>
<a id="menuwidgetgroup" class="btn-modal" style='cursor:pointer' data-modalid='selwidgetgroup' title='Ajouter un widget'><i class='fa fa-cubes fa-fw'></i></a></li>
{% endblock %}
{% block body %}
<div id="pagecontainer"></div>
<div id="selmenu" class="modal fade" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div id="mymodalheader" class="modal-header">
<h4 class="modal-title">SELECTIONNER UNE PAGE</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="pagesportal" style="display:none">
{% for page in pagesportal %}
{%if loop.first %}
<div class="card mb-3">
<div class="card-header">PAGES PORTAIL</div>
<ul class="list-group list-group-flush">
{%endif%}
<a class="list-group-item" onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','portal','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
{% if page.fonticon %}
<i class="{{ page.fonticon }} fa-fw"></i>
{% elseif loop.first %}
<i class="fas fa-home fa-fw"></i>
{% else %}
<i class="fas fa-door-closed fa-fw"></i>
{% endif %}
{{ page.name }}
</a>
{%if loop.last %}
</ul></div>
{%endif%}
{% endfor %}
</div>
<div id="pagesuser" style="display:none">
{% for page in pagesuser %}
{%if loop.first %}
<div class="card mb-3">
<div class="card-header">PAGES PERSONNEL</div>
<ul class="list-group list-group-flush">
{%endif%}
<a class="list-group-item" onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','user','{{page.pagecategory.id==1?page.toreload:true}}',null,'{{page.name}}')">
{% if page.fonticon %}
<i class="{{ page.fonticon }} fa-fw"></i>
{% else %}
<i class="fas fa-user fa-fw"></i>
{% endif %}
{{ page.name }}
</a>
{%if loop.last %}
</ul></div>
{%endif%}
{% endfor %}
</div>
<div id="pagesgroup">
{% for groupshared in groups %}
{%if loop.first %}
<div class="card mb-3">
<div class="card-header">PAGES GROUPE DE TRAVAIL</div>
<ul class="list-group list-group-flush">
{%endif%}
{% for page in groupshared.pagesshared %}
<a class="list-group-item" onClick="showPage({{ page.id }},{{ page.pagecategory.id }},'{{ page.canupdate }}','group','{{page.pagecategory.id==1?page.toreload:true}}',{{groupshared.id}},'{{page.name}}')">
{% if page.fonticon %}
<i class="{{ page.fonticon }} fa-fw"></i>
{% else %}
<i class="fas fa-users fa-fw"></i>
{% endif %}
{{page.name == groupshared.label ? page.name : groupshared.label~" - "~page.name}}
</a>
{% endfor %}
{%if loop.last %}
</ul></div>
{%endif%}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div id="selwidgetuser" class="modal fade" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div id="mymodalheader" class="modal-header">
<h4 class="modal-title">SELECTIONNER UN WIDGET</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table id="dataTablesuser" class="table table-striped table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th class="no-sort" width="80px"></th>
<th width="100px">Nom</th>
<th class="no-sort" width="500px">Description</th>
</tr>
</thead>
<tbody>
{% for widget in widgetsuser %}
<tr>
<td>
<a onClick="selWidget({{ widget.id }},'user')" style="cursor:pointer;">
<img id="widgettype-{{ widget.id }}" class="grid-item-img" height="40" src="{{path('app_minio_image',{file:widget.icon.label}) }}" style="padding:2px">
</a>
</td>
<td>{{ widget.name }}</td>
<td>{{ widget.description }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="selwidgetgroup" class="modal fade" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div id="mymodalheader" class="modal-header">
<h4 class="modal-title">SELECTIONNER UN WIDGET</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table id="dataTablesgroup" class="table table-striped table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th class="no-sort" width="80px"></th>
<th width="100px">Nom</th>
<th class="no-sort" width="500px">Description</th>
</tr>
</thead>
<tbody>
{% for widget in widgetsgroup %}
<tr>
<td>
<a onClick="selWidget({{ widget.id }},'group')" style="cursor:pointer;">
<img id="widgettype-{{ widget.id }}" class="grid-item-img" height="40" src="{{path('app_minio_image',{file:widget.icon.label}) }}" style="padding:2px">
</a>
</td>
<td>{{ widget.name }}</td>
<td>{{ widget.description }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
{% block localscript %}
<script>
var idpage;
$('document').ready(function(){
// Afficher la page courrante
{% for page in pagesportal %}
{% if page.id==entity.id %}
showPage({{ page.id }}, {{ page.pagecategory.id }},'{{ page.canupdate }}','portal',false,null,'{{page.name}}');
{% endif %}
{% endfor %}
{% for page in pagesuser %}
{% if page.id==entity.id %}
showPage({{ page.id }}, {{ page.pagecategory.id }},'{{ page.canupdate }}','user',false,null,'{{page.name}}');
{% endif %}
{% endfor %}
{% for groupshared in groups %}
{% for page in groupshared.pagesshared %}
{% if page.id==entity.id %}
showPage({{ page.id }}, {{ page.pagecategory.id }},'{{ page.canupdate }}','group',true,{{groupshared.id}},'{{page.name}}');
{% endif %}
{% endfor %}
{% endfor %}
// Rendre les pages user déplacable
$("#menupagesuser").sortable({
axis: "x",
forcePlaceholderSize: true,
placeholder: "placeholder",
update: function( event, ui ) {
$('#pagesuser li').each(function(order) {
var idpage=$(this).attr('id').replace("menupage-","");
$.ajax({
method: "POST",
url: "{{ path('app_'~access~'_page_user_order') }}",
data: {
id:idpage,
order:order
}
});
});
}
});
// Initialisation du tableau des widgets selectionnable à la création
$('.table').DataTable({
columnDefs: [ { "targets": 'no-sort', "orderable": false }, { "targets": 0, "className": "text-center" } ],
iDisplayLength: 10,
order: [[ 1, "asc" ]],
scrollX: false,
});
});
// Affichage des frames associés aux items de bureau
function showItemframe(id,url,forcereload) {
$(".pageframereload").remove();
$(".pageframe").hide();
// Si force le rechargement et frame existante on la détruit
if(forcereload&&$("#frameitem-"+id).length)
$("#frameitem-"+id).remove();
// Si la frame en cours existe déjà on l'affiche
if($("#frameitem-"+id).length)
$("#frameitem-"+id).show();
// Sinon on la génère
else {
var myclass="";
if(forcereload) myclass="pageframereload";
$("#pagecontainer").append("<iframe onload='this.contentWindow.focus()' id='frameitem-"+id+"' class='pageframe "+myclass+"' src='"+url+"' style='border:none; width:100%'></iframe>");
}
Resize();
}
// Affichages des pages
function showPage(id,catid,canupdate,usage,forcereload,groupid,pagename) {
// Sauvegarder la page en cours
idpage=id;
// Cacher toutes les pages
$(".pageframereload").remove();
$(".pageframe").hide();
$(".dropdown-menu").hide();
// Rendre actif le page en cours dans le menu
$(".menupage").removeClass("active");
$(".dropdown-toggle").removeClass("active");
$("#menupage-"+id).addClass("active");
$("#menugroup-"+groupid).addClass("active");
if(usage=="portal")
var url="{{ path('app_all_page_portal_view',{id:'xx'}) }}";
else if(usage=="user")
var url="{{ path('app_all_page_user_view',{id:'xx'}) }}";
else
var url="{{ path('app_all_page_group_view',{id:'xx'}) }}";
url=url.replace('xx',id);
passurl="{{ path('app_home',{id:'xx'}) }}";
passurl=passurl.replace('xx',id);
history.pushState('data to be passed', 'Title of the page', passurl);
// Si force le rechargement et frame existante on la détruit
if(forcereload&&$("#page-"+id).length)
$("#page-"+id).remove();
// Si la frame en cours existe déjà on l'affiche
if($("#page-"+id).length)
$("#page-"+id).show();
// Sinon on la génère
else {
var myclass="";
if(forcereload) myclass="pageframereload";
$("#pagecontainer").append("<iframe onload='this.contentWindow.focus()' id='page-"+id+"' data-category='"+catid+"' class='pageframe "+myclass+"' src='"+url+"' style='border:none; width:100%'></iframe>");
}
// Cacher les actions possibles sur la page
$("#menuupdate").hide();
$("#menushare").hide();
$("#menudelete").hide();
$("#menuwidgetuser").hide();
$("#menuwidgetgroup").hide();
if(canupdate) {
$("#menuupdate").show();
$("#menudelete").show();
}
// Si page de type widget on affiche la selection des widgets à insérer
if($("#page-"+id).data('category')==2&&canupdate) {
if(usage=="user") $("#menuwidgetuser").show();
if(usage=="group") $("#menuwidgetgroup").show();
}
Resize();
}
function submitPage() {
var url="{{ path('app_'~access~'_page_user_submit') }}";
$(location).attr('href',url);
}
function updatePage() {
if($("#page-"+idpage).length) {
var url="{{ path('app_'~access~'_page_user_update',{id:'xx'}) }}";
url=url.replace('xx',idpage);
$(location).attr('href',url);
}
}
function deletePage() {
if($("#page-"+idpage).length) {
if (confirm('Êtes-vous sûr de vouloir supprimer ?')) {
var url="{{ path('app_'~access~'_page_user_delete',{id:'xx'}) }}";
url=url.replace('xx',idpage);
$(location).attr('href',url);
}
}
}
// Création d'un widget selectionné
function selWidget(idwidgettype,usage) {
var url="{{ path('app_all_pagewidget_widget_sumbit',{idpage:'yy',idwidgettype:'xx',usage:'zz'})}}";
url=url.replace('xx',idwidgettype);
url=url.replace('yy',idpage);
url=url.replace('zz',usage);
$(".modal").modal("hide");
$("#page-"+idpage).attr("src",url);
};
</script>
{% endblock %}