Merged in feature/HIMA-16-scanning-componenet (pull request #44)

Feature/HIMA-16 scanning componenet

src/app/modules/barcode-search/barcode-search.component.html

@@ -6,4 +6,8 @@
   <app-barcode-scanner-scandit
     (scan)="triggerSearch($event)"
   ></app-barcode-scanner-scandit>
+
+  <div class="recc">
+    <app-recommendations></app-recommendations>
+  </div>
 </div>

src/app/modules/barcode-search/barcode-search.component.scss

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   align-items: center;
-  padding: 36px;
+  padding: 36px 0;
   flex-direction: column;
   background-color: rgba(255, 255, 255, 1);
   border-radius: 5px;
@@ -32,3 +32,11 @@ app-barcode-scanner-scandit {
   height: 300px;
   border: #e1ebf5 2px solid;
 }
+
+.recc {
+  width: 100%;
+  height: 160px;
+  margin-top: 60px;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px -2px 6px 0px rgba(220, 226, 233, 0.8);
+}

src/app/modules/barcode-search/barcode-search.component.ts

@@ -1,12 +1,16 @@
 import {
   AllowProductLoad,
   AddSearch,
-  ChangeCurrentRoute
+  ChangeCurrentRoute,
+  AddProcess
 } from '../../core/store/actions/process.actions';
 import { Component, OnInit } from '@angular/core';
 import { Search } from 'src/app/core/models/search.model';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
+import { Process } from 'src/app/core/models/process.model';
+import { getRandomPic } from 'src/app/core/utils/process.util';
+import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
 
 @Component({
   selector: 'app-barcode-search',
@@ -19,10 +23,11 @@ export class BarcodeSearchComponent implements OnInit {
   ngOnInit() {}
 
   triggerSearch(barcode) {
+    this.createProcess();
     const search = <Search>{
       query: barcode,
-      fitlers: null,
-      take: 5,
+      fitlers: [],
+      take: 10,
       skip: 0,
       firstLoad: true
     };
@@ -31,4 +36,22 @@ export class BarcodeSearchComponent implements OnInit {
     this.store.dispatch(new ChangeCurrentRoute('/search-results#start'));
     this.router.navigate(['/search-results#start']);
   }
+
+  createProcess() {
+    const newProcess = <Process>{
+      id: 1,
+      name: '# 1',
+      selected: true,
+      icon: getRandomPic(),
+      breadcrumbs: <Breadcrumb[]>[
+        {
+          name: 'Artikelsuche',
+          path: '/article-search'
+        }
+      ],
+      currentRoute: 'article-search'
+    };
+
+    this.store.dispatch(new AddProcess(newProcess));
+  }
 }

src/app/modules/barcode-search/barcode-search.module.ts

@@ -1,21 +1,27 @@
+import { SharedModule } from 'src/app/shared/shared.module';
 import { ScanditSdkModule } from 'scandit-sdk-angular';
 
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, ErrorHandler } from '@angular/core';
 import { ZXingScannerModule } from '@zxing/ngx-scanner';
 
 import { BarcodeSearchComponent } from './barcode-search.component';
 import { BarcodeScannerScanditComponent } from './components/barcode-scanner-scandit/barcode-scanner-scandit.component';
 import { BarcodeScannerComponent } from './components/barcode-scanner/barcode-scanner.component';
+import { CameraErrorHandler } from './camera-error.handler';
+import { RecommendationsdModule } from '../recommendations/recommendations.module';
 
 const licenseKey =
   'AejsFV7HQtsqNMrEAkQOTw02rYwJABlExVErc8Um/r+YWl/psUmXqQl5jJnrb21ZUxLaSzhxHIL8ev2+fXCre2dWtbCuKMyjvUUeeyw0UsBFbV4flF81uBZvmKTcVocCSUQAN6cgp1AbD0t5ZPe4LqiqKOs4rax8RPMStG+e+wIMlV82PlVfVGREjaYNm7qjNhXYL4zTaBUm4VHkY4Nqk+faGN6Q2Q9Ear9LVY/LQeEGd0udZdWyvpA3eCKnFz5dBPgFrhOiLOUWIgmyJECJJy8DlkdaAjk63jLekef9O7338XCNoZtwyBPVSSGjLXPtY3ppmUGUz7LI4CJg36rK/Gu3lE4NoWjkoSOb2Npn7mJCF6DZQKM9wr49FpPZ5f1A1LmKw0bvRjF52Ks0i4u3we9YUgFH0D38ljO/DEhXUZ0nFSyRBlJBkLhE9+DFNpxcqBol3AMkiuQsnfwer4PrM4+DjE86urQE86D/ZWtLIA4WwHMJEBSWgmeSi+0y/y7p6fM+ghbuyzslgII1xRF7EoMSZYDCf0yLvIY5LboD6GUZNiw6VXphJBE9hF7PjKmb0wg3riXHkG0G0UZS+NVLxMUA7O6vKhQQJq+BGrISdjJPcH6YkPXC4xURzBaeuJYICcgkEaP6c5+GOyWPUvfAQAl0o3wqCioN+mGLFug2+yiq0NU/VAeH7DspkWNK54T4ssZenDT8OdBRMw5P9KuKFd1WVWs7JrPwP9sHZoFAcu7MbMgBNQduh0mxzOr0KaCoiQRUt1EPYNL/sMjOEtIyk8KIi1HDk82G3ysvD+djMz8qugR8ZBJPQFgBXQ==';
 const engineLocation = 'assets/vendor/scandit/';
+
 @NgModule({
   imports: [
     ZXingScannerModule,
     CommonModule,
-    ScanditSdkModule.forRoot(licenseKey, engineLocation)
+    ScanditSdkModule.forRoot(licenseKey, engineLocation),
+    SharedModule,
+    RecommendationsdModule
   ],
   exports: [BarcodeSearchComponent],
   declarations: [
@@ -23,6 +29,9 @@ const engineLocation = 'assets/vendor/scandit/';
     BarcodeScannerComponent,
     BarcodeScannerScanditComponent
   ],
-  providers: []
+  providers: [
+    CameraErrorHandler,
+    { provide: ErrorHandler, useExisting: CameraErrorHandler }
+  ]
 })
 export class BarcodeSearchModule {}

src/app/modules/barcode-search/camera-error.handler.ts

@@ -0,0 +1,22 @@
+import { BehaviorSubject } from 'rxjs';
+import { ErrorHandler, Injectable } from '@angular/core';
+
+@Injectable()
+export class CameraErrorHandler extends ErrorHandler {
+  public notAllowed = new BehaviorSubject<boolean>(false);
+  constructor() {
+    super();
+  }
+  handleError(error: any) {
+    try {
+      if (
+        error.message != null &&
+        error.message.indexOf('NotAllowedError') !== -1
+      ) {
+        this.notAllowed.next(true);
+      } else {
+        super.handleError(error);
+      }
+    } catch (e) {}
+  }
+}

src/app/modules/barcode-search/components/barcode-scanner-scandit/barcode-scanner-scandit.component.html

@@ -1,9 +1,11 @@
+<div class="w-100 loading" *ngIf="!ready">
+  <app-loading loading="true" text="Scanvorgang wird ausgeführt"></app-loading>
+</div>
 <div class="w-100" *ngIf="enabled">
   <scandit-sdk-barcode-picker
     #scanner
     [scanSettings]="settings"
     (scan)="scanSuccess($event)"
-    (error)="scanErrorHandler($event)"
     [guiStyle]="'none'"
     [videoFit]="'cover'"
     (ready)="isReady(scanner)"
@@ -11,22 +13,19 @@
   ></scandit-sdk-barcode-picker>
 </div>
 
-<div class="scanner-controls" *ngIf="!enabled">
-  <div class="result">
-    <span (click)="scanToggle()" class="action" *ngIf="ready">
-      <i class="icon-placeholder"></i>
-      <span>Scan</span>
-    </span>
-    <span (click)="search()" *ngIf="code" class="action">
-      <i class="icon-placeholder"></i>
-      <span>Suchen</span>
-    </span>
-  </div>
+<div class="w-100 loading" *ngIf="!enabled">
+  <app-loading loading="true" text="Suchen"></app-loading>
   <div class="scan-result">
     <span>{{ code }}</span>
   </div>
 </div>
 
-<div class="w-100" *ngIf="error">
-  camera not detected
+<div class="scanner-controls errors" *ngIf="errorOther || errorAccess">
+  <div class="error" *ngIf="errorOther">
+    Scanvorgang leider nicht möglich, da keine Kamera vorhanden
+  </div>
+
+  <div class="error" *ngIf="errorAccess">
+    Kamerazugriff blockiert, daher leider kein Scanvorgang möglich
+  </div>
 </div>

src/app/modules/barcode-search/components/barcode-scanner-scandit/barcode-scanner-scandit.component.scss

@@ -5,11 +5,14 @@
   display: flex;
   position: relative;
 }
-
+.loading {
+  margin-top: 120px;
+}
 .scanner-controls {
   width: 100%;
   height: 100%;
   position: absolute;
+  background: white;
   top: 0;
   left: 0;
 }
@@ -50,3 +53,16 @@
   display: block;
   padding: $buttonSize;
 }
+
+.errors {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.error {
+  width: 70%;
+  color: #f70300;
+  font-weight: 600;
+  text-align: center;
+}

src/app/modules/barcode-search/components/barcode-scanner-scandit/barcode-scanner-scandit.component.ts

@@ -3,20 +3,27 @@ import {
   OnInit,
   ViewChild,
   EventEmitter,
-  Output
+  Output,
+  AfterViewInit
 } from '@angular/core';
 import { BarcodeFormat, Result } from '@zxing/library';
 import { ZXingScannerComponent } from '@zxing/ngx-scanner';
-import { ScanSettings, Barcode } from 'scandit-sdk';
+import { ScanSettings, Barcode, BarcodePicker } from 'scandit-sdk';
+import {
+  ScanditSdkBarcodePickerComponent,
+  ScanditSdkService
+} from 'scandit-sdk-angular';
+import { CameraErrorHandler } from '../../camera-error.handler';
 
 @Component({
   selector: 'app-barcode-scanner-scandit',
   templateUrl: 'barcode-scanner-scandit.component.html',
   styleUrls: ['barcode-scanner-scandit.component.scss']
 })
-export class BarcodeScannerScanditComponent implements OnInit {
+export class BarcodeScannerScanditComponent implements AfterViewInit {
   public enabled = true;
-  public error = false;
+  public errorAccess = false;
+  public errorOther = false;
   public code = '';
   public ready = false;
   @Output() scan = new EventEmitter();
@@ -25,9 +32,23 @@ export class BarcodeScannerScanditComponent implements OnInit {
     enabledSymbologies: [Barcode.Symbology.CODE128, Barcode.Symbology.EAN13]
   });
 
-  constructor() {}
+  @ViewChild('scanner') scanner: ScanditSdkBarcodePickerComponent;
+  log = 'tst';
+  constructor(private cameraError: CameraErrorHandler) {}
 
-  ngOnInit() {}
+  ngAfterViewInit() {
+    this.cameraError.notAllowed.subscribe(v => (this.errorAccess = v));
+    this.scanner.error.subscribe(
+      success => {
+        this.scanErrorHandler(success);
+        this.log = JSON.stringify(success);
+      },
+      error => {
+        this.scanErrorHandler(error);
+        this.log = JSON.stringify(error);
+      }
+    );
+  }
 
   scanSuccess(result) {
     if (result.barcodes.length > 0) {
@@ -47,6 +68,14 @@ export class BarcodeScannerScanditComponent implements OnInit {
 
   isReady(scanner) {
     this.ready = true;
+    const picker = (this.scanner['scanditSdkService'] as ScanditSdkService)
+      .picker as any;
+    this.errorOther = !picker.scanner.isReadyToWork;
+    picker.cameraManager.cameraSwitcherEnabled = false;
+    picker.cameraManager.triggerFatalError = e => {
+      console.error(e);
+      this.errorOther = true;
+    };
 
     // Remove Scandit logo
     const element = scanner.pickerContainer.nativeElement as Element;
@@ -57,6 +86,6 @@ export class BarcodeScannerScanditComponent implements OnInit {
 
   scanErrorHandler($event) {
     console.error($event);
-    this.error = true;
+    this.errorAccess = true;
   }
 }

src/app/modules/recommendations/recommendations.component.html

@@ -0,0 +1,16 @@
+<div class="container">
+  <div class="header" (click)="nextStage()">
+    <img class="icon" src="/assets/images/Empfehlungen_Icon_blue.svg" />
+    <span>Empfehlungen</span>
+  </div>
+  <div class="books">
+    <div class="book" *ngFor="let book of books">
+      <img [src]="book.image" />
+      <div class="info">
+        <span class="author">{{ book.author }}</span>
+        <span class="title">{{ book.title }}</span>
+        <span class="status">{{ book.status }}</span>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/recommendations/recommendations.component.scss

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  position: relative;
+  padding: 25px;
+}
+.header {
+  width: 100%;
+  text-align: left;
+  color: rgba(23, 32, 98, 1);
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+
+  .icon {
+    width: 22px;
+    height: 20px;
+    background-image: url(/assets/images/Empfehlungen_Icon.svg);
+  }
+  span {
+    font-family: 'Open Sans';
+    font-size: 15px;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-left: 10px;
+  }
+}
+
+img {
+  width: 50px;
+  height: 100%;
+}
+.books {
+  display: flex;
+  flex-direction: row;
+}
+.book {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+}
+.info {
+  display: flex;
+  flex-direction: column;
+  margin-left: 16px;
+}
+
+.author {
+  font-family: 'Open Sans';
+  font-size: 16px;
+  color: rgba(0, 0, 0, 1);
+  text-align: left;
+  line-height: 21px;
+}
+.title {
+  font-family: 'Open Sans';
+  font-size: 20px;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 1);
+  text-align: center;
+  line-height: 21px;
+  margin: 10px 0;
+}
+.status {
+  font-family: 'Open Sans';
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(247, 4, 0, 1);
+  text-align: left;
+}

src/app/modules/recommendations/recommendations.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-recommendations',
+  templateUrl: 'recommendations.component.html',
+  styleUrls: ['recommendations.component.scss']
+})
+export class RecommendationsComponent implements OnInit {
+  books = [
+    {
+      image:
+        'https://produktbilder.ihugendubel.de/9783442314874_150x150.jpg?showDummy=true',
+      author: 'Michele Obama',
+      title: 'Becoming Meine G…',
+      status: 'In den Warenkorb'
+    },
+    {
+      image:
+        'https://produktbilder.ihugendubel.de/9783328600039_150x150.jpg?showDummy=true',
+      author: 'Dörte Hansen',
+      title: 'Mittagsstunde',
+      status: 'In den Warenkorb'
+    }
+  ];
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/modules/recommendations/recommendations.module.ts

@@ -0,0 +1,12 @@
+import { SharedModule } from 'src/app/shared/shared.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RecommendationsComponent } from './recommendations.component';
+
+@NgModule({
+  imports: [CommonModule, SharedModule],
+  exports: [RecommendationsComponent],
+  declarations: [RecommendationsComponent],
+  providers: []
+})
+export class RecommendationsdModule {}