Adding own implementation for flashed messages. Also adding product C…

…SV import. It still needs some polishing, but should work fine.

src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>'
+    template: '<flash-messages></flash-messages><router-outlet></router-outlet>'
 })
 export class AppComponent {
   version = "1.0"

src/app/app.module.ts

@@ -9,30 +9,34 @@ import { BackendServiceProvider } from "app/providers";
 import { 
   ProductListComponent,
   ProductEditComponent,
+  ProductImportComponent,
   UserListComponent,
   UserEditComponent,
   UserImportComponent,
   SalesPointComponent,
   CashPointComponent,
   SelfServicePointComponent,
   NavbarComponent,
+  FlashMessageComponent,
   HomeComponent
 } from "app/components";
-import { ConfigService } from "app/services";
+import { ConfigService, FlashMessageService } from "app/services";
 
 
 @NgModule({
   declarations: [
     AppComponent,
     ProductEditComponent,
     ProductListComponent,
+    ProductImportComponent,
     UserEditComponent,
     UserListComponent,
     UserImportComponent,
     SalesPointComponent,
     CashPointComponent,
     SelfServicePointComponent,
     NavbarComponent,
+    FlashMessageComponent,
     HomeComponent
   ],
   imports: [
@@ -48,6 +52,10 @@ import { ConfigService } from "app/services";
         path: 'product/new',
         component: ProductEditComponent
       },
+      {
+        path: 'product/import',
+        component: ProductImportComponent
+      },
       {
         path: 'product/:id',
         component: ProductEditComponent
@@ -86,7 +94,7 @@ import { ConfigService } from "app/services";
       }
     ])
   ],
-  providers: [BackendServiceProvider, ConfigService],
+  providers: [BackendServiceProvider, ConfigService, FlashMessageService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/cash-point.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
 
 import { GlobalInput, KeyCode } from "app/utils";
-import { BackendService } from "app/services";
+import { BackendService, FlashMessageService } from "app/services";
 import { User, Identifiable, Product } from "app/models";
 
 @Component({
@@ -18,7 +18,8 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy
     withdraw_custom: number;
 
     constructor(
-        private backend_service: BackendService
+        private backend_service: BackendService,
+        private flash_message_service: FlashMessageService
     ) {
         super();
     }
@@ -56,15 +57,15 @@ export class CashPointComponent extends GlobalInput implements OnInit, OnDestroy
                 },
                 error => {
                     this.wait_identifier = false;
-                    //this.flash_messages_service.show('Unkown barcode.', { cssClass: 'alert-danger' });
+                    this.flash_message_service.flash('Unkown barcode.', 'alert-danger');
                 }
             );
         this.identifier_input = '';
     }
 
     processItem(item: Identifiable): void {
         if(item instanceof Product){
-            //this.flash_messages_service.show('This is not a user barcode.', { cssClass: 'alert-danger' });
+            this.flash_message_service.flash('This is not a user barcode.', 'alert-danger');
         }
         else if(item instanceof User){
             this.user = item;
@@ -74,25 +75,25 @@ 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' });
+            this.flash_message_service.flash('Please specify the transaction amount!', 'alert-warning');
             return;
         }
         this.wait_checkout = true;
         this.backend_service.deposit(this.user, amount).subscribe(
             transaction => {
-                //this.flash_messages_service.show('Transaction created!', { cssClass: 'alert-success' });
+                this.flash_message_service.flash('Transaction created!', 'alert-success');
                 this.wait_checkout = false;
                 this.reset();
             },
             error => {
-                //this.flash_messages_service.show('Failed to create the transaction!', { cssClass: 'alert-danger' });
+                this.flash_message_service.flash('Failed to create the transaction!', 'alert-danger');
                 console.log(error);
             }
         );
     }
 
     abort(): void {
-        //this.flash_messages_service.show('Transaction aborted.', { cssClass: 'alert-warning' });
+        this.flash_message_service.flash('Transaction aborted.', 'alert-warning');
         this.reset();
     }
 

src/app/components/flash-message.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { FlashMessage, FlashMessageService } from "app/services"
+
+@Component({
+    selector: 'flash-messages',
+    templateUrl: '../templates/flash-messages.html',
+    providers: []
+})
+export class FlashMessageComponent implements OnInit{
+    flashMessages: FlashMessage[];
+
+    constructor(private flashMessageService: FlashMessageService) {}
+
+    ngOnInit() {
+        this.flashMessages = this.flashMessageService.getFlashMessages();
+    }
+}

src/app/components/index.ts

@@ -1,8 +1,10 @@
 export { CashPointComponent } from "./cash-point.component";
+export { FlashMessageComponent } from "./flash-message.component";
 export { HomeComponent } from "./home.component"
 export { NavbarComponent } from "./navbar.component";
 export { ProductListComponent } from "./product-list.component";
 export { ProductEditComponent } from "./product-edit.component";
+export { ProductImportComponent } from "./product-import.component";
 export { SalesPointComponent } from "./sales-point.component";
 export { SelfServicePointComponent } from "./self-service-point.component"
 export { UserListComponent } from "./user-list.component";

src/app/components/product-edit.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { Product, Identifier, Pricing, Tag } from "app/models";
-import { BackendService } from "app/services";
+import { BackendService, FlashMessageService } from "app/services";
 
 @Component({
     selector: 'product-edit',
@@ -16,6 +16,7 @@ export class ProductEditComponent implements OnInit {
 
     constructor(
         private backend_service: BackendService,
+        private flash_message_service: FlashMessageService,
         private route: ActivatedRoute,
         private router: Router
     ) { }
@@ -54,7 +55,7 @@ export class ProductEditComponent implements OnInit {
                 this.backend_service.getProduct(+product_id)
                 .subscribe(
                     product => this.product = product,
-                    error => console.log(error) //this.flash_messages_service.show('Failed to load product!', { cssClass: 'alert-danger' })
+                    error => this.flash_message_service.flash('Failed to load product!', 'alert-danger')
                 );
             }
         });
@@ -65,11 +66,11 @@ export class ProductEditComponent implements OnInit {
         this.backend_service.saveProduct(this.product)
         .subscribe(
             product => {
-                //this.flash_messages_service.show('Product saved!', { cssClass: 'alert-success' });
+                this.flash_message_service.flash('Product saved!', 'alert-success');
                 this.router.navigate(['/products']);
             },
             error => {
-                //this.flash_messages_service.show('Failed to save product!', { cssClass: 'alert-danger' });
+                this.flash_message_service.flash('Failed to save product!', 'alert-danger');
                 this.wait_save = false;
                 console.log(error);
             }

src/app/components/product-import.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit } from "@angular/core";
+import { Product, Tag, Identifier, Pricing } from "app/models";
+import { BackendService } from "app/services/backend.service";
+import { Parser } from "csv-parse";
+
+@Component({
+    selector: 'product-import',
+    templateUrl: '../templates/product-import.html',
+    providers: []
+})
+export class ProductImportComponent implements OnInit{
+
+    fileReader: FileReader;
+    fileParser: Parser;
+    importableProducts: Product[];
+    importProgress: number;
+
+    constructor(
+        private backendService: BackendService
+    ) { }
+
+    ngOnInit() {
+        this.fileReader = new FileReader();
+        this.fileReader.onloadend = () => { this.onFileRead() };
+
+        this.fileParser = new Parser({delimiter: ","});
+        this.fileParser.on("readable", () => { this.onFileReadable() });
+
+        this.importableProducts = [];
+
+        this.importProgress = 0;
+    }
+
+    fileEventListener(event: any) {
+        this.fileReader.readAsText(event.target.files[0]);
+    }
+
+    onFileRead(){
+        this.fileParser.write(this.fileReader.result);
+    }
+
+    onFileReadable(){
+        let record:String[];
+        while(record = this.fileParser.read()){
+            let product: Product = new Product(
+                null,
+                <string> record[0],
+                Tag.getTagArrayFromStringArray(record[2].split(" ")),
+                [new Identifier(<string> record[3])],
+                [new Pricing(null, Number(record[1]), 999999)]
+            );
+            this.importableProducts.push(product);
+        }
+    }
+
+    confirmImport(){
+        let importCount = 0;
+        for(let item of this.importableProducts){
+            this.backendService.saveProduct(item)
+            .subscribe(
+                product => {
+                    (item as any).import_success = true;
+                    importCount++;
+                    this.importProgress = importCount / this.importableProducts.length * 100;
+                },
+                error => {
+                    (item as any).import_fail = true;
+                    console.log(error);
+                    importCount++;
+                    this.importProgress = importCount / this.importableProducts.length * 100;
+                }
+            );
+        }
+    }
+
+    abortImport(){
+        this.importableProducts = [];
+    }
+}

src/app/components/sales-point.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from "@angular/core";
 
 import { Cart, User, Identifiable, Product } from "app/models";
 import { GlobalInput, KeyCode } from "app/utils";
-import { BackendService } from "app/services";
+import { BackendService, FlashMessageService } from "app/services";
 
 
 @Component({
@@ -19,6 +19,7 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro
 
     constructor(
         private backend_service: BackendService,
+        private flash_message_service: FlashMessageService
     ) {
         super();
         this.cart = new Cart();
@@ -57,7 +58,7 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro
                 },
                 error => {
                     this.wait_identifier = false;
-                    //this.flash_messages_service.show('Unkown barcode.', { cssClass: 'alert-danger' });
+                    this.flash_message_service.flash('Unkown barcode.', 'alert-danger');
                 }
             );
         this.identifier_input = '';
@@ -90,7 +91,7 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro
             cart => this.cart = cart,
             error => {
                 console.log(error);
-                //this.flash_messages_service.show('Cart update failed.', { cssClass: 'alert-danger' });
+                this.flash_message_service.flash('Cart update failed.', 'alert-danger');
             }
         );
     }
@@ -100,12 +101,12 @@ export class SalesPointComponent extends GlobalInput implements OnInit, OnDestro
         this.backend_service.payCart(this.cart).subscribe(
             transaction => {
                 this.wait_checkout = false;
-                //this.flash_messages_service.show('Transaction created!', { cssClass: 'alert-success' });
+                this.flash_message_service.flash('Transaction created!', 'alert-success');
                 this.reset();
             },
             error => {
                 console.log(error);
-                //this.flash_messages_service.show('Cart payment failed.', { cssClass: 'alert-danger' });
+                this.flash_message_service.flash('Cart payment failed.', 'alert-danger');
             }
         );
     }