Some UI improvements. Also working on consistent alerts for #1.

kif-ev · Jun 14, 2017 · 2d43d68 · 2d43d68
1 parent 0682814
commit 2d43d68
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 44 deletions.
diff --git 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,15 +58,15 @@ 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 = '';
     }
 
     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
@@ -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
@@ -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
@@ -6,15 +6,11 @@ <h1 class="mt-2">Cash Point</h1>
     <div class="row">
         <div class="col-lg-4">
 
-            <div class="card">
+            <div class="card" *ngIf="!user">
                 <div class="card-header">
                     Barcode input
                 </div>
                 <div class="card-block">
-                    <div *ngIf="alert_barcode_not_found_or_no_user" class="alert alert-danger" role="alert">
-                        <h4 class="alert-heading">Not found!</h4>
-                        <p class="mb-0">The barcode you have entered was not found in the system or is not associated to a user account.</p>
-                    </div>
                     <div class="input-group input-group-lg">
                         <span class="input-group-addon text-primary"><i class="fa fa-barcode" aria-hidden="true"></i></span>
                         <input type="text" class="form-control form-control-lg" [value]="identifier_input" placeholder="Type identifier or use barcode scanner ..." readonly>
@@ -25,14 +21,14 @@ <h4 class="alert-heading">Not found!</h4>
                 </div>
             </div>
 
-            <div class="card mt-2">
+            <div class="card mt-2" *ngIf="user">
                 <div class="card-header">
                     Customer
                 </div>
                 <div class="card-block">
-                    <h2 *ngIf="user" class="card-title"><i *ngIf="wait_checkout" class="fa fa-spinner fa-spin fa-fw"></i> {{ user.name }}</h2>
-                    <h4 *ngIf="user" class="card-subtitle mb-4 text-muted">{{ user.balance / 100 | currency:'EUR':true:'1.2-2' }}</h4>
-                    <button class="btn btn-warning btn-lg btn-block" (click)="abort()" [disabled]="!user">Abort</button>
+                    <h2 class="card-title"><i *ngIf="wait_checkout" class="fa fa-spinner fa-spin fa-fw"></i> {{ user.balance / 100 | currency:'EUR':true:'1.2-2' }}</h2>
+                    <h4 class="card-subtitle mb-4 text-muted">{{ user.name }}</h4>
+                    <button class="btn btn-warning btn-lg btn-block" (click)="abort()">Abort</button>
 
                 </div>
             </div>
@@ -71,15 +67,15 @@ <h4 class="card-subtitle mt-4">Pre-defined amounts</h4>
                     </div>
                     <h4 class="card-subtitle mt-4">Custom amounts</h4>
                     <div class="input-group mt-2">
-                        <input type="text" class="form-control" placeholder="Enter deposit amount">
+                        <input type="number" min="0" step="0.01" class="form-control" placeholder="Enter deposit amount" [(ngModel)]="deposit_custom">
                         <span class="input-group-btn w-25">
-                            <button class="btn btn-secondary" type="button">Deposit funds</button>
+                            <button class="btn btn-secondary" type="button" (click)="deposit(deposit_custom * 100)">Deposit funds</button>
                         </span>
                     </div>
                     <div class="input-group mt-2">
-                        <input type="text" class="form-control" placeholder="Enter withdraw amount">
+                        <input type="number" min="0" step="0.01" class="form-control" placeholder="Enter withdraw amount" [(ngModel)]="withdraw_custom">
                         <span class="input-group-btn w-25">
-                            <button class="btn btn-secondary" type="button">Withdraw funds</button>
+                            <button class="btn btn-secondary" type="button" (click)="deposit(-withdraw_custom * 100)">Withdraw funds</button>
                         </span>
                     </div>
                 </div>

diff --git a/src/app/templates/sales-point.html b/src/app/templates/sales-point.html
@@ -11,10 +11,6 @@ <h1 class="mt-2">Sales Point</h1>
                     Barcode input
                 </div>
                 <div class="card-block">
-                    <div *ngIf="alert_barcode_not_found" class="alert alert-danger" role="alert">
-                        <h4 class="alert-heading">Not found!</h4>
-                        <p class="mb-0">The barcode you have entered was not found in the system.</p>
-                    </div>
                     <div class="input-group input-group-lg">
                         <span class="input-group-addon text-primary"><i class="fa fa-barcode" aria-hidden="true"></i></span>
                         <input type="text" class="form-control form-control-lg" [value]="identifier_input" placeholder="Type identifier or use barcode scanner ..." readonly>

diff --git 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;
   }