From 2d43d68a7a995cfb39602805896d898f3bc9ec95 Mon Sep 17 00:00:00 2001 From: Fabian Rump Date: Wed, 14 Jun 2017 13:11:13 +0200 Subject: [PATCH] Some UI improvements. Also working on consistent alerts for #1. --- src/app/components/cash-point.component.ts | 32 +++++++++++++++----- src/app/components/product-edit.component.ts | 8 ++--- src/app/components/sales-point.component.ts | 30 ++++++++++++------ src/app/templates/cash-point.html | 22 ++++++-------- src/app/templates/sales-point.html | 4 --- src/styles.scss | 9 ++---- 6 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/app/components/cash-point.component.ts b/src/app/components/cash-point.component.ts index 5201124..7ea3f58 100644 --- a/src/app/components/cash-point.component.ts +++ b/src/app/components/cash-point.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, OnDestroy } from "@angular/core"; +import { FlashMessagesService } from "angular2-flash-messages/module"; import { GlobalInput, KeyCode } from "app/utils"; import { BackendService } from "app/services"; @@ -14,10 +15,12 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy user: User; wait_identifier: boolean = false; wait_checkout: boolean = false; - alert_barcode_not_found_or_no_user: boolean = false; + deposit_custom: number; + withdraw_custom: number; constructor( - private backend_service: BackendService + private backend_service: BackendService, + private flash_messages_service: FlashMessagesService ) { super(); } @@ -32,7 +35,6 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy onLiteralInput(literal: string){ this.identifier_input += literal; - this.alert_barcode_not_found_or_no_user = false; } onSpecialKeyInput(keyCode: number): void { @@ -56,7 +58,7 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy }, error => { this.wait_identifier = false; - this.alert_barcode_not_found_or_no_user = true; + this.flash_messages_service.show('Unkown barcode.', { cssClass: 'alert-danger' }); } ); this.identifier_input = ''; @@ -64,7 +66,7 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy processItem(item: Identifiable): void { if(item instanceof Product){ - this.alert_barcode_not_found_or_no_user = true; + this.flash_messages_service.show('This is not a user barcode.', { cssClass: 'alert-danger' }); } else if(item instanceof User){ this.user = item; @@ -73,18 +75,32 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy } deposit(amount: number): void { + if(!amount) { + this.flash_messages_service.show('Please specify the transaction amount!', { cssClass: 'alert-warning' }); + return; + } this.wait_checkout = true; this.backend_service.deposit(this.user, amount).subscribe( transaction => { - this.user = null; - this.startCaptureInput(); + this.flash_messages_service.show('Transaction created!', { cssClass: 'alert-success' }); this.wait_checkout = false; + this.reset(); }, - error => console.log(error) + error => { + this.flash_messages_service.show('Failed to create the transaction!', { cssClass: 'alert-danger' }); + console.log(error); + } ); } abort(): void { + this.flash_messages_service.show('Transaction aborted.', { cssClass: 'alert-warning' }); + this.reset(); + } + + reset(): void { + this.deposit_custom = null; + this.withdraw_custom = null; this.user = null; this.startCaptureInput(); } diff --git a/src/app/components/product-edit.component.ts b/src/app/components/product-edit.component.ts index 9059286..28a9bdf 100644 --- a/src/app/components/product-edit.component.ts +++ b/src/app/components/product-edit.component.ts @@ -17,7 +17,7 @@ export class ProductEditComponent implements OnInit { constructor( private backend_service: BackendService, - private flashMessagesService: FlashMessagesService, + private flash_messages_service: FlashMessagesService, private route: ActivatedRoute, private router: Router ) { } @@ -56,7 +56,7 @@ export class ProductEditComponent implements OnInit { this.backend_service.getProduct(+product_id) .subscribe( product => this.product = product, - error => this.flashMessagesService.show('Failed to load product!', { cssClass: 'alert-danger' }) + error => this.flash_messages_service.show('Failed to load product!', { cssClass: 'alert-danger' }) ); } }); @@ -67,11 +67,11 @@ export class ProductEditComponent implements OnInit { this.backend_service.saveProduct(this.product) .subscribe( product => { - this.flashMessagesService.show('Product saved!', { cssClass: 'alert-success' }); + this.flash_messages_service.show('Product saved!', { cssClass: 'alert-success' }); this.router.navigate(['/products']); }, error => { - this.flashMessagesService.show('Failed to save product!', { cssClass: 'alert-danger' }); + this.flash_messages_service.show('Failed to save product!', { cssClass: 'alert-danger' }); this.wait_save = false; console.log(error); } diff --git a/src/app/components/sales-point.component.ts b/src/app/components/sales-point.component.ts index 0445b67..ce675e6 100644 --- a/src/app/components/sales-point.component.ts +++ b/src/app/components/sales-point.component.ts @@ -1,9 +1,11 @@ import { Component, OnInit, OnDestroy } from "@angular/core"; +import { FlashMessagesService } from "angular2-flash-messages/module"; import { Cart, User, Identifiable, Product } from "app/models"; import { GlobalInput, KeyCode } from "app/utils"; import { BackendService } from "app/services"; + @Component({ selector: 'sales-point', templateUrl: '../templates/sales-point.html', @@ -15,10 +17,10 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro user: User; wait_identifier: boolean = false; wait_checkout: boolean = false; - alert_barcode_not_found: boolean = false; constructor( - private backend_service: BackendService + private backend_service: BackendService, + private flash_messages_service: FlashMessagesService ) { super(); this.cart = new Cart(); @@ -34,7 +36,6 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro onLiteralInput(literal: string): void { this.identifier_input += literal; - this.alert_barcode_not_found = false; } onSpecialKeyInput(keyCode: number): void { @@ -54,11 +55,11 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro .subscribe( item => { this.wait_identifier = false; - this.processItem(item) + this.processItem(item); }, error => { this.wait_identifier = false; - this.alert_barcode_not_found = true; + this.flash_messages_service.show('Unkown barcode.', { cssClass: 'alert-danger' }); } ); this.identifier_input = ''; @@ -89,7 +90,10 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro updateCart(): void { this.backend_service.createOrUpdateCart(this.cart).subscribe( cart => this.cart = cart, - error => console.log(error) + error => { + console.log(error); + this.flash_messages_service.show('Cart update failed.', { cssClass: 'alert-danger' }); + } ); } @@ -98,14 +102,22 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro this.backend_service.payCart(this.cart).subscribe( transaction => { this.wait_checkout = false; - this.cart = new Cart(); - this.user = null; + this.flash_messages_service.show('Transaction created!', { cssClass: 'alert-success' }); + this.reset(); }, - error => console.log(error) + error => { + console.log(error); + this.flash_messages_service.show('Cart payment failed.', { cssClass: 'alert-danger' }); + } ); } abort(): void { + this.flash_messages_service.show('Transaction aborted.', { cssClass: 'alert-warning' }); + this.reset(); + } + + reset(): void { this.cart = new Cart(); this.user = null; } diff --git a/src/app/templates/cash-point.html b/src/app/templates/cash-point.html index 28406f5..f7ef73b 100644 --- a/src/app/templates/cash-point.html +++ b/src/app/templates/cash-point.html @@ -6,15 +6,11 @@

Cash Point

-
+
Barcode input
-
@@ -25,14 +21,14 @@

Not found!

-
+
Customer
-

{{ user.name }}

-

{{ user.balance / 100 | currency:'EUR':true:'1.2-2' }}

- +

{{ user.balance / 100 | currency:'EUR':true:'1.2-2' }}

+

{{ user.name }}

+
@@ -71,15 +67,15 @@

Pre-defined amounts

Custom amounts

- + - +
- + - +
diff --git a/src/app/templates/sales-point.html b/src/app/templates/sales-point.html index 5006e56..7897c18 100644 --- a/src/app/templates/sales-point.html +++ b/src/app/templates/sales-point.html @@ -11,10 +11,6 @@

Sales Point

Barcode input
-
diff --git a/src/styles.scss b/src/styles.scss index 86e5cd9..00cc095 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,16 +1,13 @@ /* You can add global styles to this file, and also import other style files */ -.product-card { - margin: 5px; -} - .flash-message { position: fixed; top: 25px; - right: 25px; + right: 35px; z-index: 1030; min-width: 400px; max-width: 450px; min-height: 100px; - max-height: 1500px; + max-height: 150px; + box-shadow: 5px 5px 15px gray; } \ No newline at end of file