Fixed (partially) + font for login pages ( + ) + migrated view to Twig
This commit is contained in:
parent
f9f7ce9a97
commit
c3acd3fac2
|
@ -4,7 +4,6 @@
|
||||||
use \api\core\ModuleRequest;
|
use \api\core\ModuleRequest;
|
||||||
use \error\core\Error;
|
use \error\core\Error;
|
||||||
use \api\core\Authentification;
|
use \api\core\Authentification;
|
||||||
use \manager\repo\cluster as clusterRepo;
|
|
||||||
|
|
||||||
class group_groupChoice{
|
class group_groupChoice{
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<form class='neutral' id='choose-cluster'>
|
<form class='neutral' action='' method='POST' id='choose-cluster'>
|
||||||
<select data-name='cluster'>
|
<select data-name='cluster'>
|
||||||
<option value='.' selected disabled>Groupe à modifier</option>
|
<option value='.' selected disabled>Groupe à modifier</option>
|
||||||
|
|
||||||
|
|
|
@ -5,215 +5,134 @@
|
||||||
use \api\core\ModuleRequest;
|
use \api\core\ModuleRequest;
|
||||||
use \error\core\Error;
|
use \error\core\Error;
|
||||||
use \api\core\Authentification;
|
use \api\core\Authentification;
|
||||||
use \manager\repo\cluster as clusterRepo;
|
|
||||||
|
|
||||||
class group_membersChoice{
|
class group_membersChoice{
|
||||||
|
|
||||||
public static function template($type=null){
|
public static function render($params){
|
||||||
|
var_dump('membersChoice');
|
||||||
switch($type){
|
debug();
|
||||||
|
/* [1] On vérifie le type de groupe (user/machine)
|
||||||
case 'userheader': return "
|
|
||||||
<span><strong>Identifiant</strong></span>
|
|
||||||
<span><strong>Nom</strong></span>
|
|
||||||
<span><strong>Code RFID</strong></span>
|
|
||||||
";
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'machineheader': return "
|
|
||||||
<span><strong>Nom</strong></span>
|
|
||||||
";
|
|
||||||
break;
|
|
||||||
|
|
||||||
|
|
||||||
case 'userlist': return "
|
|
||||||
<div>
|
|
||||||
<span>@username</span>
|
|
||||||
<span>@firstname @lastname</span>
|
|
||||||
<span>@code</span>
|
|
||||||
<span>
|
|
||||||
|
|
||||||
<input type='checkbox' value='@id_user' data-name='members' id='checkbox_@id_user' @already_in>
|
|
||||||
<label for='checkbox_@id_user'></label>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>";
|
|
||||||
break;
|
|
||||||
|
|
||||||
|
|
||||||
case 'machinelist': return "
|
|
||||||
<div>
|
|
||||||
<span>@name</span>
|
|
||||||
<span>
|
|
||||||
|
|
||||||
<input type='checkbox' value='@id_machine' data-name='members' id='checkbox_@id_machine' @already_in>
|
|
||||||
<label for='checkbox_@id_machine'></label>
|
|
||||||
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>";
|
|
||||||
break;
|
|
||||||
|
|
||||||
|
|
||||||
default: return "
|
|
||||||
<a style='text-align:center; color: #666;' href='/groups/members/'>Modifier un autre groupe</a><p></p>
|
|
||||||
<article class='check-table'>
|
|
||||||
<input type='hidden' id='members-member-idcluster' value='@id_cluster'>
|
|
||||||
<input type='hidden' id='members-member-class' value='@class'>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
@header
|
|
||||||
<span><strong>Membre de <u>@name</u></strong></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@members
|
|
||||||
</article>";
|
|
||||||
break;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public static function view($params){
|
|
||||||
/* [0] Initialisation
|
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) On vérifie les paramètres */
|
/* (1) On vérifie les paramètres */
|
||||||
if( !isset($params['id_cluster']) || !is_numeric($params['id_cluster']) || !isset($params['class']) || !is_numeric($params['class']) )
|
if( !isset($params['id_cluster']) || !is_numeric($params['id_cluster']) || !isset($params['class']) || !is_numeric($params['class']) )
|
||||||
return Viewer::$htmlError;
|
return Viewer::$htmlError;
|
||||||
|
|
||||||
/* (2) On initialise les vues */
|
/* (2) On récupère le groupe */
|
||||||
$view = '';
|
|
||||||
$members_view = '';
|
|
||||||
$header = '';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [1] On vérifie le type de groupe (user/machine)
|
|
||||||
=========================================================*/
|
|
||||||
/* (1) On récupère le groupe */
|
|
||||||
$checktypeRequest = new ModuleRequest('clusterDefault/getById', [
|
$checktypeRequest = new ModuleRequest('clusterDefault/getById', [
|
||||||
'id_cluster' => $params['id_cluster'],
|
'id_cluster' => $params['id_cluster'],
|
||||||
'class' => $params['class']
|
'class' => $params['class']
|
||||||
]);
|
]);
|
||||||
$checktypeResponse = $checktypeRequest->dispatch();
|
$checktypeResponse = $checktypeRequest->dispatch();
|
||||||
|
|
||||||
/* (2) Si on ne le trouve pas, on retourne une erreur */
|
/* (3) Si on ne le trouve pas, on retourne une erreur */
|
||||||
if( $checktypeResponse->error != Error::Success )
|
if( $checktypeResponse->error != Error::Success )
|
||||||
return Viewer::$htmlError;
|
return Viewer::$htmlError;
|
||||||
|
|
||||||
/* (3) On récupère les données du groupe */
|
/* (4) On récupère les données du groupe */
|
||||||
$currentCluster = $checktypeResponse->get('cluster');
|
$currentCluster = $checktypeResponse->get('cluster');
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] Init Twig
|
||||||
/* [2] On récupère les membres du groupe
|
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
/* (1) On exécute la requête */
|
$loader = new \Twig_Loader_Filesystem(__BUILD__.'/viewer/view');
|
||||||
$getmembersRequest = new ModuleRequest('clusterDefault/getMembers', [
|
$twig = new \Twig_Environment($loader, []);
|
||||||
'id_cluster' => $params['id_cluster'],
|
|
||||||
'class' => $params['class']
|
|
||||||
|
/* [3] Store variables
|
||||||
|
=========================================================*/
|
||||||
|
$variables = [
|
||||||
|
'p_id_cluster' => $params['id_cluster'],
|
||||||
|
'p_class' => $params['class'],
|
||||||
|
'p_name' => $currentCluster['name'],
|
||||||
|
'p_theme' => $_SESSION['WAREHOUSE']['theme']
|
||||||
|
];
|
||||||
|
|
||||||
|
/* [4] Store functions
|
||||||
|
=========================================================*/
|
||||||
|
$twig->addFunction(new \Twig_Function('f_members', function($id_cluster, $class){
|
||||||
|
/* [1] On récupère les membres
|
||||||
|
=========================================================*/
|
||||||
|
|
||||||
|
/* (1) On exécute la requête */
|
||||||
|
$getmembersRequest = new ModuleRequest('clusterDefault/getMembers', [
|
||||||
|
'id_cluster' => $id_cluster,
|
||||||
|
'class' => $class
|
||||||
|
]);
|
||||||
|
$getmembersResponse = $getmembersRequest->dispatch();
|
||||||
|
|
||||||
|
/* (2) Si erreur, on retourne rien par défaut */
|
||||||
|
if( $getmembersResponse->error != Error::Success )
|
||||||
|
return [];
|
||||||
|
|
||||||
|
/* (3) On récupère la liste des UID uniquement */
|
||||||
|
$members_ids = [];
|
||||||
|
foreach($getmembersResponse->get('members') as $member)
|
||||||
|
$members_ids[] = ($class==0) ? $member['id_user'] : $member['id_machine'];
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] On récupère les utilisateurs non membres
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On récupère les utilisateurs */
|
||||||
|
if( $class == 0 ){
|
||||||
|
|
||||||
|
/* (2) On exécute la requête */
|
||||||
|
$getusersRequest = new ModuleRequest('userDefault/getAll');
|
||||||
|
// On recupere la reponse
|
||||||
|
$getusersResponse = $getusersRequest->dispatch();
|
||||||
|
|
||||||
|
/* (3) si erreur, on affiche l'explicitation */
|
||||||
|
if( $getusersResponse->error != Error::Success )
|
||||||
|
return [];
|
||||||
|
|
||||||
|
/* (4) On récupère la liste des utilisateurs */
|
||||||
|
$users = $getusersResponse->get('users');
|
||||||
|
|
||||||
|
/* (5) On ajoute s'ils sont dans le groupe ou non */
|
||||||
|
foreach($users as $u=>$user)
|
||||||
|
$users[$u]['already'] = in_array($user['id_user'], $members_ids);
|
||||||
|
return $users;
|
||||||
|
|
||||||
|
|
||||||
|
/* [3] On récupère les machines non membres
|
||||||
|
=========================================================*/
|
||||||
|
/* (1) On récupère les machines */
|
||||||
|
}else{
|
||||||
|
|
||||||
|
/* (2) On exécute la requête */
|
||||||
|
$getmachinesRequest = new ModuleRequest('machineDefault/getAll');
|
||||||
|
// On recupere la reponse
|
||||||
|
$getmachinesResponse = $getmachinesRequest->dispatch();
|
||||||
|
|
||||||
|
/* (3) si erreur, on affiche l'explicitation */
|
||||||
|
if( $getmachinesResponse->error != Error::Success )
|
||||||
|
return [];
|
||||||
|
|
||||||
|
/* (4) On récupère la liste des machines */
|
||||||
|
$machines = $getmachinesResponse->get('machines');
|
||||||
|
|
||||||
|
/* (5) On ajoute s'ils sont dans le groupe ou non */
|
||||||
|
foreach($machines as $u=>$machine)
|
||||||
|
$machines[$u]['already'] = in_array($machine['id_machine'], $members_ids);
|
||||||
|
|
||||||
|
return $machines;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [5] Build the whole stuff
|
||||||
|
=========================================================*/
|
||||||
|
return $twig->render('group/group_membersChoice.twig', [
|
||||||
|
'p_class' => $variables['p_class'],
|
||||||
|
'p_name' => $variables['p_name'],
|
||||||
|
'p_id_cluster' => $variables['p_id_cluster'],
|
||||||
|
'p_theme' => $variables['p_theme']
|
||||||
]);
|
]);
|
||||||
$getmembersResponse = $getmembersRequest->dispatch();
|
|
||||||
|
|
||||||
/* (2) Si erreur, on retourne l'erreur */
|
|
||||||
if( $getmembersResponse->error != Error::Success )
|
|
||||||
return Viewer::$htmlError;
|
|
||||||
|
|
||||||
/* (3) On récupère la liste des UID uniquement */
|
|
||||||
$members_id = [];
|
|
||||||
foreach($getmembersResponse->get('members') as $member)
|
|
||||||
$members_id[] = ($params['class']==0) ? $member['id_user'] : $member['id_machine'];
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* [3] SI GROUPE D'UTILISATEURS -> On récupère les utilisateurs
|
|
||||||
=========================================================*/
|
|
||||||
if( $params['class'] == 0 ){
|
|
||||||
|
|
||||||
/* (1) On récupère les utilisateurs
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) On exécute la requête */
|
|
||||||
$getusersRequest = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
|
|
||||||
$getusersResponse = $getusersRequest->dispatch(); // On recupere la reponse
|
|
||||||
|
|
||||||
/* (2) si erreur, on affiche l'explicitation */
|
|
||||||
if( $getusersResponse->error != Error::Success )
|
|
||||||
return Viewer::$htmlError;
|
|
||||||
|
|
||||||
/* (3) On récupère la liste des utilisateurs */
|
|
||||||
$USERLIST = $getusersResponse->get('users');
|
|
||||||
|
|
||||||
|
|
||||||
/* (2) On gère l'affichage des utilisateurs
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) On gère l'état 'membre' ou non */
|
|
||||||
foreach($USERLIST as $u=>$user)
|
|
||||||
$USERLIST[$u]['already_in'] = in_array($user['id_user'], $members_id) ? 'checked' : '';
|
|
||||||
|
|
||||||
/* (2) On génère la vue */
|
|
||||||
$header = self::template('userheader');
|
|
||||||
|
|
||||||
$members_view = Viewer::replaceMultiple(
|
|
||||||
self::template('userlist'),
|
|
||||||
$USERLIST
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
/* [4] SI GROUPE DE MACHINES -> On récupère les machines
|
|
||||||
=========================================================*/
|
|
||||||
}else{
|
|
||||||
|
|
||||||
/* (1) On récupère les machines
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) On exécute la requête */
|
|
||||||
$getmachinesRequest = new ModuleRequest('machineDefault/getAll'); // On utilise la methode 'getAll' du module 'machineDefault'
|
|
||||||
$getmachinesResponse = $getmachinesRequest->dispatch(); // On recupere la reponse
|
|
||||||
|
|
||||||
/* (2) si erreur, on affiche l'explicitation */
|
|
||||||
if( $getmachinesResponse->error != Error::Success )
|
|
||||||
return Viewer::$htmlError;
|
|
||||||
|
|
||||||
/* (3) On récupère la liste des machines */
|
|
||||||
$MACHINELIST = $getmachinesResponse->get('machines');
|
|
||||||
|
|
||||||
|
|
||||||
/* (2) On gère l'affichage des machines
|
|
||||||
---------------------------------------------------------*/
|
|
||||||
/* (1) On gère l'état 'membre' ou non */
|
|
||||||
foreach($MACHINELIST as $m=>$machine)
|
|
||||||
$MACHINELIST[$m]['already_in'] = in_array($machine['id_machine'], $members_id) ? 'checked' : '';
|
|
||||||
|
|
||||||
/* (2) On génère la vue */
|
|
||||||
$header = self::template('machineheader');
|
|
||||||
|
|
||||||
$members_view = Viewer::replaceMultiple(
|
|
||||||
self::template('machinelist'),
|
|
||||||
$MACHINELIST
|
|
||||||
);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return Viewer::replaceSingle(
|
|
||||||
self::template(), [
|
|
||||||
'id_cluster' => $params['id_cluster'],
|
|
||||||
'class' => $params['class'],
|
|
||||||
'name' => $currentCluster['name'],
|
|
||||||
'clustertype' => ($params['class']==0) ? 'utilisateurs' : 'machines',
|
|
||||||
'members' => $members_view,
|
|
||||||
'header' => $header
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
<a style='text-align:center; color: #666;' href='/groups/members/'>Modifier un autre groupe</a>
|
||||||
|
<p></p>
|
||||||
|
|
||||||
|
<article class='check-table'>
|
||||||
|
<input type='hidden' id='members-member-idcluster' value='{{ p_id_cluster }}'>
|
||||||
|
<input type='hidden' id='members-member-class' value='{{ p_class }}'>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
{# USER HEADER #}
|
||||||
|
{% if p_class == 0 %}
|
||||||
|
<span><strong>Identifiant</strong></span>
|
||||||
|
<span><strong>Nom</strong></span>
|
||||||
|
<span><strong>Code RFID</strong></span>
|
||||||
|
{# MACHINE HEADER #}
|
||||||
|
{% else %}
|
||||||
|
<span><strong>Nom</strong></span>
|
||||||
|
{% endif %}
|
||||||
|
<span><strong>Membre de <u>{{ p_name }}</u></strong></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{% for member in f_members(p_id_cluster, p_class) %}
|
||||||
|
|
||||||
|
{# USER ENTRIES #}
|
||||||
|
{% if p_class == 0 %}
|
||||||
|
<div>
|
||||||
|
<span>{{ member.username }}</span>
|
||||||
|
<span>{{ member.firstname }} {{ member.lastname }}</span>
|
||||||
|
<span>{{ member.code }}</span>
|
||||||
|
<span>
|
||||||
|
<input type='checkbox' value='{{ member.id_user }}' data-name='members' id='checkbox_{{ member.id_user }}' {% if member.already %}checked{% endif %}>
|
||||||
|
<label for='checkbox_{{ member.id_user }}'></label>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{# MACHINE ENTRIES #}
|
||||||
|
{% else %}
|
||||||
|
<div>
|
||||||
|
<span>{{ member.name }}</span>
|
||||||
|
<span>
|
||||||
|
<input type='checkbox' value='{{ member.id_machine }}' data-name='members' id='checkbox_{{ member.id_machine }}' {% if member.already %}checked{% endif %}>
|
||||||
|
<label for='checkbox_{{ member.id_machine }}'></label>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
</article>
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
background-color: #edf0f5;
|
background-color: #edf0f5;
|
||||||
|
|
||||||
font-family: 'Open Sans', 'Ubuntu';
|
font-family: 'Open Sans', 'Ubuntu', 'Verdana', 'Arial';
|
||||||
|
|
||||||
|
|
||||||
/* [1] Header de la page
|
/* [1] Header de la page
|
||||||
|
|
|
@ -1,3 +1,59 @@
|
||||||
#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Open Sans', 'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px);border-bottom:1px solid #c23f05;background-color:#f44f06;z-index:10}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#WRAPPER>#CONTAINER{display:flex;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em);height:calc( 100% - 4em - 2*1em);padding:1em;flex-direction:row;justify-content:space-between;overflow-x:none;overflow-y:auto}
|
/* COULEUR DU THEME */
|
||||||
|
/* COULEUR DU SOUS-MENU */
|
||||||
|
/* COULEUR DES ERREURS */
|
||||||
|
/* FORMULAIRES */
|
||||||
|
/* GESTION DES LONGUEURS */
|
||||||
|
#WRAPPER {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #edf0f5;
|
||||||
|
font-family: 'Open Sans', 'Ubuntu', 'Verdana', 'Arial';
|
||||||
|
/* [1] Header de la page
|
||||||
|
==========================================*/
|
||||||
|
/* [2] Side-Menu de la page
|
||||||
|
==========================================*/
|
||||||
|
/* [3] Container de la page
|
||||||
|
==========================================*/
|
||||||
|
}
|
||||||
|
#WRAPPER > #HEADER {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: calc( 4em - 1px );
|
||||||
|
border-bottom: 1px solid #c23f05;
|
||||||
|
background-color: #f44f06;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
#WRAPPER > #MENU-SIDE {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 4em;
|
||||||
|
left: 0;
|
||||||
|
width: 4em;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 2px 1px 3px #ddd;
|
||||||
|
background-color: #fff;
|
||||||
|
transition: all .3s;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
#WRAPPER > #CONTAINER {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 4em;
|
||||||
|
left: 4em;
|
||||||
|
width: calc( 100% - 4em - 2*1em );
|
||||||
|
height: calc( 100% - 4em - 2*1em );
|
||||||
|
padding: 1em;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow-x: none;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiLAoJCSIuLi9jb25zdGFudHMuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJIkBpbXBvcnQgJ2NvbnN0YW50cyc7XG5cbiNXUkFQUEVSe1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IGZpeGVkO1xuXHRcdHRvcDogMDtcblx0XHRsZWZ0OiAwO1xuXHRcdHdpZHRoOiAxMDAlO1xuXHRcdGhlaWdodDogMTAwJTtcblxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjZWRmMGY1O1xuXG5cdGZvbnQtZmFtaWx5OiAnT3BlbiBTYW5zJywgJ1VidW50dSc7XG5cblxuXHQvKiBbMV0gSGVhZGVyIGRlIGxhIHBhZ2Vcblx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0JiA+ICNIRUFERVJ7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdFx0dG9wOiAwO1xuXHRcdFx0bGVmdDogMDtcblx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0aGVpZ2h0OiBjYWxjKCAjeyRtZW51LXNpZGUtd2lkdGh9IC0gMXB4ICk7XG5cblx0XHRib3JkZXItYm90dG9tOiAxcHggc29saWQgZGFya2VuKCR0aGVtZS1jb2xvciwgMTApO1xuXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHRoZW1lLWNvbG9yO1xuXG5cdFx0ei1pbmRleDogMTA7XG5cblx0fVxuXG5cblx0LyogWzJdIFNpZGUtTWVudSBkZSBsYSBwYWdlXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdC8vIEdlc3Rpb24gZHUgbWVudVxuXHQmID4gI01FTlUtU0lERXtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHR0b3A6ICRtZW51LXNpZGUtd2lkdGg7XG5cdFx0XHRsZWZ0OiAwO1xuXHRcdFx0d2lkdGg6ICRtZW51LXNpZGUtd2lkdGg7XG5cdFx0XHRoZWlnaHQ6IDEwMCU7XG5cblx0XHRib3gtc2hhZG93OiAycHggMXB4IDNweCAjZGRkO1xuXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuXHRcdHRyYW5zaXRpb246IGFsbCAuM3M7XG5cblx0XHR6LWluZGV4OiA5O1xuXHR9XG5cblxuXHQvKiBbM10gQ29udGFpbmVyIGRlIGxhIHBhZ2Vcblx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0JiA+ICNDT05UQUlORVJ7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHR0b3A6ICRtZW51LXNpZGUtd2lkdGg7XG5cdFx0XHRsZWZ0OiAkbWVudS1zaWRlLXdpZHRoO1xuXHRcdFx0d2lkdGg6IGNhbGMoIDEwMCUgLSAjeyRtZW51LXNpZGUtd2lkdGh9IC0gMioxZW0gKTtcblx0XHRcdGhlaWdodDogY2FsYyggMTAwJSAtICN7JG1lbnUtc2lkZS13aWR0aH0gLSAyKjFlbSApO1xuXHRcdHBhZGRpbmc6IDFlbTtcblxuXHRcdC8vIEZsZXggcHJvcGVydGllc1xuXHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXG5cdFx0b3ZlcmZsb3cteDogbm9uZTtcblx0XHRvdmVyZmxvdy15OiBhdXRvO1xuXHR9XG59XG4iLAoJCSIvKiBDT1VMRVVSIERVIFRIRU1FICovXG4kdGhlbWUtY29sb3I6ICNmNDRmMDY7XG5cbi8qIENPVUxFVVIgRFUgU09VUy1NRU5VICovXG4kc3ViLW1lbnUtY29sb3I6ICM1YjVlNjM7XG5cbi8qIENPVUxFVVIgREVTIEVSUkVVUlMgKi9cbiRlcnJvci1jb2xvcjogI2NjNTg1NztcblxuLyogRk9STVVMQUlSRVMgKi9cbiRmb3JtLXZhbGlkLWNvbG9yOiAgICMyN2E1NjA7XG4kZm9ybS1uZXV0cmFsLWNvbG9yOiAjMjE5M2U2O1xuJGZvcm0tc2VhcmNoLWNvbG9yOiAgIzU2MzBlZDtcbiRmb3JtLWludmFsaWQtY29sb3I6ICNkNTI5MTg7XG5cblxuLyogR0VTVElPTiBERVMgTE9OR1VFVVJTICovXG4kbWVudS1zaWRlLXdpZHRoOiA0ZW07XG5cblxuLy8gUE9VUiBSRVNPVVJDRV9ESVNQQVRDSEVSXG4kcmQtZm9ybS12YWxpZC1jb2xvcjogICAnMjdhNTYwJztcbiRyZC1mb3JtLW5ldXRyYWwtY29sb3I6ICcyMTkzZTYnO1xuJHJkLWZvcm0tc2VhcmNoLWNvbG9yOiAgJzU2MzBlZCc7XG4kcmQtZm9ybS1pbnZhbGlkLWNvbG9yOiAnZDUyOTE4JztcbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFFQSxBQUFBLFFBQVEsQUFBQSxDQUNQLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLEtBQU0sQ0FDZixHQUFHLENBQUUsQ0FBRSxDQUNQLElBQUksQ0FBRSxDQUFFLENBQ1IsS0FBSyxDQUFFLElBQUssQ0FDWixNQUFNLENBQUUsSUFBSyxDQUVkLGdCQUFnQixDQUFFLE9BQVEsQ0FFMUIsV0FBVyxDQUFFLHFCQUFzQixDQTZEbkMsQUF2RUQsQUFlSyxRQWZHLENBZUgsT0FBTyxBQUFBLENBQ1YsT0FBTyxDQUFFLEtBQU0sQ0FDZixRQUFRLENBQUUsUUFBUyxDQUNsQixHQUFHLENBQUUsQ0FBRSxDQUNQLElBQUksQ0FBRSxDQUFFLENBQ1IsS0FBSyxDQUFFLElBQUssQ0FDWixNQUFNLENBQUUsZ0JBQUksQ0FFYixhQUFhLENBQUUsR0FBRyxDQUFDLEtBQUssQ0FBQyxPQUFNLENBRS9CLGdCQUFnQixDQzFCSixPQUFPLENENEJuQixPQUFPLENBQUUsRUFBRyxDQUVaLEFBN0JGLEFBbUNLLFFBbkNHLENBbUNILFVBQVUsQUFBQSxDQUNiLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDbEIsR0FBRyxDQ3ZCWSxHQUFHLENEd0JsQixJQUFJLENBQUUsQ0FBRSxDQUNSLEtBQUssQ0N6QlUsR0FBRyxDRDBCbEIsTUFBTSxDQUFFLElBQUssQ0FFZCxVQUFVLENBQUUsZ0JBQWlCLENBRTdCLGdCQUFnQixDQUFFLElBQUssQ0FFdkIsVUFBVSxDQUFFLE9BQVEsQ0FFcEIsT0FBTyxDQUFFLENBQUUsQ0FDWCxBQWxERixBQXVESyxRQXZERyxDQXVESCxVQUFVLEFBQUEsQ0FDYixPQUFPLENBQUUsSUFBSyxDQUNkLFFBQVEsQ0FBRSxRQUFTLENBQ2xCLEdBQUcsQ0MzQ1ksR0FBRyxDRDRDbEIsSUFBSSxDQzVDVyxHQUFHLENENkNsQixLQUFLLENBQUUseUJBQUksQ0FDWCxNQUFNLENBQUUseUJBQUksQ0FDYixPQUFPLENBQUUsR0FBSSxDQUdiLGNBQWMsQ0FBRSxHQUFJLENBQ3BCLGVBQWUsQ0FBRSxhQUFjLENBRS9CLFVBQVUsQ0FBRSxJQUFLLENBQ2pCLFVBQVUsQ0FBRSxJQUFLLENBQ2pCIiwKCSJuYW1lcyI6IFtdCn0= */
|
/*# sourceMappingURL=layout.css.map */
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19,6 +19,7 @@ html {
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
// font-size: 12px;
|
// font-size: 12px;
|
||||||
|
font-family: 'Open Sans', 'Ubuntu', 'Verdana', 'Arial';
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HTML5 display definitions
|
/* HTML5 display definitions
|
||||||
|
|
|
@ -66,7 +66,7 @@ function navSubMenu(subsection){
|
||||||
var page = null;
|
var page = null;
|
||||||
|
|
||||||
// Si erreur, on retourne FALSE
|
// Si erreur, on retourne FALSE
|
||||||
if( !target.getData('sublink') ) return false
|
if( !target.getData('sublink') ) return false;
|
||||||
|
|
||||||
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
|
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
|
||||||
|
|
||||||
|
@ -103,7 +103,7 @@ function navMenu(section, persistence){
|
||||||
target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;
|
target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;
|
||||||
|
|
||||||
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||||
target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target;
|
target = target || document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]');
|
||||||
|
|
||||||
// Si le param n'est toujours pas bon, on retourne une erreur
|
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||||
if( target == null ) return false;
|
if( target == null ) return false;
|
||||||
|
@ -114,18 +114,16 @@ function navMenu(section, persistence){
|
||||||
/* [2] Gestion de l'affichage de l'element
|
/* [2] Gestion de l'affichage de l'element
|
||||||
------------------------------------------------*/
|
------------------------------------------------*/
|
||||||
// On desactive l'element courant
|
// On desactive l'element courant
|
||||||
if( current != null )
|
current && current.remClass('active');
|
||||||
current.remClass('active');
|
|
||||||
// On active le nouveau
|
// On active le nouveau
|
||||||
if( target != null )
|
target && target.addClass('active');
|
||||||
target.addClass('active');
|
|
||||||
|
|
||||||
/* [3] Gestion de pageManager
|
/* [3] Gestion de pageManager
|
||||||
------------------------------------------------*/
|
------------------------------------------------*/
|
||||||
// Si element, on recupere le data-link
|
// Si element, on recupere le data-link
|
||||||
var page = null;
|
var page = null;
|
||||||
|
|
||||||
// SI on change de menu, on efface les données URL
|
// Si on change de menu, on efface les données URL
|
||||||
if( !persistence && current != target )
|
if( !persistence && current != target )
|
||||||
pageManager.vars = [];
|
pageManager.vars = [];
|
||||||
|
|
||||||
|
@ -134,12 +132,11 @@ function navMenu(section, persistence){
|
||||||
if( target.getData('link') ){
|
if( target.getData('link') ){
|
||||||
DOM.HEADER.addClass('loading'); // Animation de chargement
|
DOM.HEADER.addClass('loading'); // Animation de chargement
|
||||||
|
|
||||||
pageManager.setPage( target.getData('link') );
|
|
||||||
|
|
||||||
pageManager.activeXHR.addEventListener('loadend', function(){
|
//pageManager.activeXHR.addEventListener('loadend',
|
||||||
|
|
||||||
|
var handlerX = function(){
|
||||||
|
|
||||||
// On retire l'icone de chargement
|
|
||||||
DOM.HEADER.remClass('loading');
|
|
||||||
|
|
||||||
// On gere la navigation du sous-menu (si defini, utilise)
|
// On gere la navigation du sous-menu (si defini, utilise)
|
||||||
var subSectionExists = pageManager.vars.length > 0 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null;
|
var subSectionExists = pageManager.vars.length > 0 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null;
|
||||||
|
@ -160,7 +157,14 @@ function navMenu(section, persistence){
|
||||||
navSubMenu(target);
|
navSubMenu(target);
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
}, false);
|
};
|
||||||
|
|
||||||
|
/* (x) Si première ou changement de page, on charge la nouvelle */
|
||||||
|
pageManager.page != target.getData('link') && pageManager.setPage( target.getData('link') );
|
||||||
|
|
||||||
|
/* (x) Si on a `pageManager.activeXHR`, on met le handler, sinon on lance */
|
||||||
|
pageManager.activeXHR ? pageManager.activeXHR.addEventListener('loadend', handlerX, false) : handlerX.call();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}navMenu(pageManager.page);
|
}navMenu(pageManager.page);
|
||||||
|
|
|
@ -127,9 +127,8 @@ pageManagerClass.prototype = {
|
||||||
// si pageList est correct et que l'URL correspond à un schéma de page => continue [sinon] return null
|
// si pageList est correct et que l'URL correspond à un schéma de page => continue [sinon] return null
|
||||||
if( this.pagelist != null && /^(?:(?:https?:\/\/)?[^\/]+)\/([a-z0-9_]+)(?:\/|((?:\/\w+)+)\/?)?(#.*)?$/i.test(url_data) ){
|
if( this.pagelist != null && /^(?:(?:https?:\/\/)?[^\/]+)\/([a-z0-9_]+)(?:\/|((?:\/\w+)+)\/?)?(#.*)?$/i.test(url_data) ){
|
||||||
// si la page récupérée dans l'url est dans la liste => renvoi de l'objet [sinon] null
|
// si la page récupérée dans l'url est dans la liste => renvoi de l'objet [sinon] null
|
||||||
var vars = RegExp.$2.split('/');
|
|
||||||
// on supprime la première entrée vide
|
// on supprime la première entrée vide
|
||||||
vars = vars.slice(1);
|
var vars = RegExp.$2.split('/').slice(1);
|
||||||
|
|
||||||
return ( this.pagelist.indexOf(RegExp.$1) > -1 ) ? {page: RegExp.$1, var: vars} : null;
|
return ( this.pagelist.indexOf(RegExp.$1) > -1 ) ? {page: RegExp.$1, var: vars} : null;
|
||||||
}else
|
}else
|
||||||
|
@ -310,16 +309,11 @@ pageManagerClass.prototype = {
|
||||||
*/
|
*/
|
||||||
refresh: function(refresher){
|
refresh: function(refresher){
|
||||||
if( refresher instanceof Function ){
|
if( refresher instanceof Function ){
|
||||||
|
|
||||||
this.refresher = refresher;
|
this.refresher = refresher;
|
||||||
return;
|
return;
|
||||||
|
}else
|
||||||
}else{
|
|
||||||
|
|
||||||
return this.setPage(true);
|
return this.setPage(true);
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -129,7 +129,6 @@ pageManagerClass.prototype = {
|
||||||
// si la page récupérée dans l'url est dans la liste => renvoi de l'objet [sinon] null
|
// si la page récupérée dans l'url est dans la liste => renvoi de l'objet [sinon] null
|
||||||
// on supprime la première entrée vide
|
// on supprime la première entrée vide
|
||||||
var vars = RegExp.$2.split('/').slice(1);
|
var vars = RegExp.$2.split('/').slice(1);
|
||||||
console.log(vars);
|
|
||||||
|
|
||||||
return ( this.pagelist.indexOf(RegExp.$1) > -1 ) ? {page: RegExp.$1, var: vars} : null;
|
return ( this.pagelist.indexOf(RegExp.$1) > -1 ) ? {page: RegExp.$1, var: vars} : null;
|
||||||
}else
|
}else
|
||||||
|
@ -310,16 +309,11 @@ pageManagerClass.prototype = {
|
||||||
*/
|
*/
|
||||||
refresh: function(refresher){
|
refresh: function(refresher){
|
||||||
if( refresher instanceof Function ){
|
if( refresher instanceof Function ){
|
||||||
|
|
||||||
this.refresher = refresher;
|
this.refresher = refresher;
|
||||||
return;
|
return;
|
||||||
|
}else
|
||||||
}else{
|
|
||||||
|
|
||||||
return this.setPage(true);
|
return this.setPage(true);
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,203 @@
|
||||||
DOM={WRAPPER:$("WRAPPER"),HEADER:$("HEADER"),MENUSIDE:$("MENU-SIDE"),CONTAINER:$("CONTAINER")};var pageManager=new pageManagerClass;pageManager.setPage(null,"/view",DOM.CONTAINER,"history profile machines users groups analytics settings".split(" "));var api=new APIClass("/api/");
|
// TODO: Attendre que API soit chargée, sinon erreur: le CONTAINER prend comme contenu la dépendance JS
|
||||||
function navSubMenu(a){var d=document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]'),b=null,b=a instanceof Element?a:null,b="string"==typeof a?document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+a+'"]'):b,b=null==b?document.querySelector("#CONTAINER > .sub-menu-side > span[data-sublink]"):b;if(null==b)return!1;null!=d&&d.remClass("active");a=document.querySelectorAll("#CONTAINER > section[data-sublink].active");for(d=0;d<a.length;d++)a[d].remClass("active");
|
DOM = {
|
||||||
null!=b&&(b.addClass("active"),a=document.querySelector('#CONTAINER > section[data-sublink="'+b.getData("sublink")+'"]'),null!=a&&a.addClass("active"));if(!b.getData("sublink"))return!1;a=pageManager.vars[0]!=b.getData("sublink");pageManager.vars[0]=b.getData("sublink");a&&pageManager.updateURL()}
|
WRAPPER: $('WRAPPER'),
|
||||||
function navMenu(a,d){var b=document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]'),c=null,c=a instanceof Element?a:null,c="string"==typeof a?document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+a+'"]'):c,c=null==c?document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]'):c;if(null==c)return!1;d=!0===d?!0:!1;null!=b&&b.remClass("active");null!=c&&c.addClass("active");d||b==c||(pageManager.vars=[]);c.getData("link")&&
|
HEADER: $('HEADER'),
|
||||||
(DOM.HEADER.addClass("loading"),pageManager.setPage(c.getData("link")),pageManager.activeXHR.addEventListener("loadend",function(){DOM.HEADER.remClass("loading");0<pageManager.vars.length&&null!=document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]')?navSubMenu(pageManager.vars[0]):navSubMenu(null);document.querySelector("#CONTAINER > .sub-menu-side").addEventListener("click",function(a){for(a=a.target;a!=document.body&&!a.getData("sublink");)a=a.parentNode;
|
MENUSIDE: $('MENU-SIDE'),
|
||||||
a.getData("sublink")&&navSubMenu(a)},!1)},!1))}navMenu(pageManager.page);DOM.MENUSIDE.addEventListener("click",function(a){for(a=a.target;a!=document.body&&!a.getData("link");)a=a.parentNode;a.getData("link")&&navMenu(a.getData("link"))},!1);
|
CONTAINER: $('CONTAINER')
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* [0] Instanciation
|
||||||
|
===========================================*/
|
||||||
|
var pageManager = new pageManagerClass();
|
||||||
|
pageManager.setPage(null, '/view', DOM.CONTAINER, ['history', 'profile', 'machines', 'users', 'groups', 'analytics', 'settings'] );
|
||||||
|
|
||||||
|
var api = new APIClass('/api/');
|
||||||
|
|
||||||
|
|
||||||
|
/* [1] Toggle du sub-menu-side <-> navigation
|
||||||
|
===========================================*/
|
||||||
|
function navSubMenu(subsection){
|
||||||
|
/* [1] Format du param
|
||||||
|
------------------------------------------------*/
|
||||||
|
// Contient l'element courant
|
||||||
|
var current = document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]');
|
||||||
|
|
||||||
|
// Contiendra l'element cible
|
||||||
|
var target = null;
|
||||||
|
|
||||||
|
// si @subsection est un element, on le prends
|
||||||
|
target = (subsection instanceof Element) ? subsection : null;
|
||||||
|
|
||||||
|
// Si string, on trouve l'element correspondant
|
||||||
|
target = (typeof subsection == 'string') ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+subsection+'"]') : target;
|
||||||
|
|
||||||
|
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||||
|
target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : target;
|
||||||
|
|
||||||
|
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||||
|
if( target == null ) return false;
|
||||||
|
|
||||||
|
/* [2] Gestion de l'affichage de l'element
|
||||||
|
------------------------------------------------*/
|
||||||
|
// On desactive l'element courant
|
||||||
|
if( current != null )
|
||||||
|
current.remClass('active');
|
||||||
|
|
||||||
|
// On cache les sections visibles
|
||||||
|
var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
|
||||||
|
for( var i = 0 ; i < visibleSections.length ; i++ )
|
||||||
|
visibleSections[i].remClass('active');
|
||||||
|
|
||||||
|
// On active le nouveau
|
||||||
|
if( target != null ){
|
||||||
|
target.addClass('active');
|
||||||
|
|
||||||
|
// On affiche la section associee
|
||||||
|
var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
|
||||||
|
if( targetSection != null )
|
||||||
|
targetSection.addClass('active');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [3] Gestion de pageManager
|
||||||
|
------------------------------------------------*/
|
||||||
|
// Si element, on recupere le data-link
|
||||||
|
var page = null;
|
||||||
|
|
||||||
|
// Si erreur, on retourne FALSE
|
||||||
|
if( !target.getData('sublink') ) return false;
|
||||||
|
|
||||||
|
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
|
||||||
|
|
||||||
|
// On met a jour la variable page-manager si data-link trouve
|
||||||
|
pageManager.vars[0] = target.getData('sublink');
|
||||||
|
|
||||||
|
if( mustRefresh )
|
||||||
|
// navMenu(pageManager.page);
|
||||||
|
pageManager.updateURL();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [2] Toggle du side-menu <-> navigation
|
||||||
|
===========================================*/
|
||||||
|
function navMenu(section, persistence){
|
||||||
|
|
||||||
|
/* [1] Format du param
|
||||||
|
------------------------------------------------*/
|
||||||
|
// Contient l'element courant
|
||||||
|
var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');
|
||||||
|
|
||||||
|
// Contiendra l'element cible
|
||||||
|
var target = null;
|
||||||
|
|
||||||
|
// si @section est un element, on le prends
|
||||||
|
target = (section instanceof Element) ? section : null;
|
||||||
|
|
||||||
|
// Si string, on trouve l'element correspondant
|
||||||
|
target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;
|
||||||
|
|
||||||
|
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||||
|
target = target || document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]');
|
||||||
|
|
||||||
|
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||||
|
if( target == null ) return false;
|
||||||
|
|
||||||
|
// Persistence de pageManager.vars (OPTIONNEL)
|
||||||
|
persistence = (persistence===true) ? true : false;
|
||||||
|
|
||||||
|
/* [2] Gestion de l'affichage de l'element
|
||||||
|
------------------------------------------------*/
|
||||||
|
// On desactive l'element courant
|
||||||
|
current && current.remClass('active');
|
||||||
|
// On active le nouveau
|
||||||
|
target && target.addClass('active');
|
||||||
|
|
||||||
|
/* [3] Gestion de pageManager
|
||||||
|
------------------------------------------------*/
|
||||||
|
// Si element, on recupere le data-link
|
||||||
|
var page = null;
|
||||||
|
|
||||||
|
// Si on change de menu, on efface les données URL
|
||||||
|
if( !persistence && current != target )
|
||||||
|
pageManager.vars = [];
|
||||||
|
|
||||||
|
|
||||||
|
// On charge la page si data-link trouve
|
||||||
|
if( target.getData('link') ){
|
||||||
|
DOM.HEADER.addClass('loading'); // Animation de chargement
|
||||||
|
|
||||||
|
|
||||||
|
//pageManager.activeXHR.addEventListener('loadend',
|
||||||
|
|
||||||
|
var handlerX = function(){
|
||||||
|
|
||||||
|
|
||||||
|
// On gere la navigation du sous-menu (si defini, utilise)
|
||||||
|
var subSectionExists = pageManager.vars.length > 0 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null;
|
||||||
|
if( subSectionExists ) // Si le lien du menu associe existe
|
||||||
|
navSubMenu(pageManager.vars[0]); // on charge la page associee
|
||||||
|
else // sinon
|
||||||
|
navSubMenu(null); // on charge le lien par defaut
|
||||||
|
|
||||||
|
|
||||||
|
// GESTION DE LA NAVIGATION DU SOUS-MENU
|
||||||
|
document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){
|
||||||
|
var target = e.target;
|
||||||
|
|
||||||
|
while( target != document.body && !target.getData('sublink') )
|
||||||
|
target = target.parentNode;
|
||||||
|
|
||||||
|
if( target.getData('sublink') )
|
||||||
|
navSubMenu(target);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/* (x) Si première ou changement de page, on charge la nouvelle */
|
||||||
|
pageManager.page != target.getData('link') && pageManager.setPage( target.getData('link') );
|
||||||
|
|
||||||
|
/* (x) Si on a `pageManager.activeXHR`, on met le handler, sinon on lance */
|
||||||
|
pageManager.activeXHR ? pageManager.activeXHR.addEventListener('loadend', handlerX, false) : handlerX.call();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}navMenu(pageManager.page);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [4] Gestion de la navigation (physique)
|
||||||
|
===========================================*/
|
||||||
|
DOM.MENUSIDE.addEventListener('click', function(e){
|
||||||
|
var target = e.target;
|
||||||
|
|
||||||
|
// On remonte dans les parents au bon niveau
|
||||||
|
while( target != document.body && !target.getData('link') )
|
||||||
|
target = target.parentNode;
|
||||||
|
|
||||||
|
// Si on a trouve l'element, on l'utilise pour la page
|
||||||
|
if( target.getData('link') )
|
||||||
|
navMenu(target.getData('link'));
|
||||||
|
}, false);
|
||||||
|
|
|
@ -10,7 +10,8 @@
|
||||||
<meta name='desctiption' content="Système de gestion des véhicules pour STEF.">
|
<meta name='desctiption' content="Système de gestion des véhicules pour STEF.">
|
||||||
|
|
||||||
<!-- Dépendences CSS -->
|
<!-- Dépendences CSS -->
|
||||||
<link type='text/css' rel='stylesheet' href='/css/reset.css' /> <!-- Reset du css natif des browsers -->
|
<link type='text/css' rel='stylesheet' href='/css/min/fonts.css' /> <!-- Chargement des fonts -->
|
||||||
|
<link type='text/css' rel='stylesheet' href='/css/min/reset.css' /> <!-- Reset du css natif des browsers -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Dépendences Javascript -->
|
<!-- Dépendences Javascript -->
|
||||||
|
@ -21,25 +22,23 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<style type='text/css'>
|
<style type='text/css'>
|
||||||
body{
|
body{
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
background: #933024;
|
background: #933024;
|
||||||
|
}
|
||||||
font-family: "Roboto";
|
|
||||||
}
|
|
||||||
|
|
||||||
#FORM{
|
#FORM{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -65,7 +64,6 @@
|
||||||
background: #F1F2F4;
|
background: #F1F2F4;
|
||||||
|
|
||||||
color: #444;
|
color: #444;
|
||||||
font-family: "Open Sans";
|
|
||||||
|
|
||||||
box-shadow: inset -1px 1px 5px #ddd;
|
box-shadow: inset -1px 1px 5px #ddd;
|
||||||
}
|
}
|
||||||
|
|
|
@ -180,8 +180,8 @@
|
||||||
if( isset($post[1]) && preg_match('/^(u|m)(\d+)$/', $post[1], $m) ){
|
if( isset($post[1]) && preg_match('/^(u|m)(\d+)$/', $post[1], $m) ){
|
||||||
|
|
||||||
$membersChoice = new Viewer('group.membersChoice', [
|
$membersChoice = new Viewer('group.membersChoice', [
|
||||||
'id_cluster' => $m[2],
|
'id_cluster' => (int) $m[2],
|
||||||
'class' => ($m[1]=='u') ? 0 : 1
|
'class' => (int) ($m[1]=='u') ? 0 : 1
|
||||||
]);
|
]);
|
||||||
$membersChoice->view();
|
$membersChoice->view();
|
||||||
|
|
||||||
|
|
|
@ -187,7 +187,7 @@ if( section.view.element != null ){
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* GESTION DE LA CREATION D'UNE MACHINE
|
/* GESTION DE LA CREATION D'UN GROUPE
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
if( section.create.element != null ){
|
if( section.create.element != null ){
|
||||||
|
|
|
@ -10,7 +10,8 @@
|
||||||
<meta name='desctiption' content="Système de gestion des véhicules pour STEF.">
|
<meta name='desctiption' content="Système de gestion des véhicules pour STEF.">
|
||||||
|
|
||||||
<!-- Dépendences CSS -->
|
<!-- Dépendences CSS -->
|
||||||
<link type='text/css' rel='stylesheet' href='/css/min/reset.css' /> <!-- Reset du css natif des browsers -->
|
<link type='text/css' rel='stylesheet' href='/css/min/fonts.css' /> <!-- Chargement des fonts -->
|
||||||
|
<link type='text/css' rel='stylesheet' href='/css/min/reset.css' /> <!-- Reset du css natif des browsers -->
|
||||||
|
|
||||||
|
|
||||||
<!-- Dépendences Javascript -->
|
<!-- Dépendences Javascript -->
|
||||||
|
@ -38,7 +39,6 @@
|
||||||
|
|
||||||
background: #1E3C50;
|
background: #1E3C50;
|
||||||
|
|
||||||
font-family: "Roboto";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#FORM{
|
#FORM{
|
||||||
|
@ -65,7 +65,6 @@
|
||||||
background: #F1F2F4;
|
background: #F1F2F4;
|
||||||
|
|
||||||
color: #444;
|
color: #444;
|
||||||
font-family: "Open Sans";
|
|
||||||
|
|
||||||
box-shadow: inset -1px 1px 5px #ddd;
|
box-shadow: inset -1px 1px 5px #ddd;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue