@sparkle-learning/core 0.0.53 → 0.0.55

package/dist/collection/components/sparkle-feed-post/sparkle-feed-post.js

@@ -1,5 +1,9 @@
 import { Component, Element, State, Prop, Method, h, Host } from '@stencil/core';
-import { EnvironmentConfigService } from '../../services';
+import { AssignmentService } from '../../services/assignment.service';
+import { FeedService } from '../../services/feed.service';
+import { MediaService } from '../../services/media.service';
+import { TokenService } from '../../services/token.service';
+import { SparkleGlobal } from '../../util';
 export class SparkleFeedPost {
   // @Prop({ connect: 'ion-toast-controller' })
   // toastCtrl: HTMLIonToastControllerElement;
@@ -13,34 +17,11 @@ export class SparkleFeedPost {
   setText(text) {
     this.postText = text;
   }
-  // async postToFeed() {
-  //   const sparkleConfig: EnvironmentSparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
-  //   const tocData = await AssetsService.getInstance().loadJsonFile<ICourse>(sparkleConfig.tocPath);
-  //   var model = {
-  //     CourseId: tocData.id,
-  //     MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
-  //     PostText: MyGoalTemplate(this.name.value, this.goalUpdateText.value, this.progress),
-  //     PostTextJSON: MyGoalTemplateJSON(this.name.value, this.goalUpdateText.value, this.progress),
-  //     IsPublic: this.public,
-  //     ExternalResourceUrl: "",
-  //   }
-  //   const result = await FeedService.getInstance().createPost(model);
-  //   if (result.Succeeded) {
-  //     //show success toast
-  //   }
-  // }
   isAuthenticated() {
-    try {
-      var sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
-      if (!!sparkleConfig && !!sparkleConfig.auth && !!sparkleConfig.auth.getToken()) {
-        return true;
-      }
-    }
-    catch (_a) {
-      return false;
-    }
+    return TokenService.getInstance().isAuthenticated();
   }
-  submitPost() {
+  async submitPost() {
+    this.postLoading = true;
     this.errorMessage = '';
     this.successMessage = '';
     //let formData = new FormData(this.el.querySelector("form")) as any;
@@ -51,60 +32,56 @@ export class SparkleFeedPost {
       PostText: this.postText,
       IsPublic: isPublic.checked,
       ExternalResourceUrl: postExternalUrl.value,
-      MiniAppId: 1,
+      MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
       AssignmentName: this.assignmentName,
       AssignmentData: '',
+      PostTextJSON: null,
     };
-    // this.dataSvc.saveData(data, '/api/class/feed').subscribe(
-    //   x => {
-    //     this.successMessage = 'Posted Successfully.';
-    //     // this.presentToast('Success');
-    //   },
-    //   error => {
-    //     this.errorMessage = 'There is an error while posting.';
-    //     //  this.presentToast('There is an error');
-    //   },
-    // );
-    //TODO can we return data from the dataSvc so we know if it's successful and can update the form? (Perhaps replace it with the post itself?)
-    // if (this.assignmentName) {
-    //   data.AssignmentData = JSON.stringify({ text: data.PostText, url: data.ExternalResourceUrl });
-    //   this.dataSvc.saveData(data, '/api/student/assignment-response').subscribe(
-    //     x => {
-    //       this.successMessage = 'Posted Successfully.';
-    //       // this.presentToast('Success');
-    //     },
-    //     error => {
-    //       this.errorMessage = 'There is an error while posting.';
-    //       //  this.presentToast('There is an error');
-    //     },
-    //   );
-    // }
+    const result = await FeedService.getInstance().createPost(data);
+    if (result.Succeeded) {
+      this.postLoading = false;
+      //show success toast
+      this.successMessage = 'Posted Successfully.';
+      this.postText = '';
+      this.externalResourceUrl = '';
+      this.uploadedImage = '';
+    }
+    else {
+      this.postLoading = false;
+      this.errorMessage = 'There is an error while posting to feed.';
+    }
+    if (this.assignmentName) {
+      var assignmentModel = {
+        AssignmentData: JSON.stringify({ text: data.PostText, url: data.ExternalResourceUrl }),
+        AssignmentName: this.assignmentName,
+      };
+      await AssignmentService.getInstance().createAssignment(assignmentModel);
+    }
   }
-  uploadImage(evt) {
-    // this.uploadImageLoading = true;
-    // var files = evt.target.files;
-    // this.dataSvc.uploadImage(files, '/api/mediaitems/upload').subscribe(
-    //   x => {
-    //     this.uploadImageLoading = false;
-    //     this.uploadedImage = x.length > 0 ? x[0].FullImageUrl : '';
-    //     this.externalResourceUrl = x.length > 0 ? x[0].FullImageUrl : '';
-    //     //this.successMessage = 'Posted Successfully.'
-    //     // this.presentToast('Success');
-    //   },
-    //   error => {
-    //     this.uploadImageLoading = false;
-    //     this.errorMessage = 'There is an error while uploading an image.';
-    //   },
-    // );
+  async uploadImage(evt) {
+    this.uploadImageLoading = true;
+    var files = evt.target.files;
+    let result = await MediaService.getInstance().uploadImage(files);
+    if (result.Succeeded) {
+      console.log(result);
+      this.uploadImageLoading = false;
+      this.uploadedImage = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
+      this.externalResourceUrl = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
+    }
+    else {
+      this.uploadImageLoading = false;
+      this.errorMessage = 'There is an error while uploading an image.';
+    }
   }
   selectFile() {
-    var fileInput = document.getElementById('fileInput');
+    var fileInput = this.el.querySelector('#fileInput');
     fileInput.click();
   }
   renderUserInfo() {
-    var tokenInfo = { Token: null, ProfileImageUrl: null };
-    if (tokenInfo != null && tokenInfo.Token) {
-      return (h("ion-avatar", { class: "header-avatar", slot: "end" }, tokenInfo.ProfileImageUrl ? h("img", { src: tokenInfo.ProfileImageUrl }) : h("img", { src: "/assets/img/avatar.png" })));
+    let authUser = TokenService.getInstance().getAuthUserSync();
+    //var tokenInfo = { Token: null, ProfileImageUrl: null };
+    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"));
@@ -124,7 +101,7 @@ export class SparkleFeedPost {
                 h("ion-textarea", { class: "PostText", required: true, placeholder: "Post Text", name: "PostText", value: this.postText })),
               h("ion-item", { class: "padding" },
                 h("ion-input", { class: "PostExternalUrl", required: true, type: "text", placeholder: "URL", name: "ExternalResourceUrl", value: this.externalResourceUrl })),
-              this.uploadedImage ? (h("ion-item", { class: "padding" },
+              this.uploadedImage ? (h("ion-item", { class: "ion-padding", lines: "none" },
                 h("img", { class: "uploaded-image", src: this.uploadedImage }))) : (''),
               h("ion-item", { lines: "none" },
                 h("input", { type: "file", id: "fileInput", onChange: evt => this.uploadImage(evt), style: { display: 'none' }, accept: "image/*" }),
@@ -140,7 +117,8 @@ export class SparkleFeedPost {
                   h("div", null,
                     h("div", { class: "error" }, this.errorMessage),
                     h("div", { class: "success" }, this.successMessage)),
-                  h("ion-button", { slot: "end", size: "default", onClick: evt => this.submitPost(), disabled: !this.isAuthenticated() }, "Post")))))))));
+                  h("div", null, this.postLoading ? h("ion-spinner", { color: "primary" }) : ''),
+                  h("ion-button", { slot: "end", size: "default", onClick: evt => this.submitPost(), disabled: this.postLoading || !this.isAuthenticated() }, "Post")))))))));
   }
   static get is() { return "sparkle-feed-post"; }
   static get originalStyleUrls() { return {
@@ -191,7 +169,8 @@ export class SparkleFeedPost {
     "uploadedImage": {},
     "successMessage": {},
     "externalResourceUrl": {},
-    "uploadImageLoading": {}
+    "uploadImageLoading": {},
+    "postLoading": {}
   }; }
   static get methods() { return {
     "setText": {

package/dist/collection/components/sparkle-file-upload/sparkle-file-upload.js

@@ -0,0 +1,105 @@
+import { Component, Element, Event, State, Prop, h, Host } from '@stencil/core';
+import { MediaService } from '../../services/media.service';
+export class SparkleFileUpload {
+  constructor() {
+    this.uploadImageLoading = false;
+  }
+  componentDidLoad() { }
+  async uploadImage(evt) {
+    this.uploadImageLoading = true;
+    var files = evt.target.files;
+    let result = await MediaService.getInstance().uploadImage(files);
+    if (result.Succeeded) {
+      console.log(result);
+      this.uploadImageLoading = false;
+      this.uploadedImage = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
+      this.value = this.uploadedImage;
+      this.fileUploaded.emit(this.uploadedImage);
+    }
+    else {
+      this.uploadImageLoading = false;
+      this.errorMessage = 'There is an error while uploading an image.';
+    }
+  }
+  selectFile() {
+    var fileInput = this.el.shadowRoot.querySelector('#fileInput');
+    fileInput.click();
+  }
+  render() {
+    return (h(Host, null,
+      this.uploadedImage ? (h("ion-item", { class: "ion-padding", lines: "none" },
+        h("img", { class: "uploaded-image", src: this.uploadedImage }))) : (''),
+      h("ion-item", { lines: "none" },
+        h("input", { type: "file", id: "fileInput", onChange: evt => this.uploadImage(evt), style: { display: 'none' }, accept: "image/*,application/pdf,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint,text/plain" }),
+        this.uploadImageLoading ? h("ion-spinner", { color: "primary" }) : '',
+        h("ion-button", { slot: "start", onClick: evt => this.selectFile() },
+          h("ion-icon", { name: "add" }),
+          "Upload Image"))));
+  }
+  static get is() { return "sparkle-file-upload"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-file-upload.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-file-upload.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "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 {
+    "errorMessage": {},
+    "uploadedImage": {},
+    "uploadImageLoading": {}
+  }; }
+  static get events() { return [{
+      "method": "fileUploaded",
+      "name": "fileUploaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,212 @@
+import { Component, h, Event, Prop, Watch } from '@stencil/core';
+export class SparkleInput {
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this._options = JSON.parse(newValue);
+    }
+    else {
+      this._options = newValue;
+    }
+  }
+  componentWillLoad() {
+    if (this.type == 'select') {
+      this.arrayDataWatcher(this.options);
+    }
+  }
+  handleChange(event) {
+    const value = this.type === 'checkbox' ? event.target.checked : event.target.value;
+    this.value = value;
+    this.valueChanged.emit(value);
+    if (this.type === 'checkbox') {
+      this.checkedChanged.emit(value);
+    }
+  }
+  render() {
+    switch (this.type) {
+      case 'text' || 'email' || 'number' || 'tel' || 'url':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-label", null, this.label),
+            h("ion-input", { type: this.type, value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), required: true }))));
+      case 'textarea':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-label", null, this.label),
+            h("ion-textarea", { value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), required: true }))));
+      case 'checkbox':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-checkbox", { slot: "start", checked: this.checked, onChange: (event) => this.handleChange(event) }),
+            h("ion-label", null, this.label))));
+      case 'select':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-select", { value: this.value, placeholder: this.label, onIonChange: event => this.handleChange(event) }, this._options.map(option => (h("ion-select-option", { key: option.value, value: option.value }, option.label)))))));
+      default:
+        return null;
+    }
+  }
+  static get is() { return "sparkle-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-input.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text' | 'textarea' | 'checkbox' | 'select'",
+        "resolved": "\"checkbox\" | \"select\" | \"text\" | \"textarea\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false
+    },
+    "options": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "{ value: string; label: string }[] | string",
+        "resolved": "string | { value: string; label: string; }[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "options",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChanged",
+      "name": "valueChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      }
+    }, {
+      "method": "checkedChanged",
+      "name": "checkedChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "options",
+      "methodName": "arrayDataWatcher"
+    }]; }
+}

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

@@ -69,7 +69,8 @@ export class PageLogin {
         Password: this.password.value,
         RememberClient: this.rememberMe.value
       });
-      sessionStorage.setItem('rememberMe', this.rememberMe.value == true ? '1' : '0');
+      console.log(result);
+      //sessionStorage.setItem('rememberMe', this.rememberMe.value == true ? '1' : '0');
       this.userDidLogIn.emit({ loginStatus: true });
     }
   }

package/dist/collection/components/sparkle-quiz/{sparkle-quiz/sparkle-quiz.css → sparkle-quiz-old/sparkle-quiz-old.css}

@@ -1,4 +1,4 @@
-sparkle-quiz {
+sparkle-quiz-old {
   display: block;
   font-family: var(--font-family);
   --sparkle-quiz-question-container-padding: 10px 0px;

package/dist/collection/components/sparkle-quiz/{sparkle-quiz/sparkle-quiz.js → sparkle-quiz-old/sparkle-quiz-old.js}

@@ -1,5 +1,5 @@
 import { Component, Prop, Listen, State, Event, Element, h } from '@stencil/core';
-export class SparkleQuiz {
+export class SparkleQuizOld {
   constructor() {
     this.type = 'TEXT';
     this.scale = 'FIVE-POINTS';
@@ -110,12 +110,12 @@ export class SparkleQuiz {
       return h("p", null, "No question found.");
     }
   }
-  static get is() { return "sparkle-quiz"; }
+  static get is() { return "sparkle-quiz-old"; }
   static get originalStyleUrls() { return {
-    "$": ["sparkle-quiz.scss"]
+    "$": ["sparkle-quiz-old.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["sparkle-quiz.css"]
+    "$": ["sparkle-quiz-old.css"]
   }; }
   static get properties() { return {
     "questionId": {

package/dist/collection/components/sparkle-quiz/{sparkle-quiz-v1.js → sparkle-quiz.js}

@@ -1,53 +1,52 @@
 import { Component, Prop, Watch, Listen, State, Event, Element, h } from '@stencil/core';
 import { AssetsService } from '../../services/core/assets.service';
-import { EnvironmentConfigService } from "../../services/environment/environment-config.service";
-export class SparkleQuizV1 {
+import { EnvironmentConfigService } from '../../services/environment/environment-config.service';
+export class SparkleQuiz {
   async loadQuestion() {
     if (this.quizData) {
       this.question = this.quizData[+this.questionId];
     }
   }
-  async componentWillLoad() {
-  }
+  async componentWillLoad() { }
   async componentDidLoad() {
     const config = EnvironmentConfigService.getInstance().get('sparkle');
     this.quizData = await AssetsService.getInstance().loadJsonFile(config.quizPath);
     await this.loadQuestion();
     this.quizAnswerChanged.emit({
       question: null,
-      answer: "1"
+      answer: '1',
     });
   }
   quizInputChangeHandler(event) {
     this.quizAnswerChanged.emit({
       question: event.detail.question,
-      answer: event.detail.value
+      answer: event.detail.value,
     });
   }
   quizFeedbackChangeHandler(event) {
     this.quizAnswerChanged.emit({
       question: event.detail.question,
-      answer: event.detail.value
+      answer: event.detail.value,
     });
   }
   quizSelectChangeHandler(event) {
     this.quizAnswerChanged.emit({
       question: event.detail.question,
-      answer: event.detail.value
+      answer: event.detail.value,
     });
   }
   quizOpinionChangeHandler(event) {
     this.quizAnswerChanged.emit({
       question: event.detail.question,
-      answer: event.detail.value
+      answer: event.detail.value,
     });
   }
   getQuestionFeedback() {
-    if (this.question.questionType == "MULTIPLE-CHOICE") {
+    if (this.question.questionType == 'MULTIPLE-CHOICE') {
       const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
       return feedbacks.length > 0 && feedbacks.map(feedback => h("small", null, feedback));
     }
-    else if (this.question.questionType == "FEEDBACK" || this.question.questionType == "TEXT") {
+    else if (this.question.questionType == 'FEEDBACK' || this.question.questionType == 'TEXT') {
       return this.question.feedback && h("small", null,
         " ",
         this.question.feedback);
@@ -57,43 +56,42 @@ export class SparkleQuizV1 {
     return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
   }
   renderQuestion() {
-    if (this.question.questionType == "MULTIPLE-CHOICE") {
+    if (this.question.questionType == 'MULTIPLE-CHOICE') {
       return h("sparkle-quiz-select", { question: this.question, allowMultiple: true });
     }
-    else if (this.question.questionType == "FEEDBACK") {
+    else if (this.question.questionType == 'FEEDBACK') {
       return h("sparkle-quiz-feedback", { question: this.question });
     }
-    else if (this.question.questionType == "TEXT") {
+    else if (this.question.questionType == 'TEXT') {
       return h("sparkle-quiz-input", { question: this.question });
     }
-    else if (this.question.questionType == "OPINION") {
+    else if (this.question.questionType == 'OPINION') {
       return h("sparkle-quiz-opinion", { question: this.question });
     }
-    else if (this.question.questionType == "POLL") {
+    else if (this.question.questionType == 'POLL') {
       return h("sparkle-quiz-poll", { question: this.question });
     }
   }
   render() {
     if (this.question) {
       let classes = {
-        'correct': this.submitted && this.correct,
-        'incorrect': this.submitted && !this.correct
+        correct: this.submitted && this.correct,
+        incorrect: this.submitted && !this.correct,
       };
-      return h("div", { class: classes },
+      return (h("div", { class: classes },
         this.renderQuestion(),
-        this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(),
-          this.getQuestionFeedback()]));
+        this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
     }
     else {
       return h("p", null, "No question found.");
     }
   }
-  static get is() { return "sparkle-quiz-v1"; }
+  static get is() { return "sparkle-quiz"; }
   static get originalStyleUrls() { return {
-    "$": ["sparkle-quiz-v1.scss"]
+    "$": ["sparkle-quiz.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["sparkle-quiz-v1.css"]
+    "$": ["sparkle-quiz.css"]
   }; }
   static get properties() { return {
     "questionId": {
@@ -180,7 +178,7 @@ export class SparkleQuizV1 {
         "text": ""
       },
       "complexType": {
-        "original": "{ answer: any, question: SparkleQuizQuestion }",
+        "original": "{ answer: any; question: SparkleQuizQuestion }",
         "resolved": "{ answer: any; question: SparkleQuizQuestion; }",
         "references": {
           "SparkleQuizQuestion": {