merge

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';

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;
+}

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

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-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by ticket.id">
-           <vn-one></vn-one>
            <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>
-           <vn-one>{{::item.agency.id}}</vn-one>
+                <vn-check model="ticket.cheched"></vn-check>
-           <vn-one>{{::item.employee.name}}</vn-one>
+           </vn-one>
-           <vn-one>{{::item.hour}}</vn-one>
+           <vn-one>{{ticket.id}}</vn-one>
-           <vn-one>{{::item.state.name}}</vn-one>
+           <vn-one>{{ticket.agency.id}}</vn-one>
-           <vn-one>{{::item.lines}}</vn-one>
+           <vn-one>{{ticket.employee.name}}</vn-one>
-           <vn-one>{{::item.meters}}</vn-one>
+           <vn-one>{{ticket.hour}}</vn-one>
-           <vn-one>{{::item.boxes}}</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>

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;

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{
+    .list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
-        text-align: center;
-    }
-    .list > [vn-one]{
         text-align: center;
     }
     .list-body{
         padding: 4px 0px;
         border-bottom: 1px solid #9D9D9D;
+
+        i {
+            color: #ffa410;
+        }
     }
 }

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