diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..f5d7735 --- /dev/null +++ b/debug.log @@ -0,0 +1,4 @@ +[1125/160941.720:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) +[1126/160944.140:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) +[1127/160946.724:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) +[1128/160948.817:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) diff --git a/package-lock.json b/package-lock.json index 42bda88..2f6a06b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3244,6 +3244,11 @@ "q": "^1.1.2" } }, + "code-128-encoder": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/code-128-encoder/-/code-128-encoder-3.1.1.tgz", + "integrity": "sha512-aZvPmAA2GGWydy+piAi5VphSh5WEKKFx1+1LtBV02Vof8ewdr5Xg6E+9N8nQ67qir+i/l5QGkE/JE39vOXYPMw==" + }, "codelyzer": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-5.2.2.tgz", diff --git a/package.json b/package.json index 87a5df0..6acd392 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@ngx-formly/core": "^5.8.0", "@ngx-formly/material": "^5.8.0", "bwip-js": "^2.0.11", + "code-128-encoder": "^3.1.1", "lodash.isequal": "^4.5.0", "ngx-qrcode-svg": "^2.0.0", "rfdc": "^1.1.4", diff --git a/src/app/_util/qrCode.ts b/src/app/_util/qrCode.ts index 7648c08..0ddd4b1 100644 --- a/src/app/_util/qrCode.ts +++ b/src/app/_util/qrCode.ts @@ -17,8 +17,8 @@ export const createQrCodeValue = ( const valArray = [ cardNum, compId, - dateString, - locId, + longDate, + locationId, ]; return valArray.join(delimiter); }; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ed6aaa2..830ca41 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,7 +23,6 @@ import {CountComponent} from './count/count.component'; import {FooterComponent} from './footer/footer.component'; import {CircleQRcodeDoubleComponent} from './label-layout/formats/circle-qrcode-double/circle-qrcode-double.component'; import {CircleQRcodeSingleComponent} from './label-layout/formats/circle-qrcode-single/circle-qrcode-single.component'; -import {Rectangle3x1Code128Component} from './label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component'; import {RectangleCode128Component} from './label-layout/formats/rectangle-code128/rectangle-code128.component'; import {RectangleDatamatrixComponent} from './label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component'; import {LabelLayoutComponent} from './label-layout/label-layout.component'; @@ -67,7 +66,6 @@ export function getBaseHref(platformLocation: PlatformLocation): string { NavbarComponent, PrintComponent, PrintLayoutComponent, - Rectangle3x1Code128Component, RectangleCode128Component, RectangleDatamatrixComponent, SampleComponent, diff --git a/src/app/config/defaults.ts b/src/app/config/defaults.ts index ed37539..348fbb8 100644 --- a/src/app/config/defaults.ts +++ b/src/app/config/defaults.ts @@ -25,11 +25,11 @@ export const labelLayouts = { delimiter: '', }), rectangle_code128: new LabelLayout({ - name: '2in x 1.25in Rectangular Label - CODE128', + name: '2.63in x 1.125in Rectangular Label - CODE128', barcodeType: 'code128', id: 'rectangle_code128', - pageWidth: 54, - pageHeight: 34, + pageWidth: 66.8, + pageHeight: 28.6, delimiter: '', }), rectangle_datamatrix: new LabelLayout({ diff --git a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.scss b/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.spec.ts b/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.spec.ts deleted file mode 100644 index ed1cc97..0000000 --- a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {mockSample} from '../../../testing/sample.mock'; - -import {Rectangle3x1Code128Component} from './rectangle-3x1-code128.component'; - -describe('Rectangle3x1Code128Component', () => { - let component: Rectangle3x1Code128Component; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [Rectangle3x1Code128Component] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(Rectangle3x1Code128Component); - component = fixture.componentInstance; - component.sample = mockSample; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.svg b/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.svg deleted file mode 100644 index 81668b2..0000000 --- a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - UP - - - - - - - - - - - - - - - - - #{{sample.student_id}} - {{sample.initials}} - - - {{sample.date | date:'yyyy-MM-dd HH:mm'}} - {{sample.location}} - - {{sample.barcode}} - diff --git a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.ts b/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.ts deleted file mode 100644 index 581b409..0000000 --- a/src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {AppDefaults} from '../../../models/appDefaults.interface'; -import {Sample} from '../../../models/sample.interface'; - -@Component({ - selector: 'app-rectangle-3x1-code128', - templateUrl: './rectangle-3x1-code128.component.svg', - styleUrls: ['./rectangle-3x1-code128.component.scss'] -}) -export class Rectangle3x1Code128Component implements OnInit { - @Input() sample: Sample; - @Input() settings: AppDefaults; - @Input() x: number; - @Input() y: number; - @Input() width: number; - @Input() height: number; - - constructor() { } - - ngOnInit(): void { - // Replace "#barcode" element with svg of barcode - - } - -} diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts index e535ba8..d4cdddc 100644 --- a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts +++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts @@ -1,23 +1,27 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; import {mockSample} from '../../../testing/sample.mock'; +import {RectangleCode128Component} from './rectangle-code128.component'; +import {LabelLayout} from '../../../models/labelLayout.interface'; +import {labelLayouts} from '../../../config/defaults'; -import { RectangleCode128Component } from './rectangle-code128.component'; describe('RectangleCode128Component', () => { let component: RectangleCode128Component; let fixture: ComponentFixture; + const layout: LabelLayout = labelLayouts.rectangle_3x1_code128; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ RectangleCode128Component ] + declarations: [RectangleCode128Component] }) - .compileComponents(); + .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(RectangleCode128Component); component = fixture.componentInstance; component.sample = mockSample; + component.labelLayout = layout; fixture.detectChanges(); }); diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg index 957a483..06968c0 100644 --- a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg +++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg @@ -3,44 +3,54 @@ version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - width="54mm" - height="34mm" - viewBox="0 0 54 34" + [attr.width]="labelLayout.dimensions.pageWidth" + [attr.height]="labelLayout.dimensions.pageHeight" + [attr.viewBox]="'0 0 ' + width + ' ' + height" > - - - - - + UP + + + - + - - - - - + + - {{sample.barcode}} + + #{{sample.student_id}} + {{sample.initials}} + + + {{sample.date | date:'yyyy-MM-dd HH:mm'}} + {{sample.location}} + + + {{encodedCode128String}} + {{encodedCode128String}} + + {{sample.barcode}} diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts index b98b8ac..a265d6f 100644 --- a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts +++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts @@ -1,6 +1,8 @@ import {Component, Input, OnInit} from '@angular/core'; -import {AppDefaults} from '../../../models/appDefaults.interface'; import {Sample} from '../../../models/sample.interface'; +import * as Encoder from 'code-128-encoder'; +import {OutputMode} from 'code-128-encoder'; +import {LabelLayout} from '../../../models/labelLayout.interface'; @Component({ selector: 'app-rectangle-code128', @@ -9,17 +11,37 @@ import {Sample} from '../../../models/sample.interface'; }) export class RectangleCode128Component implements OnInit { @Input() sample: Sample; - @Input() settings: AppDefaults; - @Input() x: number; - @Input() y: number; - @Input() width: number; - @Input() height: number; + @Input() labelLayout: LabelLayout; + encoder: Encoder; + marginHorizontal = 3.175 / 2; + marginVertical = 3.175 / 2; - constructor() { } + constructor() { + this.encoder = new Encoder(); + } + + get width() { + return this.labelLayout.pageWidth; + } + + get height() { + return this.labelLayout.pageHeight; + } + + get encodedCode128String(): string { + return this.encoder.encode(this.sample.barcode, {output: OutputMode.ASCII, mapping: 0}); + } + + get heightMinusMargins(): number { + return (this.height - (this.marginVertical * 2)); + } + + get widthMinusMargins(): number { + return (this.width - (this.marginHorizontal * 2)); + } ngOnInit(): void { // Replace "#barcode" element with svg of barcode - } } diff --git a/src/app/label-layout/label-layout.component.html b/src/app/label-layout/label-layout.component.html index 1543f64..99581b3 100644 --- a/src/app/label-layout/label-layout.component.html +++ b/src/app/label-layout/label-layout.component.html @@ -1,5 +1,13 @@ - - + + diff --git a/src/app/print/print.component.html b/src/app/print/print.component.html index 1055780..63463c1 100644 --- a/src/app/print/print.component.html +++ b/src/app/print/print.component.html @@ -14,6 +14,7 @@ fxLayout="column" fxLayoutAlign="center center" *ngIf="isSaved; else loadingMessage" + [ngStyle]="{height: pageHeight}" > void) { const id = createQrCodeValue( this.cardNum, diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 73a8a7e..e4535c4 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -44,10 +44,18 @@
- - - - + + + +
diff --git a/src/assets/fonts/LibreBarcode128-Regular.ttf b/src/assets/fonts/LibreBarcode128-Regular.ttf new file mode 100644 index 0000000..a2ec7ce Binary files /dev/null and b/src/assets/fonts/LibreBarcode128-Regular.ttf differ diff --git a/src/assets/fonts/code128.ttf b/src/assets/fonts/code128.ttf new file mode 100644 index 0000000..3099024 Binary files /dev/null and b/src/assets/fonts/code128.ttf differ diff --git a/src/material-theme.scss b/src/material-theme.scss index cc7bc47..c1fb42a 100644 --- a/src/material-theme.scss +++ b/src/material-theme.scss @@ -1,5 +1,8 @@ +@font-face { + font-family: "code128"; + src: url("assets/fonts/code128.ttf"); +} @import "material"; - @include mat-core($custom-typography); @include angular-material-theme($cr-connect-theme); @@ -443,7 +446,6 @@ } } - svg.label-layout-format { background-color: transparent; @@ -463,6 +465,13 @@ font-variant-numeric: normal; font-feature-settings: normal; text-anchor: middle; + + &.code128-barcode { + text-align: center; + font-family: "code128", monospace; + font-size: 5.7px; + font-weight: normal; + } } @media print {