@sparkle-learning/core 0.0.16 → 0.0.20

package/dist/collection/components/layout/facilitator/facilitator-notes/facilitator-notes-form/facilitator-notes-form.js

@@ -0,0 +1,144 @@
+import { Component, Host, Element, State, h, Prop } from '@stencil/core';
+import { toastController } from "@ionic/core";
+import { FacilitatorService } from '../../../../../services/facilitator.service';
+import { LoadingSpinner } from '../../../../../icons';
+import facilitatorStore from '../../../../../stores/facilitator.store';
+export class FacilitatorNotesForm {
+  constructor() {
+    this.formControls = {
+      noteText: {
+        isValid: true,
+        value: "",
+        errorMessage: "",
+        validate: value => {
+          console.log(value);
+          if (value && value.length > 0) {
+            return { valid: true, errorMessage: "" };
+          }
+          else {
+            return { valid: false, errorMessage: "Notes is required" };
+          }
+        },
+      }
+    };
+    this.submitted = false;
+  }
+  componentDidLoad() {
+    if (this.initialValues) {
+      this.changeFormValue("noteText", this.initialValues.NoteText);
+    }
+  }
+  async onSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.formControls) {
+      let control = this.formControls[controlName];
+      control.isValid = control.validate(control.value).valid;
+      control.errorMessage = control.validate(control.value).errorMessage;
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      if (this.initialValues && this.initialValues.Id > 0) {
+        let result = await FacilitatorService.getInstance().updateFacilitatorNote({
+          NoteText: this.formControls.noteText.value,
+          Id: this.initialValues.Id
+        });
+        if (result.Succeeded) {
+          const toast = await toastController.create({
+            message: "Notes updated successfully",
+            duration: 3000
+          });
+          toast.present();
+          this.dismiss();
+        }
+        else {
+          const toast = await toastController.create({
+            message: result.Message,
+            duration: 3000
+          });
+          toast.present();
+        }
+      }
+      else {
+        let result = await FacilitatorService.getInstance().addFacilitatorNote({
+          NoteText: this.formControls.noteText.value
+        });
+        if (result.Succeeded) {
+          const toast = await toastController.create({
+            message: "Notes added successfully",
+            duration: 3000
+          });
+          toast.present();
+          this.dismiss();
+        }
+        else {
+          const toast = await toastController.create({
+            message: result.Message,
+            duration: 3000
+          });
+          toast.present();
+        }
+      }
+    }
+  }
+  dismiss(data) {
+    // dismiss the closest modal and optionally pass back data
+    this.el.closest('ion-modal').dismiss({
+      'dismissed': true
+    });
+  }
+  changeFormValue(controlName, value) {
+    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value).valid, errorMessage: this.formControls[controlName].validate(value).errorMessage }) });
+  }
+  render() {
+    const noteTextValidation = !this.formControls.noteText.isValid ? "is-invalid" : "is-valid";
+    return (h(Host, null,
+      h("ion-header", { translucent: true },
+        h("ion-toolbar", null,
+          h("ion-title", null, "Facilitator Note"),
+          h("ion-buttons", { slot: "end" },
+            h("ion-button", { onClick: () => this.dismiss() }, "Close")))),
+      h("ion-content", { class: "ion-padding" },
+        h("form", { onSubmit: (e) => this.onSubmit(e), novalidate: true },
+          h("div", { class: "mb-3" },
+            h("label", { htmlFor: "validationTextarea", class: "form-label" }, "Notes"),
+            h("textarea", { class: `form-control ${this.submitted && noteTextValidation}`, placeholder: "Notes", value: this.formControls.noteText.value, onChange: (e) => this.changeFormValue("noteText", e.target.value) }),
+            this.formControls.noteText.errorMessage && h("div", { class: "invalid-feedback" }, this.formControls.noteText.errorMessage)),
+          h("div", { class: "mb-3" },
+            facilitatorStore.state.notesLoading && h(LoadingSpinner, null),
+            h("button", { class: "btn btn-primary", type: "submit", disabled: facilitatorStore.state.notesLoading }, "Submit"))))));
+  }
+  static get is() { return "sparkle-facilitator-notes-form"; }
+  static get originalStyleUrls() { return {
+    "$": ["facilitator-notes-form.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["facilitator-notes-form.css"]
+  }; }
+  static get properties() { return {
+    "initialValues": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{\r\n    Id: number,\r\n    NoteText: string\r\n  }",
+        "resolved": "{ Id: number; NoteText: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "formControls": {},
+    "submitted": {}
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/layout/facilitator/facilitator-notes/facilitator-notes.css

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+}
+table {
+  table-layout: auto;
+}
+
+.c1 {
+  width: 80%;
+}
+
+.c2 {
+  width: 20%;
+}

package/dist/collection/components/layout/facilitator/facilitator-notes/facilitator-notes.js

@@ -0,0 +1,64 @@
+import { Component, Host, h } from '@stencil/core';
+import { FacilitatorService } from '../../../../services/facilitator.service';
+import facilitatorStore from '../../../../stores/facilitator.store';
+import { modalController } from '@ionic/core';
+export class FacilitatorNotes {
+  async componentDidLoad() {
+    await this.fetchData();
+  }
+  async fetchData() {
+    await FacilitatorService.getInstance().fetchNotes({ showAllNotes: false });
+  }
+  async deleteNote(id) {
+    await FacilitatorService.getInstance().deleteFacilitatorNote(id);
+  }
+  async deleteNoteConfirmation(id) {
+    if (window.confirm("Do you really want to delete this note?")) {
+      await this.deleteNote(id);
+    }
+  }
+  async presentFacilitatorNotesModal(values) {
+    const modal = await modalController.create({
+      component: 'sparkle-facilitator-notes-form',
+      cssClass: 'sparkle-modal sparkle-facilitator-notes-form',
+      componentProps: {
+        initialValues: values
+      }
+    });
+    await modal.present();
+  }
+  renderNotes() {
+    var _a, _b, _c;
+    return (h("table", { class: "table" },
+      h("thead", null,
+        h("tr", null,
+          h("th", { scope: "col" }, "Notes"),
+          h("th", { scope: "col" }, "Action"))),
+      h("tbody", null, (_a = facilitatorStore.state.pageNotes) === null || _a === void 0 ? void 0 :
+        _a.map(item => h("tr", null,
+          h("td", { class: "c1" }, item.NoteText),
+          h("td", { class: "c2" },
+            h("div", { class: "d-flex" },
+              h("div", { class: "p-2" },
+                h("button", { class: "btn btn-primary", type: "button", onClick: () => this.presentFacilitatorNotesModal(item) }, "Edit")),
+              h("div", { class: "p-2" },
+                h("button", { class: "btn btn-dark", type: "button", onClick: () => this.deleteNoteConfirmation(item.Id) }, "Delete")))))),
+        !facilitatorStore.state.pageNotes || ((_b = facilitatorStore.state.pageNotes) === null || _b === void 0 ? void 0 : _b.length) == 0 &&
+          h("tr", null,
+            h("td", { colSpan: 2 }, facilitatorStore.state.notesLoading ? "Loading..." : (((_c = facilitatorStore.state.pageNotes) === null || _c === void 0 ? void 0 : _c.length) == 0 ? "No Data" : ""))))));
+  }
+  render() {
+    console.log("render");
+    return (h(Host, null,
+      h("div", { class: "p-2 pb-4 d-md-flex justify-content-md-end" },
+        h("button", { class: "btn btn-primary pull-right", type: "button", onClick: () => this.presentFacilitatorNotesModal(null) }, "+ Add Note")),
+      this.renderNotes()));
+  }
+  static get is() { return "sparkle-facilitator-notes"; }
+  static get originalStyleUrls() { return {
+    "$": ["facilitator-notes.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["facilitator-notes.css"]
+  }; }
+}

package/dist/collection/components/layout/facilitator/facilitator-page.css

@@ -34,7 +34,7 @@
 sparkle-facilitator-page {
   display: grid;
   font-size: 16px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   line-height: 2;
   /* margin-left: var(--page-margin-left); */
   margin-top: var(--header-height);
@@ -42,19 +42,20 @@ sparkle-facilitator-page {
   transform: var(--page-transform, none);
   transition: transform 200ms cubic-bezier(0.2, 1, 0.2, 1);
   --page-padding: 2rem;
+  padding: 20px;
 }
 
 @media (min-width: 1234px) {
   sparkle-facilitator-page {
     /* grid-template-columns: 1fr minmax(0, var(--page-width, 720px)) 3fr; */
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
   }
 }
 
 @media (min-width: 1800px) {
   sparkle-facilitator-page {
     /* grid-template-columns: 1fr minmax(0, var(--page-width, 720px)) 1fr 240px; */
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
   }
 }
 
@@ -76,6 +77,8 @@ sparkle-facilitator-page > main.column-2 {
 
 sparkle-facilitator-page sparkle-pagination {
   grid-column: 1 / -1;
+  border: none;
+  --page-padding: 0rem 1rem;
 }
 
 sparkle-facilitator-page .full-screen {
@@ -86,6 +89,10 @@ sparkle-facilitator-page .full-screen {
   padding: 0;
 }
 
+sparkle-facilitator-page sparkle-page-footer {
+  margin-top: 0rem;
+}
+
 sparkle-facilitator-page .page-heading-encapsulation {
   text-transform: uppercase;
 
@@ -184,3 +191,6 @@ sparkle-facilitator-page aside {
 sparkle-facilitator-page main.has-demo .page-meta internal-ad {
   display: none;
 }
+sparkle-facilitator-page .tab-content {
+  padding: 20px;
+}

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

@@ -1,40 +1,98 @@
-import { Component, Prop, State, Event, Watch, h } from '@stencil/core';
+import { Component, Prop, State, Event, Watch, h, Fragment } from '@stencil/core';
+import { SignalRService } from '../../../services/signalR.service';
 import templates from '../page/templates';
+import { StoreService } from "../../../services/store.service";
+import { TocStore } from '../../../stores/toc.store';
+import { FacilitatorService } from '../../../services/facilitator.service';
+import facilitatorStore from '../../../stores/facilitator.store';
 export class FacilitatorPage {
   constructor() {
+    this.isLesson = false;
+    this.notesPage = { title: null, path: null, body: null, pageInfo: null };
+    this.lessonNotesPage = { title: null, path: null, body: null, pageInfo: null };
     this.page = { title: null, path: null, body: null, pageInfo: null };
+    this.onlineStudents = [];
+    this.activetab = "FACILITATOR_NOTES";
     this.validateFetch = (response) => {
       if (!response.ok) {
         throw response;
       }
       return response.json();
     };
-    this.handleNewPage = (page) => {
+    this.handleNotesPage = (page) => {
       this.badFetch = null;
+      this.notesPage = page;
+      this.pageDidLoad.emit({ pageInfo: this.notesPage.pageInfo });
+    };
+    this.handleLessonNotesPage = (page) => {
+      this.badFetchLessonNotes = null;
+      this.lessonNotesPage = page;
+    };
+    this.handleNewPage = (page) => {
       this.page = page;
-      this.pageDidLoad.emit({ pageInfo: this.page.pageInfo });
+      this.page = Object.assign(Object.assign({}, this.page), { nextUrl: "/presentation/teacher" + this.page.nextUrl, previousUrl: "/presentation/teacher" + this.page.previousUrl });
+      StoreService.getInstance().UpdateTocPageInfo(this.page.pageInfo);
     };
     this.handleBadFetch = (error) => {
       this.badFetch = error;
-      this.page = {
+      this.notesPage = {
         title: error.statusText,
         body: null,
         path: null,
         pageInfo: null
       };
     };
+    this.handleLessonNotesBadFetch = (error) => {
+      this.badFetchLessonNotes = error;
+      this.lessonNotesPage = {
+        title: error.statusText,
+        body: null,
+        path: null,
+        pageInfo: null
+      };
+    };
+  }
+  async componentWillLoad() {
+    await this.fetchClasses();
+    return this.fetchNotesPage(this.notesPath) && this.fetchPage(this.path);
   }
-  componentWillLoad() {
-    return this.fetchPage(this.path);
+  componentDidLoad() {
+    this.isLesson = TocStore.state.pageInfo.pageId > 0;
+    if (!this.isLesson) {
+      this.activetab = "ONLINE_STUDENTS";
+    }
+  }
+  async fetchClasses() {
+    await FacilitatorService.getInstance().fetchClasses();
+  }
+  fetchNotesPage(path, oldPath) {
+    if (path === null || path === oldPath) {
+      return;
+    }
+    path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
+    let lessonPath = this.getLessonPath(path);
+    console.log(lessonPath);
+    return fetch(path).then(this.validateFetch).then(this.handleNotesPage).catch(this.handleBadFetch) &&
+      fetch(lessonPath).then(this.validateFetch).then(this.handleLessonNotesPage).catch(this.handleLessonNotesBadFetch);
+  }
+  getLessonPath(path) {
+    let splittedPath = path.split("/");
+    splittedPath.pop();
+    return splittedPath.join("/") + "/lesson-notes.json";
   }
   fetchPage(path, oldPath) {
-    console.log("path", path);
     if (path === null || path === oldPath) {
       return;
     }
+    if (SignalRService.getInstance().connection.connectionState == "Connected") {
+      SignalRService.getInstance().callSignalR("NavigateFacilitatorPresentationCourseTo", { url: this.path.replace(".json", "") });
+    }
     path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
     return fetch(path).then(this.validateFetch).then(this.handleNewPage).catch(this.handleBadFetch);
   }
+  disconnectedCallback() {
+    StoreService.getInstance().UpdateTocPageInfo(null);
+  }
   setDocumentMeta(page) {
     const { title, meta = {} } = page;
     const metaEls = {
@@ -54,7 +112,7 @@ export class FacilitatorPage {
     };
     // Title
     const getTitle = () => {
-      const suffix = /^\/docs\/pages.*$/.test(this.path) ? 'Sparkle' : 'Sparkle';
+      const suffix = /^\/docs\/pages.*$/.test(this.notesPath) ? 'Sparkle' : 'Sparkle';
       // Favor meta title, else go with auto-title. fallback to generic title
       return meta.title || title ? `${title} - ${suffix}` : suffix;
     };
@@ -74,29 +132,68 @@ export class FacilitatorPage {
   hostData() {
     return {
       class: {
-        [this.page.pageClass]: typeof this.page.pageClass === 'string',
+        [this.notesPage.pageClass]: typeof this.notesPage.pageClass === 'string',
       },
     };
   }
-  renderColumn2() {
-    return (h("div", { class: "column-2" },
-      h("div", null)));
+  renderNavigation() {
+    return (h("div", { class: "p-2 d-md-flex justify-content-md-center" },
+      h("div", { class: "btn-group btn-group-sm", role: "group", "aria-label": "Basic outlined example" },
+        h("button", { type: "button", class: "btn btn-outline-primary" }, "Prev"),
+        h("input", { type: "text", class: "form-control", placeholder: "Input group example", "aria-label": "Input group example", "aria-describedby": "btnGroupAddon", value: this.path.replace("index", ""), readOnly: true }),
+        h("button", { type: "button", class: "btn btn-outline-primary" }, "Next"))));
   }
-  renderColumn1(page) {
-    const Template = templates[page.template] || templates.default;
-    return (h("main", { class: 'no-demo column-1' },
-      h(Template, { page: page })));
+  renderTabs() {
+    return (h("main", { class: 'no-demo' },
+      h("ul", { class: "nav nav-tabs" },
+        this.isLesson &&
+          h(Fragment, null,
+            h("li", { class: "nav-item" },
+              h("a", { class: `nav-link ${this.activetab == "FACILITATOR_NOTES" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "FACILITATOR_NOTES" }, "Facilitator Notes")),
+            h("li", { class: "nav-item" },
+              h("a", { class: `nav-link ${this.activetab == "NOTES" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "NOTES" }, "Notes")),
+            h("li", { class: "nav-item" },
+              h("a", { class: `nav-link ${this.activetab == "LESSON_NOTES" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "LESSON_NOTES" }, "Lesson Notes"))),
+        h("li", { class: "nav-item" },
+          h("a", { class: `nav-link ${this.activetab == "ONLINE_STUDENTS" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "ONLINE_STUDENTS" }, "Online Students")),
+        h("li", { class: "nav-item" },
+          h("a", { class: `nav-link ${this.activetab == "DASHBOARD" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "DASHBOARD" }, "Dashboard")),
+        h("li", { class: "nav-item" },
+          h("a", { class: `nav-link ${this.activetab == "EXPORT" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "EXPORT" }, "Export"))),
+      h("div", { class: "tab-content" },
+        this.activetab == "FACILITATOR_NOTES" && this.renderFacilitatorNotes(),
+        this.activetab == "NOTES" && h("sparkle-facilitator-notes", null),
+        this.activetab == "LESSON_NOTES" && this.renderLessonNotes(),
+        this.activetab == "ONLINE_STUDENTS" && h("sparkle-online-students", { path: this.path }),
+        this.activetab == "DASHBOARD" && h("sparkle-facilitator-dashboard", null),
+        this.activetab == "EXPORT" && h("sparkle-export-lessons", null))));
   }
-  render() {
-    const { page } = this;
+  renderLessonNotes() {
+    const { lessonNotesPage } = this;
+    const Template = templates[lessonNotesPage.template] || templates.default;
+    if (this.badFetchLessonNotes) {
+      return templates.error(this.badFetch);
+    }
+    return h(Template, { page: lessonNotesPage });
+  }
+  renderFacilitatorNotes() {
+    const { notesPage } = this;
+    const Template = templates[notesPage.template] || templates.default;
     if (this.badFetch) {
       return templates.error(this.badFetch);
     }
-    const content = [
-      this.renderColumn1(page),
-      this.renderColumn2()
-    ];
-    return content;
+    return h(Template, { page: notesPage });
+  }
+  render() {
+    console.log(facilitatorStore.state.classes);
+    const { page } = this;
+    const content = this.renderTabs();
+    return h("div", { class: "container" },
+      h("div", { class: "d-flex justify-content-between align-items-center" },
+        h("sparkle-page-footer", { page: page }),
+        h("div", null,
+          h("select", { class: "form-select", "aria-label": "Default select example" }, facilitatorStore.state.classes.map(item => h("option", null, item.ClassName))))),
+      content);
   }
   static get is() { return "sparkle-facilitator-page"; }
   static get originalStyleUrls() { return {
@@ -122,11 +219,34 @@ export class FacilitatorPage {
       },
       "attribute": "path",
       "reflect": false
+    },
+    "notesPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "notes-path",
+      "reflect": false
     }
   }; }
   static get states() { return {
     "badFetch": {},
-    "page": {}
+    "badFetchLessonNotes": {},
+    "isLesson": {},
+    "notesPage": {},
+    "lessonNotesPage": {},
+    "page": {},
+    "onlineStudents": {},
+    "activetab": {}
   }; }
   static get events() { return [{
       "method": "pageDidLoad",
@@ -150,6 +270,9 @@ export class FacilitatorPage {
       }
     }]; }
   static get watchers() { return [{
+      "propName": "notesPath",
+      "methodName": "fetchNotesPage"
+    }, {
       "propName": "path",
       "methodName": "fetchPage"
     }, {

package/dist/collection/components/layout/facilitator/online-students/online-students.js

@@ -1,7 +1,42 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop, State } from '@stencil/core';
+import facilitatorStore from '../../../../stores/facilitator.store';
+import { SignalRService } from '../../../../services/signalR.service';
 export class SparkleOnlineStudents {
+  constructor() {
+    this.onlineStudents = [];
+    this.handleStudentChange = (user, change) => {
+      console.log("handle student change");
+      if (change == "list") {
+        facilitatorStore.state.onlineStudents = [...user];
+      }
+    };
+  }
+  componentDidLoad() {
+    console.log("componentDidLoad");
+    SignalRService.getInstance().connection.on("StudentAction", this.handleStudentChange);
+    this.refreshList();
+  }
+  navigateStudentTo(student) {
+    SignalRService.getInstance().callSignalR("NavigateStudentTo", { userId: student.userId, url: this.path.replace(".json", "") });
+  }
+  refreshList() {
+    SignalRService.getInstance().callSignalR("GetOnlineStudents", { CourseClassId: 1 });
+  }
   render() {
-    return (h("div", null, "Students lists"));
+    console.log("faciliatator state", facilitatorStore.state.onlineStudents);
+    return (h("div", null,
+      h("div", { class: "p-2 pb-4 d-md-flex justify-content-md-end" },
+        h("button", { class: "btn btn-primary pull-right", type: "button", onClick: () => this.refreshList() }, "Refresh")),
+      h("div", null,
+        facilitatorStore.state.onlineStudents.length > 0 &&
+          h("ol", { class: "list-group list-group-numbered" }, facilitatorStore.state.onlineStudents.map((item) => h("li", { class: "list-group-item d-flex justify-content-between align-items-start", key: item.userId },
+            h("div", { class: "ms-2 me-auto" },
+              h("div", { class: "fw-bold" }, item.name),
+              item.currentUrl),
+            h("button", { type: "button", class: "btn btn-primary btn-sm", onClick: () => this.navigateStudentTo(item) }, "Navigate")))),
+        facilitatorStore.state.onlineStudents.length == 0 &&
+          h("div", { class: "text-center" },
+            h("h3", null, "No Students")))));
   }
   static get is() { return "sparkle-online-students"; }
   static get originalStyleUrls() { return {
@@ -10,4 +45,26 @@ export class SparkleOnlineStudents {
   static get styleUrls() { return {
     "$": ["online-students.css"]
   }; }
+  static get properties() { return {
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "path",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "onlineStudents": {}
+  }; }
 }