Tangy form event

online-survey-app/src/app/model/xapi-actor-base.model.ts

@@ -1,6 +1,7 @@
-import { XapiAgent } from "./xapi-agent.model";
-import { XapiGroup } from "./xapi-group.model";
+import type { XapiAgent } from "./xapi-agent.model";
+import type { XapiGroup } from "./xapi-group.model";
 
+declare var require: any;
 export abstract class XapiActorBase {
   constructor(
     public name?: string,
@@ -12,11 +13,16 @@ export abstract class XapiActorBase {
 
   abstract readonly objectType: 'Agent' | 'Group';
 
-  static fromRaw(raw: any): XapiAgent | XapiGroup {
-    return raw.objectType === 'Group'
-      ? XapiGroup.fromRaw(raw)
-      : XapiAgent.fromRaw(raw);
+
+  static fromRaw(raw: any): XapiGroup | XapiAgent {
+  if (raw.objectType === 'Group') {
+    const { XapiGroup } = require("./xapi-group.model");
+    return XapiGroup.fromRaw(raw);
+  } else {
+    const { XapiAgent } = require("./xapi-agent.model");
+    return XapiAgent.fromRaw(raw);
   }
+}
 
   abstract toJSON(): any;
 }

online-survey-app/src/app/shared/_services/xapi.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class XapiService {
+
+  constructor(private http: HttpClient) { }
+
+  private getHeaders(auth: string): HttpHeaders {
+    return new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Authorization': 'Basic ' + btoa(auth)
+    });
+  }
+
+
+  async sendStatement(statement: any, lrsEndpointUrl:string, auth: string): Promise<void> {
+    const headers = this.getHeaders(auth);
+      let endpoint = lrsEndpointUrl + "/statements";
+      try {
+        await this.http.post(endpoint, statement, { headers }).toPromise();
+      } catch (err) {
+        console.warn('Failed to send, saving offline', err);
+      }
+  };
+}

online-survey-app/src/app/tangy-forms/tangy-forms-player/tangy-forms-player.component.ts

@@ -7,6 +7,7 @@ import { TangyFormService } from '../tangy-form.service';
 import { XapiAgent } from '../../model/xapi-agent.model';
 import { XapiGroup } from 'src/app/model/xapi-group.model';
 import { XapiActorBase } from 'src/app/model/xapi-actor-base.model';
+import { XapiService } from 'src/app/shared/_services/xapi.service';
 
 const sleep = (milliseconds) => new Promise((res) => setTimeout(() => res(true), milliseconds))
 
@@ -35,6 +36,7 @@ export class TangyFormsPlayerComponent implements OnInit {
   xapiEndpoint?: string;
   xapiAuth?: string;
   xapiRegistration?: string;
+  xapiStatementsWithActor: any[] = [];
 
 
   throttledSaveLoaded
@@ -46,7 +48,8 @@ export class TangyFormsPlayerComponent implements OnInit {
     private router: Router, 
     private httpClient:HttpClient,
     private caseService: CaseService,
-    private tangyFormService: TangyFormService
+    private tangyFormService: TangyFormService,
+    private xapiService: XapiService
   ) { 
     this.router.events.subscribe(async (event) => {
         this.formId = this.route.snapshot.paramMap.get('formId');
@@ -59,12 +62,10 @@ export class TangyFormsPlayerComponent implements OnInit {
 
   async ngOnInit(): Promise<any> {
     this.window = window;
-
     // we are using the query parameters to get the actor and auth information
     this.route.queryParamMap.subscribe((query) => {
       const actorRaw = query.get('actor');
       const authRaw = query.get('auth');
-
       this.xapiEndpoint = query.get('endpoint');
       this.xapiRegistration = query.get('registration');
 
@@ -130,7 +131,7 @@ export class TangyFormsPlayerComponent implements OnInit {
 
     if (this.caseService) {
       tangyForm.addEventListener('TANGY_FORM_UPDATE', async (event) => {
-        let response = event.target.store.getState()
+        let response = event.target.store.getState();
         this.throttledSaveResponse(response)
 
         if (this.caseService.eventForm && !this.caseService.eventForm.formResponseId) {
@@ -143,7 +144,24 @@ export class TangyFormsPlayerComponent implements OnInit {
       tangyForm.addEventListener('after-submit', async (event) => {
         event.preventDefault();
         let response = event.target.store.getState();
+        this.xapiStatementsWithActor = [];
+        if (response && response.items) {
+          for (let item of response.items) {
+            if (item.inputs) {
+              for (let input of item.inputs) {
+                if (input.xapiStatement) {
+                  input.xapiStatement = {...input.xapiStatement, actor: this.xapiActor}
+                  this.xapiStatementsWithActor.push(input.xapiStatement);
+                }
+              }
+            }
+          }
+        }
         await this.saveResponse(response)
+        if(this.xapiStatementsWithActor && this.xapiStatementsWithActor.length > 0 && this.xapiEndpoint && this.xapiAuth) {
+          await this.xapiService.sendStatement(this.xapiStatementsWithActor, this.xapiEndpoint, this.xapiAuth);
+        }
+
         if (this.caseService && this.caseService.caseEvent && this.caseService.eventForm) {
           this.caseService.markEventFormComplete(this.caseService.caseEvent.id, this.caseService.eventForm.id)
           await this.caseService.save()