logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

- [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:
xdrm-brackets 2016-02-14 22:50:07 +01:00
parent fadd20144e
commit 8d80b93d22
11 changed files with 228 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/container.css
View File

@ -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 */ /*# sourceMappingURL=container.css.map */

99
css/container.scss
View File

@ -61,7 +61,34 @@
} }
/* (2) Code RFID */ /* (2) Code RFID */
.code{ .code,
.mail{
display: inline-block;
color: #333;
// svg (icone)
svg{
display: inline-block;
position: relative;
margin-left: .8em;
margin-right: .5em;
margin-bottom: -.6em;
width: 1.5em;
height: 2em;
pointer-events: none;
path{
fill: #333 !important;
pointer-events: none;
}
}
}
/* (3) Adresse mail */
.mail{
display: inline-block; display: inline-block;
color: #333; color: #333;
@ -75,31 +102,12 @@
width: 1.5em; width: 1.5em;
height: 2em; height: 2em;
path{ pointer-events: none;
fill: #333 !important;
}
}
}
/* (3) Adresse mail */
.mail{
display: block;
margin: 1em;
color: #333;
// svg (icone)
svg{
display: inline-block;
position: relative;
margin-left: .5em;
margin-right: .5em;
margin-bottom: -.6em;
width: 1.5em;
height: 2em;
path{ path{
fill: #333 !important; fill: #333 !important;
pointer-events: none;
} }
} }
@ -122,8 +130,12 @@
width: 1.5em; width: 1.5em;
height: 2em; height: 2em;
pointer-events: none;
path{ path{
fill: #333 !important; fill: #333 !important;
pointer-events: none;
} }
} }
@ -144,6 +156,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;
}
}
}
} }

2
css/menu-side.css
View File

@ -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 */ /*# sourceMappingURL=menu-side.css.map */

2
css/menu-side.scss
View File

@ -40,6 +40,8 @@
fill: #777 !important; fill: #777 !important;
transition: fill .3s; transition: fill .3s;
pointer-events: none;
} }

6
js/action-script.js
View File

@ -1,7 +1,7 @@
DOM = { DOM = {
WRAPPER: $('WRAPPER'), WRAPPER: $('WRAPPER'),
HEADER: $('HEADER'), HEADER: $('HEADER'),
MENUSIDE: $('MENU-SIDE'), MENUSIDE: $('MENU-SIDE'),
CONTAINER: $('CONTAINER') CONTAINER: $('CONTAINER')
}; };

11
js/lib/reset.js
View File

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

@ -22,6 +22,12 @@
######## ########
# FAIT # # 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 de machine
- [x] Creation d'utilisateur - [x] Creation d'utilisateur
- [x] Developpement de l'api cote client - [x] Developpement de l'api cote client

46
view/js/machines.js
View File

@ -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 /* GESTION DE LA CREATION D'UNE MACHINE
* *

42
view/js/users.js
View File

@ -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 /* GESTION DE LA CREATION D'UN UTILISATEUR
* *

10
view/machines.php
View File

@ -93,6 +93,16 @@
foreach($clusters as $cluster) foreach($clusters as $cluster)
echo "<span>".$cluster['name']."</span>"; echo "<span>".$cluster['name']."</span>";
echo"</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>"; echo "</article>";

30
view/users.php
View File

@ -103,7 +103,15 @@
echo "<span>".$cluster['name']."</span>"; echo "<span>".$cluster['name']."</span>";
echo"</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>"; echo "</article>";
} }
@ -139,4 +147,26 @@
echo "<button id='create_submit'>Créer</button>"; echo "<button id='create_submit'>Créer</button>";
echo "</form>"; 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>'; echo '</section>';