sprint3 pantallas de rutas

client/core/src/datePicker/datePicker.html

@@ -1,19 +1,21 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+<div 
+	class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
+	tabindex="1"
+    ng-focus="$ctrl.hasFocus = true"
+    ng-blur="$ctrl.hasFocus = false"
+    ng-mouseenter="$ctrl.hasMouseIn = true"
+    ng-mouseleave="$ctrl.hasMouseIn = false"
+>
     <input type="text"
 		class="mdl-textfield__input"
         name="{{::$ctrl.name}}" 
         ng-model="$ctrl.modelView" 
         ng-disabled="{{!$ctrl.enabled}}"
-        rule="{{::$ctrl.rule}}"/>
+		rule="{{::$ctrl.rule}}"/>
-    <button
+		
-		type="button"
+	<div class="mdl-chip__action">
-		class="mdl-chip__action ng-hide"
+		<i class="material-icons" ng-if="$ctrl.isTimePicker" ng-click="$ctrl.vp.open()">query_builder</i>
-		tabindex="-1"
+		<i class="material-icons pointer" ng-show="$ctrl.modelView&&($ctrl.hasFocus||$ctrl.hasMouseIn)" ng-click="$ctrl.onClear()">clear</i>
-		translate-attr="{title: 'Clear'}"
+	</div>
-		ng-show="$ctrl.modelView"
+	<label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>
-		ng-click="$ctrl.onClear()"
-		> 
-        <i class="material-icons">clear</i>
-    </button>
-	<label class="mdl-textfield__label">{{::$ctrl.label | translate}}</label>
 </div>

client/core/src/datePicker/datePicker.js

@@ -28,7 +28,8 @@ class DatePicker extends Component {
         this._modelView = null;
         this._model = undefined;
         this._optionsChecked = false;
-
+        this.hasFocus = false;
+        this.hasMouseIn = false;
         componentHandler.upgradeElement($element[0].firstChild);
     }
 
@@ -168,7 +169,7 @@ class DatePicker extends Component {
 
     $onInit() {
         this.iniOptions = this._getOptions();
-
+        this.isTimePicker = (this.iniOptions && this.iniOptions.enableTime && this.iniOptions.noCalendar);
         this.vp = new Flatpickr(this.input, this.iniOptions);
     }
     $onDestroy() {

client/core/src/datePicker/datePicker.spec.js

@@ -12,12 +12,12 @@ describe('Component vnDatePicker', () => {
         angular.mock.module('client');
     });
 
-    beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$timeout_) => {
+    beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$timeout_, _$translate_) => {
         $componentController = _$componentController_;
         $scope = $rootScope.$new();
         $timeout = _$timeout_;
         $element = angular.element(`<div><input></div>`);
-        $translate = {};
+        $translate = _$translate_;
         controller = $componentController('vnDatePicker', {$scope, $element, $translate, $timeout});
     }));
 

client/core/src/datePicker/style.scss

@@ -1,6 +1,10 @@
 vn-date-picker {
+    div {
+        outline: none; //remove chrome outline
+    }
     .mdl-chip__action {
         position: absolute;
+        width: auto; 
         top: 0px; 
         right: -6px; 
         margin: 22px 0px; 
@@ -8,5 +12,7 @@ vn-date-picker {
     }
     .material-icons {
         font-size: 18px;  
+        float: right;
+        margin-right: 5px;  
     }
 }

client/route/routes.json

@@ -34,7 +34,7 @@
                 "route": "$ctrl.route"
             },
             "menu": {
-                "description": "Datos básicos",
+                "description": "Basic data",
                 "icon": "person"
             }
         },
@@ -46,7 +46,7 @@
                 "route": "$ctrl.route"
             },
             "menu": {
-                "description": "Datos logísticos",
+                "description": "Logistic data",
                 "icon": "local_shipping"
             }
         },
@@ -58,7 +58,7 @@
                 "route": "$ctrl.route"
             },
             "menu": {
-                "description": "Tickets asignados",
+                "description": "Assigned tickets",
                 "icon": "assignment"
             }
         }

client/route/src/basic-data/basic-data.html

@@ -31,4 +31,7 @@
                 </vn-horizontal>
         </vn-vertical>
     </vn-card>
+    <vn-button-bar>
+        <vn-submit label="Save"></vn-submit>
+    </vn-button-bar>
 </form>

client/route/src/card/card.html

@@ -12,7 +12,7 @@
                         <i class="material-icons descriptor-icon">local_shipping</i>
                     </vn-one>
                     <vn-vertical vn-two>
-                        <div class="margin-none"><span translate>Ruta</span> {{::$ctrl.route.id}}</div>
+                        <div class="margin-none"><span translate>Route</span> {{::$ctrl.route.id}}</div>
                         <div class="margin-none">{{$ctrl.route.date | date:'dd/MM/yyyy'}}</div>
                     </vn-vertical>
                 </vn-horizontal>    

client/route/src/locale/es.json

@@ -1,3 +1,17 @@
 {
-    "Routes" : "Rutas"
+    "Basic data": "Datos básicos",
+    "Logistic data": "Datos logísticos",
+    "Assigned tickets": "Tickets asignados",
+    "Routes" : "Rutas",
+    "Route" : "Ruta",
+    "Date": "Fecha",
+    "Agency": "Agencia",
+    "Driver": "Conductor",
+    "Vehicle": "Vehículo",
+    "Start Hour" : "Hora Inicio",
+    "End Hour": "Hora Fin",
+    "Start Km": "Km Inicio",
+    "End Km": "Km Fin",
+    "Packages": "Bultos",
+    "Route document": "Documento de Ruta"
 }

client/route/src/logistic-data/logistic-data.html

@@ -0,0 +1,28 @@
+<vn-watcher
+    vn-id="watcher"
+    data="$ctrl.route"
+    form="form"
+>
+</vn-watcher>
+<form name="form" pad-medium>
+    <vn-card>
+        <vn-vertical pad-large>
+                <vn-title>Logistic data</vn-title>
+                <vn-horizontal>
+                    <vn-date-picker vn-one label="Start Hour" model="$ctrl.route.startHour" ini-options="{enableTime: true, noCalendar: true, enableSeconds: false,  dateFormat: 'H:i'}"></vn-date-picker>
+                    <vn-date-picker vn-one label="End Hour" model="$ctrl.route.endHour" ini-options="{enableTime: true, noCalendar: true, enableSeconds: false,  dateFormat: 'H:i'}"></vn-date-picker>
+                    <vn-textfield vn-one label="Start Km" model="$ctrl.route.starKm"></vn-textfield>
+                    <vn-textfield vn-one label="End Km" model="$ctrl.route.endKm"></vn-textfield>
+                </vn-horizontal>
+                <vn-horizontal>
+                        <vn-textfield vn-one label="Packages" model="$ctrl.route.packages"></vn-textfield>
+                        <vn-textfield vn-one label="Route document" model="$ctrl.route.document"></vn-textfield>
+                        <vn-textfield vn-one label="M3" model="$ctrl.route.m3"></vn-textfield>
+                        <vn-one></vn-one>
+                </vn-horizontal>
+        </vn-vertical>
+    </vn-card>
+    <vn-button-bar>
+        <vn-submit label="Save"></vn-submit>
+    </vn-button-bar>
+</form>

client/route/src/logistic-data/logistic-data.js

@@ -0,0 +1,8 @@
+import ngModule from '../module';
+
+ngModule.component('vnRouteLogisticData', {
+    template: require('./logistic-data.html'),
+    bindings: {
+        route: '<'
+    }
+});

client/route/src/route.js

@@ -6,3 +6,5 @@ import './search-panel/search-panel';
 import './create/create';
 import './card/card';
 import './basic-data/basic-data';
+import './logistic-data/logistic-data';
+import './tickets/tickets';

client/route/src/tickets/tickets.html

@@ -0,0 +1,7 @@
+<vn-one pad-medium>
+    <vn-card>
+        <vn-vertical pad-large>
+            <vn-title>Assigned tickets</vn-title>
+        </vn-vertical>
+    </vn-card>
+</vn-one>

client/route/src/tickets/tickets.js

@@ -0,0 +1,8 @@
+import ngModule from '../module';
+
+ngModule.component('vnRouteTickets', {
+    template: require('./tickets.html'),
+    bindings: {
+        route: '<'
+    }
+});

client/salix/src/components/left-menu/menu-item.html

@@ -2,6 +2,6 @@
     <a ui-sref="{{$ctrl.item.href}}" style="display: block; text-decoration: none; color: inherit; padding: .5em 2em;">
         <i class="material-icons" style="float: right; margin-left: .4em;">keyboard_arrow_right</i>
         <i class="material-icons" style="vertical-align: middle; margin-right: .4em;">{{$ctrl.item.icon}}</i>
-        <span>{{$ctrl.item.description}}</span>
+        <span translate>{{$ctrl.item.description}}</span>
     </a>
 </li>