merge

2017-06-08 11:09:11 +02:00 · 2017-06-08 11:09:11 +02:00 · ee2abe79de
parent dbb1632632 491241398a
commit ee2abe79de
7 changed files with 176 additions and 21 deletions
--- a/client/core/src/components.js
+++ b/client/core/src/components.js
@ -14,6 +14,7 @@ import './title/title';
 import './subtitle/subtitle';
 import './spinner/spinner';
 import './snackbar/snackbar';
+import './tooltip/tooltip';

 export {NAME as BUTTON, directive as ButtonDirective} from './button/button';
 export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl';
--- a/client/core/src/tooltip/style.css
+++ b/client/core/src/tooltip/style.css
@ -0,0 +1,60 @@
+[vn-tooltip]{
+    cursor: help;
+}
+.tooltip {
+    display: none;
+    position: fixed;
+    background-color: #fff;
+    padding: 15px;
+    max-width: 250px;
+    color: #424242;
+    z-index: 999;
+    border: 1px solid #A7A7A7;
+    text-align: justify;
+}
+
+.tooltip-show {
+    display: inherit;
+}
+
+.tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0; 
+}
+
+.tooltip-down .tooltip-arrow {
+    top: -15px;
+    left: 50%;
+    margin-left: -10px;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 15px solid #A7A7A7;
+}
+
+.tooltip-up .tooltip-arrow {
+    bottom: -15px;
+    left: 50%;
+    margin-left: -10px;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 15px solid #A7A7A7;
+}
+
+.tooltip-right .tooltip-arrow {
+    left: -15px;
+    top: 50%;
+    margin-top: -10px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 15px solid #A7A7A7;
+}
+
+.tooltip-left .tooltip-arrow {
+    right: -15px;
+    top: 50%;
+    margin-top: -10px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 15px solid #A7A7A7;
+}
--- a/client/core/src/tooltip/tooltip.js
+++ b/client/core/src/tooltip/tooltip.js
@ -0,0 +1,74 @@
+import {module} from '../module';
+import './style.css';
+
+tooltip.$inject = ['$document', '$compile'];
+function tooltip($document, $compile) {
+    return {
+        restrict: 'A',
+        scope: true,
+        link: function(scope, element, attrs) {
+            var tip = $compile('<div class="mdl-shadow--2dp" ng-class="tipClass">{{ text }}<div class="tooltip-arrow"></div></div>')(scope);
+            var tipClassName = 'tooltip';
+            var tipActiveClassName = 'tooltip-show';
+
+            scope.tipClass = [tipClassName];
+            scope.text = attrs.vnTooltip;
+
+            if (attrs.tooltipPosition) {
+                scope.tipClass.push('tooltip-' + attrs.tooltipPosition);
+            } else {
+                scope.tipClass.push('tooltip-down');
+            }
+
+            $document.find('body').append(tip);
+
+            element.bind('mouseover', function(e) {
+                tip.addClass(tipActiveClassName);
+
+                let pos = e.target.getBoundingClientRect();
+                let tipPos = tip[0].getBoundingClientRect();
+                let offset = {top: 0, left: 0};
+                let tipWidth = tipPos.width || tipPos.right - tipPos.left;
+                let tipHeight = tipPos.height || tipPos.bottom - tipPos.top;
+                let elWidth = pos.width || pos.right - pos.left;
+                let elHeight = pos.height || pos.bottom - pos.top;
+                let tipOffset = 10;
+
+                if (tip.hasClass('tooltip-right')) {
+                    offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
+                    offset.left = pos.right + tipOffset;
+                } else if (tip.hasClass('tooltip-left')) {
+                    offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
+                    offset.left = pos.left - tipWidth - tipOffset;
+                } else if (tip.hasClass('tooltip-down')) {
+                    offset.top = pos.top + elHeight + tipOffset;
+                    offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
+                } else {
+                    offset.top = pos.top - tipHeight - tipOffset;
+                    offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
+                }
+
+                tip.css('top', offset.top + 'px');
+                tip.css('left', offset.left + 'px');
+            });
+
+            element.bind('mouseout', function() {
+                tip.removeClass(tipActiveClassName);
+            });
+
+            tip.bind('mouseover', function() {
+                tip.addClass(tipActiveClassName);
+            });
+
+            tip.bind('mouseout', function() {
+                tip.removeClass(tipActiveClassName);
+            });
+
+            element.on('$destroy', function() {
+                tip.remove();
+            });
+        }
+    };
+}
+
+module.directive('vnTooltip', tooltip);
--- a/client/production/src/index/index.html
+++ b/client/production/src/index/index.html
@ -1,5 +1,5 @@
 <vn-card margin-large>
-   <mg-ajax path="/static/mockIndexProduction.json" options="vnIndex"></mg-ajax>
+   <mg-ajax path="/static/mockIndexProduction.json" options="vnIndex" actions="$ctrl.tickets = index.model"></mg-ajax>
   <vn-vertical pad-medium>
       <vn-horizontal vn-one>
            <vn-title vn-one><span translate>Localizador</span></vn-title>           
@ -50,22 +50,37 @@
           <vn-label vn-one text="Cajas"></vn-label>
           <vn-one></vn-one>
       </vn-horizontal>
-       <vn-horizontal vn-one class="list list-body" ng-repeat="item in index.model track by item.id">
-           <vn-one></vn-one>
+       <vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by ticket.id">
           <vn-one>
-                <vn-check model="item.cheched"></vn-check>
+               <vn-icon icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
           </vn-one>
-           <vn-one>{{::item.id}}</vn-one>
-           <vn-one>{{::item.agency.id}}</vn-one>
-           <vn-one>{{::item.employee.name}}</vn-one>
-           <vn-one>{{::item.hour}}</vn-one>
-           <vn-one>{{::item.state.name}}</vn-one>
-           <vn-one>{{::item.lines}}</vn-one>
-           <vn-one>{{::item.meters}}</vn-one>
-           <vn-one>{{::item.boxes}}</vn-one>
+           <vn-one>
+                <vn-check model="ticket.cheched"></vn-check>
+           </vn-one>
+           <vn-one>{{ticket.id}}</vn-one>
+           <vn-one>{{ticket.agency.id}}</vn-one>
+           <vn-one>{{ticket.employee.name}}</vn-one>
+           <vn-one>{{ticket.hour}}</vn-one>
+           <vn-one>{{ticket.state.name}}</vn-one>
+           <vn-one>{{ticket.lines}}</vn-one>
+           <vn-one>{{ticket.meters}}</vn-one>
+           <vn-one>{{ticket.boxes}}</vn-one>
           <vn-one></vn-one>
       </vn-horizontal>
       <vn-horizontal vn-one margin-large-bottom class="list list-footer">
+           <vn-two>
+                <span translate="Resultados"></span>: 
+                <span>{{$ctrl.tickets.length}}</span>
+           </vn-two>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
+           <vn-one></vn-one>
       </vn-horizontal>
   </vn-vertical>
 </vn-card>
--- a/client/production/src/index/index.js
+++ b/client/production/src/index/index.js
@ -5,6 +5,7 @@ export default class ProductionIndex {
    constructor() {
        this.model = {};
        this.checkAll = false;
+        this.tickets = [];
    }
    search(index) {
        index.filter.search = this.model.search;
--- a/client/production/src/index/style.scss
+++ b/client/production/src/index/style.scss
@ -3,7 +3,9 @@ vn-production-index {
        height: 20px;
        padding: 0 6px;
    }
-
+    .icon-square{
+        height: 36px;
+    }
    .list-header{
        border-bottom: 3px solid #9D9D9D;
        font-weight: bold;
@ -13,14 +15,15 @@ vn-production-index {
        border-top: 3px solid #9D9D9D;
        font-weight: bold;
    }
-    .list > vn-one{
-        text-align: center;
-    }
-    .list > [vn-one]{
+    .list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
        text-align: center;
    }
    .list-body{
        padding: 4px 0px;
        border-bottom: 1px solid #9D9D9D;
+
+        i {
+            color: #ffa410;
+        }
    }
 }
--- a/gulpfile.js
+++ b/gulpfile.js
@ -57,9 +57,10 @@ gulp.task('services', ['copy'], function() {
    }
 });

+/* Nota (dani): Comentado para que no me borre el mock del Localizador
 gulp.task('clean', function() {
    return del(`${buildDir}/*`, {force: true});
-});
+}); */

 // Spliting