Mauricio Cattafi / autoservicio

Browse Code »

Commit bc2b71db6fd6b04a63eb50d730d15ef0b8b6756a

Authored by Marcelo Puebla 2019-09-05 16:26:57 -0300

1 parent 569a98e9fa

Exists in master and in 1 other branch

Cambio en vista de pedidos salientes.

Showing 4 changed files with 108 additions and 15 deletions Show diff stats

src/app/components/pedidos-salientes/pedidos-salientes.component.html

Diff comments View file @ bc2b71d

1	<div class="bg-primary-gradient vh-100">	1	<div class="bg-primary-gradient vh-100">
2	<div class="d-flex justify-content-center">	2	<div class="d-flex justify-content-center">
3	<div class="row my-5 text-white text-center">	3	<div class="row m-5 text-white text-center">
4	<h1 class="col-12">Su pedido ya esta listo.</h1>
5	<h2 class="col-12 mt-3">Nº de Pedido</h2>
6		4
7	<h1 *ngIf="pedidosRecientes.length" class="col-12 border rounded">	5	<div class="col-12 p-0">
8	{{rellenar(pedidosRecientes[0].id, 2)}}	6	<p class="h1 m-0">Su pedido ya esta listo.</p>
9	</h1>	7	<p class="h2 m-0">Nº de Pedido</p>
		8	</div>
		9
		10	<div
		11	*ngIf="pedidosRecientes.length"
		12	class="col-12 p-2">
		13	<div class="border rounded shadow h-big">
		14	<div class="font-weight-bold heartbeat m-0 h-100">
		15	{{rellenar(pedidosRecientes[0].id, 2)}}
		16	</div>
		17	</div>
		18	</div>
		19
		20	<div
		21	*ngFor="let pedido of pedidosRecientes; let i = index"
		22	[hidden]="i == 0 \|\| i > 8"
		23	class="col-3 p-2">
		24	<p class="font-weight-bold display-1 m-0 py-1 border rounded shadow">
		25	{{rellenar(pedido.id, 2)}}
		26	</p>
		27	</div>
10		28
11	<h2 *ngFor="let pedido of pedidosRecientes; let i = index" [hidden]="i == 0" class="col-4 border rounded mx-0">
12	{{rellenar(pedido.id, 2)}}

src/app/components/pedidos-salientes/pedidos-salientes.component.scss

Diff comments View file @ bc2b71d

		1	.h-big {
		2	font-size: 24vh;
		3	height: 35vh;
		4	}
		5

src/app/components/pedidos-salientes/pedidos-salientes.component.ts

Diff comments View file @ bc2b71d

 import { Component, OnInit } from '@angular/core';
 import { ComandaService } from 'src/app/services/comanda.service';
 @Component({
   selector: 'app-pedidos-salientes',
   templateUrl: './pedidos-salientes.component.html',
   styleUrls: ['./pedidos-salientes.component.scss']
 })
 export class PedidosSalientesComponent implements OnInit {
   private pedidosRecientes = [];
   private ciclo;
   constructor(private comandaService: ComandaService) { }
   ngOnInit() {
     this.buscar();
     this.ciclo = setTimeout(() => {
       this.buscar();
     }, 5000)
   }
   ngOnDestroy() {
     clearTimeout(this.ciclo);
   }
   buscar() {
-    this.comandaService
+    this.comandaService.getPendientesEntrega()
-    .getPendientesEntrega()
+      .subscribe((pedidos: []) => {
-    .subscribe((pedidos: []) => {
-      this.pedidosRecientes = pedidos;
+        this.pedidosRecientes = pedidos;
-    }, console.log);
+      }, console.log);
   }
   rellenar(relleno, longitud) {
     relleno = '' + relleno;
     while (relleno.length < longitud) {
-        relleno = '0' + relleno;
+      relleno = '0' + relleno;
     }
     return relleno;
   }
 }

src/assets/scss/animation.scss

Diff comments View file @ bc2b71d

 .fade-in {
   -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
   animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
 }
 @-webkit-keyframes fadein {
   0% {
     -webkit-transform: translateZ(80px);
     transform: translateZ(80px);
     opacity: 0;
   }
   100% {
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     opacity: 1;
   }
 }
 @keyframes fadein {
   0% {
     -webkit-transform: translateZ(80px);
     transform: translateZ(80px);
     opacity: 0;
   }
   100% {
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     opacity: 1;
   }
 }
 .fade-right {
   animation: faderight 1s;
   -moz-animation: faderight 1s; /* Firefox */
   -webkit-animation: faderight 1s; /* Safari and Chrome */
   -o-animation: faderight 1s; /* Opera */
 }
 @keyframes faderight {
   from {
     opacity: 0;
     transform: translateX(-20px);
   }
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }
 @-moz-keyframes faderight {
   /* Firefox */
   from {
     opacity: 0;
     -moz-transform: translateX(-20px);
   }
   to {
     opacity: 1;
     -moz-transform: translateX(0);
   }
 }
 @-webkit-keyframes faderight {
   /* Safari and Chrome */
   from {
     opacity: 0;
     -webkit-transform: translateX(-20px);
   }
   to {
     opacity: 1;
     -webkit-transform: translateX(0);
   }
 }
 .fade-left {
   -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
   animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 @-webkit-keyframes fadeleft {
   0% {
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
     opacity: 1;
   }
   100% {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
     opacity: 1;
   }
 }
 @keyframes fadeleft {
   0% {
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
     opacity: 1;
   }
   100% {
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
     opacity: 1;
   }
 }
 .fade-bottom {
   -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
   animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
 }
 @-webkit-keyframes fade-bottom {
   0% {
     -webkit-transform: scaleY(0.4);
     transform: scaleY(0.4);
     -webkit-transform-origin: 100% 0%;
     transform-origin: 100% 0%;
   }
   100% {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     -webkit-transform-origin: 100% 0%;
     transform-origin: 100% 0%;
   }
 }
 @keyframes fade-bottom {
   0% {
     -webkit-transform: scaleY(0.4);
     transform: scaleY(0.4);
     -webkit-transform-origin: 100% 0%;
     transform-origin: 100% 0%;
   }
   100% {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     -webkit-transform-origin: 100% 0%;
     transform-origin: 100% 0%;
   }
 }
 .slide-in-bl {
   -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
   animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 @-webkit-keyframes slide-in-bl {
   0% {
     -webkit-transform: translateY(1000px) translateX(-1000px);
     transform: translateY(1000px) translateX(-1000px);
     opacity: 0;
   }
   100% {
     -webkit-transform: translateY(0) translateX(0);
     transform: translateY(0) translateX(0);
     opacity: 1;
   }
 }
 @keyframes slide-in-bl {
   0% {
     -webkit-transform: translateY(1000px) translateX(-1000px);
     transform: translateY(1000px) translateX(-1000px);
     opacity: 0;
   }
   100% {
     -webkit-transform: translateY(0) translateX(0);
     transform: translateY(0) translateX(0);
     opacity: 1;
   }
 }
+.heartbeat {
+  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+@-webkit-keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}