Adds 3in x 1in CODE128 label layout.

src/app/_util/qrCode.ts

@@ -8,15 +8,11 @@ export const createQrCodeValue = (
   delimiter = '-',
   barcodeType: string
 ): string => {
-  const is1D = barcodeType === 'code128';
-  const locId = is1D ? locationId.slice(2, 4) : locationId;
-  const dateFormat = is1D ? 'yyMMdd' : 'yyyyMMddHHmm';
-
   const valArray = [
     barCode,
     initials.toUpperCase(),
-    formatDate(dateCreated, dateFormat, 'en-us'),
-    locId,
+    formatDate(dateCreated, 'yyyyMMddHHmm', 'en-us'),
+    locationId,
   ];
   return valArray.join(delimiter);
 };

src/app/app.module.ts

@@ -23,6 +23,7 @@ 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';
@@ -64,6 +65,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     NavbarComponent,
     PrintComponent,
     PrintLayoutComponent,
+    Rectangle3x1Code128Component,
     RectangleCode128Component,
     RectangleDatamatrixComponent,
     SampleComponent,

src/app/config/defaults.ts

@@ -16,6 +16,14 @@ export const labelLayouts = {
     pageWidth: 64,
     pageHeight: 32,
   }),
+  rectangle_3x1_code128: new LabelLayout({
+    name: '3in x 1in Rectangular Label - CODE128',
+    barcodeType: 'code128',
+    id: 'rectangle_3x1_code128',
+    pageWidth: 78.2,
+    pageHeight: 26.4,
+    delimiter: '',
+  }),
   rectangle_code128: new LabelLayout({
     name: '2in x 1.25in Rectangular Label - CODE128',
     barcodeType: 'code128',

src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.spec.ts

@@ -0,0 +1,27 @@
+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<Rectangle3x1Code128Component>;
+
+  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();
+  });
+});

src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.svg

@@ -0,0 +1,45 @@
+<svg
+  class="label-layout-format"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="78.2mm"
+  height="26.4mm"
+  viewBox="0 0 78.2 26.4"
+>
+  <defs>
+    <g id="up_arrow">
+      <g transform="translate(2.5, 2)">
+        <g transform="translate(-2.5, -2) scale(0.1)">
+          <path d="M 0,0 H 24 V 24 H 0 Z" style="fill:none"/>
+          <path d="M 20,11 H 7.83 L 13.42,5.41 12,4 4,12 12,20 13.41,18.59 7.83,13 H 20 Z" />
+        </g>
+        <text x="1" y="0">UP</text>
+      </g>
+    </g>
+  </defs>
+  <g transform="translate(1, 1)">
+    <rect
+      class="label-layout-border"
+      fill="#FFFFFF"
+      stroke="#CCCCCC"
+      stroke-width="0.2"
+      width="76.2"
+      height="24.4"
+      x="0"
+      y="0"
+      rx="2"
+    />
+    <use xlink:href="#up_arrow" x="2" y="2" />
+    <g transform="translate(3, 7.2)">
+      <g
+        appBarcodeSvg
+        [format]="'code128'"
+        [height]="40"
+        [value]="sample.barcode"
+        [width]="288"
+        transform="scale(0.08625)"/>
+    </g>
+  </g>
+  <text x="50%" y="22">{{sample.barcode}}</text>
+</svg>

src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.ts

@@ -0,0 +1,25 @@
+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
+
+  }
+
+}

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

@@ -1,4 +1,5 @@
 <app-circle-qrcode-single *ngIf="isLayout('circle_qrcode_single')" [sample]="sample"></app-circle-qrcode-single>
 <app-circle-qrcode-double *ngIf="isLayout('circle_qrcode_double')" [sample]="sample"></app-circle-qrcode-double>
+<app-rectangle-3x1-code128 *ngIf="isLayout('rectangle_3x1_code128')" [sample]="sample"></app-rectangle-3x1-code128>
 <app-rectangle-code128 *ngIf="isLayout('rectangle_code128')" [sample]="sample"></app-rectangle-code128>
 <app-rectangle-datamatrix *ngIf="isLayout('rectangle_datamatrix')" [sample]="sample"></app-rectangle-datamatrix>

src/app/settings/settings.component.html

@@ -41,6 +41,7 @@
               <div fxFlex="50%">
                 <app-circle-qrcode-single *ngIf="layout.id === 'circle_qrcode_single'" [sample]="sampleForLayout(layout)"></app-circle-qrcode-single>
                 <app-circle-qrcode-double *ngIf="layout.id === 'circle_qrcode_double'" [sample]="fakeSample"></app-circle-qrcode-double>
+                <app-rectangle-3x1-code128 *ngIf="layout.id === 'rectangle_3x1_code128'" [sample]="fakeSample"></app-rectangle-3x1-code128>
                 <app-rectangle-code128 *ngIf="layout.id === 'rectangle_code128'" [sample]="fakeSample"></app-rectangle-code128>
                 <app-rectangle-datamatrix *ngIf="layout.id === 'rectangle_datamatrix'" [sample]="fakeSample"></app-rectangle-datamatrix>
               </div>