= new EventEmitter();
+
+ pad: HTMLCanvasElement;
+
+ ngOnInit() { console.log("Sign", this.field.id); }
+
+ ngAfterViewInit() {
+
+ this.pad = document.getElementById("pad") as HTMLCanvasElement;
+
+ const ctx = this.pad.getContext('2d');
+
+ this.pad.width = 300;
+ this.pad.height = 100;
+
+ ctx.lineWidth = 3;
+ ctx.lineJoin = 'round';
+ ctx.lineCap = 'round';
+
+ let active, cursor;
+
+ this.pad.onmousedown = (e) => {
+ active = true;
+ cursor = { x: e.offsetX, y: e.offsetY };
+ }
+
+ this.pad.onmousemove = (e) => {
+ if (active) {
+ ctx.beginPath();
+ ctx.moveTo(cursor.x, cursor.y);
+ ctx.lineTo(e.offsetX, e.offsetY);
+ ctx.stroke();
+ cursor = { x: e.offsetX, y: e.offsetY };
+ }
+ }
+
+ this.pad.onmouseup = (_e) => {
+ active = false;
+ this.field.value = this.pad.toDataURL();
+ this.field.ok = true;
+ this.update.emit();
+ };
+
+ }
+
+ clear() {
+
+ this.pad.getContext('2d').clearRect(0, 0, this.pad.width, this.pad.height);
+ this.field.value = null;
+ this.field.ok = false;
+ this.update.emit();
+
+ };
+
+}
diff --git a/src/app/step.component.ts b/src/app/step.component.ts
index 1cdaa91..813709c 100644
--- a/src/app/step.component.ts
+++ b/src/app/step.component.ts
@@ -23,6 +23,20 @@ import { Component, OnInit, Input } from '@angular/core';
>
+
+
+
+
@@ -32,13 +46,10 @@ export class StepComponent implements OnInit {
@Input() step: Step;
- ngOnInit() { console.log("Step", this.step); }
+ ngOnInit() { console.log("Step", this.step.prompt); }
update() {
- console.log(this.step.fields);
-
- /* Check for completeness */
for (let field of this.step.fields) {
if (!field.ok) {
this.step.ok = false;
diff --git a/src/app/thanks.component.ts b/src/app/thanks.component.ts
new file mode 100644
index 0000000..d3e4a2b
--- /dev/null
+++ b/src/app/thanks.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-thanks',
+ template: `
+
+ Thank-You!
+
+ Go Home
+
+ `,
+ styles: [
+ ]
+})
+export class ThanksComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/assets/forms.ts b/src/assets/forms.ts
index 0dbe1b1..0c957c4 100644
--- a/src/assets/forms.ts
+++ b/src/assets/forms.ts
@@ -35,6 +35,28 @@ export const checkout: Form = {
options: { choices: ["mouse", "keyboard", "monitor", "chair"] }
}]
},
+ {
+ ok: false,
+ prompt: "Take a photo.",
+ fields: [{
+ ok: false,
+ type: "camera",
+ id: "photo",
+ value: null,
+ options: null
+ }]
+ },
+ {
+ ok: false,
+ prompt: "Sign your name.",
+ fields: [{
+ ok: false,
+ type: "sign",
+ id: "signiture",
+ value: null,
+ options: null
+ }]
+ },
{
ok: false,
prompt: "Would you like a confirmation email?",
@@ -81,13 +103,13 @@ export const checkin: Form = {
},
{
ok: false,
- prompt: "Would you like a confirmation email?",
+ prompt: "Sign your name.",
fields: [{
ok: false,
- type: "radio",
- id: "confirmation",
+ type: "sign",
+ id: "signiture",
value: null,
- options: { choices: ["yes", "no"] }
+ options: null
}]
}]
diff --git a/src/assets/monitor.jfif b/src/assets/monitor.jfif
new file mode 100644
index 0000000..2ed1cca
Binary files /dev/null and b/src/assets/monitor.jfif differ
diff --git a/src/styles.css b/src/styles.css
index 9f41362..51cf013 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,5 +1,18 @@
+.bar {
+ pointer-events: none;
+}
+
.active {
pointer-events: auto;
- color: blue;
border-color: blue;
-}
\ No newline at end of file
+ color: blue;
+}
+
+video, img {
+ width: 100px;
+}
+
+#pad {
+ background-color: white;
+ border: 2px solid black;
+}
diff --git a/src/types.d.ts b/src/types.d.ts
index 7f8c2c5..35b221c 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,11 +1,3 @@
-declare interface TextOptions {
- modifier: string;
-}
-
-declare interface RadioOptions {
- choices: string[];
-}
-
declare interface Field {
type: string;
id: string;
@@ -26,4 +18,12 @@ declare interface Form {
goto: string;
step: number;
steps: Step[];
-}
+}
+
+declare interface Entry {
+ name: string;
+ eid: string;
+ asset: string;
+ complete: boolean;
+ photo: string;
+}