@sparkle-learning/core 0.0.19 → 0.0.20

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

@@ -1,12 +1,19 @@
 import { Component, Prop, State, Event, Watch, h } from '@stencil/core';
 import templates from './templates';
-import { modalController } from '@ionic/core';
+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 { SignalRService } from '../../../services/signalR.service';
+import signalRStore from '../../../stores/signalR.store';
 export class SparklePage {
   constructor() {
     this.presentation = false;
     this.page = { title: null, path: null, body: null, pageInfo: null };
+    this.isLesson = false;
+    this.handleFacilitatorNavigationChange = (url) => {
+      this.history.replace(url, {});
+    };
     this.validateFetch = (response) => {
       if (!response.ok) {
         throw response;
@@ -21,6 +28,7 @@ export class SparklePage {
       }
       console.log(this.page);
       StoreService.getInstance().UpdateTocPageInfo(this.page.pageInfo);
+      this.isLesson = this.page.pageInfo.pageId > 0;
       this.pageDidLoad.emit({ pageInfo: this.page.pageInfo });
     };
     this.handleBadFetch = (error) => {
@@ -38,8 +46,23 @@ export class SparklePage {
       return this.fetchPage(this.path);
     }
   }
+  componentDidLoad() {
+    if (this.presentation) {
+      signalRStore.onChange("connected", (connected) => {
+        if (connected) {
+          SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+        }
+      });
+    }
+  }
   fetchPage(path, oldPath) {
-    console.log("path", path);
+    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);
+      }
+    }
     if (path === null || path === oldPath) {
       return;
     }
@@ -112,12 +135,56 @@ export class SparklePage {
     });
     await modal.present();
   }
+  async openProjectorPage() {
+    if (userStore.state.user.FacilitatorClassList.length > 1) {
+      await this.presentAlertClasses();
+    }
+    else {
+      this.openWindows();
+    }
+  }
+  async presentAlertClasses() {
+    var inputs = [];
+    //    var defaultCourseClassId = this.jwtService.getDefaultCourseClassId();
+    var classes = userStore.state.user.FacilitatorClassList;
+    classes.forEach((item, index) => inputs.push({
+      name: 'radio' + index,
+      type: 'radio',
+      label: item.CourseName,
+      value: item.CourseClassId,
+    }));
+    const alert = await alertController.create({
+      header: 'Classes',
+      inputs: inputs,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+          }
+        }, {
+          text: 'Ok',
+          handler: (data) => {
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+  openWindows() {
+    //this.jwtService.updateDefaultCourseClassId(data);
+    window.open(window.location.origin + "/presentation" + this.path.replace(".json", ""), "_blank");
+    setTimeout(() => {
+      window.open(window.location.origin + "/presentation" + '/teacher' + this.path.replace(".json", ""), "_blank");
+    }, 500);
+  }
   renderControls() {
     if (AuthStore.state.isAuthenticated) {
       return (h("div", { class: "controls" },
         h("ion-button", { onClick: () => this.presentFeedbackModal() },
           h("ion-icon", { name: "chatbox-outline" })),
-        h("ion-button", null,
+        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 "";
@@ -134,6 +201,7 @@ export class SparklePage {
           this.renderControls(),
           h(Template, { page: page }))
       ];
+      console.log("CONTENT", content);
       return content;
     }
     else {
@@ -149,6 +217,26 @@ export class SparklePage {
     "$": ["page.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": ""
+      }
+    },
     "path": {
       "type": "string",
       "mutable": false,
@@ -187,7 +275,8 @@ export class SparklePage {
   }; }
   static get states() { return {
     "badFetch": {},
-    "page": {}
+    "page": {},
+    "isLesson": {}
   }; }
   static get events() { return [{
       "method": "pageDidLoad",

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

@@ -1,6 +1,8 @@
 import defaultTemplate from './default';
+import pdfTemplate from './pdf';
 import error from './error';
 export default {
   'default': defaultTemplate,
+  'pdf': pdfTemplate,
   'error': error
 };

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

@@ -0,0 +1,8 @@
+import { h } from '@stencil/core';
+import { toHypertext } from '../to-hypertext';
+export default props => {
+  const { page } = props;
+  return (h("article", null,
+    page.renderTitle !== false ? h("h1", null, page.title) : null,
+    h("section", { class: "markdown-content" }, toHypertext(h, page.body))));
+};

package/dist/collection/components/mini-apps/sparkle-goals/sparkle-goal-form/sparkle-goal-form.css

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

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

@@ -1,10 +1,14 @@
 import { Component, State, Element, h, Prop, Watch } from '@stencil/core';
-import { SparkleGlobal, MyGoalTemplate } from '../../../../util';
+import { GetGoalAppData, SparkleGlobal, MyGoalTemplate, MyGoalTemplateJSON } from '../../../../util';
 import { EnvironmentConfigService } from "../../../../services/environment/environment-config.service";
 import { AssetsService } from "../../../../services/core/assets.service";
+import { AppDataService } from '../../../../services/appdata.service';
+import { FeedService } from '../../../../services/feed.service';
+import goalStore from '../../../../stores/goal.store';
+import feedStore from '../../../../stores/feed.store';
 export class SparkleGoalForm {
   constructor() {
-    this.title = {
+    this.name = {
       valid: false,
       value: ''
     };
@@ -24,24 +28,27 @@ export class SparkleGoalForm {
     };
     this.submitted = false;
   }
-  goalHanlder() {
-    this.updateGoal();
+  goalHanlder(data) {
+    this.updateGoal(data.AppData);
   }
   ;
   componentWillLoad() {
-    this.updateGoal();
-  }
-  updateGoal() {
-    if (this.goal) {
-      this.title = Object.assign(Object.assign({}, this.title), { value: this.goal.Title });
-      this.description = Object.assign(Object.assign({}, this.description), { value: this.goal.Description });
-      this.category = Object.assign(Object.assign({}, this.category), { value: this.goal.Category });
-      this.progress = this.goal.Progress;
+    if (this.appData) {
+      this.updateGoal(this.appData.AppData);
+    }
+  }
+  updateGoal(data) {
+    if (data) {
+      this.name = Object.assign(Object.assign({}, this.name), { value: data.Name });
+      this.description = Object.assign(Object.assign({}, this.description), { value: data.Description });
+      this.category = Object.assign(Object.assign({}, this.category), { value: data.Category });
+      this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { value: data.GoalText });
+      this.progress = data.Percentage;
     }
   }
   handleTitle(ev) {
     this.validateTitle();
-    this.title = Object.assign(Object.assign({}, this.title), { value: ev.target.value });
+    this.name = Object.assign(Object.assign({}, this.name), { value: ev.target.value });
   }
   handleDescription(ev) {
     this.validateDescription();
@@ -55,15 +62,15 @@ export class SparkleGoalForm {
     this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { value: ev.target.value });
   }
   validateTitle() {
-    if (this.title.value && this.title.value.length > 0) {
-      this.title = Object.assign(Object.assign({}, this.title), { valid: true });
+    if (this.name.value && this.name.value.length > 0) {
+      this.name = Object.assign(Object.assign({}, this.name), { valid: true });
       return;
     }
-    this.title = Object.assign(Object.assign({}, this.title), { valid: false });
+    this.name = Object.assign(Object.assign({}, this.name), { valid: false });
   }
   validateDescription() {
     if (this.description.value && this.description.value.length > 0) {
-      this.title = Object.assign(Object.assign({}, this.description), { valid: true });
+      this.description = Object.assign(Object.assign({}, this.description), { valid: true });
       return;
     }
     this.description = Object.assign(Object.assign({}, this.description), { valid: false });
@@ -75,40 +82,62 @@ export class SparkleGoalForm {
     }
     this.category = Object.assign(Object.assign({}, this.category), { valid: false });
   }
-  onSubmit(e) {
+  validateGoalUpdateText() {
+    if (this.goalUpdateText.value && this.goalUpdateText.value.length > 0) {
+      this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { valid: true });
+      return;
+    }
+    this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { valid: false });
+  }
+  async onSubmit(e) {
     e.preventDefault();
     console.log('clicked signup');
     this.validateTitle();
     this.validateDescription();
     this.validateCategoy();
     this.submitted = true;
-    if (this.goal) {
-      if (this.title.valid && this.description.valid && this.category.valid) {
+    if (this.appData && this.appData.Id > 0) {
+      this.validateGoalUpdateText();
+      if (this.name.valid && this.description.valid && this.category.valid && this.goalUpdateText.valid) {
         //update
+        var appData = GetGoalAppData(this.name.value, this.description.value, this.category.value, this.progress, this.goalUpdateText.value);
+        const result = await AppDataService.getInstance().updateGoal({ Id: this.appData.Id, MiniAppId: SparkleGlobal.MY_GOALS_APP_ID, AppJsonData: JSON.stringify(appData) });
+        if (result.Succeeded) {
+          if (this.public) {
+            await this.postToFeed();
+          }
+          else {
+            this.dismiss();
+          }
+        }
       }
     }
     else {
-      if (this.title.valid && this.description.valid && this.category.valid) {
+      if (this.name.valid && this.description.valid && this.category.valid) {
         //add
+        var appData = GetGoalAppData(this.name.value, this.description.value, this.category.value, this.progress, this.goalUpdateText.value);
+        const result = await AppDataService.getInstance().createGoal({ MiniAppId: SparkleGlobal.MY_GOALS_APP_ID, AppJsonData: JSON.stringify(appData) });
+        if (result.Succeeded) {
+          this.dismiss();
+        }
       }
     }
   }
   async postToFeed() {
-    this.submitted = true;
     const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
     const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
     var model = {
       CourseId: tocData.id,
       MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
-      StudentAppDataId: this.goal.StudentAppDataId,
-      PostText: MyGoalTemplate(this.goal.Title, this.goalUpdateText.value, this.progress),
+      PostText: MyGoalTemplate(this.name.value, this.goalUpdateText.value, this.progress),
+      PostTextJSON: MyGoalTemplateJSON(this.name.value, this.goalUpdateText.value, this.progress),
       IsPublic: this.public,
-      Percentage: this.progress,
-      GoalText: this.goalUpdateText,
-      IsProgress: true,
+      ExternalResourceUrl: "",
     };
-    console.log(model);
-    //this.store.dispatch(new fromRootStore.PostGoalProgress(model));
+    const result = await FeedService.getInstance().createPost(model);
+    if (result.Succeeded) {
+      this.dismiss();
+    }
   }
   dismiss(data) {
     // dismiss the closest modal and optionally pass back data
@@ -117,7 +146,7 @@ export class SparkleGoalForm {
     });
   }
   renderEditBookingFields() {
-    if (this.goal) {
+    if (this.appData) {
       return (h("div", null,
         h("ion-item", null,
           h("ion-label", { position: "stacked", color: "primary" }, "Goal Progress Info"),
@@ -131,7 +160,7 @@ export class SparkleGoalForm {
             h("ion-icon", { name: "pulse", size: "small" }),
             h("strong", { slot: "end" }, this.progress))),
         h("ion-text", { color: "danger" },
-          h("p", { hidden: this.progress <= 0 || this.submitted === false, class: "ion-padding-start" }, "Min Progress value should be 1")),
+          h("p", { hidden: this.progress > 0 || this.submitted === false, class: "ion-padding-start" }, "Min Progress value should be 1")),
         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 }))));
@@ -144,32 +173,37 @@ export class SparkleGoalForm {
           h("ion-buttons", { slot: "start" },
             h("ion-back-button", { defaultHref: "home", onClick: () => this.dismiss() })),
           h("ion-title", null, "Add New Goal")),
-        h("form", { class: "ion-padding", novalidate: true, onSubmit: (e) => this.onSubmit(e) },
-          h("ion-list", { "no-lines": true },
-            h("ion-item", null,
-              h("ion-label", { position: "stacked", color: "primary" }, "Title"),
-              h("ion-input", { name: "title", type: "text", value: this.title.value, onInput: (ev) => this.handleTitle(ev), required: true })),
-            h("ion-text", { color: "danger" },
-              h("p", { hidden: this.title.valid || this.submitted === false, class: "ion-padding-start" }, "Title is required")),
-            h("ion-item", null,
-              h("ion-label", { position: "stacked", color: "primary" }, "Description"),
-              h("ion-textarea", { name: "desciption", value: this.description.value, onInput: (ev) => this.handleDescription(ev), required: true })),
-            h("ion-text", { color: "danger" },
-              h("p", { hidden: this.description.valid || this.submitted === false, class: "ion-padding-start" }, "Description is required")),
-            h("ion-item", null,
-              h("ion-label", null, "Category"),
-              h("ion-select", { value: this.category.value },
-                h("ion-select-option", { value: "Emotional" }, "Emotional"),
-                h("ion-select-option", { value: "Interpersonal" }, "Interpersonal"),
-                h("ion-select-option", { value: "Learning" }, "Learning"),
-                h("ion-select-option", { value: "Financial" }, "Financial"),
-                h("ion-select-option", { value: "Physical" }, "Physical"))),
-            h("ion-text", { color: "danger" },
-              h("p", { hidden: this.category.valid || this.submitted === false, class: "ion-padding-start" }, "Category is required")),
-            this.renderEditBookingFields()),
-          h("div", { class: "ion-padding" },
-            this.goal && h("ion-button", { type: "submit", expand: "block" }, "Update"),
-            !this.goal && h("ion-button", { type: "submit", expand: "block" }, "Add"))))
+        h("div", { class: "inner-content" },
+          h("form", { class: "ion-padding", novalidate: true, onSubmit: (e) => this.onSubmit(e) },
+            h("ion-list", { "no-lines": true },
+              h("ion-item", null,
+                h("ion-label", { position: "stacked", color: "primary" }, "Title"),
+                h("ion-input", { name: "title", type: "text", value: this.name.value, onInput: (ev) => this.handleTitle(ev), required: true })),
+              h("ion-text", { color: "danger" },
+                h("p", { hidden: this.name.valid || this.submitted === false, class: "ion-padding-start" }, "Title is required")),
+              h("ion-item", null,
+                h("ion-label", { position: "stacked", color: "primary" }, "Description"),
+                h("ion-textarea", { name: "desciption", value: this.description.value, onInput: (ev) => this.handleDescription(ev), required: true })),
+              h("ion-text", { color: "danger" },
+                h("p", { hidden: this.description.valid || this.submitted === false, class: "ion-padding-start" }, "Description is required")),
+              h("ion-item", null,
+                h("ion-label", null, "Category"),
+                h("ion-select", { value: this.category.value, onIonChange: (e) => this.handleCategory(e) },
+                  h("ion-select-option", { value: "Emotional" }, "Emotional"),
+                  h("ion-select-option", { value: "Interpersonal" }, "Interpersonal"),
+                  h("ion-select-option", { value: "Learning" }, "Learning"),
+                  h("ion-select-option", { value: "Financial" }, "Financial"),
+                  h("ion-select-option", { value: "Physical" }, "Physical"))),
+              h("ion-text", { color: "danger" },
+                h("p", { hidden: this.category.valid || this.submitted === false, class: "ion-padding-start" }, "Category is required")),
+              this.renderEditBookingFields()),
+            h("div", { class: "ion-padding" },
+              this.appData && h("ion-button", { type: "submit", expand: "block", disabled: goalStore.state.goalLoading || feedStore.state.postIdLoading > 0 },
+                goalStore.state.goalLoading && h("ion-spinner", { name: "dots" }),
+                "  Update"),
+              !this.appData && h("ion-button", { type: "submit", expand: "block", disabled: goalStore.state.goalLoading },
+                goalStore.state.goalLoading && h("ion-spinner", { name: "dots" }),
+                "  Add")))))
     ];
   }
   static get is() { return "sparkle-goal-form"; }
@@ -180,16 +214,16 @@ export class SparkleGoalForm {
     "$": ["sparkle-goal-form.css"]
   }; }
   static get properties() { return {
-    "goal": {
+    "appData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "IGoal",
-        "resolved": "IGoal",
+        "original": "StudentAppDataViewModel",
+        "resolved": "StudentAppDataViewModel",
         "references": {
-          "IGoal": {
+          "StudentAppDataViewModel": {
             "location": "import",
-            "path": "../../../../models/goal.model"
+            "path": "../../../../models/class.model"
           }
         }
       },
@@ -202,7 +236,7 @@ export class SparkleGoalForm {
     }
   }; }
   static get states() { return {
-    "title": {},
+    "name": {},
     "description": {},
     "category": {},
     "progress": {},
@@ -212,7 +246,7 @@ export class SparkleGoalForm {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "goal",
+      "propName": "appData",
       "methodName": "goalHanlder"
     }]; }
 }

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

@@ -1,29 +1,12 @@
-:host {
-  display: block;
-}
-
-.progress-container {
-  padding: 4px;
-  display: flex;
-  align-items: center;
-}
-.progress-container > .progress {
-  padding-left: 6px;
-}
-#progress-bar {
-  background: #ccc;
-  border-radius: 12px;
-  height: 10px;
-  width: 100%;
-  padding: 0px;
-  margin: 0 auto;
-}
-
-#progress-bar:after {
-  content: '';
-  display: block;
-  background: var(--ion-color-primary);
-  width: var(--p);
-  height: 100%;
-  border-radius: 9px;
-}
+:host {
+  display: block;
+}
+
+.Card-content {
+  padding-top: 8px;
+}
+.goal-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -40px !important;
+}

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

@@ -2,13 +2,11 @@ import { Component, Host, h, Prop } from '@stencil/core';
 export class SparkleGoalItem {
   render() {
     return (h(Host, null,
-      h("sparkle-card", { header: this.goal.Title, icon: this.goal.CategoryIcon },
+      h("sparkle-card", { header: this.goal.Name, icon: this.goal.CategoryIcon },
+        h("div", { class: "goal-header" },
+          h("ion-button", { size: "small", color: "primary", onClick: () => this.onEditGoal() }, "Edit")),
         h("p", null, this.goal.Description),
-        h("div", { class: "progress-container" },
-          h("div", { id: "progress-bar", style: { "--p": this.goal.Progress + "%" } }),
-          h("strong", { class: "progress" },
-            this.goal.Progress,
-            "%")))));
+        h("sparkle-goal-progress", { percentage: this.goal.Percentage.toString() }))));
   }
   static get is() { return "sparkle-goal-item"; }
   static get originalStyleUrls() { return {
@@ -37,6 +35,25 @@ export class SparkleGoalItem {
         "tags": [],
         "text": ""
       }
+    },
+    "onEditGoal": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Function",
+        "resolved": "Function",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
 }

package/dist/collection/components/mini-apps/sparkle-goals/sparkle-goal-progress/sparkle-goal-progress.css

@@ -0,0 +1,33 @@
+:host {
+  display: block;
+}
+
+.progress-container {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+.progress-container > .progress {
+  padding-left: 6px;
+}
+#progress-bar {
+  background: #ccc;
+  border-radius: 12px;
+  height: 10px;
+  width: 100%;
+  padding: 0px;
+  margin: 0 auto;
+}
+
+#progress-bar:after {
+  content: '';
+  display: block;
+  background: var(--ion-color-primary);
+  width: var(--p);
+  height: 100%;
+  border-radius: 9px;
+}
+
+.percentage {
+  padding-left: 10px;
+}

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

@@ -0,0 +1,37 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class SparkleGoalProgress {
+  render() {
+    return (h(Host, null,
+      h("div", { class: "progress-container" },
+        h("div", { id: "progress-bar", style: { "--p": this.percentage + "%" } }),
+        h("strong", { class: "percentage" },
+          this.percentage,
+          "%"))));
+  }
+  static get is() { return "sparkle-goal-progress"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-goal-progress.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-goal-progress.css"]
+  }; }
+  static get properties() { return {
+    "percentage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "percentage",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -1,8 +1,8 @@
-:host {
-  display: block;
-}
-sparkle-dropdown a {
-  color: var(--text-color);
-  padding: 1em;
-  cursor: pointer;
-}
+:host {
+  display: block;
+}
+sparkle-dropdown a {
+  color: var(--text-color);
+  padding: 1em;
+  cursor: pointer;
+}