From 24e4bf1ea77d7709dd666f258a80c4355864d19b Mon Sep 17 00:00:00 2001 From: Aaron Louie Date: Wed, 23 Sep 2020 16:25:22 -0400 Subject: [PATCH] Adds print layout and print button. --- src/app/app.module.ts | 2 + src/app/count/count.component.html | 43 ++++++++++++++++- src/app/count/count.component.ts | 18 ++++++- src/app/interfaces/labelLayout.interface.ts | 18 +++---- .../label-layout/label-layout.component.html | 4 +- .../label-layout/label-layout.component.ts | 6 +-- .../print-layout/print-layout.component.html | 23 +++++++++ .../print-layout/print-layout.component.scss | 17 +++++++ .../print-layout.component.spec.ts | 25 ++++++++++ .../print-layout/print-layout.component.ts | 45 ++++++++++++++++++ src/app/print/print.component.html | 38 +++++---------- src/app/print/print.component.scss | 29 +++--------- src/app/print/print.component.ts | 31 ++---------- src/app/sample/sample.component.html | 9 ++-- src/app/sample/sample.component.ts | 19 ++++++-- src/app/settings/settings.component.html | 8 ++-- src/app/settings/settings.component.ts | 4 +- src/material-theme.scss | 47 ++++++++----------- 18 files changed, 255 insertions(+), 131 deletions(-) create mode 100644 src/app/print-layout/print-layout.component.html create mode 100644 src/app/print-layout/print-layout.component.scss create mode 100644 src/app/print-layout/print-layout.component.spec.ts create mode 100644 src/app/print-layout/print-layout.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2a24fc7..830a671 100644 --- a/src/app/app.module.ts +++ b/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 `` value from `index.html`. @@ -56,6 +57,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string { SettingsComponent, PrintComponent, LabelLayoutComponent, + PrintLayoutComponent, ], imports: [ BrowserAnimationsModule, diff --git a/src/app/count/count.component.html b/src/app/count/count.component.html index 6979625..ba4591a 100644 --- a/src/app/count/count.component.html +++ b/src/app/count/count.component.html @@ -1 +1,42 @@ -

count works!

+
+ + +

Change Settings

+ + + + + Number of people in line + + This field is required. + Please enter a number greater than or equal to 0. + + + + + + + + +
diff --git a/src/app/count/count.component.ts b/src/app/count/count.component.ts index 2e65975..c9ad1af 100644 --- a/src/app/count/count.component.ts +++ b/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(['/']); + } + } diff --git a/src/app/interfaces/labelLayout.interface.ts b/src/app/interfaces/labelLayout.interface.ts index 0aa9ffc..4bfa4fc 100644 --- a/src/app/interfaces/labelLayout.interface.ts +++ b/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), }; } diff --git a/src/app/label-layout/label-layout.component.html b/src/app/label-layout/label-layout.component.html index 55ffc6b..a6806b6 100644 --- a/src/app/label-layout/label-layout.component.html +++ b/src/app/label-layout/label-layout.component.html @@ -11,8 +11,8 @@ >
L
- {{locationId.slice(0, 2)}}
- {{locationId.slice(2, 4)}} + {{settings.locationId.slice(0, 2)}}
+ {{settings.locationId.slice(2, 4)}}
#{{barCode}}
diff --git a/src/app/label-layout/label-layout.component.ts b/src/app/label-layout/label-layout.component.ts index 8bd4d2f..f8f105e 100644 --- a/src/app/label-layout/label-layout.component.ts +++ b/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('-'); } diff --git a/src/app/print-layout/print-layout.component.html b/src/app/print-layout/print-layout.component.html new file mode 100644 index 0000000..24067c5 --- /dev/null +++ b/src/app/print-layout/print-layout.component.html @@ -0,0 +1,23 @@ +
+
+ +
+
diff --git a/src/app/print-layout/print-layout.component.scss b/src/app/print-layout/print-layout.component.scss new file mode 100644 index 0000000..ed1e160 --- /dev/null +++ b/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; + } +} diff --git a/src/app/print-layout/print-layout.component.spec.ts b/src/app/print-layout/print-layout.component.spec.ts new file mode 100644 index 0000000..a6f6116 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PrintLayoutComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PrintLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/print-layout/print-layout.component.ts b/src/app/print-layout/print-layout.component.ts new file mode 100644 index 0000000..0619d31 --- /dev/null +++ b/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(''); + } + +} diff --git a/src/app/print/print.component.html b/src/app/print/print.component.html index 5c08345..0605b0c 100644 --- a/src/app/print/print.component.html +++ b/src/app/print/print.component.html @@ -1,5 +1,5 @@
- + > + + +
- -
-
- -
+
+
diff --git a/src/app/print/print.component.scss b/src/app/print/print.component.scss index 13b4ba3..94bacf4 100644 --- a/src/app/print/print.component.scss +++ b/src/app/print/print.component.scss @@ -1,6 +1,8 @@ +@import 'src/config'; + @media screen { - #print { display: none !important; } - #screen { display: flex !important; } + #media-print { display: none !important; } + #media-screen { display: flex !important; } } @media print { @@ -25,29 +27,12 @@ ::ng-deep app-footer { display: none; } - - #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; - } - } - #screen { display: none !important; } + #media-print { display: flex !important; } + #media-screen { display: none !important; } } .mat-card-content { - background-color: #6C799C; + background-color: $brand-gray-tint-2; height: 500px; } diff --git a/src/app/print/print.component.ts b/src/app/print/print.component.ts index 5da95cb..462d5c5 100644 --- a/src/app/print/print.component.ts +++ b/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(); + } } diff --git a/src/app/sample/sample.component.html b/src/app/sample/sample.component.html index 031e0d3..bbcefb6 100644 --- a/src/app/sample/sample.component.html +++ b/src/app/sample/sample.component.html @@ -17,6 +17,8 @@ matInput type="text" [formControl]="barCodeFormControl" + (change)="checkBarCodeValue()" + (keyup.enter)="goPrint()" > This field is required. Please enter exactly 9 or 14 digits. @@ -28,6 +30,8 @@ matInput type="text" [formControl]="initialsFormControl" + (change)="checkInitialsValue()" + (keyup.enter)="goPrint()" > This field is required. Please enter only 2-5 letters. @@ -39,9 +43,8 @@ mat-flat-button class="btn-xl" color="accent" - [disabled]="!hasInfo" - routerLink="/print" - [queryParams]="queryParams" + [disabled]="hasErrors" + (click)="goPrint()" >Next navigate_next