Adds print layout and print button.

src/app/app.module.ts

@@ -28,6 +28,7 @@ import {SampleComponent} from './sample/sample.component';
 import {ApiService} from './services/api.service';
 import {SettingsComponent} from './settings/settings.component';
 import { LabelLayoutComponent } from './label-layout/label-layout.component';
+import { PrintLayoutComponent } from './print-layout/print-layout.component';
 
 /**
  * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@@ -56,6 +57,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     SettingsComponent,
     PrintComponent,
     LabelLayoutComponent,
+    PrintLayoutComponent,
   ],
   imports: [
     BrowserAnimationsModule,

src/app/count/count.component.html

@@ -1 +1,42 @@
-<p>count works!</p>
+<div
+  class="full-height bg-primary"
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  fxLayoutGap="40px"
+>
+  <mat-card fxFlex="50%">
+    <mat-card-header>
+      <h1>Change Settings</h1>
+    </mat-card-header>
+
+    <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
+      <mat-form-field class="line-count-input" fxFlex="95%">
+        <mat-label>Number of people in line</mat-label>
+        <input
+          #numPeopleInput="matInput"
+          matInput
+          type="number"
+          [formControl]="numPeopleFormControl"
+          [value]="0"
+        >
+        <mat-error *ngIf="numPeopleFormControl.hasError('required')">This field is required.</mat-error>
+        <mat-error *ngIf="numPeopleFormControl.hasError('pattern')">Please enter a number greater than or equal to 0.</mat-error>
+      </mat-form-field>
+    </mat-card-content>
+    <mat-card-actions>
+      <button
+        mat-flat-button
+        class="btn-xl"
+        color="accent"
+        [disabled]="hasErrors"
+        (click)="save()"
+      >Save <mat-icon>save</mat-icon></button>
+      <button
+        mat-flat-button
+        class="btn-xl"
+        routerLink="/"
+      ><mat-icon>cancel</mat-icon> Cancel</button>
+    </mat-card-actions>
+  </mat-card>
+
+</div>

src/app/count/count.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-count',
@@ -6,10 +8,24 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./count.component.scss']
 })
 export class CountComponent implements OnInit {
+  numPeopleFormControl = new FormControl(0, [
+    Validators.required,
+    Validators.min(0),
+    Validators.max(1000),
+  ]);
 
-  constructor() { }
+  get hasErrors(): boolean {
+    return !this.numPeopleFormControl.valid;
+  }
+
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
 
+  save() {
+    // TODO: Upload new count to backend.
+    this.router.navigate(['/']);
+  }
+
 }

src/app/interfaces/labelLayout.interface.ts

@@ -23,7 +23,7 @@ export class LabelLayout {
   pointsPerUnit = 0.3528;
   labelSize = 28.6;
   marginSize = 1.7;
-  numCols = 2;
+  numCols = 1;
   columnGap = 4;
   sideTextWidth = 4;
   sideTextTop = 11;
@@ -42,19 +42,19 @@ export class LabelLayout {
 
   get dimensions() {
     return {
-      columnGap: this._toUnits(this.columnGap),
-      sideTextWidth: this._toUnits(this.sideTextWidth),
-      sideTextTop: this._toUnits(this.sideTextTop),
-      sideTextMargin: this._toUnits(this.sideTextMargin),
-      topTextMargin: this._toUnits(this.topTextMargin),
       bottomTextMargin: this._toUnits(this.bottomTextMargin),
+      columnGap: this._toUnits(this.columnGap),
       columnGapWidth: this._toUnits(this.columnGapWidth),
-      marginWidth: this._toUnits(this.marginSize),
+      fontSize: this._toUnits(this.fontSize),
       labelSize: this._toUnits(this.labelSize),
       labelSizeWithMargins: this._toUnits(this.labelSizeWithMargins),
-      pageWidth: this._toUnits(this.pageWidth),
+      marginWidth: this._toUnits(this.marginSize),
       pageHeight: this._toUnits(this.pageHeight),
-      fontSize: this._toUnits(this.fontSize),
+      pageWidth: this._toUnits(this.pageWidth),
+      sideTextMargin: this._toUnits(this.sideTextMargin),
+      sideTextTop: this._toUnits(this.sideTextTop),
+      sideTextWidth: this._toUnits(this.sideTextWidth),
+      topTextMargin: this._toUnits(this.topTextMargin),
     };
   }
 

src/app/label-layout/label-layout.component.html

@@ -11,8 +11,8 @@
   ></qrcode-svg>
   <div class="location">
     L<br />
-    {{locationId.slice(0, 2)}}<br />
+    {{settings.locationId.slice(0, 2)}}<br />
-    {{locationId.slice(2, 4)}}
+    {{settings.locationId.slice(2, 4)}}
   </div>
   <div class="barcode">#{{barCode}}</div>
 </div>

src/app/label-layout/label-layout.component.ts

@@ -1,6 +1,6 @@
 import {formatDate} from '@angular/common';
 import {Component, Input, OnInit} from '@angular/core';
-import {defaults} from '../config/defaults';
+import {getSettings} from '../config/defaults';
 
 @Component({
   selector: 'app-label-layout',
@@ -11,7 +11,7 @@ export class LabelLayoutComponent implements OnInit {
   @Input() dateCreated: Date;
   @Input() barCode: string;
   @Input() initials: string;
-  locationId = defaults.locationId;
+  settings = getSettings();
 
   constructor() {
   }
@@ -21,7 +21,7 @@ export class LabelLayoutComponent implements OnInit {
       this.barCode,
       this.initials,
       formatDate(this.dateCreated, 'yyyyMMddHHmm', 'en-us'),
-      defaults.locationId,
+      this.settings.locationId,
     ];
     return valArray.join('-');
   }

src/app/print-layout/print-layout.component.html

@@ -0,0 +1,23 @@
+<div
+  id="print"
+  [style]="{width: pageWidth, height: pageHeight}"
+  [gdRows]="pagesToGridFractions"
+  gdGap="1.5mm"
+  gdAlignColumns="center"
+  gdAlignRows="center"
+>
+  <div
+    *ngFor="let page of pages"
+    [gdColumns]="colsToGridFractions"
+    gdAlignColumns="center"
+    gdAlignRows="center"
+    gdGap="3mm"
+  >
+    <app-label-layout
+      *ngFor="let col of columns"
+      [barCode]="barCode"
+      [initials]="initials"
+      [dateCreated]="dateCreated"
+    ></app-label-layout>
+  </div>
+</div>

src/app/print-layout/print-layout.component.scss

@@ -0,0 +1,17 @@
+#print {
+  display: grid !important;
+  background-color: transparent;
+  width: 64mm;
+  height: 32mm;
+  padding-top: 2mm;
+  padding-bottom: 2mm;
+
+  .page {
+    padding-top: 2mm;
+    padding-bottom: 2mm;
+  }
+
+  .column {
+    padding: 1mm;
+  }
+}

src/app/print-layout/print-layout.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrintLayoutComponent } from './print-layout.component';
+
+describe('PrintLayoutComponent', () => {
+  let component: PrintLayoutComponent;
+  let fixture: ComponentFixture<PrintLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PrintLayoutComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrintLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/print-layout/print-layout.component.ts

@@ -0,0 +1,45 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {getSettings} from '../config/defaults';
+
+@Component({
+  selector: 'app-print-layout',
+  templateUrl: './print-layout.component.html',
+  styleUrls: ['./print-layout.component.scss']
+})
+export class PrintLayoutComponent implements OnInit {
+  @Input() dateCreated: Date;
+  @Input() barCode: string;
+  @Input() initials: string;
+  settings = getSettings();
+  dimensions = this.settings.labelLayout.dimensions;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  get pagesToGridFractions(): string {
+    return this.pages.map(() => '1fr').join(' ');
+  }
+
+  get colsToGridFractions(): string {
+    return this.columns.map(() => '1fr').join(' ');
+  }
+
+  get pageHeight(): string {
+    return this.dimensions && this.dimensions.pageHeight;
+  }
+
+  get pageWidth(): string {
+    return this.dimensions && this.dimensions.pageWidth;
+  }
+
+  get pages() {
+    return Array(this.settings.numCopies).fill('');
+  }
+
+  get columns() {
+    return Array(this.settings.labelLayout.numCols).fill('');
+  }
+
+}

src/app/print/print.component.html

@@ -1,5 +1,5 @@
 <div
-  id="screen"
+  id="media-screen"
   class="full-height bg-primary"
   fxLayout="row"
   fxLayoutAlign="center center"
@@ -11,36 +11,22 @@
     </mat-card-header>
 
     <mat-card-content fxLayout="column" fxLayoutAlign="center center">
-      <app-label-layout
+      <app-print-layout
         [barCode]="barCode"
         [initials]="initials"
         [dateCreated]="dateCreated"
-      ></app-label-layout>
+      ></app-print-layout>
     </mat-card-content>
+    <mat-card-actions fxLayoutAlign="center center">
+      <button mat-flat-button class="btn-xl margin-4" color="accent" (click)="saveAndPrint()">Print labels</button>
+    </mat-card-actions>
   </mat-card>
 </div>
 
-
+<div id="media-print">
-<div
+  <app-print-layout
-  id="print"
+    [barCode]="barCode"
-  [style]="{width: pageWidth, height: pageHeight}"
+    [initials]="initials"
-  [gdRows]="pagesToGridFractions"
+    [dateCreated]="dateCreated"
-  gdGap="1.5mm"
+  ></app-print-layout>
-  gdAlignColumns="center"
-  gdAlignRows="center"
->
-  <div
-    *ngFor="let page of pages"
-    [gdColumns]="colsToGridFractions"
-    gdAlignColumns="center"
-    gdAlignRows="center"
-    gdGap="3mm"
-  >
-    <app-label-layout
-      *ngFor="let col of columns"
-      [barCode]="barCode"
-      [initials]="initials"
-      [dateCreated]="dateCreated"
-    ></app-label-layout>
-  </div>
 </div>

src/app/print/print.component.scss

@@ -1,6 +1,8 @@
+@import 'src/config';
+
 @media screen {
-  #print { display: none !important; }
+  #media-print { display: none !important; }
-  #screen { display: flex !important; }
+  #media-screen { display: flex !important; }
 }
 
 @media print {
@@ -25,29 +27,12 @@
   ::ng-deep app-footer {
     display: none;
   }
-
+  #media-print { display: flex !important; }
-  #print {
+  #media-screen { display: none !important; }
-    display: grid !important;
-    background-color: transparent;
-    width: 64mm;
-    height: 32mm;
-    padding-top: 2mm;
-    padding-bottom: 2mm;
-
-    .page {
-      padding-top: 2mm;
-      padding-bottom: 2mm;
-    }
-
-    .column {
-      padding: 1mm;
-    }
-  }
-  #screen { display: none !important; }
 }
 
 .mat-card-content {
-  background-color: #6C799C;
+  background-color: $brand-gray-tint-2;
   height: 500px;
 }
 

src/app/print/print.component.ts

@@ -1,6 +1,5 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {defaults} from '../config/defaults';
 
 @Component({
   selector: 'app-print',
@@ -12,24 +11,6 @@ export class PrintComponent implements OnInit {
   initials: string;
   dateCreated: Date;
 
-  get pagesToGridFractions(): string {
-    const what = this.pages.map(() => '1fr').join(' ');
-    console.log('what', what);
-    return what;
-  }
-
-  get colsToGridFractions(): string {
-    return this.columns.map(() => '1fr').join(' ');
-  }
-
-  get pageHeight(): string {
-    return `${this.pages.length * 32}mm`;
-  }
-
-  get pageWidth(): string {
-    return `${this.columns.length * 32}mm`;
-  }
-
   constructor(private route: ActivatedRoute) {
     this.dateCreated = new Date();
     this.route.queryParamMap.subscribe(queryParamMap => {
@@ -38,15 +19,11 @@ export class PrintComponent implements OnInit {
     });
   }
 
-  get pages() {
-    return Array(defaults.numCopies).fill('');
-  }
-
-  get columns() {
-    return Array(defaults.labelLayout.type === 'round_32mm_2up' ? 2 : 1).fill('');
-  }
-
   ngOnInit(): void {
   }
 
+  saveAndPrint() {
+    // TODO: Upload new count to backend.
+    window.print();
+  }
 }

src/app/sample/sample.component.html

@@ -17,6 +17,8 @@
           matInput
           type="text"
           [formControl]="barCodeFormControl"
+          (change)="checkBarCodeValue()"
+          (keyup.enter)="goPrint()"
         >
         <mat-error *ngIf="barCodeFormControl.hasError('required')">This field is required.</mat-error>
         <mat-error *ngIf="barCodeFormControl.hasError('pattern')">Please enter exactly 9 or 14 digits.</mat-error>
@@ -28,6 +30,8 @@
           matInput
           type="text"
           [formControl]="initialsFormControl"
+          (change)="checkInitialsValue()"
+          (keyup.enter)="goPrint()"
         >
         <mat-error *ngIf="initialsFormControl.hasError('required')">This field is required.</mat-error>
         <mat-error *ngIf="initialsFormControl.hasError('pattern')">Please enter only 2-5 letters.</mat-error>
@@ -39,9 +43,8 @@
         mat-flat-button
         class="btn-xl"
         color="accent"
-        [disabled]="!hasInfo"
+        [disabled]="hasErrors"
-        routerLink="/print"
+        (click)="goPrint()"
-        [queryParams]="queryParams"
       >Next <mat-icon>navigate_next</mat-icon></button>
       <button
         mat-flat-button

src/app/sample/sample.component.ts

@@ -2,7 +2,7 @@ import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@a
 import {FormControl, Validators} from '@angular/forms';
 import {MatButton} from '@angular/material/button';
 import {MatInput} from '@angular/material/input';
-import {Params} from '@angular/router';
+import {Params, Router} from '@angular/router';
 import {defaults, getSettings} from '../config/defaults';
 import {AppDefaults} from '../interfaces/appDefaults.interface';
 
@@ -28,12 +28,15 @@ export class SampleComponent implements AfterViewInit {
 
   get queryParams(): Params {
     return {
-      barCode: this.barCodeValue,
+      barCode: this.barCodeValue.slice(0, 9),
       initials: this.initialsValue,
     };
   }
 
-  constructor(private changeDetector: ChangeDetectorRef) {
+  constructor(
+    private router: Router,
+    private changeDetector: ChangeDetectorRef
+  ) {
     this.barCodeFormControl.registerOnChange(() => this.checkBarCodeValue());
     this.initialsFormControl.registerOnChange(() => this.checkInitialsValue());
   }
@@ -54,8 +57,8 @@ export class SampleComponent implements AfterViewInit {
     return this.settings.initialsRegExp.test(this.initialsValue);
   }
 
-  get hasInfo(): boolean {
+  get hasErrors(): boolean {
-    return this.hasBarCode && this.hasInitials;
+    return !(this.barCodeFormControl.valid && this.initialsFormControl.valid);
   }
 
   ngAfterViewInit() {
@@ -83,4 +86,10 @@ export class SampleComponent implements AfterViewInit {
     this.barCodeFormControl.patchValue('');
     this.initialsFormControl.patchValue('');
   }
+
+  goPrint() {
+    if (!this.hasErrors) {
+      this.router.navigate(['/print'], {queryParams: this.queryParams});
+    }
+  }
 }

src/app/settings/settings.component.html

@@ -6,11 +6,11 @@
 >
   <mat-card fxFlex="50%">
     <mat-card-header>
-      <h1>Scan Barcode</h1>
+      <h1>Change Settings</h1>
     </mat-card-header>
 
     <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
-      <mat-form-field class="barcode-input" fxFlex="95%">
+      <mat-form-field class="location-input" fxFlex="95%">
         <mat-label>Location ID #</mat-label>
         <input
           #locationIdInput="matInput"
@@ -21,7 +21,7 @@
         <mat-error *ngIf="locationIdFormControl.hasError('required')">This field is required.</mat-error>
         <mat-error *ngIf="locationIdFormControl.hasError('pattern')">Please enter exactly 4 digits.</mat-error>
       </mat-form-field>
-      <mat-form-field class="initials-input" fxFlex="95%">
+      <mat-form-field class="label-layout-select" fxFlex="95%">
         <mat-label>Label layout</mat-label>
         <mat-select
           #labelLayoutSelect="matSelect"
@@ -32,7 +32,7 @@
         </mat-select>
         <mat-error *ngIf="labelLayoutFormControl.hasError('required')">This field is required.</mat-error>
       </mat-form-field>
-      <mat-form-field class="initials-input" fxFlex="95%">
+      <mat-form-field class="num-copies-input" fxFlex="95%">
         <mat-label>Number of copies of label</mat-label>
         <input
           #numCopiesInput="matInput"

src/app/settings/settings.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {MatInput} from '@angular/material/input';
 import {MatSelect} from '@angular/material/select';
+import {Router} from '@angular/router';
 import {getSettings, labelLayouts, saveSettings} from '../config/defaults';
 import {AppDefaults} from '../interfaces/appDefaults.interface';
 import {LabelLayout} from '../interfaces/labelLayout.interface';
@@ -27,7 +28,7 @@ export class SettingsComponent implements OnInit {
 
   labelLayouts: LabelLayout[] = Object.values(labelLayouts);
 
-  constructor() {
+  constructor(private router: Router) {
   }
 
   get hasInfo(): boolean {
@@ -43,5 +44,6 @@ export class SettingsComponent implements OnInit {
       numCopies: this.numCopiesFormControl.value,
       locationId: this.locationIdFormControl.value,
     });
+    this.router.navigate(['/']);
   }
 }

src/material-theme.scss

@@ -210,33 +210,26 @@
   .bg-primary { background-color: $brand-primary; }
   .bg-accent { background-color: $brand-accent; }
 
-  .pad-0 {
+  .pad-0 { padding: 0; }
-    padding: 0px;
+  .pad-1 { padding: 1em; }
-  }
+  .pad-2 { padding: 2em; }
-  .pad-1 {
+  .pad-3 { padding: 3em; }
-    padding: 1em;
+  .pad-4 { padding: 4em; }
-  }
+  .pad-5 { padding: 5em; }
-  .pad-2 {
+  .pad-6 { padding: 6em; }
-    padding: 2em;
+  .pad-7 { padding: 7em; }
-  }
+  .pad-8 { padding: 8em; }
-  .pad-3 {
+
-    padding: 3em;
+  .margin-0 { margin: 0; }
-  }
+  .margin-1 { margin: 1em; }
-  .pad-4 {
+  .margin-2 { margin: 2em; }
-    padding: 4em;
+  .margin-3 { margin: 3em; }
-  }
+  .margin-4 { margin: 4em; }
-  .pad-5 {
+  .margin-5 { margin: 5em; }
-    padding: 5em;
+  .margin-6 { margin: 6em; }
-  }
+  .margin-7 { margin: 7em; }
-  .pad-6 {
+  .margin-8 { margin: 8em; }
-    padding: 6em;
+  .margin-9 { margin: 9em; }
-  }
-  .pad-7 {
-    padding: 7em;
-  }
-  .pad-8 {
-    padding: 8em;
-  }
 
   .margin-top-none, .row.margin-top-none {
     margin-top: 0px !important;