package-lock.json

@@ -4610,22 +4610,6 @@
         }
       }
     },
-    "jasmine": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-4.0.2.tgz",
-      "integrity": "sha512-YsrgxJQEggxzByYe4j68eQLOiQeSrPDYGv4sHhGBp3c6HHdq+uPXeAQ73kOAQpdLZ3/0zN7x/TZTloqeE1/qIA==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.6",
-        "jasmine-core": "^4.0.0"
-      }
-    },
-    "jasmine-core": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.1.tgz",
-      "integrity": "sha512-w+JDABxQCkxbGGxg+a2hUVZyqUS2JKngvIyLGu/xiw2ZwgsoSB0iiecLQsQORSeaKQ6iGrCyWG86RfNDuoA7Lg==",
-      "dev": true
-    },
     "jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",

package.json

@@ -3,7 +3,6 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "test": "jasmine",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development"
@@ -27,7 +26,6 @@
     "@angular/cli": "~13.2.2",
     "@angular/compiler-cli": "~13.2.0",
     "@types/node": "^12.11.1",
-    "jasmine": "^4.0.2",
     "typescript": "~4.5.2"
   }
 }

spec/support/jasmine.json

@@ -1,13 +0,0 @@
-{
-  "spec_dir": "spec",
-  "spec_files": [
-    "**/*[sS]pec.?(m)js"
-  ],
-  "helpers": [
-    "helpers/**/*.?(m)js"
-  ],
-  "env": {
-    "stopSpecOnExpectationFailure": false,
-    "random": true
-  }
-}

src/app/app-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { HomeComponent } from './home.component';
-import { ReportComponent } from './report.component';
-import { ThanksComponent } from './thanks.component';
-
-const routes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'thanks', component: ThanksComponent },
-  { path: 'report', component: ReportComponent }
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

src/app/app.component.ts

@@ -1,13 +1,39 @@
 import { Component } from '@angular/core';
 
+import { checkin, checkout } from "src/assets/forms";
+
 @Component({
   selector: 'app-root',
   template: `
-      <router-outlet></router-outlet>
+      <div class="menu">
+          
+        <button (click)="switch('checkout')">Check Out</button>
+        <button (click)="switch('checkin')">Check In</button>
+
+      </div>
+
+      <app-form *ngIf="action=='checkin'" [template]="checkin"></app-form>
+
+      <app-form *ngIf="action=='checkout'" [template]="checkout"></app-form>
+
+      <footer>Accenture | 2022</footer>
   `
 })
 export class AppComponent {
+  
+  checkin: Form = checkin;
+  checkout: Form = checkout;
+
+  action: string = "checkout";
 
   ngOnInit() { }
 
+  switch(action: string) {
+
+    alert("Are you sure?");
+
+    this.action = action;
+
+  }
+
 }

src/app/app.module.ts

@@ -7,12 +7,6 @@ import { FormComponent } from './form.component';
 import { TextComponent } from './text.component';
 import { RadioComponent } from './radio.component';
 import { StepComponent } from './step.component';
-import { CameraComponent } from './camera.component';
-import { SignComponent } from './sign.component';
-import { ThanksComponent } from './thanks.component';
-import { AppRoutingModule } from './app-routing.module';
-import { HomeComponent } from './home.component';
-import { ReportComponent } from './report.component';
 
 @NgModule({
   declarations: [
@@ -21,16 +15,10 @@ import { ReportComponent } from './report.component';
     TextComponent,
     RadioComponent,
     StepComponent,
-    CameraComponent,
-    SignComponent,
-    ThanksComponent,
-    HomeComponent,
-    ReportComponent,
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/camera.component.ts

@@ -1,58 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'app-camera',
-  template: `
-    <div class="camera">
-
-        <video id="video">Unable to access camera.</video>
-
-        <img [src]="this.field.value" />
-
-        <button (click)="capture()">Take photo</button>
-
-    </div>
-  `
-})
-export class CameraComponent implements OnInit {
-
-  @Input() field: Field;
-  @Output() update: EventEmitter<null> = new EventEmitter();
-
-  video: HTMLVideoElement;
-
-  ngOnInit() { console.log("Camera", this.field.id); }
-
-  ngAfterViewInit() {
-
-    this.video = document.getElementById("video") as HTMLVideoElement;
-
-    navigator.mediaDevices.getUserMedia({video: true, audio: false})
-
-      .then((stream) => {
-        this.video.srcObject = stream;
-        this.video.play();
-
-    });
-
-  }
-
-  capture() {
-
-    const canvas = document.createElement("canvas") as HTMLCanvasElement;
-
-    canvas.width = this.video.videoWidth;
-    canvas.height = this.video.videoHeight;
-
-    canvas
-      .getContext("2d")
-      .drawImage(this.video, 0, 0, canvas.width, canvas.height);
-
-    this.field.ok = true;
-    this.field.value = canvas.toDataURL();
-
-    this.update.emit();
-
-  }
-
-}

src/app/form.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-form',
@@ -16,7 +15,6 @@ import { Router } from '@angular/router';
       ></app-step>
 
       <button 
-        class="bar" 
         [class.active]="form.step > 0" 
         (click)="back()"
       >
@@ -24,7 +22,6 @@ import { Router } from '@angular/router';
       </button>
 
       <button 
-        class="bar" 
         [class.active]="form.steps[form.step].ok" 
         (click)="next()"
       >
@@ -36,60 +33,30 @@ import { Router } from '@angular/router';
 })
 export class FormComponent implements OnInit {
 
-  constructor(private router: Router) { }
-
   @Input() template: Form;
 
   form: Form;
 
-  ngOnInit() { this.set(); }
+  ngOnInit() { this.set() }
 
-  set() { 
-
-    /* Make a deep copy of the template */
-    this.form = JSON.parse(JSON.stringify(this.template));
-
-  }
+  set() { this.form = Object.assign({}, this.template); }
 
   next() {
 
     this.form.step == this.form.steps.length - 1 ?
       this.submit() :
-      this.form.step++;
+      this.form.step++
 
   }
 
   back() { this.form.step--; }
 
-  async submit() {
-
-    const res = await fetch(this.form.submit, parseForm(this.form.steps));
-
-    res.ok ?
-      this.router.navigate(["/thanks"]) :
-      alert("Failed to connect to the backend.");
+  submit() {
 
+    console.log("Submitting", this.form);
+    
+    this.set();
+  
   }
 
 }
-
-
-
-/* Util to extract key, values from Form */
-const parseForm = (steps: Step[]) => {
-
-  const results = {};
-
-  steps.forEach((s: Step) => {
-
-    s.fields.forEach((f: Field) => {
-
-      results[f.id] = f.value;
-
-    });
-
-  });
-
-  return results;
-
-};

src/app/home.component.ts

@@ -1,41 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { checkin, checkout } from "src/assets/forms";
-
-@Component({
-  selector: 'app-home',
-  template: `
-    <div class="menu">
-        
-      <button (click)="switch('checkout')">Check Out</button>
-      <button (click)="switch('checkin')">Check In</button>
-
-    </div>
-
-    <app-form *ngIf="action=='checkin'" [template]="checkin"></app-form>
-
-    <app-form *ngIf="action=='checkout'" [template]="checkout"></app-form>
-
-    <a routerLink="/report">Go To Report Page</a>
-
-    <footer>Accenture | 2022</footer>
-  `
-})
-export class HomeComponent implements OnInit {
-
-  checkin: Form = checkin;
-  checkout: Form = checkout;
-
-  action: string = "checkout";
-
-  ngOnInit() { }
-
-  switch(action: string) {
-
-    alert("Are you sure?");
-
-    this.action = action;
-
-  }
-
-}

src/app/radio.component.ts

@@ -25,7 +25,7 @@ export class RadioComponent implements OnInit {
   @Input() field: Field;
   @Output() update: EventEmitter<null> = new EventEmitter();
 
-  ngOnInit() { console.log("Radio", this.field.id); }
+  ngOnInit() { console.log("Text", this.field.id); }
 
   check() {
 

src/app/report.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-report',
-  template: `
-    <div class="report">
-
-      <span *ngFor="let entry of data">
-
-        <img [src]="entry.photo"/>
-
-        <div class="info">
-
-          {{ entry.name }}
-
-        </div>
-
-      </span>
-
-    </div>
-  `,
-  styles: [
-  ]
-})
-export class ReportComponent implements OnInit {
-
-  data: Entry[];
-
-  ngOnInit() {
-
-    this.data = data;
-
-    // try {
-
-    //   const res = await fetch("url");
-    
-    // } catch(e) { alert("Something went wrong."); }
-
-    // this.data = res.json();
-
-  }
-
-}
-
-
-/* Placeholder data */
-const data: Entry[] = [{
-  name: "John Doe",
-  eid: "john.doe",
-  asset: "monitor",
-  complete: false,
-  photo: "./assets/monitor.jfif"    
-}]

src/app/sign.component.ts

@@ -1,72 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'app-sign',
-  template: `
-    <div class="sign">
-
-      <canvas id="pad"></canvas>
-
-      <button (click)="clear()">Clear</button>
-
-    </div>
-  `
-})
-export class SignComponent implements OnInit {
-
-  @Input() field: Field;
-  @Output() update: EventEmitter<null> = 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();
-
-  };
-
-}

src/app/step.component.ts

@@ -23,20 +23,6 @@ import { Component, OnInit, Input } from '@angular/core';
 
             ></app-radio>
 
-            <app-camera *ngSwitchCase="'camera'" 
-
-              [field]="field" 
-              (update)="update()"
-
-            ></app-camera>
-
-            <app-sign *ngSwitchCase="'sign'" 
-
-              [field]="field" 
-              (update)="update()"
-
-            ></app-sign>
-
         </div>
 
     </div>
@@ -46,10 +32,13 @@ export class StepComponent implements OnInit {
 
   @Input() step: Step;
 
-  ngOnInit() { console.log("Step", this.step.prompt); }
+  ngOnInit() { console.log("Step", this.step); }
 
   update() {
 
+    console.log(this.step.fields);
+
+    /* Check for completeness */
     for (let field of this.step.fields) {
       if (!field.ok) {
         this.step.ok = false;

src/app/thanks.component.ts

@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-thanks',
-  template: `
-    <p>
-      Thank-You!
-
-      <a routerLink="/">Go Home</a>
-    </p>
-  `,
-  styles: [
-  ]
-})
-export class ThanksComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/assets/forms.ts

@@ -35,28 +35,6 @@ 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?",
@@ -103,13 +81,13 @@ export const checkin: Form = {
   },
   {
     ok: false,
-    prompt: "Sign your name.",
+    prompt: "Would you like a confirmation email?",
     fields: [{
       ok: false,
-      type: "sign",
-      id: "signiture",
+      type: "radio",
+      id: "confirmation",
       value: null,
-      options: null
+      options: { choices: ["yes", "no"] }
     }]
   }]
 

src/styles.css

@@ -1,18 +1,5 @@
-.bar {
-    pointer-events: none;
-}
-
 .active {
     pointer-events: auto;
-    border-color: blue;
     color: blue;
-}
-
-video, img {
-    width: 100px;
-}
-
-#pad {
-  background-color: white;
-  border: 2px solid black;
-}
+    border-color: blue;
+}

src/types.d.ts

@@ -1,3 +1,11 @@
+declare interface TextOptions {
+  modifier: string;
+}
+
+declare interface RadioOptions {
+  choices: string[];
+}
+
 declare interface Field {
   type: string;
   id: string;
@@ -18,12 +26,4 @@ declare interface Form {
   goto: string;
   step: number;
   steps: Step[];
-}    
-
-declare interface Entry {
-  name: string;
-  eid: string;
-  asset: string;
-  complete: boolean;
-  photo: string;
-}                         
+}