- [x] [view/users][container.css] Liens vers la modification/suppression depuis visu utilisateur
- [x] [view/users] Lien physque - [x] [view/js/users] Lien dynamique (evt) - [x] [view/machines][container.css] Liens vers la modification/suppression depuis visu machine - [x] [view/machines] Lien physque - [x] [view/js/machines] Lien dynamique (evt)
This commit is contained in:
parent
fadd20144e
commit
8d80b93d22
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password]{display:inline-block;margin:1em 0;padding:.3em .5em;border-radius:0;border:none;border-bottom:1px solid transparent;color:#000}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus{border-color:#e63321}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #e63321;background-color:#fff;color:#e63321;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover{background-color:#e63321;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.valid:hover{background-color:#2193e6;color:#fff}
|
||||
#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.8em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:absolute;top:0;left:calc( 100% - 1.2em - 2*1em );width:1.2em;height:1.2em;margin:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .2s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#3c89e8 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove{top:calc( 100% - 1.2em - 2*1em )}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d44f18 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password]{display:inline-block;margin:1em 0;padding:.3em .5em;border-radius:0;border:none;border-bottom:1px solid transparent;color:#000}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus{border-color:#e63321}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #e63321;background-color:#fff;color:#e63321;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover{background-color:#e63321;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.valid:hover{background-color:#2193e6;color:#fff}
|
||||
/*# sourceMappingURL=container.css.map */
|
||||
|
|
|
@ -61,7 +61,8 @@
|
|||
}
|
||||
|
||||
/* (2) Code RFID */
|
||||
.code{
|
||||
.code,
|
||||
.mail{
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
|
||||
|
@ -69,14 +70,18 @@
|
|||
svg{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-left: .5em;
|
||||
margin-left: .8em;
|
||||
margin-right: .5em;
|
||||
margin-bottom: -.6em;
|
||||
width: 1.5em;
|
||||
height: 2em;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
path{
|
||||
fill: #333 !important;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -84,8 +89,7 @@
|
|||
|
||||
/* (3) Adresse mail */
|
||||
.mail{
|
||||
display: block;
|
||||
margin: 1em;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
|
||||
// svg (icone)
|
||||
|
@ -98,8 +102,12 @@
|
|||
width: 1.5em;
|
||||
height: 2em;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
path{
|
||||
fill: #333 !important;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -122,8 +130,12 @@
|
|||
width: 1.5em;
|
||||
height: 2em;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
path{
|
||||
fill: #333 !important;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -145,6 +157,47 @@
|
|||
|
||||
}
|
||||
|
||||
/* (5) Lien vers la modification */
|
||||
.link_edit,
|
||||
.link_remove{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc( 100% - 1.2em - 2*1em );
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
margin: 1em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
& > svg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: #ddd !important;
|
||||
|
||||
transition: fill .2s ease-in-out;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
& > svg{
|
||||
fill: #3c89e8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* (6) Lien vers la suppression */
|
||||
.link_remove{
|
||||
top: calc( 100% - 1.2em - 2*1em );
|
||||
|
||||
&:hover{
|
||||
& > svg{
|
||||
fill: #d44f18 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* [3] Formulaires
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important}
|
||||
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s;pointer-events:none}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important}
|
||||
/*# sourceMappingURL=menu-side.css.map */
|
||||
|
|
|
@ -40,6 +40,8 @@
|
|||
fill: #777 !important;
|
||||
|
||||
transition: fill .3s;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -80,6 +80,17 @@ Element.prototype.remClass = function(className){
|
|||
};
|
||||
|
||||
|
||||
// on définit le "indexOf" pour <HTMLCollection> et <NodeList>
|
||||
NodeList.prototype.indexOf = HTMLCollection.prototype.indexOf = function(searchedElement){
|
||||
for( var i = 0 ; i < this.length ; i++ ) // on parcours la collection
|
||||
// si on trouve l'élement, on retourne son rang
|
||||
if( this[i] == searchedElement ) return i;
|
||||
|
||||
// si on a rien trouvé, on retourne -1
|
||||
return -1;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
6
todo.md
6
todo.md
|
@ -22,6 +22,12 @@
|
|||
########
|
||||
# FAIT #
|
||||
########
|
||||
- [x] [view/users][container.css] Liens vers la modification/suppression depuis visu utilisateur
|
||||
- [x] [view/users] Lien physque
|
||||
- [x] [view/js/users] Lien dynamique (evt)
|
||||
- [x] [view/machines][container.css] Liens vers la modification/suppression depuis visu machine
|
||||
- [x] [view/machines] Lien physque
|
||||
- [x] [view/js/machines] Lien dynamique (evt)
|
||||
- [x] Creation de machine
|
||||
- [x] Creation d'utilisateur
|
||||
- [x] Developpement de l'api cote client
|
||||
|
|
|
@ -13,6 +13,52 @@ var section = {
|
|||
};
|
||||
|
||||
|
||||
/* GESTION DE L'AFFICHAGE DES MACHINES
|
||||
*
|
||||
*/
|
||||
if( section.view.element != null ){
|
||||
|
||||
// On recupere tous les liens
|
||||
section.view.link = {
|
||||
edit: document.querySelectorAll(section.view.text + '.link_edit[data-machine]'),
|
||||
remove: document.querySelectorAll(section.view.text + '.link_remove[data-machine]')
|
||||
};
|
||||
|
||||
// On gere la "redirection" vers la modification
|
||||
for( var i = 0 ; i < section.view.link.edit.length ; i++ ){
|
||||
|
||||
section.view.link.edit[i].addEventListener('click', function(e){
|
||||
pageManager.vars[1] = e.target.getData('machine');
|
||||
navSubMenu('edit');
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
// On gere la "redirection" vers la suppression
|
||||
for( var i = 0 ; i < section.view.link.remove.length ; i++ ){
|
||||
|
||||
section.view.link.remove[i].addEventListener('click', function(e){
|
||||
pageManager.vars[1] = e.target.getData('machine');
|
||||
navSubMenu('remove');
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* GESTION DE LA CREATION D'UNE MACHINE
|
||||
*
|
||||
|
|
|
@ -13,6 +13,48 @@ var section = {
|
|||
};
|
||||
|
||||
|
||||
/* GESTION DE L'AFFICHAGE DES UTILISATEURS
|
||||
*
|
||||
*/
|
||||
if( section.view.element != null ){
|
||||
|
||||
// On recupere tous les liens
|
||||
section.view.link = {
|
||||
edit: document.querySelectorAll(section.view.text + '.link_edit[data-user]'),
|
||||
remove: document.querySelectorAll(section.view.text + '.link_remove[data-user]')
|
||||
};
|
||||
|
||||
// On gere la "redirection" vers la modification
|
||||
for( var i = 0 ; i < section.view.link.edit.length ; i++ ){
|
||||
|
||||
section.view.link.edit[i].addEventListener('click', function(e){
|
||||
pageManager.vars[1] = e.target.getData('user');
|
||||
navSubMenu('edit');
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
// On gere la "redirection" vers la suppression
|
||||
for( var i = 0 ; i < section.view.link.remove.length ; i++ ){
|
||||
|
||||
section.view.link.remove[i].addEventListener('click', function(e){
|
||||
pageManager.vars[1] = e.target.getData('user');
|
||||
navSubMenu('remove');
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* GESTION DE LA CREATION D'UN UTILISATEUR
|
||||
*
|
||||
|
|
|
@ -94,6 +94,16 @@
|
|||
echo "<span>".$cluster['name']."</span>";
|
||||
echo"</span>";
|
||||
|
||||
// Icone vers la modification
|
||||
echo "<span class='link_edit' data-machine='".$machine['id_machine']."'>";
|
||||
echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
|
||||
echo "</span>";
|
||||
|
||||
// Icone vers la suppression
|
||||
echo "<span class='link_remove' data-machine='".$machine['id_machine']."'>";
|
||||
echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
|
||||
echo "</span>";
|
||||
|
||||
|
||||
echo "</article>";
|
||||
}
|
||||
|
|
|
@ -103,7 +103,15 @@
|
|||
echo "<span>".$cluster['name']."</span>";
|
||||
echo"</span>";
|
||||
|
||||
// Icone vers la modification
|
||||
echo "<span class='link_edit' data-user='".$user['id_user']."'>";
|
||||
echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side');
|
||||
echo "</span>";
|
||||
|
||||
// Icone vers la suppression
|
||||
echo "<span class='link_remove' data-user='".$user['id_user']."'>";
|
||||
echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side');
|
||||
echo "</span>";
|
||||
|
||||
echo "</article>";
|
||||
}
|
||||
|
@ -140,3 +148,25 @@
|
|||
echo "</form>";
|
||||
|
||||
echo '</section>';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [3] Suppression d'utilisateur
|
||||
=========================================================*/
|
||||
echo "<section data-sublink='remove'>";
|
||||
|
||||
echo "<form>";
|
||||
echo "<input id='remove_code' type='text' placeholder='Code'><br>";
|
||||
echo "<button id='remove_submit'>Supprimer</button>";
|
||||
echo "</form>";
|
||||
|
||||
echo '</section>';
|
Loading…
Reference in New Issue