@sparkle-learning/core 0.0.32 → 0.0.35

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

@@ -1,8 +1,140 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Element, State, Prop, Method, h } from '@stencil/core';
+import { EnvironmentConfigService } from '../../services';
 export class SparkleFeedPost {
+  // @Prop({ connect: 'ion-toast-controller' })
+  // toastCtrl: HTMLIonToastControllerElement;
+  componentDidLoad() {
+    this.postText = this.textValue;
+  }
+  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;
+    }
+  }
+  submitPost() {
+    this.errorMessage = '';
+    this.successMessage = '';
+    //let formData = new FormData(this.el.querySelector("form")) as any;
+    //var postText = this.el.getElementsByClassName("PostText")[0] as HTMLInputElement;
+    var postExternalUrl = this.el.getElementsByClassName('PostExternalUrl')[0];
+    var isPublic = this.el.getElementsByClassName('IsPublic')[0];
+    var data = {
+      PostText: this.postText,
+      IsPublic: isPublic.checked,
+      ExternalResourceUrl: postExternalUrl.value,
+      MiniAppId: 1,
+      AssignmentName: this.assignmentName,
+      AssignmentData: '',
+    };
+    // 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');
+    //     },
+    //   );
+    // }
+  }
+  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.';
+    //   },
+    // );
+  }
+  selectFile() {
+    var fileInput = document.getElementById('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" })));
+    }
+    else {
+      return (h("ion-button", { slot: "end", href: "/login" }, "Login to Post"));
+    }
+  }
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    const userInfo = this.renderUserInfo();
+    return (h("ion-card", null,
+      h("ion-item", { class: "header" },
+        h("ion-card-title", null, "Bulletin Board"),
+        userInfo),
+      h("ion-card-content", null,
+        h("form", null,
+          h("ion-list", null,
+            h("ion-item", { lines: "none" },
+              h("ion-label", null, "Public"),
+              h("ion-toggle", { class: "IsPublic", slot: "end", color: "primary", name: "IsPublic" })),
+            h("ion-item", { class: "padding" },
+              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" },
+              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/*" }),
+              this.uploadImageLoading ? h("ion-spinner", { color: "primary" }) : '',
+              h("ion-button", { slot: "start", onClick: evt => this.selectFile() },
+                h("ion-icon", { name: "add" }),
+                "Upload Image")),
+            h("ion-item", { class: "post-footer", lines: "none" },
+              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")))))));
   }
   static get is() { return "sparkle-feed-post"; }
   static get originalStyleUrls() { return {
@@ -11,4 +143,66 @@ export class SparkleFeedPost {
   static get styleUrls() { return {
     "$": ["sparkle-feed-post.css"]
   }; }
+  static get properties() { return {
+    "assignmentName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "assignment-name",
+      "reflect": false
+    },
+    "textValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text-value",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "postText": {},
+    "errorMessage": {},
+    "uploadedImage": {},
+    "successMessage": {},
+    "externalResourceUrl": {},
+    "uploadImageLoading": {}
+  }; }
+  static get methods() { return {
+    "setText": {
+      "complexType": {
+        "signature": "(text: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {},
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
 }

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

@@ -0,0 +1,15 @@
+.people {
+  display: flex;
+}
+.character-intro {
+  width: 100%;
+  padding: 15px;
+  border: 1px red solid;
+  border-radius: 5px;
+}
+.character-image {
+  opacity: 0.5;
+}
+.character-image:hover {
+  opacity: 1;
+}

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

@@ -0,0 +1,35 @@
+import { Component, Element, State, h } from '@stencil/core';
+export class SparkleIntro {
+  componentDidLoad() { }
+  introOnMouseOver(description, event) {
+    this.description = description;
+    console.log(event);
+    event.target.style.opacity = 1;
+  }
+  render() {
+    return (h("div", null,
+      h("div", { class: "people" },
+        h("div", { class: "character-image zynab", onMouseOver: evt => this.introOnMouseOver('<strong>I’m Zinab or Z.</strong> My family’s from Nigeria, and we live in the Melrose section of the South Bronx. I’m all about racial justice, and watch… I’m going to be the first Muslim mayor of New York City. Believe that!', evt) },
+          h("img", { src: "/assets/img/characters/zynab.png" })),
+        h("div", { class: "character-image kimberley", onMouseOver: evt => this.introOnMouseOver('<strong>Hey, everyone, this is Kimberly </strong>and I’m from Brooklyn. My dream is to become a venture capitalist, so I can fund businesses and causes led by other Black Women. I love watching reality TV shows that are related to business like Shark Tank and Undercover Boss.', evt) },
+          h("img", { src: "/assets/img/characters/kimberly.png" })),
+        h("div", { class: "character-image jen", onMouseOver: evt => this.introOnMouseOver('<strong>Hi, my name’s Jen</strong> and I’m from Murray Hill Queens. Second-generation Korean American. I love softball and statistics, so right now my dream job would be in sabermetrics. You know, basically a data analyst in baseball.', evt) },
+          h("img", { src: "/assets/img/characters/jen.png" })),
+        h("div", { class: "character-image yuna", onMouseOver: evt => this.introOnMouseOver('<strong>Hi, my name’s Yuna</strong> and I’m from Murray Hill Queens. Second-generation Korean American. I love softball and statistics, so right now my dream job would be in sabermetrics. You know, basically a data analyst in baseball.', evt) },
+          h("img", { src: "/assets/img/characters/yuna.png" })),
+        h("div", { class: "character-image valeria", onMouseOver: evt => this.introOnMouseOver('<strong>I’m VALERIA but most of my friends call me Val.</strong> First-generation Dominican from Washington Heights. I could watch MSNBC and CNN all day. In fact, one day I’m going to have my own political talk show like my crushes Rachel Maddow and Robin Roberts.', evt) },
+          h("img", { src: "/assets/img/characters/valeria.png" }))),
+      h("div", { class: "people-description" }, this.description ? h("div", { class: "character-intro", innerHTML: this.description }) : '')));
+  }
+  static get is() { return "sparkle-intro"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-intro.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-intro.css"]
+  }; }
+  static get states() { return {
+    "description": {}
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/esm/PrivateRoute-530ef873.js

@@ -0,0 +1,33 @@
+import { h } from './index-9db08224.js';
+import { A as AuthStore } from './auth.store-b812b34b.js';
+
+function isGranted(permissionName) {
+  return sparkle.auth.isGranted(permissionName);
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const Route = (_a) => {
+  var { component, permission, render } = _a, props = __rest(_a, ["component", "permission", "render"]);
+  const Component = component;
+  return (h("stencil-route", Object.assign({}, props, { routeRender: (props) => {
+      if (!AuthStore.state.isAuthenticated)
+        return (h("stencil-router-redirect", { url: "/login" }));
+      if (permission && !isGranted(permission)) {
+        return (h("stencil-router-redirect", { url: "/unauthorized" }));
+      }
+      return Component ? h(Component, Object.assign({}, props, props.componentProps)) : render(props);
+    } })));
+};
+const PrivateRoute = Route;
+
+export { PrivateRoute as P };

package/dist/esm/{active-router-909088d6.js → active-router-9843e205.js}

@@ -1,4 +1,4 @@
-import { h } from './index-5568e3fa.js';
+import { h } from './index-9db08224.js';
 
 const createProviderConsumer = (defaultState, consumerRender) => {
     let listeners = new Map();