@sparkle-learning/core 0.0.16 → 0.0.20

package/dist/collection/components/mini-apps/sparkle-goals/sparkle-goals.js

@@ -1,38 +1,16 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Host, h } from '@stencil/core';
 import { modalController } from '@ionic/core';
+import { AppDataService } from '../../../services/appdata.service';
+import goalStore from '../../../stores/goal.store';
 export class SparkleGoals {
-  constructor() {
-    this.goals = [
-      {
-        StudentAppDataId: 1,
-        Title: "Save $50,000",
-        Description: "By saving atleat $100 minimun a month before retirement",
-        CategoryIcon: "/assets/img/home/my-mood.svg",
-        Category: "Financial",
-        Progress: 20
-      },
-      {
-        StudentAppDataId: 2,
-        Title: "Dream House",
-        Description: "Building a house in the middle of a mountain, middle of nowhere",
-        CategoryIcon: "/assets/img/home/find-help.svg",
-        Category: "Financial",
-        Progress: 50
-      },
-      {
-        StudentAppDataId: 3,
-        Title: "Retire By 35",
-        Description: "By something to create passive income and retire by 35.",
-        CategoryIcon: "/assets/img/home/my-goals.svg",
-        Category: "Financial",
-        Progress: 80
-      }
-    ];
+  async componentDidLoad() {
+    await AppDataService.getInstance().getAllGoals();
   }
-  async presentAddGoalModal(goal) {
+  async presentAddGoalModal(appData) {
     const modal = await modalController.create({
       component: "sparkle-goal-form",
-      componentProps: { goal: goal }
+      cssClass: "auto-height",
+      componentProps: { appData }
     });
     await modal.present();
   }
@@ -44,10 +22,13 @@ export class SparkleGoals {
           h("ion-icon", { name: "add-outline" }),
           "Add")),
       h("div", { class: "ion-padding" },
-        h("sparkle-cards", null, this.goals.map((goal) => h("div", { style: { "position": "relative" } },
-          h("sparkle-goal-item", { goal: goal }),
-          h("div", { style: { "position": "absolute", "top": "1.65em", "right": "2em" } },
-            h("ion-button", { size: "small", color: "primary", onClick: () => this.presentAddGoalModal(goal) }, "Edit"))))))));
+        h("sparkle-cards", null, goalStore.state.goals.map((goal) => h("div", { style: { "position": "relative" } },
+          h("sparkle-goal-item", { goal: goal.AppData, onEditGoal: () => this.presentAddGoalModal(goal) })))),
+        !goalStore.state.goalsLoading && goalStore.state.goals.length == 0
+          && h("div", { class: "text-center" }, "No Goals"),
+        goalStore.state.goalsLoading &&
+          h("div", { class: "text-center" },
+            h("ion-spinner", { name: "dots" })))));
   }
   static get is() { return "sparkle-goals"; }
   static get originalStyleUrls() { return {
@@ -56,30 +37,4 @@ export class SparkleGoals {
   static get styleUrls() { return {
     "$": ["sparkle-goals.css"]
   }; }
-  static get properties() { return {
-    "goals": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<IGoal>",
-        "resolved": "IGoal[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "IGoal": {
-            "location": "import",
-            "path": "../../../models/goal.model"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[\n    {\n      StudentAppDataId: 1,\n      Title: \"Save $50,000\",\n      Description: \"By saving atleat $100 minimun a month before retirement\",\n      CategoryIcon: \"/assets/img/home/my-mood.svg\",\n      Category: \"Financial\",\n      Progress: 20\n    },\n    {\n      StudentAppDataId: 2,\n      Title: \"Dream House\",\n      Description: \"Building a house in the middle of a mountain, middle of nowhere\",\n      CategoryIcon: \"/assets/img/home/find-help.svg\",\n      Category: \"Financial\",\n      Progress: 50\n    },\n    {\n      StudentAppDataId: 3,\n      Title: \"Retire By 35\",\n      Description: \"By something to create passive income and retire by 35.\",\n      CategoryIcon: \"/assets/img/home/my-goals.svg\",\n      Category: \"Financial\",\n      Progress: 80\n    }]"
-    }
-  }; }
 }

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww-comment-list/sparkle-gww-comment-list.css

@@ -1,7 +1,7 @@
-:host {
-  display: block;
-}
-.avatar {
-  width: 30px;
-  height: 30px;
-}
+:host {
+  display: block;
+}
+.avatar {
+  width: 30px;
+  height: 30px;
+}

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww-comment-list/sparkle-gww-comment-list.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Host, Element, h } from '@stencil/core';
+import { Component, Prop, Host, Element, h, getAssetPath } from '@stencil/core';
 export class SparkleGwwCommentList {
   dismiss(data) {
     // dismiss the closest modal and optionally pass back data
@@ -14,8 +14,10 @@ export class SparkleGwwCommentList {
         h("ion-title", null, "Comments")),
       h("ion-content", null, this.comments.map((comment) => h("ion-item", null,
         h("ion-avatar", { class: "avatar", slot: "start" },
-          h("img", { src: "/assets/img/user.png" })),
-        h("ion-label", null, comment.Comment))))));
+          h("img", { src: getAssetPath("/assets/img/user.png") })),
+        h("ion-label", null,
+          h("h2", null, comment.Name),
+          h("p", null, comment.Comment)))))));
   }
   static get is() { return "sparkle-gww-comment-list"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww-graph/sparkle-gww-graph.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww-item/sparkle-gww-item.css

@@ -1,29 +1,30 @@
-:host {
-  display: block;
-}
-.Card {
-  background-color: var(--background);
-  border-radius: 4px;
-  box-shadow: rgb(2 8 20 / 10%) 0px 0.175em 0.5em, rgb(2 8 20 / 8%) 0px 0.085em 0.175em;
-  color: var(--text-color--light);
-  display: flex;
-  flex-direction: column;
-  font-size: inherit;
-  font-weight: normal;
-  justify-content: flex-start;
-  line-height: 1.6;
-  transition: box-shadow 150ms ease 0s, transform 150ms ease 0s, -webkit-box-shadow 150ms ease 0s, -webkit-transform 150ms ease 0s;
-  width: 100%;
-  overflow: hidden;
-  margin-bottom: 20px;
-  height: auto;
-}
-
-.footer ion-item ion-avatar {
-  width: 30px;
-  height: 30px;
-}
-.comment-overview {
-  padding: 0px 16px;  
-  text-align: right;
-}
+:host {
+  display: block;
+}
+.Card {
+  background-color: var(--background);
+  border-radius: 4px;
+  box-shadow: rgb(2 8 20 / 10%) 0px 0.175em 0.5em, rgb(2 8 20 / 8%) 0px 0.085em 0.175em;
+  color: var(--text-color--light);
+  display: flex;
+  flex-direction: column;
+  font-size: inherit;
+  font-weight: normal;
+  justify-content: flex-start;
+  line-height: 1.6;
+  transition: box-shadow 150ms ease 0s, transform 150ms ease 0s, -webkit-box-shadow 150ms ease 0s, -webkit-transform 150ms ease 0s;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 20px;
+  height: auto !important;
+}
+
+.footer ion-item ion-avatar {
+  width: 30px;
+  height: 30px;
+}
+.comment-overview {
+  padding: 0px 16px;
+  text-align: right;
+  cursor: pointer;
+}

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww-item/sparkle-gww-item.js

@@ -1,5 +1,7 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Host, h, Prop, getAssetPath, State, Listen } from '@stencil/core';
+import { PostVisibility } from "../../../../models/class.model";
 import { modalController } from "@ionic/core";
+import { date, SparkleGlobal } from '../../../../util';
 export class SparkleGwwItem {
   async presentModal(comments) {
     const modal = await modalController.create({
@@ -8,7 +10,63 @@ export class SparkleGwwItem {
     });
     await modal.present();
   }
-  postComment() {
+  clearCommentField() {
+    this.comment = "";
+  }
+  renderMyMoodTemplate(data) {
+    return (h("div", null,
+      h("b", null, "Mood:"),
+      " ",
+      data.Mood,
+      h("br", null),
+      h("b", null, "Level:"),
+      " ",
+      data.Level,
+      h("br", null),
+      h("img", { src: data.MoodImage }),
+      "`"));
+  }
+  renderMyHealthTemplate(data) {
+    return (h("div", null,
+      h("b", null, "Heart rate:"),
+      " ",
+      data.HeartRate,
+      " bpm "));
+  }
+  renderMyGoalTemplate(data) {
+    return (h("div", null,
+      h("b", null, "Goal: "),
+      " ",
+      data.GoalTitle,
+      " ",
+      h("br", null),
+      h("b", null, "Update Text: "),
+      " ",
+      data.GoalText,
+      " ",
+      h("br", null),
+      h("sparkle-goal-progress", { percentage: data.GoalProgress })));
+  }
+  renderTemplate() {
+    if (this.post.PostTextJSON) {
+      var parseData = JSON.parse(this.post.PostTextJSON);
+      if (this.post.MiniAppId == SparkleGlobal.MY_GOALS_APP_ID) {
+        return this.renderMyGoalTemplate(parseData);
+      }
+      else if (this.post.MiniAppId == SparkleGlobal.MY_HEALTH_APP_ID) {
+        return this.renderMyHealthTemplate(parseData);
+      }
+      else if (this.post.MiniAppId == SparkleGlobal.MY_MOOD_APP_ID) {
+        return this.renderMyMoodTemplate(parseData);
+      }
+    }
+    else {
+      return ([
+        h("div", { innerHTML: this.post.PostText }),
+        this.post.ExternalResourceUrl && h("div", null,
+          h("img", { src: this.post.ExternalResourceUrl, class: "external-src-image" }))
+      ]);
+    }
   }
   render() {
     return (h(Host, { class: {
@@ -16,20 +74,16 @@ export class SparkleGwwItem {
       } },
       h("ion-item", { class: "header-item" },
         h("ion-avatar", { class: "header-avatar", slot: "start" },
-          h("img", { src: this.post.ProfileImageUrl ? this.post.ProfileImageUrl : "/assets/img/user.png" })),
+          h("img", { src: this.post.ProfileImageUrl ? this.post.ProfileImageUrl : getAssetPath("/assets/img/user.png") })),
         h("div", null,
           h("strong", { class: "requester-name", "text-capitalize": true }, this.post.Name),
           h("div", null,
             h("small", null,
               " ",
-              this.post.Created))),
+              date(this.post.CreatedOn)))),
         h("div", { slot: "end" },
-          h("ion-icon", { color: "primary", name: this.post.IsPublic ? "globe-outline" : "eye-outline" }))),
-      h("div", { class: "ion-padding" },
-        h("div", { innerHTML: this.post.PostText }),
-        this.post.ExternalResourceUrl && h("div", null,
-          h("img", { src: this.post.ExternalResourceUrl, class: "external-src-image" }))),
-      h("hr", null),
+          h("ion-icon", { color: "primary", name: this.post.PostVisibility == PostVisibility.Public ? "globe-outline" : "eye-outline" }))),
+      h("div", { class: "ion-padding" }, this.renderTemplate()),
       h("div", { class: "footer" },
         this.post.Comments.length > 0 &&
           h("div", { class: "comment-overview", slot: "end" },
@@ -51,9 +105,9 @@ export class SparkleGwwItem {
         h("hr", null),
         h("ion-item", { class: "comment-footer" },
           h("ion-avatar", { class: "footer-avatar", slot: "start" },
-            h("img", { src: "/assets/img/user.png" })),
-          h("ion-input", { type: "text", placeholder: "Write a comment" }),
-          h("ion-button", { onClick: () => this.postComment(), slot: "end", size: "small" }, "POST COMMENT")))));
+            h("img", { src: getAssetPath("/assets/img/user.png") })),
+          h("ion-input", { value: this.comment, onIonChange: (e) => this.comment = e.target.value, type: "text", placeholder: "Write a comment" }),
+          h("ion-button", { onClick: () => this.onPostComment({ Comment: this.comment, PostId: this.post.Id }), slot: "end", size: "small", disabled: !this.comment || this.loading }, this.loading ? h("ion-spinner", { name: "dots" }) : "POST COMMENT")))));
   }
   static get is() { return "sparkle-gww-item"; }
   static get originalStyleUrls() { return {
@@ -82,6 +136,52 @@ export class SparkleGwwItem {
         "tags": [],
         "text": ""
       }
+    },
+    "onPostComment": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Function",
+        "resolved": "Function",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loading",
+      "reflect": false
     }
   }; }
+  static get states() { return {
+    "comment": {}
+  }; }
+  static get listeners() { return [{
+      "name": "commentPosted",
+      "method": "clearCommentField",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

package/dist/collection/components/mini-apps/sparkle-gww/sparkle-gww.js

@@ -1,68 +1,21 @@
-import { State, Component, Host, h } from '@stencil/core';
+import { Component, Host, Event, h } from '@stencil/core';
+import { FeedService } from '../../../services/feed.service';
+import feedStore from '../../../stores/feed.store';
 export class SparkleGww {
   constructor() {
-    this.posts = [{
-        ClassFeedPostId: 1,
-        Name: "Akash Borad",
-        PostText: "This is test text",
-        ExternalResourceUrl: "https://girlsinc.blob.core.windows.net/mind-body-images/471fa231-0db6-4551-8c1e-cec8225678a1-med.jpg",
-        Created: new Date(),
-        Comments: [{
-            ClassFeedPostId: 1,
-            Created: new Date(),
-            Name: "Priyanka",
-            Comment: "test comment",
-            PostCommentId: 1,
-            ProfileImageUrl: ""
-          },
-          {
-            ClassFeedPostId: 1,
-            Created: new Date(),
-            Name: "Priyanka",
-            Comment: "test comment 1",
-            PostCommentId: 2,
-            ProfileImageUrl: ""
-          }],
-        IsPublic: true,
-        ProfileImageUrl: ""
-      },
-      {
-        ClassFeedPostId: 2,
-        Name: "Dhyani Borad",
-        PostText: "This is test text",
-        ExternalResourceUrl: "https://pin.it/4yxnuxypap6vjg",
-        Created: new Date(),
-        Comments: [{
-            ClassFeedPostId: 1,
-            Created: new Date(),
-            Name: "Priyanka",
-            Comment: "test comment",
-            PostCommentId: 3,
-            ProfileImageUrl: ""
-          }],
-        IsPublic: true,
-        ProfileImageUrl: ""
-      },
-      {
-        ClassFeedPostId: 1,
-        Name: "Piyu Borad",
-        PostText: "This is test text",
-        ExternalResourceUrl: "",
-        Created: new Date(),
-        Comments: [{
-            ClassFeedPostId: 1,
-            Created: new Date(),
-            Name: "Priyanka",
-            Comment: "comment 1",
-            PostCommentId: 4,
-            ProfileImageUrl: ""
-          }],
-        IsPublic: false,
-        ProfileImageUrl: ""
-      }];
+    this.postComment = async (model) => {
+      const result = await FeedService.getInstance().createPostComment(model);
+      if (result.Succeeded) {
+        this.commentPosted.emit();
+      }
+    };
+  }
+  async componentDidLoad() {
+    await FeedService.getInstance().getAllPosts();
   }
   render() {
-    return (h(Host, null, this.posts.map((item) => h("sparkle-gww-item", { post: item }))));
+    console.log(feedStore.state.postIdLoading, "Loading");
+    return (h(Host, null, feedStore.state.posts.map((item) => h("sparkle-gww-item", { key: item.Id, post: item, onPostComment: this.postComment, loading: feedStore.state.postIdLoading == item.Id }))));
   }
   static get is() { return "sparkle-gww"; }
   static get originalStyleUrls() { return {
@@ -71,7 +24,20 @@ export class SparkleGww {
   static get styleUrls() { return {
     "$": ["sparkle-gww.css"]
   }; }
-  static get states() { return {
-    "posts": {}
-  }; }
+  static get events() { return [{
+      "method": "commentPosted",
+      "name": "commentPosted",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
 }

package/dist/collection/components/mini-apps/sparkle-health/sparkle-health.css

@@ -1,3 +1,10 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}
+.health-image{
+  display: block;
+  max-width: 300px;
+  max-height: 200px;
+  width: auto;
+  height: auto;
+}

package/dist/collection/components/mini-apps/sparkle-health/sparkle-health.js

@@ -1,7 +1,11 @@
-import { Component, State, Host, h } from '@stencil/core';
+import { Component, State, Prop, Element, Host, h } from '@stencil/core';
 import { EnvironmentConfigService } from "../../../services/environment/environment-config.service";
 import { AssetsService } from "../../../services/core/assets.service";
-import { MyHealthTemplate, SparkleGlobal } from "../../../util";
+import { MyHealthTemplate, MyHealthTemplateJSON, SparkleGlobal } from "../../../util";
+import { FeedService } from '../../../services/feed.service';
+import feedStore from '../../../stores/feed.store';
+import { MediaService } from '../../../services/media.service';
+import mediaStore from '../../../stores/media.store';
 export class SparkleHealth {
   constructor() {
     this.uploadedImageUrl = "";
@@ -18,17 +22,26 @@ export class SparkleHealth {
       IsPublic: this.public,
       MiniAppId: SparkleGlobal.MY_HEALTH_APP_ID,
       CourseId: tocData.id,
+      PostTextJSON: MyHealthTemplateJSON(this.heartRate)
     };
-    console.log(model);
-    // this.store.dispatch(new fromRootStore.PostMood(model));
+    const result = await FeedService.getInstance().createPost(model);
+    if (result.Succeeded) {
+      this.history.replace('/home');
+    }
   }
-  uploadImage(event) {
+  async uploadImage(event) {
     this.submitted = true;
+    console.log(event.target.files);
     if (event.target.files && event.target.files[0]) {
-      //this.store.dispatch(new fromRootStore.UploadMediaImage(event.target.files))
+      const result = await MediaService.getInstance().uploadImage(event.target.files);
+      if (result.Succeeded && result.Data && result.Data.length > 0) {
+        this.uploadedImageUrl = result.Data[0].FullImageUrl;
+        console.log(this.uploadedImageUrl);
+      }
     }
   }
   selectFile() {
+    this.el.querySelector("#fileInput").click();
   }
   render() {
     return (h(Host, null,
@@ -43,17 +56,21 @@ export class SparkleHealth {
               h("ion-icon", { name: "pulse", size: "small" }),
               h("div", { slot: "end" },
                 h("strong", null, this.heartRate)))),
-          this.uploadedImageUrl && h("ion-item", null,
-            h("img", { src: this.uploadedImageUrl })),
+          this.uploadedImageUrl && h("ion-item", { lines: "none" },
+            h("img", { class: "health-image", src: this.uploadedImageUrl })),
           h("ion-item", { lines: "none" },
-            h("input", { type: "file", onChange: (ev) => this.uploadImage(ev), style: { display: "none" }, accept: "image/*" }),
+            h("input", { type: "file", id: "fileInput", onChange: (ev) => this.uploadImage(ev), style: { display: "none" }, accept: "image/*" }),
             h("div", null,
-              h("ion-button", { onClick: () => this.selectFile() }, "Upload Image"))),
+              h("ion-button", { onClick: () => this.selectFile(), disabled: mediaStore.state.mediaUploading },
+                mediaStore.state.mediaUploading && h("ion-spinner", { name: "dots" }),
+                "Upload Image"))),
           h("ion-item", { lines: "none" },
             h("ion-label", null, "Share to Community Wall"),
             h("ion-checkbox", { slot: "start", onChange: (ev) => this.public = ev.detail.checked, checked: true })),
           h("ion-item", { lines: "none" },
-            h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.postFeed() }, "POST"))))));
+            h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.postFeed(), disabled: mediaStore.state.mediaUploading || feedStore.state.createPostLoading },
+              feedStore.state.createPostLoading && h("ion-spinner", { name: "dots" }),
+              " POST"))))));
   }
   static get is() { return "sparkle-health"; }
   static get originalStyleUrls() { return {
@@ -62,10 +79,33 @@ export class SparkleHealth {
   static get styleUrls() { return {
     "$": ["sparkle-health.css"]
   }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
   static get states() { return {
     "uploadedImageUrl": {},
     "heartRate": {},
     "public": {},
     "submitted": {}
   }; }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/mini-apps/sparkle-mood/sparkle-mood.css

@@ -1,11 +1,11 @@
-:host {
-  display: block;
-}
-
-.show {
-  display: block;
-}
-
-.hide {
-  display: none;
-}
+:host {
+  display: block;
+}
+
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}