From 8d80b93d225a322b75f089542a8966f2bc878c71 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 14 Feb 2016 22:50:07 +0100 Subject: [PATCH] - [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) --- css/container.css | 2 +- css/container.scss | 99 ++++++++++++++++++++++++++++++++++----------- css/menu-side.css | 2 +- css/menu-side.scss | 2 + js/action-script.js | 6 +-- js/lib/reset.js | 11 +++++ todo.md | 6 +++ view/js/machines.js | 46 +++++++++++++++++++++ view/js/users.js | 42 +++++++++++++++++++ view/machines.php | 10 +++++ view/users.php | 30 ++++++++++++++ 11 files changed, 228 insertions(+), 28 deletions(-) diff --git a/css/container.css b/css/container.css index 7e8dc8c..36c330c 100755 --- a/css/container.css +++ b/css/container.css @@ -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 */ diff --git a/css/container.scss b/css/container.scss index 918aa8d..416cd1b 100755 --- a/css/container.scss +++ b/css/container.scss @@ -61,7 +61,34 @@ } /* (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; color: #333; @@ -75,31 +102,12 @@ width: 1.5em; height: 2em; - path{ - 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; + 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; } } @@ -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; + } + } + } } diff --git a/css/menu-side.css b/css/menu-side.css index 6f7528c..dd1b621 100755 --- a/css/menu-side.css +++ b/css/menu-side.css @@ -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 */ diff --git a/css/menu-side.scss b/css/menu-side.scss index 8a4dfda..4385b03 100755 --- a/css/menu-side.scss +++ b/css/menu-side.scss @@ -40,6 +40,8 @@ fill: #777 !important; transition: fill .3s; + + pointer-events: none; } diff --git a/js/action-script.js b/js/action-script.js index 8e99c7c..eec9865 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -1,7 +1,7 @@ DOM = { - WRAPPER: $('WRAPPER'), - HEADER: $('HEADER'), - MENUSIDE: $('MENU-SIDE'), + WRAPPER: $('WRAPPER'), + HEADER: $('HEADER'), + MENUSIDE: $('MENU-SIDE'), CONTAINER: $('CONTAINER') }; diff --git a/js/lib/reset.js b/js/lib/reset.js index 5c65fbf..a57d8cb 100755 --- a/js/lib/reset.js +++ b/js/lib/reset.js @@ -80,6 +80,17 @@ Element.prototype.remClass = function(className){ }; +// on définit le "indexOf" pour et +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; +}; + + diff --git a/todo.md b/todo.md index 47d37ea..0d90ad7 100755 --- a/todo.md +++ b/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 diff --git a/view/js/machines.js b/view/js/machines.js index df72169..804ec79 100644 --- a/view/js/machines.js +++ b/view/js/machines.js @@ -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 * diff --git a/view/js/users.js b/view/js/users.js index ef2b5cb..94ab9e7 100644 --- a/view/js/users.js +++ b/view/js/users.js @@ -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 * diff --git a/view/machines.php b/view/machines.php index c3181a1..e3b2b5a 100755 --- a/view/machines.php +++ b/view/machines.php @@ -93,6 +93,16 @@ foreach($clusters as $cluster) echo "".$cluster['name'].""; echo""; + + // Icone vers la modification + echo ""; + echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side'); + echo ""; + + // Icone vers la suppression + echo ""; + echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side'); + echo ""; echo ""; diff --git a/view/users.php b/view/users.php index 118ce43..6a1df58 100755 --- a/view/users.php +++ b/view/users.php @@ -103,7 +103,15 @@ echo "".$cluster['name'].""; echo""; + // Icone vers la modification + echo ""; + echo ResourceDispatcher::getResource('f/svg/edit/st/sub-menu-side'); + echo ""; + // Icone vers la suppression + echo ""; + echo ResourceDispatcher::getResource('f/svg/remove/st/sub-menu-side'); + echo ""; echo ""; } @@ -139,4 +147,26 @@ echo ""; echo ""; + echo ''; + + + + + + + + + + + + + /* [3] Suppression d'utilisateur + =========================================================*/ + echo "
"; + + echo "
"; + echo "
"; + echo ""; + echo "
"; + echo '
'; \ No newline at end of file