sartography
/
uva-covid19-testing-frontend
mirror of https://github.com/sartography/uva-covid19-testing-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds DataMatrix Rectangular layout

This commit is contained in:
Aaron Louie 2020-12-04 09:36:35 -05:00
parent 0573f71433
commit bedbd3bbe5
12 changed files with 194 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -36,6 +36,7 @@ import {CacheService} from './services/cache.service';
import {SettingsService} from './services/settings.service';
import {SettingsComponent} from './settings/settings.component';
import { MultipleLabelsComponent } from './multiple-labels/multiple-labels.component';
import { RectangleDatamatrixRectangularComponent } from './label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component';
/**
* This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@ -70,6 +71,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
RectangleDatamatrixComponent,
SampleComponent,
SettingsComponent,
RectangleDatamatrixRectangularComponent,
],
imports: [
BrowserAnimationsModule,

2
src/app/barcode-svg/barcode-svg.directive.ts
View File

@ -31,7 +31,7 @@ export class BarcodeSvgDirective implements OnInit {
};
if (this.format === 'datamatrixrectangularextension') {
opts.version = '8x96';
opts.version = '8x64';
}
if (this.format === 'qrcode') {

7
src/app/config/defaults.ts
View File

@ -41,6 +41,13 @@ export const labelLayouts = {
pageWidth: 50.8 + labelMargin,
pageHeight: 25.4 + labelMargin,
}),
rectangle_datamatrixrectangular: new LabelLayout({
name: '2in x 1in Rectangular Label - DataMatrix Rectangular',
barcodeType: 'datamatrixrectangular',
id: 'rectangle_datamatrixrectangular',
pageWidth: 50.8 + labelMargin,
pageHeight: 25.4 + labelMargin,
}),
};
export const defaultOptions: AppDefaultsOptions = {

0
src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.scss Normal file
View File

25
src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.spec.ts Normal file
View File

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

76
src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.svg Normal file
View File

@ -0,0 +1,76 @@
<svg
class="label-layout-format"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.width]="labelLayout.dimensions.pageWidth"
[attr.height]="labelLayout.dimensions.pageHeight"
[attr.viewBox]="'0 0 ' + width + ' ' + height"
>
<defs>
<g id="dmr_fill_line">
<line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#000000" />
<line x1="0" y1="1.5" x2="2" y2="1.5" stroke-width="0.3" stroke="#000000" />
<text x="7" y="2.25" fill="#000000">MAX FILL</text>
<text x="26" y="2.25" fill="#000000">MIN FILL</text>
<line x1="31" y1="1.5" x2="33" y2="1.5" stroke-width="0.3" stroke="#000000" />
<line x1="33" y1="0" x2="33" y2="3" stroke-width="0.3" stroke="#000000" />
</g>
<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 [attr.transform]="'translate(' + marginHorizontal + ', ' + marginVertical + ')'">
<rect
class="label-layout-border"
fill="#FFFFFF"
stroke="#CCCCCC"
stroke-width="0.2"
[attr.width]="widthMinusMargins"
[attr.height]="heightMinusMargins"
x="0"
y="0"
rx="2"
/>
<use xlink:href="#up_arrow" x="2" y="2" />
<use xlink:href="#up_arrow" x="2" [attr.y]="heightMinusMargins - 4" />
<use
xlink:href="#dmr_fill_line"
[attr.x]="8"
[attr.y]="0"
/>
<use
xlink:href="#dmr_fill_line"
[attr.x]="8"
[attr.y]="heightMinusMargins - 3"
/>
<g transform="translate(3, 9.5)">
<g
appBarcodeSvg
format="datamatrixrectangular"
[value]="sample.barcode"
[width]="36"
[height]="12"
transform="scale(0.175)"
/>
</g>
<g transform="translate(24, 11.5)">
<text x="0" y="0" style="font-size: 2.7px; text-anchor: start; text-align: left;">
#{{sample.student_id}}
</text>
<text x="0" y="2" style="font-size: 2.7px; text-anchor: start; text-align: left;">
{{sample.date | date:'yyyy-MM-dd HH:mm'}}
</text>
<text x="0" y="4" style="font-size: 2.7px; text-anchor: start; text-align: left;">
{{sample.location}} {{sample.initials}}
</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

46
src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.ts Normal file
View File

@ -0,0 +1,46 @@
import {Component, Input, OnInit} from '@angular/core';
import {AppDefaults} from '../../../models/appDefaults.interface';
import {LabelLayout} from '../../../models/labelLayout.interface';
import {Sample} from '../../../models/sample.interface';
@Component({
selector: 'app-rectangle-datamatrix-rectangular',
templateUrl: './rectangle-datamatrix-rectangular.component.svg',
styleUrls: ['./rectangle-datamatrix-rectangular.component.scss']
})
export class RectangleDatamatrixRectangularComponent implements OnInit {
@Input() sample: Sample;
@Input() labelLayout: LabelLayout;
marginHorizontal = 3.175 / 2;
marginVertical = 3.175 / 2;
constructor() { }
get width() {
return this.labelLayout.pageWidth;
}
get height() {
return this.labelLayout.pageHeight;
}
get heightMinusMargins(): number {
return (this.height - (this.marginVertical * 2));
}
get widthMinusMargins(): number {
return (this.width - (this.marginHorizontal * 2));
}
get labelCenterHorizontal(): number {
return (this.widthMinusMargins / 2);
}
get labelCenterVertical(): number {
return (this.heightMinusMargins / 2);
}
ngOnInit(): void {
}
}

42
src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg
View File

@ -8,12 +8,13 @@
[attr.viewBox]="'0 0 ' + width + ' ' + height"
>
<defs>
<g id="fill_line">
<line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#999999" />
<line x1="0" y1="1.5" x2="5" y2="1.5" stroke-width="0.3" stroke="#999999" />
<text x="8" y="2.25" fill="#999999">FILL</text>
<line x1="11" y1="1.5" x2="16" y2="1.5" stroke-width="0.3" stroke="#999999" />
<line x1="16" y1="0" x2="16" y2="3" stroke-width="0.3" stroke="#999999" />
<g id="dm_fill_line">
<line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#000000" />
<line x1="0" y1="1.5" x2="2" y2="1.5" stroke-width="0.3" stroke="#000000" />
<text x="7" y="2.25" fill="#000000">MAX FILL</text>
<text x="26" y="2.25" fill="#000000">MIN FILL</text>
<line x1="31" y1="1.5" x2="33" y2="1.5" stroke-width="0.3" stroke="#000000" />
<line x1="33" y1="0" x2="33" y2="3" stroke-width="0.3" stroke="#000000" />
</g>
<g id="up_arrow">
<g transform="translate(2.5, 2)">
@ -41,34 +42,35 @@
<use xlink:href="#up_arrow" x="2" y="2" />
<use xlink:href="#up_arrow" x="2" [attr.y]="heightMinusMargins - 4" />
<use
xlink:href="#fill_line"
[attr.x]="labelCenterHorizontal - 15"
xlink:href="#dm_fill_line"
[attr.x]="8"
[attr.y]="0"
/>
<use
xlink:href="#fill_line"
[attr.x]="labelCenterHorizontal - 15"
xlink:href="#dm_fill_line"
[attr.x]="8"
[attr.y]="heightMinusMargins - 3"
/>
<g transform="translate(5, 7)">
<g transform="translate(4, 7.75)">
<g
appBarcodeSvg
format="datamatrixrectangularextension"
format="datamatrix"
[value]="sample.barcode"
[width]="36"
[height]="3"
transform="scale(0.4)"
[width]="20"
[height]="20"
transform="scale(0.175)"
/>
</g>
<g transform="translate(5, 16)">
<text x="0" y="0" style="text-anchor: start; text-align: left;">
<g transform="translate(17, 11.75)">
<text x="0" y="0" style="font-size: 2.7px; text-anchor: start; text-align: left;">
#{{sample.student_id}}
</text>
<text x="0" y="2" style="text-anchor: start; text-align: left;">
<text x="0" y="2" style="font-size: 2.7px; text-anchor: start; text-align: left;">
{{sample.date | date:'yyyy-MM-dd HH:mm'}}
</text>
<text x="0" y="4" style="text-anchor: start; text-align: left;">
{{sample.initials}} {{sample.location}}
<text x="0" y="4" style="font-size: 2.7px; text-anchor: start; text-align: left;">
{{sample.location}}
{{sample.initials}}
</text>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

5
src/app/label-layout/label-layout.component.html
View File

@ -15,3 +15,8 @@
[sample]="sample"
[labelLayout]="settings.labelLayout"
></app-rectangle-datamatrix>
<app-rectangle-datamatrix-rectangular
*ngIf="isLayout('rectangle_datamatrixrectangular')"
[sample]="sample"
[labelLayout]="settings.labelLayout"
></app-rectangle-datamatrix-rectangular>

2
src/app/multiple-labels/multiple-labels.component.ts
View File

@ -17,7 +17,7 @@ export class MultipleLabelsComponent implements OnInit, AfterViewInit {
numLabels = 10;
constructor(private settingsService: SettingsService) {
const startingId = 391;
const startingId = 1;
this.settings = this.settingsService.getSettings();
this.layout = new LabelLayout(this.settings.labelLayout);
this.layout.numCopies = this.numLabels;

7
src/app/settings/settings.component.html
View File

@ -30,7 +30,7 @@
>
<mat-select-trigger [ngClass]="'selected-label-layout'">{{selectedLabelLayout.name}}</mat-select-trigger>
<mat-option
*ngFor="let layout of labelLayouts"
*ngFor="let layout of allLabelLayouts"
[value]="layout.id"
[ngStyle]="{height: 'inherit', width: 'inherit'}"
>
@ -60,6 +60,11 @@
[sample]="sampleForLayout(layout)"
[labelLayout]="layout"
></app-rectangle-datamatrix>
<app-rectangle-datamatrix-rectangular
*ngIf="layout.id === 'rectangle_datamatrixrectangular'"
[sample]="sampleForLayout(layout)"
[labelLayout]="layout"
></app-rectangle-datamatrix-rectangular>
</div>
</div>
</mat-option>

6
src/app/settings/settings.component.ts
View File

@ -20,7 +20,7 @@ export class SettingsComponent implements AfterViewInit {
numCopiesFormControl: FormControl;
labelLayoutFormControl: FormControl;
locationIdFormControl: FormControl;
labelLayouts: LabelLayout[];
allLabelLayouts: LabelLayout[];
fakeSample: Sample;
fakeBarcodeValue: string;
@ -45,7 +45,7 @@ export class SettingsComponent implements AfterViewInit {
Validators.pattern(this.settings.locationIdRegExp),
]);
this.labelLayouts = Object.values(labelLayouts);
this.allLabelLayouts = Object.values(labelLayouts);
this._loadFakeData();
}
@ -57,7 +57,7 @@ export class SettingsComponent implements AfterViewInit {
get selectedLabelLayout(): LabelLayout {
const selectedLayoutId = this.labelLayoutFormControl.value;
if (selectedLayoutId) {
return this.labelLayouts.find(layout => layout.id === selectedLayoutId);
return this.allLabelLayouts.find(layout => layout.id === selectedLayoutId);
}
}