Fixed (partially) + font for login pages ( + ) + migrated view to Twig

This commit is contained in:
xdrm-brackets 2017-01-08 16:30:40 +01:00
parent f9f7ce9a97
commit c3acd3fac2
16 changed files with 586 additions and 249 deletions

View File

@ -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{

View File

@ -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>

229
build/viewer/view/group/group_membersChoice.php Executable file → Normal file
View File

@ -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
=========================================================*/ =========================================================*/
$loader = new \Twig_Loader_Filesystem(__BUILD__.'/viewer/view');
$twig = new \Twig_Environment($loader, []);
/* [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 */ /* (1) On exécute la requête */
$getmembersRequest = new ModuleRequest('clusterDefault/getMembers', [ $getmembersRequest = new ModuleRequest('clusterDefault/getMembers', [
'id_cluster' => $params['id_cluster'], 'id_cluster' => $id_cluster,
'class' => $params['class'] 'class' => $class
]); ]);
$getmembersResponse = $getmembersRequest->dispatch(); $getmembersResponse = $getmembersRequest->dispatch();
/* (2) Si erreur, on retourne l'erreur */ /* (2) Si erreur, on retourne rien par défaut */
if( $getmembersResponse->error != Error::Success ) if( $getmembersResponse->error != Error::Success )
return Viewer::$htmlError; return [];
/* (3) On récupère la liste des UID uniquement */ /* (3) On récupère la liste des UID uniquement */
$members_id = []; $members_ids = [];
foreach($getmembersResponse->get('members') as $member) foreach($getmembersResponse->get('members') as $member)
$members_id[] = ($params['class']==0) ? $member['id_user'] : $member['id_machine']; $members_ids[] = ($class==0) ? $member['id_user'] : $member['id_machine'];
/* [2] On récupère les utilisateurs non membres
/* [3] SI GROUPE D'UTILISATEURS -> On récupère les utilisateurs
=========================================================*/ =========================================================*/
if( $params['class'] == 0 ){ /* (1) On récupère les utilisateurs */
if( $class == 0 ){
/* (1) On récupère les utilisateurs /* (2) On exécute la requête */
---------------------------------------------------------*/ $getusersRequest = new ModuleRequest('userDefault/getAll');
/* (1) On exécute la requête */ // On recupere la reponse
$getusersRequest = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault' $getusersResponse = $getusersRequest->dispatch();
$getusersResponse = $getusersRequest->dispatch(); // On recupere la reponse
/* (2) si erreur, on affiche l'explicitation */ /* (3) si erreur, on affiche l'explicitation */
if( $getusersResponse->error != Error::Success ) if( $getusersResponse->error != Error::Success )
return Viewer::$htmlError; return [];
/* (3) On récupère la liste des utilisateurs */ /* (4) On récupère la liste des utilisateurs */
$USERLIST = $getusersResponse->get('users'); $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;
/* (2) On gère l'affichage des utilisateurs /* [3] On récupère les machines non membres
---------------------------------------------------------*/
/* (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
=========================================================*/ =========================================================*/
/* (1) On récupère les machines */
}else{ }else{
/* (1) On récupère les machines /* (2) On exécute la requête */
---------------------------------------------------------*/ $getmachinesRequest = new ModuleRequest('machineDefault/getAll');
/* (1) On exécute la requête */ // On recupere la reponse
$getmachinesRequest = new ModuleRequest('machineDefault/getAll'); // On utilise la methode 'getAll' du module 'machineDefault' $getmachinesResponse = $getmachinesRequest->dispatch();
$getmachinesResponse = $getmachinesRequest->dispatch(); // On recupere la reponse
/* (2) si erreur, on affiche l'explicitation */ /* (3) si erreur, on affiche l'explicitation */
if( $getmachinesResponse->error != Error::Success ) if( $getmachinesResponse->error != Error::Success )
return Viewer::$htmlError; return [];
/* (3) On récupère la liste des machines */ /* (4) On récupère la liste des machines */
$MACHINELIST = $getmachinesResponse->get('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);
/* (2) On gère l'affichage des machines return $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'], /* [5] Build the whole stuff
'class' => $params['class'], =========================================================*/
'name' => $currentCluster['name'], return $twig->render('group/group_membersChoice.twig', [
'clustertype' => ($params['class']==0) ? 'utilisateurs' : 'machines', 'p_class' => $variables['p_class'],
'members' => $members_view, 'p_name' => $variables['p_name'],
'header' => $header 'p_id_cluster' => $variables['p_id_cluster'],
] 'p_theme' => $variables['p_theme']
); ]);
} }
} }

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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);

View File

@ -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);
} }
}
}; };

View File

@ -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);
} }
}
}; };

View File

@ -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);

View File

@ -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 -->
@ -37,8 +38,6 @@
align-items: center; align-items: center;
background: #933024; background: #933024;
font-family: "Roboto";
} }
#FORM{ #FORM{
@ -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;
} }

View File

@ -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();

View File

@ -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 ){

View File

@ -10,6 +10,7 @@
<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/fonts.css' /> <!-- Chargement des fonts -->
<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/reset.css' /> <!-- Reset du css natif des browsers -->
@ -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;
} }