@sparkle-learning/core 0.0.53 → 0.0.55

package/dist/collection/components/layout/page/page.js

@@ -3,7 +3,7 @@ import templates from './templates';
 import { modalController, alertController } from '@ionic/core';
 import { AuthStore } from '../../../stores/auth.store';
 import userStore from '../../../stores/user.store';
-import { StoreService } from "../../../services/store.service";
+import { StoreService } from '../../../services/store.service';
 import { SignalRService } from '../../../services/signalR.service';
 import signalRStore from '../../../stores/signalR.store';
 export class SparklePage {
@@ -11,7 +11,15 @@ export class SparklePage {
     this.presentation = false;
     this.page = { title: null, path: null, body: null, pageInfo: null };
     this.isLesson = false;
-    this.handleFacilitatorNavigationChange = (url) => {
+    this.eventEmitter = (user, data) => {
+      let event = new CustomEvent('receivedSignalREvent', { detail: JSON.parse(data) });
+      document.body.dispatchEvent(event);
+    };
+    this.pollSubmissionEventEmitter = (type, data) => {
+      let event = new CustomEvent('receivedPollSubmissionSignalREvent', { detail: { data: data, type: type } });
+      document.body.dispatchEvent(event);
+    };
+    this.handleFacilitatorNavigationChange = url => {
       this.history.replace(url, {});
     };
     this.validateFetch = (response) => {
@@ -24,7 +32,7 @@ export class SparklePage {
       this.badFetch = null;
       this.page = page;
       if (this.presentation) {
-        this.page = Object.assign(Object.assign({}, this.page), { previousUrl: "/presentation" + this.page.previousUrl, nextUrl: "/presentation" + this.page.nextUrl });
+        this.page = Object.assign(Object.assign({}, this.page), { previousUrl: '/presentation' + this.page.previousUrl, nextUrl: '/presentation' + this.page.nextUrl });
       }
       StoreService.getInstance().UpdateTocPageInfo(this.page.pageInfo);
       this.isLesson = this.page.pageInfo.pageId > 0;
@@ -36,7 +44,7 @@ export class SparklePage {
         title: error.statusText,
         body: null,
         path: null,
-        pageInfo: null
+        pageInfo: null,
       };
     };
   }
@@ -47,19 +55,25 @@ export class SparklePage {
   }
   componentDidLoad() {
     if (this.presentation) {
-      signalRStore.onChange("connected", (connected) => {
+      signalRStore.onChange('connected', connected => {
         if (connected) {
-          SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+          SignalRService.getInstance().connection.on('SendMessage', this.eventEmitter);
+          SignalRService.getInstance().connection.on('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
+          SignalRService.getInstance().connection.on('PollSubmission', this.pollSubmissionEventEmitter);
+        }
+        else {
+          SignalRService.getInstance().connection.off('SendMessage', this.eventEmitter);
+          SignalRService.getInstance().connection.off('PollSubmission', this.eventEmitter);
+          SignalRService.getInstance().connection.off('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
         }
       });
     }
   }
   fetchPage(path, oldPath) {
-    if (SignalRService.getInstance().connection.connectionState == "Connected") {
-      SignalRService.getInstance().callSignalR("OnStudentNavigate", { url: window.location.href });
+    if (SignalRService.getInstance().connection._connectionState == 'Connected') {
+      SignalRService.getInstance().callSignalR('OnStudentNavigate', { url: window.location.href });
       if (this.presentation) {
-        console.log('register listener');
-        SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+        SignalRService.getInstance().connection.on('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
       }
     }
     if (path === null || path === oldPath) {
@@ -130,7 +144,7 @@ export class SparklePage {
   async presentFeedbackModal() {
     const modal = await modalController.create({
       component: 'sparkle-feedback',
-      cssClass: 'sparkle-modal sparkle-feedback-modal'
+      cssClass: 'sparkle-modal sparkle-feedback-modal',
     });
     await modal.present();
   }
@@ -161,22 +175,21 @@ export class SparklePage {
           text: 'Cancel',
           role: 'cancel',
           cssClass: 'secondary',
-          handler: () => {
-          }
-        }, {
+          handler: () => { },
+        },
+        {
           text: 'Ok',
-          handler: (data) => {
-          }
-        }
-      ]
+          handler: data => { },
+        },
+      ],
     });
     await alert.present();
   }
   openWindows() {
     //this.jwtService.updateDefaultCourseClassId(data);
-    window.open(window.location.origin + "/presentation" + this.path.replace(".json", ""), "_blank");
+    window.open(window.location.origin + '/presentation' + this.path.replace('.json', ''), '_blank');
     setTimeout(() => {
-      window.open(window.location.origin + "/presentation" + '/teacher' + this.path.replace(".json", ""), "_blank");
+      window.open(window.location.origin + '/presentation' + '/teacher' + this.path.replace('.json', ''), '_blank');
     }, 500);
   }
   renderControls() {
@@ -184,10 +197,10 @@ export class SparklePage {
       return (h("div", { class: "controls" },
         h("ion-button", { onClick: () => this.presentFeedbackModal() },
           h("ion-icon", { name: "chatbox-outline" })),
-        this.isLesson && userStore.state.user && userStore.state.user.Roles.indexOf('Facilitator') > -1 && h("ion-button", { onClick: () => this.openProjectorPage() },
-          h("ion-icon", { name: "desktop-outline" }))));
+        this.isLesson && userStore.state.user && userStore.state.user.Roles.indexOf('Facilitator') > -1 && (h("ion-button", { onClick: () => this.openProjectorPage() },
+          h("ion-icon", { name: "desktop-outline" })))));
     }
-    return "";
+    return '';
   }
   render() {
     if (this.path) {
@@ -199,13 +212,13 @@ export class SparklePage {
       const content = [
         h("main", { class: 'no-demo' },
           this.renderControls(),
-          h(Template, { page: page }))
+          h(Template, { page: page })),
       ];
       return content;
     }
     else {
-      return h("main", { class: 'no-demo' },
-        h("slot", null));
+      return (h("main", { class: 'no-demo' },
+        h("slot", null)));
     }
   }
   static get is() { return "sparkle-page"; }

package/dist/collection/components/sparkle-assignment/sparkle-assignment.css

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+}
+
+.assignment-footer-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.assignment-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.error {
+  color: red;
+  margin-right: 10px;
+}
+
+.success {
+  color: green;
+  margin-right: 10px;
+}
+
+.uploaded-image {
+  display: block;
+  max-height: 140px;
+  width: auto !important;
+}

package/dist/collection/components/sparkle-assignment/sparkle-assignment.js

@@ -0,0 +1,159 @@
+import { Component, Element, Prop, State, Event, Host, h, Listen } from '@stencil/core';
+import { AssignmentService } from '../../services/assignment.service';
+import { TokenService } from '../../services/token.service';
+export class SparkleAssignment {
+  constructor() {
+    this.submitted = true;
+    this.assignmentLoading = false;
+    this.onSubmit = async (event) => {
+      event.preventDefault();
+      debugger;
+      const formElements = event.currentTarget.querySelectorAll('sparkle-input,sparkle-file-upload');
+      const formData = Array.from(formElements).reduce((acc, formElement) => {
+        const { name, type, value } = formElement;
+        //const name = formElement.getAttribute('name');
+        let checked = false;
+        if (formElement.querySelector('ion-item')) {
+          checked = formElement.querySelector('ion-item').classList.contains('item-checkbox-checked');
+        }
+        if (name) {
+          if (type === 'checkbox') {
+            acc[name] = checked;
+          }
+          else {
+            acc[name] = value;
+          }
+        }
+        return acc;
+      }, {});
+      const requiredFields = Array.from(formElements).filter((formElement) => formElement.required);
+      const requiredFieldsFilledIn = requiredFields.every((formElement) => formElement.value !== '');
+      if (requiredFieldsFilledIn) {
+        this.formSubmitted.emit(formData);
+        //call api
+      }
+      else {
+        alert('Please fill in all required fields');
+      }
+      this.assignmentLoading = true;
+      this.errorMessage = '';
+      this.successMessage = '';
+      var assignmentModel = {
+        AssignmentData: JSON.stringify(formData),
+        AssignmentName: this.name,
+      };
+      console.log(assignmentModel);
+      try {
+        const result = await AssignmentService.getInstance().createAssignment(assignmentModel);
+        if (result.Succeeded) {
+          this.assignmentLoading = false;
+          this.successMessage = 'Assignment submitted Successfully.';
+          this.resetForm();
+          //reset all inputs
+        }
+        else {
+          this.assignmentLoading = false;
+          this.errorMessage = 'There is an error while posting to feed.';
+        }
+      }
+      catch (ex) {
+        this.assignmentLoading = false;
+      }
+    };
+  }
+  fileUploaded(e) {
+    console.log('fileUploaded', e);
+  }
+  resetForm() {
+    const form = this.el.querySelector('form');
+    if (form) {
+      form.reset();
+    }
+  }
+  renderUserInfo() {
+    let authUser = TokenService.getInstance().getAuthUserSync();
+    if (authUser && authUser.JWToken) {
+      return (h("ion-avatar", { class: "header-avatar", slot: "end" }, authUser.PhotoUrl ? h("img", { src: authUser.PhotoUrl }) : h("img", { src: "/assets/img/user.png" })));
+    }
+    else {
+      return (h("ion-button", { slot: "end", href: "/login" }, "Login to Post"));
+    }
+  }
+  isAuthenticated() {
+    return TokenService.getInstance().isAuthenticated();
+  }
+  render() {
+    const userInfo = this.renderUserInfo();
+    return (h(Host, null,
+      h("ion-card", null,
+        h("ion-item", { class: "header ion-justify-content-between", lines: "full" },
+          h("ion-label", null, this.name),
+          userInfo),
+        h("ion-card-content", null,
+          h("form", { onSubmit: this.onSubmit },
+            h("slot", null),
+            h("div", { class: "assignment-footer-container" },
+              h("div", { class: "assignment-footer" },
+                h("div", null,
+                  h("div", { class: "error" }, this.errorMessage),
+                  h("div", { class: "success" }, this.successMessage)),
+                h("div", null, this.assignmentLoading ? h("ion-spinner", { color: "primary" }) : ''),
+                h("ion-button", { type: "submit", slot: "end", size: "default", disabled: this.assignmentLoading || !this.isAuthenticated() }, "Submit"))))))));
+  }
+  static get is() { return "sparkle-assignment"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-assignment.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-assignment.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "submitted": {},
+    "assignmentLoading": {},
+    "errorMessage": {},
+    "successMessage": {}
+  }; }
+  static get events() { return [{
+      "method": "formSubmitted",
+      "name": "formSubmitted",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "fileUploaded",
+      "method": "fileUploaded",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.css

@@ -8,6 +8,13 @@ sparkle-character-intro .character-phrase-block {
   align-items: center;
   padding: 20px;
 }
+sparkle-character-intro.shift-up .character-phrase-block {
+  padding-top: 0px !important;
+}
+sparkle-character-intro.shift-up-overlap .character-phrase-block {
+  padding-top: 0px !important;
+  margin-top: -50px !important;
+}
 sparkle-character-intro .character-phrase-block.right {
   justify-content: flex-end;
 }
@@ -21,7 +28,7 @@ sparkle-character-intro .character-phrase-block.left .character-image-block {
   order: 1;
 }
 sparkle-character-intro .character-box {
-  min-width: 300px;
+  width: 80%;
   border-radius: 15px;
   background: var(--sparkle-character-background-color);
   color: var(--text-color);

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.js

@@ -1,4 +1,4 @@
-import { Component, Element, Prop, getAssetPath, h } from '@stencil/core';
+import { Component, Element, Prop, getAssetPath, Host, h } from '@stencil/core';
 export class SparkleCharacterIntro {
   constructor() {
     this.character = 'jen';
@@ -8,11 +8,12 @@ export class SparkleCharacterIntro {
     console.log(this.character);
   }
   render() {
-    return (h("div", { class: `character-phrase-block ${this.position}` },
-      h("div", { class: `character-box ${this.position}` },
-        h("slot", null)),
-      h("div", { class: `character-image-block ${this.position}` },
-        h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') }))));
+    return (h(Host, null,
+      h("div", { class: `character-phrase-block ${this.position}` },
+        h("div", { class: `character-box ${this.position}` },
+          h("slot", null)),
+        h("div", { class: `character-image-block ${this.position}` },
+          h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') })))));
   }
   static get is() { return "sparkle-character-intro"; }
   static get originalStyleUrls() { return {
@@ -62,3 +63,6 @@ export class SparkleCharacterIntro {
   }; }
   static get elementRef() { return "el"; }
 }
+//README
+//To set custom margin top use following class selector
+//sparkle-character-intro.shift-up-overlap .character-phrase-block { maring-top:-100px !important;}

package/dist/collection/components/sparkle-course-root/sparkle-course-root.js

@@ -1,4 +1,4 @@
-import { Component, State, Event, Watch, Build, h } from '@stencil/core';
+import { Component, State, Event, Watch, Build, h, Listen } from '@stencil/core';
 import { injectHistory } from '@stencil/router';
 import { PrivateRoute } from '../../PrivateRoute';
 import { AssetsService } from '../../services/core/assets.service';
@@ -14,7 +14,7 @@ export class SparkleCourseRoot {
     this.config = {
       appUrl: 'http://localhost:3333',
       globalAssetsUrl: 'http://localhost:3333/assets',
-      apiUrl: 'https://localhost:44399/',
+      apiUrl: 'https://localhost:44369/',
       quizPath: this.quizPath,
       tocPath: this.tocPath,
       menu: {
@@ -63,6 +63,10 @@ export class SparkleCourseRoot {
     var sidebar = document.getElementById('onlineStudents');
     await sidebar.show();
   }
+  useDidLogin(event) {
+    console.log('Received the userDidLogInevent: ', event.detail);
+    return h("stencil-router-redirect", { url: "/home" });
+  }
   renderPage(path) {
     return (h("stencil-route", { url: '/' + path, routeRender: props => [
         this.renderHeaderAndMenu(),
@@ -181,5 +185,12 @@ export class SparkleCourseRoot {
       "propName": "isMenuToggled",
       "methodName": "lockScroll"
     }]; }
+  static get listeners() { return [{
+      "name": "userDidLogIn",
+      "method": "useDidLogin",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }
 injectHistory(SparkleCourseRoot);

package/dist/collection/components/sparkle-discussion/sparkle-discussion-questions/sparkle-discussion-questions.js

@@ -23,9 +23,10 @@ export class SparkleDiscussionQuestions {
     //console.log(question, option);
     SignalRService.getInstance().callSignalR('PollSubmission', {
       questionId: question.questionId,
-      question: question.question,
+      question: question.questionText,
       answer: option.option,
-      responseType: question.responseType,
+      responseType: question.questionType,
+      pageUrl: window.location.href,
     });
   }
   addSuggestion(evt, question) {
@@ -39,6 +40,7 @@ export class SparkleDiscussionQuestions {
         question: question.questionText,
         answer: inputVal.value,
         responseType: question.questionType,
+        pageUrl: window.location.href,
       });
       //   this.dataSvc.callSignalR(
       //     {

package/dist/collection/components/sparkle-discussion/sparkle-discussion-results/sparkle-discussion-results.js

@@ -1,5 +1,6 @@
 import { Component, Element, State, Prop, Listen, h, Watch } from '@stencil/core';
 import { SignalRService } from '../../../services/signalR.service';
+import signalRStore from '../../../stores/signalR.store';
 export class SparkleDiscussionResults {
   constructor() {
     this.allowPostToFeed = false;
@@ -21,10 +22,10 @@ export class SparkleDiscussionResults {
       var detail = evt.detail;
       if (detail.type == 'list') {
         detail.data.forEach(element => {
-          if (element.responseType == 3) {
+          if (element.responseType == 'TEXT') {
             this.addToWordCloud(element);
           }
-          else if (element.responseType == 1) {
+          else if (element.responseType == 'MULTIPLE-CHOICE') {
             this.addToBarChart(element);
           }
         });
@@ -34,10 +35,10 @@ export class SparkleDiscussionResults {
       }
       else {
         detail = detail.data;
-        if (detail.responseType == 3) {
+        if (detail.responseType == 'TEXT') {
           this.addToWordCloud(detail);
         }
-        else if (detail.responseType == 1) {
+        else if (detail.responseType == 'MULTIPLE-CHOICE') {
           this.addToBarChart(detail);
         }
       }
@@ -83,13 +84,18 @@ export class SparkleDiscussionResults {
   componentDidLoad() {
     if (this.questions) {
       this.setupData(this.questions);
+      signalRStore.onChange('connected', connected => {
+        if (connected && this.isTeacherMode) {
+          SignalRService.getInstance().callSignalR('GetPollSubmission', { pageUrl: window.location.href });
+        }
+      });
     }
   }
   setupData(questions) {
     this.setupResponseGraph(questions);
-    if (this.isTeacherMode) {
-      SignalRService.getInstance().callSignalR('GetPollSubmission', {});
-    }
+    // if (this.isTeacherMode) {
+    //   SignalRService.getInstance().callSignalR('GetPollSubmission', {});
+    // }
   }
   resetPollData() {
     SignalRService.getInstance().callSignalR('ResetPollData', {});
@@ -259,9 +265,9 @@ export class SparkleDiscussionResults {
       "methodName": "questionsChaged"
     }]; }
   static get listeners() { return [{
-      "name": "body:receivedPollSubmissionSignalREvent",
+      "name": "receivedPollSubmissionSignalREvent",
       "method": "gotServerUpdate",
-      "target": undefined,
+      "target": "body",
       "capture": false,
       "passive": false
     }]; }

package/dist/collection/components/sparkle-discussion/sparkle-discussion.css

@@ -0,0 +1,5 @@
+sparkle-discussion{
+    border: 1px solid var(--line-rule-color);
+    display: block;
+    padding: 12px;
+}

package/dist/collection/components/sparkle-discussion/sparkle-discussion.js

@@ -4,10 +4,11 @@ export class SparkleDiscussion {
   constructor() {
     this.allowPostToFeed = false;
     this.feedStartingText = 'My suggestions are:';
-    this.isTeacherMode = true;
+    this.isTeacherMode = false;
     this.quizData = [];
   }
   async componentDidLoad() {
+    this.isTeacherMode = this.isTeacherMode == false ? window.location.href.indexOf('/presentation/course') > -1 : this.isTeacherMode;
     const config = EnvironmentConfigService.getInstance().get('sparkle');
     let allQuizData = await AssetsService.getInstance().loadJsonFile(config.quizPath);
     if (allQuizData) {
@@ -17,6 +18,7 @@ export class SparkleDiscussion {
         questionIds.forEach(id => {
           this.quizData = [...this.quizData, allQuizData[+id]];
         });
+        console.log('QUIZ Data', this.quizData);
       }
     }
   }
@@ -69,7 +71,7 @@ export class SparkleDiscussion {
     },
     "isTeacherMode": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -83,7 +85,7 @@ export class SparkleDiscussion {
       },
       "attribute": "is-teacher-mode",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "questionIds": {
       "type": "string",