fcad-core-dragon 2.1.0-beta.2 → 2.1.0-beta.3

package/src/composables/useTimer.js

@@ -0,0 +1,175 @@
+export class Timer {
+  static timers = new Map() // Store all timers by ID
+
+  constructor(timerID) {
+    this.timerID = timerID || this.createTimerID() //timerID of the timer
+    this.timeCounter = 0 //time counter
+    this.elapsedCounter = 0 //elapsed time counter how lofg the timer is running
+    this.interval = null //interval for the timer
+    this.timerState = 'stopped' //state of the timer, can be 'started' or 'stopped'
+     Timer.timers.set(this.timerID, this) // Store the timer in the static map
+  }
+
+  /**
+   * @description Start the timer
+   */
+  start() {
+    if (this.getTimerState() == 'stopped') {
+      this.interval = setInterval(() => {
+        this.timeCounter += 1
+        this.elapsedCounter += 1
+      }, 1000)
+      this.timerState = 'started'
+
+    }
+  }
+
+  /** @description Pause the timer */
+  pause() {
+    if (this.getTimerState() == 'started') {
+      clearInterval(this.interval)
+      this.timerState = 'stopped'
+    }
+  }
+
+  /** @description Stop the timer and reset the timer to zero */
+  stop() {
+    if (this.getTimerState() == 'started') {
+      clearInterval(this.interval)
+      this.timeCounter = 0
+      this.elapsedCounter = 0
+      this.timerState = 'stopped'
+
+    }
+  }
+
+  /** @description Destroy the timer instance */
+   destroy() {
+    this.pause()
+    Timer.timers.delete(this.timerID)
+  }
+
+  /** @description Get the timer ID */
+  getTimerID() {
+    return this.timerID
+  }
+
+/**
+ *
+ * @description retrive a timer instance by its ID
+ * If no ID is provided, it returns the current timer instance.
+ * @param {String} id - the ID of the timer to retrieve
+ * If no ID is provided, it returns the current timer instance.
+ *
+ * @throws {Error} - if the timer with the specified ID does not exist
+ *
+ * @returns {Timer} - the timer instance
+ */
+  getTimer(id=null) {
+    if (!id) {
+      console.warn('No timer ID provided. Returning the current timer.')
+      return this
+    }
+    if (!Timer.timers.has(id)) throw new Error(`Timer with ID ${id} does not exist.`)
+    return Timer.timers.get(id)
+  }
+
+  /**
+   * @description Get the current time counter in seconds
+   *
+   * @returns {Number} - the time counter in seconds
+   */
+  getTime() {
+    return this.timeCounter
+  }
+  /**
+   * @description Get the current state of the timer
+   *
+   * @returns {String} - timer state, can be 'started' or 'stopped'
+   */
+  getTimerState() {
+    return this.timerState
+  }
+  /**
+   * @description Get the elapsed time for the timer
+   *               This is the time the timer has been running since it was started.
+   *               It is not reset when the timer is paused.
+   *
+   * @returns {Number} - the time count in seconds
+   */
+  getElapsedTime() {
+    return this.elapsedCounter
+  }
+
+
+  /**
+   * @description Get all existing timers
+   *
+   * @returns {Map} - a map of all timer instances with their IDs as keys
+   */
+
+  static getAllTimers() {
+      return Timer.timers
+  }
+
+  /**
+   * @description - This method generates a unique timer ID
+   *
+   * @returns {String} - a unique timer ID
+   */
+  createTimerID() {
+    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+    let str = ''
+    const n = 2
+    for (let i = 0; i < n; i++) {
+      str = `${str}${alphabet[Math.floor(Math.random() * alphabet.length)]}`
+    }
+
+    const id = `Tm$${str}${Math.floor(Math.random() * 1000)}`
+
+    return id
+  }
+
+
+  /**
+   * @description Format seconds to ISO 8601 format
+   * Example of ISO 8601 time format of 24 chars: "1970-01-04T14:50:00.000Z"
+   * @param {Number} seconds - time in seconds
+   *
+   * @returns {String} - ISO 8601 formatted time string // YYYY-MM-DDTHH:mm:ss.sssZ
+   */
+  formatToISOString(seconds) {
+    let d = new Date(null) //create a default date ref
+    d.setSeconds(seconds) //set the time with passed numbers of seconds
+
+    let ISOTime = d.toISOString()
+
+    return ISOTime
+  }
+
+  /**
+   * @description gives time period in the format of HH:mm:ss
+   * @param {Number} seconds - time in seconds
+   *
+   * @returns {String} - time period in the format of HH:mm:ss
+   */
+  ISOTimeParser(seconds) {
+    let ISOTimePeriod = this.formatToISOString(seconds).substring(8, 19) // only the time portion of it
+    ISOTimePeriod = ISOTimePeriod.split('T')
+    const DDToHrs = (parseInt(ISOTimePeriod[0]) - 1) * 24 // convert xxT to hrs
+    const periodOfTime = ISOTimePeriod[1] ? ISOTimePeriod[1].split(':') : null
+
+    if (!periodOfTime) return '00:00:00'
+
+    let timeString = ''
+    let HH = (DDToHrs + parseInt(periodOfTime[0])).toString()
+    let mm = periodOfTime[1]
+    let ss = periodOfTime[2]
+
+    if (HH.length === 1) HH = `0${HH}`
+
+    timeString = `${HH}:${mm}:${ss}`
+
+    return timeString
+  }
+}

package/src/externalComps/ModuleView.vue

@@ -1,22 +1,22 @@
-<template>
-  <app-base-module :module-config="$data" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      id: 'module_99',
-      consigneBehavior: 'onHover', //Controle the behavior of desplaying instruction
-      bookmarkActive: true, // Controle the use of saved point
-      allowNavigationToActivity: null
-
-      //main:''// Edit to define the ID of the node that will be main. When skipping to main content in the page.
-    }
-  },
-  created() {
-    this.allowNavigationToActivity =
-      this.$helper.getSettingsFromStore('auto_next_activity')
-  }
-}
-</script>
+<template>
+  <app-base-module :module-config="$data" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: 'module_99',
+      consigneBehavior: 'onHover', //Controle the behavior of desplaying instruction
+      bookmarkActive: true, // Controle the use of saved point
+      allowNavigationToActivity: null
+
+      //main:''// Edit to define the ID of the node that will be main. When skipping to main content in the page.
+    }
+  },
+  created() {
+    this.allowNavigationToActivity =
+      this.$helper.getSettingsFromStore('auto_next_activity')
+  }
+}
+</script>

package/src/externalComps/SummaryView.vue

@@ -1,91 +1,91 @@
-<template>
-  <div>
-    <app-comp-menu></app-comp-menu>
-    <!-- <h6>normal</h6>
-    <div class="t normal"></div>
-    <h6>red</h6>
-    <div class="t red"></div>
-    <h6>green</h6>
-    <div class="t green"></div>
-    <h6>hue</h6>
-    <div class="t hue"></div>
-    <h6>Saturation</h6>
-    <div class="t saturation"></div>
-    <h6>desaturation</h6>
-    <div class="t desaturation"></div>
-    <h6>lighteness</h6>
-    <div class="t lighteness"></div>
-    <h6>darkness</h6>
-    <div class="t darkness"></div>
-    <h6>whiteness</h6>
-    <div class="t whiteness"></div>
-    <h6>blackness</h6>
-    <div class="t blackness"></div> -->
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {}
-  }
-}
-</script>
-<!-- <style lang="scss">
-@use 'sass:color';
-$color: #f11532;
-$color-red: color.change($color, $red: 155);
-$color-green: color.change($color, $green: 255);
-$color-hue: adjust-hue($color, -30deg);
-$color-saturation: color.scale($color, $saturation: 100%);
-$color-desaturate: color.scale($color, $saturation: -50%);
-$color-lighteness: color.scale($color, $lightness: 50%);
-$color-darkness: color.scale($color, $lightness: -50%);
-$color-whiteness: color.scale($color, $whiteness: 50%);
-$color-blackness: color.scale($color, $blackness: 50%);
-
-.t {
-  width: 50px;
-  height: 50px;
-
-  &.normal {
-    background: $color;
-  }
-
-  &.red {
-    background: $color-red;
-  }
-
-  &.green {
-    background: $color-green;
-  }
-
-  &.hue {
-    background: $color-hue;
-  }
-
-  &.saturation {
-    background: $color-saturation;
-  }
-
-  &.desaturation {
-    background: $color-desaturate;
-  }
-
-  &.lighteness {
-    background: $color-lighteness;
-  }
-
-  &.darkness {
-    background: $color-darkness;
-  }
-
-  &.whiteness {
-    background: $color-whiteness;
-  }
-
-  &.blackness {
-    background: $color-blackness;
-  }
-}
-</style> -->
+<template>
+  <div>
+    <app-comp-menu></app-comp-menu>
+    <!-- <h6>normal</h6>
+    <div class="t normal"></div>
+    <h6>red</h6>
+    <div class="t red"></div>
+    <h6>green</h6>
+    <div class="t green"></div>
+    <h6>hue</h6>
+    <div class="t hue"></div>
+    <h6>Saturation</h6>
+    <div class="t saturation"></div>
+    <h6>desaturation</h6>
+    <div class="t desaturation"></div>
+    <h6>lighteness</h6>
+    <div class="t lighteness"></div>
+    <h6>darkness</h6>
+    <div class="t darkness"></div>
+    <h6>whiteness</h6>
+    <div class="t whiteness"></div>
+    <h6>blackness</h6>
+    <div class="t blackness"></div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+<!-- <style lang="scss">
+@use 'sass:color';
+$color: #f11532;
+$color-red: color.change($color, $red: 155);
+$color-green: color.change($color, $green: 255);
+$color-hue: adjust-hue($color, -30deg);
+$color-saturation: color.scale($color, $saturation: 100%);
+$color-desaturate: color.scale($color, $saturation: -50%);
+$color-lighteness: color.scale($color, $lightness: 50%);
+$color-darkness: color.scale($color, $lightness: -50%);
+$color-whiteness: color.scale($color, $whiteness: 50%);
+$color-blackness: color.scale($color, $blackness: 50%);
+
+.t {
+  width: 50px;
+  height: 50px;
+
+  &.normal {
+    background: $color;
+  }
+
+  &.red {
+    background: $color-red;
+  }
+
+  &.green {
+    background: $color-green;
+  }
+
+  &.hue {
+    background: $color-hue;
+  }
+
+  &.saturation {
+    background: $color-saturation;
+  }
+
+  &.desaturation {
+    background: $color-desaturate;
+  }
+
+  &.lighteness {
+    background: $color-lighteness;
+  }
+
+  &.darkness {
+    background: $color-darkness;
+  }
+
+  &.whiteness {
+    background: $color-whiteness;
+  }
+
+  &.blackness {
+    background: $color-blackness;
+  }
+}
+</style> -->

package/src/main.js

@@ -27,6 +27,7 @@ import AppBaseSkeleton from './components/AppBaseSkeleton.vue'
 import GsapPlugin from './plugins/gsap'
 import eventBus from './plugins/bus'
 import helper from './plugins/helper'
+import analytics from './plugins/analytics'
 import mergeLocales from './plugins/i18n'
 import { scormPlugin } from './plugins/scorm'
 import { xapiPlugin } from './plugins/xapi'
@@ -470,5 +471,6 @@ export default {
     //mergeLocales
     mergeLocales(options.i18n.global)
     app.use(helper, '$helper')
+    app.use(analytics, '$analytics')
   }
 }

package/src/module/stores/appStore.js

@@ -10,7 +10,7 @@ export const useAppStore = defineStore('$appStore', {
       status: '',
       anchorStatus: null,
       thisModule: { activities: mappedFiles },
-      appDebugMode: false,
+      appDebugMode: false, //
       currentActivity: null,
       currentPage: null,
       currentBranchPage: null,
@@ -125,7 +125,9 @@ export const useAppStore = defineStore('$appStore', {
      * @description: Getter to return the app status
      */
     getAppStatus: (state) => {
-      return state.compStatusTracker.length ? 'loading' : 'ready'
+      return !state.userDataLoaded || state.compStatusTracker.length
+        ? 'loading'
+        : 'ready'
     },
 
     /**
@@ -286,15 +288,11 @@ export const useAppStore = defineStore('$appStore', {
      * @returns: page {Object}
      */
     getCurrentPage: (state) => {
-      let page = null
       if (state.currentPage !== null) {
-        page = {
-          ...state.currentPage
-        }
-        page.mElements = state.currentPageMediaElements
-        page.timeline = state.currentPageTimeline
+        state.currentPage['mElements'] = state.currentPageMediaElements
+        state.currentPage['timeline'] = state.currentPageTimeline
       }
-      return page
+      return state.currentPage
     },
     /**
      * @description: Getter to return the current branching page
@@ -722,7 +720,7 @@ export const useAppStore = defineStore('$appStore', {
       this.currentBranchPage = data
     },
     /* set/update  page information*/
-    updateCurrentPage({ activity_Id, page_Id }) {
+    updateCurrentPage({ activity_Id, page_Id }, caller = null) {
       if (activity_Id && page_Id) {
         let page
         //id type case PXX_EXX_PXX
@@ -748,6 +746,7 @@ export const useAppStore = defineStore('$appStore', {
         }
         this.currentPage = page
       } else this.currentPage = {}
+      if (caller) console.log('🤙 updateCurrentPage called by', caller)
     },
     /**
       @description update the module data.
@@ -826,11 +825,7 @@ export const useAppStore = defineStore('$appStore', {
              * and create entry for user interaction
              * */
             _keys.forEach((key) => {
-              // if (key !== _keys[0] && key !== _keys[1]) {
-              //   Vue.set(activity, [page], {
-              //     [key]: data[key]
-              //   })
-              // }
+
               if (key !== _keys[0] && key !== _keys[1]) {
                 activity[page] = {
                   [key]: data[key]
@@ -890,18 +885,6 @@ export const useAppStore = defineStore('$appStore', {
       }
     },
 
-    // SET_SHOW_PRIMARY_CONTROL(state, bool) {
-    //   state.showPrimaryCtrl = bool
-    // },
-
-    // SET_SHOW_NAV_LEFT_CONTROL(state, bool) {
-    //   state.showNavLeftCtrl = bool
-    // },
-
-    // SET_SHOW_NAV_RIGHT_CONTROL(state, bool) {
-    //   state.showNavRightCtrl = bool
-    // },
-
     setLrsConfig(data) {
       if (data) this.lrsConfig = data
     },
@@ -922,13 +905,6 @@ export const useAppStore = defineStore('$appStore', {
       this.sideBIsOpen = data
     },
 
-    // async updateDataFetchFromServer(data) {
-    //   if (!data || data.constructor !== Object) return
-    //   Object.keys(data).forEach((k) => {
-    //     this.dataFromServer = { ...this.dataFromServer, [k]: data[k] }
-    //   })
-    // },
-
     updatePreviousActivity(data) {
       this.prevActivity = data
     },

package/src/module/xapi/ADL.js

@@ -74,6 +74,7 @@ export default class ADL {
     statements.forEach((statement) => {
       const withResult =
         statement.verb.id.includes('answered') ||
+        statement.verb.id.includes('played') ||
         statement.verb.id.includes('suspended') ||
         statement.verb.id.includes('completed')