bux fixes

src/app/app-routing.module.ts

@@ -1,11 +1,13 @@
 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: 'thanks', component: ThanksComponent },
+  { path: 'report', component: ReportComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -12,6 +12,7 @@ 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: [
@@ -24,6 +25,7 @@ import { HomeComponent } from './home.component';
     SignComponent,
     ThanksComponent,
     HomeComponent,
+    ReportComponent,
   ],
   imports: [
     BrowserModule,

src/app/camera.component.ts

@@ -21,7 +21,7 @@ export class CameraComponent implements OnInit {
 
   video: HTMLVideoElement;
 
-  ngOnInit() { console.log("Smile!"); }
+  ngOnInit() { console.log("Camera", this.field.id); }
 
   ngAfterViewInit() {
 

src/app/form.component.ts

@@ -36,15 +36,20 @@ import { Router } from '@angular/router';
 })
 export class FormComponent implements OnInit {
 
-  constructor(private route: Router) { }
+  constructor(private router: Router) { }
 
   @Input() template: Form;
 
   form: Form;
 
-  ngOnInit() { this.set() }
+  ngOnInit() { this.set(); }
 
-  set() { this.form = Object.assign({}, this.template); }
+  set() { 
+
+    /* Make a deep copy of the template */
+    this.form = JSON.parse(JSON.stringify(this.template));
+
+  }
 
   next() {
 
@@ -58,9 +63,24 @@ export class FormComponent implements OnInit {
 
   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.");
+
+  }
+
+}
+
+
+
+/* Util to extract key, values from Form */
+const parseForm = (steps: Step[]) => {
+
   const results = {};
 
-    this.form.steps.forEach((s: Step) => {
+  steps.forEach((s: Step) => {
 
     s.fields.forEach((f: Field) => {
 
@@ -70,24 +90,6 @@ export class FormComponent implements OnInit {
 
   });
 
-    try {
+  return results;
 
-      const res = await fetch(this.form.submit, results);
+};
-
-      if (res.ok) {
-
-        this.set();
-
-        this.route.navigate(["/thanks"]);
-
-      } else {
-
-        alert("Backend does't like you.");
-
-      }
-
-    } catch (e) { alert("Something went wrong."); }
-  
-  }
-
-}

src/app/home.component.ts

@@ -16,6 +16,8 @@ import { checkin, checkout } from "src/assets/forms";
 
     <app-form *ngIf="action=='checkout'" [template]="checkout"></app-form>
 
+    <a routerLink="/report">Go To Report Page</a>
+
     <footer>Accenture | 2022</footer>
   `
 })

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("Text", this.field.id); }
+  ngOnInit() { console.log("Radio", this.field.id); }
 
   check() {
 

src/app/report.component.ts

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

@@ -19,7 +19,7 @@ export class SignComponent implements OnInit {
 
   pad: HTMLCanvasElement;
 
-  ngOnInit() { console.log("Sign your name!"); }
+  ngOnInit() { console.log("Sign", this.field.id); }
 
   ngAfterViewInit() {
 

src/app/step.component.ts

@@ -46,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;

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;
@@ -27,3 +19,11 @@ declare interface Form {
   step: number;
   steps: Step[];
 }    
+
+declare interface Entry {
+  name: string;
+  eid: string;
+  asset: string;
+  complete: boolean;
+  photo: string;
+}