Luigi / foca-logistica-pedido-ruta

Download as
Browse Code »

Commit 51c4e039ec70fdcc17cf73f2681f6f49f3ff8152

Authored by Eric Fernandez
1 parent 23492b452e
Exists in master

espacios

Showing 1 changed file with 2 additions and 2 deletions   Show diff stats
src/views/foca-logistica-pedido-ruta.html
Diff comments   View file @ 51c4e03
1 <script> 1 <script>
2 function allowDrop(ev) { 2 function allowDrop(ev) {
3 ev.preventDefault(); 3 ev.preventDefault();
4 } 4 }
5 function drag(ev, marcador) { 5 function drag(ev, marcador) {
6 marcador = JSON.stringify(marcador); 6 marcador = JSON.stringify(marcador);
7 ev.dataTransfer.setData("marcador", marcador); 7 ev.dataTransfer.setData("marcador", marcador);
8 var dom_el = document.getElementById('test'); 8 var dom_el = document.getElementById('test');
9 var scope = angular.element(dom_el).scope(); 9 var scope = angular.element(dom_el).scope();
10 scope.arrastra(); 10 scope.arrastra();
11 } 11 }
12 function drop(ev) { 12 function drop(ev) {
13 ev.preventDefault(); 13 ev.preventDefault();
14 var data = ev.dataTransfer.getData("marcador"); 14 var data = ev.dataTransfer.getData("marcador");
15 var dom_el = document.getElementById(ev.target.id); 15 var dom_el = document.getElementById(ev.target.id);
16 var ng_el = angular.element(dom_el); 16 var ng_el = angular.element(dom_el);
17 var ng_el_scope = ng_el.scope(); 17 var ng_el_scope = ng_el.scope();
18 ng_el_scope.cargar(ev.target.id, data); 18 ng_el_scope.cargar(ev.target.id, data);
19 ng_el_scope.$digest(); 19 ng_el_scope.$digest();
20 } 20 }
21 function dropEnd() { 21 function dropEnd() {
22 console.log('drop'); 22 console.log('drop');
23 var dom_el = document.getElementById('test'); 23 var dom_el = document.getElementById('test');
24 var scope = angular.element(dom_el).scope(); 24 var scope = angular.element(dom_el).scope();
25 scope.noArrastra(); 25 scope.noArrastra();
26 } 26 }
27 </script> 27 </script>
28 <div class="foca-logistica-pedido-ruta" id="test"> 28 <div class="foca-logistica-pedido-ruta" id="test">
29 <div class="row"> 29 <div class="row">
30 <div class="offset-1 col-9"> 30 <div class="offset-1 col-9">
31 <foca 31 <foca
32 latitud="-32.89214159952345" 32 latitud="-32.89214159952345"
33 longitud="-68.84572999101856" 33 longitud="-68.84572999101856"
34 zoom="14" 34 zoom="14"
35 marcadores="marcadores" 35 marcadores="marcadores"
36 parametros= "datosBuscados" 36 parametros= "datosBuscados"
37 /> 37 />
38 </div> 38 </div>
39 <div class="col-2 pl-0"> 39 <div class="col-2 pl-0">
40 <input 40 <input
41 type="date" 41 type="date"
42 ng-model="now" 42 ng-model="now"
43 class="btn col-12 my-1" 43 class="btn col-12 my-1"
44 foca-focus="true" 44 foca-focus="true"
45 ng-blur="fecha()" 45 ng-blur="fecha()"
46 hasta-hoy 46 hasta-hoy
47 /> 47 />
48 <button 48 <button
49 type="button" 49 type="button"
50 ng-class="{'active': idUsuario == 0}" 50 ng-class="{'active': idUsuario == 0}"
51 class="btn col-12 my-1" 51 class="btn col-12 my-1"
52 ng-click="general()" 52 ng-click="general()"
53 >General</button> 53 >General</button>
54 <button 54 <button
55 type="button" 55 type="button"
56 ng-class="{'active': idUsuario != 0}" 56 ng-class="{'active': idUsuario != 0}"
57 class="btn col-12 my-1" 57 class="btn col-12 my-1"
58 ng-click="individual()" 58 ng-click="individual()"
59 ng-show="actividad != 'Cobranza'" 59 ng-show="actividad != 'Cobranza'"
60 >Individual</button> 60 >Individual</button>
61 <div class="form-group" ng-show="idUsuario == -1"> 61 <div class="form-group" ng-show="idUsuario == -1">
62 <input 62 <input
63 type="text" 63 type="text"
64 placeholder="Vendedor" 64 placeholder="Vendedor"
65 class="form-control" 65 class="form-control"
66 ng-model="idUsuarioInput" 66 ng-model="idUsuarioInput"
67 ng-keypress="search($event.keyCode)" 67 ng-keypress="search($event.keyCode)"
68 foca-focus="idUsuario == -1" 68 foca-focus="idUsuario == -1"
69 ng-show="actividad == 'Nota de pedido'" 69 ng-show="actividad == 'Nota de pedido'"
70 > 70 >
71 <input 71 <input
72 type="text" 72 type="text"
73 placeholder="Vehiculo" 73 placeholder="Vehiculo"
74 class="form-control" 74 class="form-control"
75 ng-model="idUsuarioInput" 75 ng-model="idUsuarioInput"
76 ng-keypress="search($event.keyCode)" 76 ng-keypress="search($event.keyCode)"
77 foca-focus="idUsuario == -1" 77 foca-focus="idUsuario == -1"
78 ng-show="actividad == 'Entrega de producto'" 78 ng-show="actividad == 'Entrega de producto'"
79 > 79 >
80 </div> 80 </div>
81 <button 81 <button
82 type="button" 82 type="button"
83 class="btn col-12 my-1 boton-salir" 83 class="btn col-12 my-1 boton-salir"
84 ng-click="salir()" 84 ng-click="salir()"
85 > 85 >
86 Salir 86 Salir
87 </button> 87 </button>
88 </div> 88 </div>
89 <input 89 <input
90 class="col-auto form-control" 90 class="col-auto form-control"
91 ng-click="seleccionarVehiculo()" 91 ng-click="seleccionarVehiculo()"
92 placeholder="Seleccionar vehiculo" 92 placeholder="Seleccionar vehiculo"
93 readonly 93 readonly
94 /> 94 />
95 <div class="row"> 95 <div class="row">
96 <div 96 <div
97 class="container col-auto" 97 class="container col-auto"
98 ng-repeat="vehiculo in vehiculos" 98 ng-repeat="vehiculo in vehiculos"
99 ng-click="mostrarDetalleVehiculo(vehiculo)" 99 ng-click="mostrarDetalleVehiculo(vehiculo)"
100 > 100 >
101 <div> 101 <div>
102 <div class="col-md-3 col-sm-6"> 102 <div class="col-md-3 col-sm-6">
103 <div class="progress-circle blue" ng-class="{'arrastrando': arrastrando}"> 103 <div class="progress-circle blue" ng-class="{'arrastrando': arrastrando}">
104 <span class="progress-left"> 104 <span class="progress-left">
105 <span class="progress-bar"></span> 105 <span class="progress-bar"></span>
106 </span> 106 </span>
107 <span class="progress-right"> 107 <span class="progress-right">
108 <span class="progress-bar"></span> 108 <span class="progress-bar"></span>
109 </span> 109 </span>
110 <div class="progress-value">{{vehiculo.codigo}}</div> 110 <div class="progress-value">{{vehiculo.codigo}}</div>
111 </div> 111 </div>
112 </div> 112 </div>
113 <div 113 <div
114 class="col-12 border border-dark text-center" 114 class="col-12 border border-dark text-center"
115 ng-show="arrastrando" 115 ng-show="arrastrando"
116 id="{{vehiculo.id}}" 116 id="{{vehiculo.id}}"
117 ondrop="drop(event)" 117 ondrop="drop(event)"
118 ondragover="allowDrop(event)" 118 ondragover="allowDrop(event)"
119 >Soltar acá</div> 119 >Soltar acá</div>
120 </div> 120 </div>
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 <style> 125 <style>
126 .arrastrando { 126 .arrastrando {
127 opacity: 0.5; 127 opacity: 0.5;
128 } 128 }
129 .vertical { 129 .vertical {
130 display: inline-block; 130 display: inline-block;
131 width: 20%; 131 width: 20%;
132 height: 40px; 132 height: 40px;
133 -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ 133 -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
134 transform: rotate(-90deg); 134 transform: rotate(-90deg);
135 } 135 }
136 .progress-circle{ 136 .progress-circle{
137 width: 150px; 137 width: 150px;
138 height: 150px; 138 height: 150px;
139 line-height: 150px; 139 line-height: 150px;
140 background: none; 140 background: none;
141 margin: 0 auto; 141 margin: 0 auto;
142 box-shadow: none; 142 box-shadow: none;
143 position: relative; 143 position: relative;
144 } 144 }
145 .progress-circle:after{ 145 .progress-circle:after{
146 content: ""; 146 content: "";
147 width: 100%; 147 width: 100%;
148 height: 100%; 148 height: 100%;
149 border-radius: 50%; 149 border-radius: 50%;
150 border: 12px solid #fff; 150 border: 12px solid #fff;
151 position: absolute; 151 position: absolute;
152 top: 0; 152 top: 0;
153 left: 0; 153 left: 0;
154 } 154 }
155 .progress-circle > span{ 155 .progress-circle > span{
156 width: 50%; 156 width: 50%;
157 height: 100%; 157 height: 100%;
158 overflow: hidden; 158 overflow: hidden;
159 position: absolute; 159 position: absolute;
160 top: 0; 160 top: 0;
161 z-index: 1; 161 z-index: 1;
162 } 162 }
163 .progress-circle .progress-left{ 163 .progress-circle .progress-left{
164 left: 0; 164 left: 0;
165 } 165 }
166 .progress-circle .progress-bar{ 166 .progress-circle .progress-bar{
167 width: 100%; 167 width: 100%;
168 height: 100%; 168 height: 100%;
169 background: none; 169 background: none;
170 border-width: 12px; 170 border-width: 12px;
171 border-style: solid; 171 border-style: solid;
172 position: absolute; 172 position: absolute;
173 top: 0; 173 top: 0;
174 } 174 }
175 .progress-circle .progress-left .progress-bar{ 175 .progress-circle .progress-left .progress-bar{
176 left: 100%; 176 left: 100%;
177 border-top-right-radius: 80px; 177 border-top-right-radius: 80px;
178 border-bottom-right-radius: 80px; 178 border-bottom-right-radius: 80px;
179 border-left: 0; 179 border-left: 0;
180 -webkit-transform-origin: center left; 180 -webkit-transform-origin: center left;
181 transform-origin: center left; 181 transform-origin: center left;
182 } 182 }
183 .progress-circle .progress-right{ 183 .progress-circle .progress-right{
184 right: 0; 184 right: 0;
185 } 185 }
186 .progress-circle .progress-right .progress-bar{ 186 .progress-circle .progress-right .progress-bar{
187 left: -100%; 187 left: -100%;
188 border-top-left-radius: 80px; 188 border-top-left-radius: 80px;
189 border-bottom-left-radius: 80px; 189 border-bottom-left-radius: 80px;
190 border-right: 0; 190 border-right: 0;
191 -webkit-transform-origin: center right; 191 -webkit-transform-origin: center right;
192 transform-origin: center right; 192 transform-origin: center right;
193 animation: loading-1 1.8s linear forwards; 193 animation: loading-1 1.8s linear forwards;
194 } 194 }
195 .progress-circle .progress-value{ 195 .progress-circle .progress-value{
196 width: 90%; 196 width: 90%;
197 height: 90%; 197 height: 90%;
198 border-radius: 50%; 198 border-radius: 50%;
199 background: #44484b; 199 background: #44484b;
200 font-size: 24px; 200 font-size: 24px;
201 color: #fff; 201 color: #fff;
202 line-height: 135px; 202 line-height: 135px;
203 text-align: center; 203 text-align: center;
204 position: absolute; 204 position: absolute;
205 top: 5%; 205 top: 5%;
206 left: 5%; 206 left: 5%;
207 } 207 }
208 .progress-circle.blue .progress-bar{ 208 .progress-circle.blue .progress-bar{
209 border-color: #049dff; 209 border-color: #049dff;
210 } 210 }
211 .progress-circle.blue .progress-left .progress-bar{ 211 .progress-circle.blue .progress-left .progress-bar{
212 animation: loading-2 1.5s linear forwards 1.8s; 212 animation: loading-2 1.5s linear forwards 1.8s;
213 } 213 }
214 .progress-circle.yellow .progress-bar{ 214 .progress-circle.yellow .progress-bar{
215 border-color: #fdba04; 215 border-color: #fdba04;
216 } 216 }
217 .progress-circle.yellow .progress-left .progress-bar{ 217 .progress-circle.yellow .progress-left .progress-bar{
218 animation: loading-3 1s linear forwards 1.8s; 218 animation: loading-3 1s linear forwards 1.8s;
219 } 219 }
220 .progress-circle.pink .progress-bar{ 220 .progress-circle.pink .progress-bar{
221 border-color: #ed687c; 221 border-color: #ed687c;
222 } 222 }
223 .progress-circle.pink .progress-left .progress-bar{ 223 .progress-circle.pink .progress-left .progress-bar{
224 animation: loading-4 0.4s linear forwards 1.8s; 224 animation: loading-4 0.4s linear forwards 1.8s;
225 } 225 }
226 .progress-circle.green .progress-bar{ 226 .progress-circle.green .progress-bar{
227 border-color: #1abc9c; 227 border-color: #1abc9c;
228 } 228 }
229 .progress-circle.green .progress-left .progress-bar{ 229 .progress-circle.green .progress-left .progress-bar{
230 animation: loading-5 1.2s linear forwards 1.8s; 230 animation: loading-5 1.2s linear forwards 1.8s;
231 } 231 }
232 @keyframes loading-1{ 232 @keyframes loading-1{
233 0%{ 233 0%{
234 -webkit-transform: rotate(0deg); 234 -webkit-transform: rotate(0deg);
235 transform: rotate(0deg); 235 transform: rotate(0deg);
236 } 236 }
237 100%{ 237 100%{
238 -webkit-transform: rotate(180deg); 238 -webkit-transform: rotate(180deg);
239 transform: rotate(180deg); 239 transform: rotate(180deg);
240 } 240 }
241 } 241 }
242 @keyframes loading-2{ 242 @keyframes loading-2{
243 0%{ 243 0%{
244 -webkit-transform: rotate(0deg); 244 -webkit-transform: rotate(0deg);
245 transform: rotate(0deg); 245 transform: rotate(0deg);
246 } 246 }
247 100%{ 247 100%{
248 -webkit-transform: rotate(144deg); 248 -webkit-transform: rotate(144deg);
249 transform: rotate(144deg); 249 transform: rotate(144deg);
250 } 250 }
251 } 251 }
252 @keyframes loading-3{ 252 @keyframes loading-3{
253 0%{ 253 0%{
254 -webkit-transform: rotate(0deg); 254 -webkit-transform: rotate(0deg);
255 transform: rotate(0deg); 255 transform: rotate(0deg);
256 } 256 }
257 100%{ 257 100%{
258 -webkit-transform: rotate(90deg); 258 -webkit-transform: rotate(90deg);
259 transform: rotate(90deg); 259 transform: rotate(90deg);
260 } 260 }
261 } 261 }
262 @keyframes loading-4{ 262 @keyframes loading-4{
263 0%{ 263 0%{
264 -webkit-transform: rotate(0deg); 264 -webkit-transform: rotate(0deg);
265 transform: rotate(0deg); 265 transform: rotate(0deg);
266 } 266 }
267 100%{ 267 100%{
268 -webkit-transform: rotate(36deg); 268 -webkit-transform: rotate(36deg);
269 transform: rotate(36deg); 269 transform: rotate(36deg);
270 } 270 }
271 } 271 }
272 @keyframes loading-5{ 272 @keyframes loading-5{
273 0%{ 273 0%{
274 -webkit-transform: rotate(0deg); 274 -webkit-transform: rotate(0deg);
275 transform: rotate(0deg); 275 transform: rotate(0deg);
276 } 276 }
277 100%{ 277 100%{
278 -webkit-transform: rotate(126deg); 278 -webkit-transform: rotate(126deg);
279 transform: rotate(126deg); 279 transform: rotate(126deg);
280 } 280 }
281 } 281 }
282 @media only screen and (max-width: 990px){ 282 @media only screen and (max-width: 990px){
283 .progress{ margin-bottom: 20px; } 283 .progress{ margin-bottom: 20px; }
284 } 284 }
285 285
286 </style> 286 </style>
287 287