fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.2

package/src/components/AppBase.vue

@@ -1,37 +1,95 @@
 <!--
  @ Description: This is a root component to create the App
- @ What it does: Many things
+ @ What it does:
+  - validate the data for the App configuration
+  - Send the xapi statement
+  - Manage the fetching and setting of data from serveur
  @ Must be used.
 -->
 <template>
   <div id="App-base" fluid :class="{ iPad: resizeiPad }">
-    <transition name="bounce" mode="in-out">
-      <div
-        v-if="showBuildInfo && !buildInfoClicked"
-        id="build-info"
-        @click="buildInfoClicked = true"
-      >
-        <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
-        <span>FCAD {{ this.$helper.getFcadVersion() }}</span>
-        <span>{{ this.$helper.getBuildTime() }}</span>
-      </div>
-    </transition>
-
-    <router-view class="box" />
-    <app-icons />
+    <template v-if="error.length">
+      <b-row>
+        <b-col>
+          <app-base-error-display
+            :errors-list="error"
+            error-type="appConfig"
+            error-title="Configuration de l'application"
+          />
+        </b-col>
+      </b-row>
+    </template>
+    <template v-else>
+      <template>
+        <transition name="bounce" mode="in-out">
+          <div
+            v-if="showBuildInfo && !buildInfoClicked"
+            id="build-info"
+            @click="buildInfoClicked = true"
+          >
+            <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
+            <span>FCAD {{ $helper.getFcadVersion() }}</span>
+            <span>{{ $helper.getBuildTime() }}</span>
+          </div>
+        </transition>
+
+        <router-view class="box" />
+
+        <app-icons />
+      </template>
+    </template>
+    <b-overlay
+      v-show="!appReady"
+      id="overlay_loading"
+      :show="!appReady"
+      rounded="lg"
+      variant="white"
+      blur="3px"
+      opacity="0.8"
+    >
+      <template #overlay>
+        <div class="d-flex grp-spinners align-items-center">
+          <b-spinner small type="grow" variant="secondary"></b-spinner>
+          <b-spinner
+            style="width: 1.2rem; height: 1.2rem"
+            type="grow"
+            variant="secondary"
+          ></b-spinner>
+
+          <b-spinner
+            style="width: 1.8rem; height: 1.8rem"
+            type="grow"
+            variant="dark"
+          ></b-spinner>
+
+          <b-spinner
+            style="width: 1.2rem; height: 1.2rem"
+            type="grow"
+            variant="secondary"
+          ></b-spinner>
+          <b-spinner small type="grow" variant="secondary"></b-spinner>
+          <!-- We add an SR only text for screen readers -->
+          <span class="sr-only">{{ $t('message.loading_state_msg') }}</span>
+        </div>
+      </template>
+    </b-overlay>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
-
+import { timerMixin } from '../mixins/timerMixin'
+import { validateAppContent } from '../shared/validators'
+import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
+import mobileDetect from 'mobile-detect'
 export default {
+  components: { AppBaseErrorDisplay },
+  mixins: [timerMixin],
   props: {
     appConfig: {
       type: Object,
-      default: () => {
-        return {
-          lang: 'fr' // set language of App: default French
-        }
+      required: true,
+      validator: (value) => {
+        if (import.meta.env.DEV) return validateAppContent(value).length === 0
       }
     }
   },
@@ -43,7 +101,8 @@ export default {
       initialDeviceOrentation: null,
       appIsFullScreen: false,
       resizeiPad: false,
-      buildInfoClicked: false
+      buildInfoClicked: false,
+      error: []
     }
   },
   computed: {
@@ -52,8 +111,14 @@ export default {
       'getIsMobile',
       'getDeviceType',
       'getModuleInfo',
+      'getAppStatus',
       'getUserInteraction',
-      'getConnectionInfo'
+      'getConnectionInfo',
+      'getDataFromServer',
+      'getAllActivities',
+      'getMediaPlaybarValues',
+      'getAppConfigs',
+      'getErrorMenu'
     ]),
     getwidth() {
       return window.innerWidth
@@ -61,18 +126,32 @@ export default {
     getheight() {
       return window.innerHeight
     },
+
     showBuildInfo() {
       return (
-        process.env.NODE_ENV === 'production' &&
+        import.meta.env.PROD &&
         window.location.host === 'projets.cegepadistance.ca'
       )
+    },
+    appReady() {
+      let readyState = this.getAppStatus === 'ready' ? true : false
+
+      return readyState
+    },
+    displayLang() {
+      let lang = false
+      const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
+
+      if (this.getModuleInfo.packageType === 'xapi') {
+        lang = displayList.find((l) => l.includes(this.$i18n.locale))
+      }
+      return lang
     }
   },
   watch: {
     getConnectionInfo: {
       //in development environment (localhost), don't wait for the axios call
-
-      immediate: process.env.NODE_ENV === 'development',
+      immediate: import.meta.env.DEV,
       handler() {
         /**
          * Attach listener to detect when user navigates to a new page, switches tabs, closes the tab, minimizes or closes the browser, or, on mobile,
@@ -83,6 +162,7 @@ export default {
          * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
          */
 
+        if (!this.getConnectionInfo) return
         if (this.getIsMobile) {
           document.addEventListener(
             'visibilitychange',
@@ -93,22 +173,6 @@ export default {
             },
             false
           )
-        } else {
-          //attached listener to terminate LMS|LRS communication
-          if (
-            this.getModuleInfo.packageType === 'xapi' &&
-            this.getConnectionInfo &&
-            this.getConnectionInfo.actor &&
-            this.getConnectionInfo.remote
-          ) {
-            window.addEventListener('beforeunload', (e) => {
-              this.executeCloseEventTriggered()
-            })
-          } else
-            window.addEventListener(
-              'beforeunload',
-              this.executeCloseEventTriggered
-            )
         }
         // initialize scorm Commuinication with LMS || xAPI LRS
         if (this.getModuleInfo.packageType === 'scorm') this.$scorm.Initialize()
@@ -132,20 +196,34 @@ export default {
           }
 
           this.$xapi._configLRS(config) // configure and launch LRS
-          this.fetchSettingsFromServer()
-        }
+
+          setTimeout(() => {
+            this.fetchDataFromServer().then(() => {
+              setTimeout(() => {
+                this.setProgress()
+              }, 200)
+            })
+          }, 200)
+        } else this.setProgress()
       }
     }
   },
 
   created() {
-    this.setProgress()
+    if (import.meta.env.DEV) {
+      this.checkForErrors()
+    }
+    //Declare loading state if no error was detected
+
+    if (!this.error.length) {
+      this.updateTracker('appBase', 'loading')
+      this.$store.dispatch('setAppConfigs', this.appConfig)
+    }
+
     window.versionFCAD = this.$helper.getFcadVersionString()
     //check if this is running in a mobile environment and register state in the store
-    const mobileDetect = require('mobile-detect')
-
     const md = new mobileDetect(window.navigator.userAgent)
-    md.mobile()
+    md.mobile() !== null
       ? this.$store.dispatch('setMobileState', true)
       : this.$store.dispatch('setMobileState', false)
     const currentBrowser = this.getBrowser() //get current browser vendor
@@ -155,25 +233,44 @@ export default {
 
     // register device type running the App in the store (ios, Android or Deskop)
     this.$store.dispatch('setDeviceType', this.detectDevice())
-    this.fetchSettingsFromServer()
+
+    this.$bus.$on('set-comp-status', this.updateTracker)
+    this.$bus.$on('send-xapi-statement', this.sendXapiStatements)
+    this.$bus.$on('reset-userdata', this.resetUserData)
+    this.$bus.$on('fire-exit-event', this.endLesson)
+    this.$bus.$on('reset-focus-on', this.resetFocus)
+    this.$bus.$on('move-to-target', this.moveTo)
   },
-  mounted() {
-    // set the language of the app
-    this.setLocale(this.appConfig.lang)
-    this.$bus.$on('set-comp-status', (name, status) =>
-      this.updateTracker(name, status)
+  beforeMount() {
+    window.addEventListener(
+      'beforeunload',
+      (e) => {
+        this.executeCloseEventTriggered()
+        // e.preventDefault()
+        // e.returnValue = true
+      },
+      true
     )
+  },
 
-    this.$bus.$on('set-user-progress', this.setProgress())
+  mounted() {
+    // set the language of the app
+    this.setLocale(this.getAppConfigs.lang)
   },
-  beforeDestroy() {
-    this.$bus.$off('set-comp-status')
+  beforeUnmount() {
+    this.$bus.$off('set-comp-status', this.updateTracker)
+    this.$bus.$off('reset-userdata', this.resetUserData)
+    this.$bus.$off('fire-exit-event', this.endLesson)
+    this.$bus.$off('reset-focus-on', this.resetFocus)
+    this.$bus.$off('send-xapi-statement', this.sendXapiStatements)
+    this.$bus.$off('move-to-target', this.moveTo)
   },
   methods: {
     /**
      * @description set the desired language for the app default is french
      * @param {String} [lang=fr]
      */
+
     setLocale(lang) {
       if (!lang) lang = 'fr'
       else {
@@ -185,9 +282,11 @@ export default {
         this.$i18n.locale = lang
       }
     },
+
     getScormState() {
       return this.$scorm.GetValue('cmi.suspend_data')
     },
+
     getBrowser() {
       let browser
       const test = (regexp) => regexp.test(window.navigator.userAgent) //defining the testing fonction
@@ -241,41 +340,59 @@ export default {
       return device
     },
 
-    fetchSettingsFromServer() {
+    async fetchDataFromServer() {
+      this.updateTracker('appBase_fetch', 'loading')
       if (this.getModuleInfo.packageType !== 'xapi') return
       if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
 
-      const activity_id = this.getModuleInfo.courseID
-        ? this.getConnectionInfo.activity_id.replace(
-            `/${this.getModuleInfo.id}`,
-            ''
-          )
-        : this.getConnectionInfo.activity_id
+      const progress = await this.$xapi._getProgress(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        this.getConnectionInfo.activity_id
+      )
+      const { routeHistory, ...userProgress } = progress
 
-      //Get existing record for user preferred settings
-      const applicationSettings = this.$xapi._getPreferredSettings(
+      const completedState = await this.$xapi._getLessonStatus(
         this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        activity_id
+        this.getConnectionInfo.activity_id
       )
 
-      if (applicationSettings.length && applicationSettings[0].userSettings)
-        //save result to store
-        this.$store.dispatch(
-          'setApplicationSettings',
-          applicationSettings[0].userSettings
-        )
+      //=======UPCOMING: Uncomment lines bellow when these properties are integrated ========
+      // Get existing record for user preferred settings
+      // const applicationSettings = await this.$xapi._getPreferredSettings(
+      //   this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+      //   this.getConnectionInfo.activity_id
+      // )
 
-      //Get existing record for play bar settings
-      const pbValues = this.$xapi._getPlaybarValues(
+      //======= End UPCOMING: Uncomment when this property are integrated ========
+      //Get existing record for play bar settings. Play bar info is from the activity Parent ID and not activity id
+      const _url = new URL(this.getConnectionInfo.activity_id)
+      const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+      const playbarValues = await this.$xapi._getPlaybarValues(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        parentID
+      )
+      const lessonPosition = await this.$xapi._getLessonPosition(
         this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        activity_id
+        this.getConnectionInfo.activity_id
       )
 
-      if (pbValues.length) {
-        //save result to store
-        this.$store.dispatch('setMediaVolume', pbValues[0].volume)
-        this.$store.dispatch('setMediaSubtitles', pbValues[0].subtitlesEnabled)
-      }
+      //Update the App Store data
+      this.$store.dispatch('updateDataFetchFromServer', {
+        userProgress,
+        routeHistory,
+        lessonPosition,
+        completedState,
+        playbarValues
+      })
+      // console.log('DATA FROM SERVER', {
+      //   userProgress,
+      //   routeHistory,
+      //   lessonPosition,
+      //   completedState,
+      //   playbarValues
+      // })
+
+      this.updateTracker('appBase_fetch', 'ready')
     },
 
     executeCloseEventTriggered() {
@@ -293,13 +410,11 @@ export default {
         this.getConnectionInfo.actor &&
         this.getConnectionInfo.remote
       ) {
-        // Communicate ending of activity
-        this.$bus.$emit('fire-exit-event', null, true)
-        this.routeChangeCounter = 0 //reset counter after saving
+        this.endLesson(null, true)
       }
     },
-    setProgress() {
-      this.updateTracker('appBase', 'loading')
+
+    async setProgress() {
       const packageType = this.getModuleInfo.packageType
 
       switch (packageType) {
@@ -317,7 +432,6 @@ export default {
 
               this.$store.dispatch('setUserMetaData', userProgress)
               this.$store.dispatch('setRouteHistory', routeHistory) // update store recored with existing record
-              this.updateTracker('appBase', 'ready')
             }
 
             // No LMS use LocalStorage record
@@ -325,16 +439,12 @@ export default {
             this.$idb.openDB().then(() => {
               this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
                 if (res && res.$record) {
-                  const {
-                    routeHistory,
-                    userSettings,
-                    ...userData
-                  } = res.$record
+                  const { routeHistory, userSettings, ...userData } =
+                    res.$record
                   this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
                   this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
                   if (userSettings)
                     this.$store.dispatch('setApplicationSettings', userSettings) // update store record with existing user settings
-                  this.updateTracker('appBase', 'ready')
                 }
               })
             })
@@ -349,266 +459,591 @@ export default {
               this.getConnectionInfo.actor &&
               this.getConnectionInfo.remote
             ) {
+              if (!this.getDataFromServer) return
               //Try to get the user progress from LRS
-              const userProgress = this.$xapi._getProgress(
-                this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                this.getConnectionInfo.activity_id
-              )
-              if (userProgress) {
-                const { routeHistory, ...userData } = userProgress
-                // console.log('Progress from Server: ', {
-                //   userData,
-                //   routeHistory
-                // })
-                this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing record
-              }
-              this.updateTracker('appBase', 'ready')
+              const { playbarValues, routeHistory, userProgress } =
+                this.getDataFromServer
+
+              this.$store.dispatch('setUserMetaData', userProgress) // update store record with existing record
+              this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing record
+              if (playbarValues)
+                this.$store.dispatch('setMediaPLaybarValues', playbarValues) // update store record with existing record
+              //Should update the playbar values
             } else {
               //Get existing records for user data in local store
               this.$idb.openDB().then(() => {
-                this.$idb
-                  .getFromDB(this.getModuleInfo.idbID)
-                  .then((res) => {
-                    if (res && res.$record) {
-                      const {
-                        routeHistory,
-                        userSettings,
-                        ...userData
-                      } = res.$record
-
-                      this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                      this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
-
-                      if (userSettings) {
-                        this.$store.dispatch(
-                          'setApplicationSettings',
-                          userSettings
-                        ) // update store record with existing user setting
-                      }
+                this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
+                  if (res && res.$record) {
+                    const { routeHistory, userSettings, ...userData } =
+                      res.$record
+
+                    this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
+                    this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
+
+                    if (userSettings) {
+                      this.$store.dispatch(
+                        'setApplicationSettings',
+                        userSettings
+                      ) // update store record with existing user setting
                     }
-                  })
-                  .then(() => this.updateTracker('appBase', 'ready'))
+                  }
+                })
               })
             }
           }
 
           break
       }
+
+      this.updateTracker('appBase', 'ready')
     },
     updateTracker(name, status) {
       this.$store.dispatch('updateCompStatusTracker', { name, status })
-    }
-  }
-}
-</script>
-<style lang="scss">
-#App-base {
-  width: 100%;
-  height: 100vh;
+    },
+    //============================Multiple Satements  Sending at once======================================
+    /**
+     * @description Send a custom statements to the lrs. Receive some custom params and build a statement to send
+     * @param {Array} stmts- array of stamtents objects that will be send to the server
+     * @param {Function} cb
+     */
+    async sendXapiStatements(stmts, cb = null, withFetch = true) {
+      cb = cb || null
+      if (!stmts) return
+      let stmtsArray = []
 
-  #build-info {
-    opacity: 0.9;
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    color: #fff;
-    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
-    background-color: hotpink;
-    font-family: serif, Impact, Arial;
-    font-size: 11px;
-    padding: 3px;
-    cursor: pointer;
-    z-index: 999;
-    span {
-      text-align: center;
-      display: block;
-    }
-  }
+      stmts.constructor === Object
+        ? stmtsArray.push(stmts)
+        : (stmtsArray = [...stmts])
 
-  .module {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-
-    .navbar {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 10;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      align-content: start;
-      width: 67px;
-      height: 100%;
-    }
+      const crsParams = this.getModuleInfo
+
+      if (
+        this.getConnectionInfo &&
+        this.getConnectionInfo.actor &&
+        this.getConnectionInfo.remote
+      ) {
+        const stmtsQueue = []
 
-    .module-wrapper {
-      width: 100%;
-      position: relative;
+        stmtsArray.forEach((stmtObj) => {
+          const {
+            id,
+            result = null,
+            definition,
+            objectType,
+            type,
+            description,
+            verb,
+            extensions,
+            duration,
+            completion
+          } = stmtObj
 
-      #wrapper-content {
-        width: 100%;
-        position: relative;
-        padding-right: 0 !important;
-        padding-left: 0 !important;
+          //define the activity id
+          let activityId
+          //=========================== activity ID of Object ==========================================
+          /*
+           * Define the acitivity id of the stmt according to following:
+           * The statement is sent at component/ element level : there is Id and Id is not null (id of the element)
+           * The statement is sent at module level. there is no id
+           *  the Statement must be sent at the course level: There course_id exist and id is the course_id
+           */
 
-        &.active {
-          overflow: hidden;
-        }
+          if (id && id !== crsParams.courseID)
+            activityId = `${this.getConnectionInfo.activity_id}/${id}`
+          else if (crsParams.courseID && id === crsParams.courseID)
+            activityId = this.getConnectionInfo.activity_id.replace(
+              `/${crsParams.id}`,
+              ''
+            )
+          else activityId = `${this.getConnectionInfo.activity_id}`
+
+          //define the statement object
+          let stmt = {
+            actor: this.getConnectionInfo.actor,
+            verb: (() => {
+              if (verb && this.$xapi.verbs[verb.trim()])
+                return this.$xapi.verbs[verb.trim()]
+              else {
+                /**
+                 * Determine the verb to use by:
+                 * Checking if the activity is already included in the data fetch from server.
+                 *  If not, fetch directly from the server
+                 * There is a found, verb is 'RESUMED'
+                 * There is no found, verb is 'INITIALIZED'
+                 */
 
-        .box {
-          width: 100%;
-          height: 95%;
+                //Regex to test that id contains list of word
+                const regex =
+                  /(menu|activite_(\d)*|A(\d){2}|conclusion|introduction)$/gm
 
-          .app-page {
-            width: 100%;
-            margin-top: 60px;
+                switch (true) {
+                  case regex.test(activityId): {
+                    //ID is of activity (menu, conclusion, activite, intro )
+                    const activityStr = activityId.split('/').toReversed()[0]
 
-            .row {
-              width: 100%;
-              margin-right: 0;
-              margin-left: 0;
+                    if (!this.getDataFromServer)
+                      return this.$xapi.verbs.initialized
+                    const { userProgress } = this.getDataFromServer
+                    let activity_ref
+                    //Define the activity reference
+                    if (['menu', 'introduction', 'A00'].includes(activityStr))
+                      activity_ref = 'A00'
+                    else if (['conclusion', 'A99'].includes(activityStr))
+                      activity_ref = 'A99'
+                    else if (activityStr.includes('activite_')) {
+                      const aNum = activityStr.split('_')[1]
+                      activity_ref = aNum.length > 1 ? `A${aNum}` : `A0${aNum}`
+                    } else activity_ref = activityStr // should be AXX
+
+                    if (userProgress && userProgress[activity_ref])
+                      return this.$xapi.verbs.resumed
+                    else return this.$xapi.verbs.initialized
+                  }
+                  default: {
+                    //ID his of Lesson or doesn't exist relate (menu, conclusion, activite, intro )
+                    if (
+                      this.$xapi._getAgent(
+                        this.getConnectionInfo.actor.mbox.replace(
+                          'mailto:',
+                          ''
+                        ),
+                        activityId
+                      )
+                    )
+                      return this.$xapi.verbs.resumed
+                    else return this.$xapi.verbs.initialized
+                  }
+                }
+              }
+            })(),
+            object: {
+              id: activityId,
+              definition: {
+                name: {
+                  [this.displayLang]: `${definition}`
+                },
+                description: {
+                  [this.displayLang]: `${description}`,
+                  type: type || 'http://activitystrea.ms/schema/1.0/page'
+                }
+              },
+              objectType: objectType || 'Activity'
+            },
+            context: {
+              contextActivities: {}
             }
           }
-        }
+          //===================== contextActivity parent =====================//
+          /*
+         Define parent in the contextActivity
+         When:
+          1- when we have the id (parent === module)
+          2- when with have no id but we have a course_id (parent is cours_id)
+          */
+          const activityParent = (() => {
+            if (crsParams.courseID && !id)
+              return {
+                id: this.getConnectionInfo.activity_id.replace(
+                  `/${crsParams.id}`,
+                  ''
+                ),
+                objectType: objectType || 'Activity'
+              }
+            else if (id && id !== crsParams.courseID)
+              return {
+                id: `${this.getConnectionInfo.activity_id}`,
+                objectType: objectType || 'Activity'
+              }
+            else return null
+          })()
+
+          // Add the parent key of the context activity
+          if (activityParent)
+            stmt.context.contextActivities['parent'] = [activityParent]
+
+          //===================== contextActivity grouping =====================//
+
+          //Defining the Grouping of the context activity
+          const activityGrouping = (() => {
+            if (
+              activityParent &&
+              crsParams.courseID &&
+              activityParent.id.includes(crsParams.id)
+            )
+              return {
+                id: this.getConnectionInfo.activity_id.replace(
+                  `/${crsParams.id}`,
+                  ''
+                )
+              }
+            else return null
+          })()
+          //Adding the grouping of the context activity
+          if (activityGrouping)
+            stmt.context.contextActivities['grouping'] = [activityGrouping]
+
+          //add result data to statement
+          if (result) stmt['result'] = result
+
+          // Add duration info to statement when activity is complete
+          if (['completed', 'suspended', 'terminated'].includes(verb)) {
+            if (!stmt.result) stmt.result = {} // check if exist
+
+            let d
+
+            duration
+              ? (d = `PT${duration.split(':')[0]}H${duration.split(':')[1]}M${
+                  duration.split(':')[2]
+                }S`)
+              : (d = `PT${this.activityDuration.split(':')[0]}H${
+                  this.activityDuration.split(':')[1]
+                }M${this.activityDuration.split(':')[2]}S`)
+
+            stmt.result['duration'] = d
+            //Set the completion status of the result
+            if (completion) stmt.result['completion'] = completion
+          }
+
+          // ===================== Extension of the Object definition =====================//
+          if (
+            extensions &&
+            extensions.constructor === Array &&
+            extensions.length > 0
+          ) {
+            //Validate each entry given in the extension Array
+            extensions.forEach((e) => {
+              //entry must be of type Object
+              if (e.constructor !== Object)
+                throw new Error(`'${e}' is not a valid value. Must be Object`)
+
+              //Entry Must have id and content keys
+              const validKey = ['id', 'content']
+              Object.keys(e).forEach((key) => {
+                if (!validKey.includes(key))
+                  throw new Error(`Not valid key '${key}' for entry ${e}`)
+
+                //id must be a String
+                if (key === 'id' && e[key] && e[key].constructor !== String)
+                  throw new Error(`'${key}' must be of type String`)
+              })
+
+              stmt.object.definition['extensions'] = {
+                ...stmt.object.definition['extensions'],
+                [`${this.getConnectionInfo.activity_id}/${e.id}`]: e.content
+              }
+            })
+          }
+
+          //============================================================
+          stmtsQueue.push(stmt)
+        })
+
+        this.$xapi._sendStatements(stmtsQueue, cb, withFetch)
       }
+    },
 
-      .app-comp-table-of-content {
-        display: -webkit-flex;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        position: absolute;
-        top: 0px;
-        min-height: 100%;
-        z-index: 1;
+    /**
+     * @param {Function} cb
+     * @param {Bool} option - set if must use Fetch API or not.  default = false
+     */
+    endLesson(cb, option = true) {
+      cb = cb || null
+      let text
+      //Defining the text to display for stmt description and definition
+      switch (this.$i18n.locale) {
+        case 'fr':
+          if (this.getModuleInfo.courseID)
+            text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+          else text = `Le ${this.getModuleInfo.id}`
+          break
+        case 'en':
+          if (this.getModuleInfo.courseID)
+            text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+          else text = `The ${this.getModuleInfo.id}`
+          break
       }
-    }
 
-    .app-nav {
-      .md-controller {
-        display: -webkit-flex;
-        display: flex;
-        flex-direction: row;
-        align-items: baseline;
-        //width: $widthPlayer;
-        width: 50%;
-
-        .ctrl-play {
-          display: -webkit-flex;
-          display: flex;
-          flex-direction: row;
-          align-items: baseline;
-          //width: $widthPlayer;
-          width: 50%;
-
-          #progress-bar {
-            display: block;
-            //width: $widthProgressBar;
-            width: 150px;
-            //height: $heigthProgressBar;
-            height: 10px;
-            position: relative;
-            overflow: hidden;
-
-            #progress {
-              display: block;
-              height: 100%;
-              background-color: red;
+      // Retrieve only user data in lessons front its interaction that we want to send to the LRS.
+      // Note: User Settings are sent on a different URI and statement
+      const { isFistTime, userSettings, ...lessonsData } =
+        this.getUserInteraction
+
+      const stmt = {
+        verb: 'suspended',
+        definition: text,
+        description: text,
+        extensions: [
+          {
+            id: 'ending-point',
+            content: this.$route.name
+          },
+          {
+            id: 'user-data',
+            content: {
+              routeHistory: this.getRouteHistory,
+              ...lessonsData
             }
+          }
+        ],
+        duration: this.lessonDuration
+      }
 
-            #progress-shaddow {
-              display: block;
-              height: 100%;
-              position: absolute;
-              top: 0px;
-              left: 0px;
-              z-index: -1;
+      const endStmt = { ...stmt }
+      endStmt.verb = 'terminated'
+      //================================STATEMENT FOR THE PLAYBAR ===============================================
+      //Creating custom statement
+      const stmtPlaybar = {
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+        verb: 'played',
+        definition: text,
+        description: text,
+        extensions: [
+          {
+            id: 'playbar-values',
+            content: {
+              ...this.getMediaPlaybarValues()
             }
           }
-        }
+        ]
+      }
+      //================================STATEMENT FOR THE PLAYBAR ===============================================
 
-        .ctrl-subtitle {
-          //width: $widthCtrSubtitle;
-          width: 10%;
-        }
+      this.sendXapiStatements([stmtPlaybar, stmt, endStmt], null, option) //send xapi statement
 
-        .ctrl-sound {
-          display: -webkit-flex;
-          display: flex;
-          flex-direction: row;
-          align-items: baseline;
-          justify-content: space-between;
-          //width: $widthCtrlSound;
-          width: 40%;
-        }
+      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
+
+      if (cb) cb()
+    },
+
+    /** @description Method to reset the progression status of user
+     *  the function reset first the user data in the app store then
+     *  reset the idbStore if APP is running locally or prepare a statement with new userData Object to be sent over the LRS
+     *  for the connected userAgent, activity if APP is Running online
+     *  @event 'send-xapi-statement' emit to AppBaseModule.vue that will be executed by sendXapiStatement(s)
+     */
+    async resetUserData() {
+      this.$bus.$emit('set-comp-status', 'appBase', 'loading')
+      this.$store.dispatch('setUserMetaData', {}) // resetting store record with existing for user data
+      this.$store.dispatch('setRouteHistory', []) // resetting  store record for all last visited pages
+
+      this.$bus.$emit('stop-timer')
+      if (this.getModuleInfo.packageType !== 'xapi') return
+
+      if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)
+        return this.$idb.deleteDataInDB(this.getModuleInfo.idbID) //Must call the idb delete methode to reset indexDB store
+
+      //Send a completion statement for the current activity
+      let aTitle = `${this.$t('text.activity')} ${
+        this.getConnectionInfo.activity_id
+      }`
+
+      //Custom text for description and definition of the stament to be sent
+      let text
+      this.$i18n.locale == 'fr'
+        ? (text = `L'${aTitle} de ${this.getModuleInfo.id}`)
+        : (text = `The ${aTitle} of ${this.getModuleInfo.id}`)
+
+      /*Dispatch a send statement event to method AppBaseModule sendXapiStatement(s)
+       Content values are:
+          User data URI: "host_address/course_ID/Lesson_ID/user-data" ex: "http://localhost:8080/330N01FD6001/m1l1/ // user-data" and
+          User Bookmark URI: "host_address/course_ID/Lesson_ID/ending-point" ex: ""http://localhost:8080/330N01FD6001/m1l1/ending-point": "menu"
+       */
+      const baseStmt = {
+        definition: text,
+        description: text
+      }
+      const exitStmt = {
+        ...baseStmt,
+        verb: 'exited'
       }
+
+      const endStmt = {
+        ...baseStmt,
+        verb: 'terminated',
+        extensions: [
+          {
+            id: 'ending-point',
+            content: this.$route.name
+          },
+          {
+            id: 'user-data',
+            content: new Object()
+          }
+        ],
+        duration: null,
+        completion: false // Resetting completion state value to
+      }
+
+      this.sendXapiStatements([exitStmt, endStmt])
+
+      this.$bus.$emit('set-comp-status', 'appBase', 'ready')
+
+      // Creating a asynchronous fecth method that would resolve after a 2 second
+      const fetchData = async () => {
+        return new Promise((resolve) => {
+          setTimeout(
+            () =>
+              resolve(
+                this.$xapi._getProgress(
+                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+                  this.getConnectionInfo.activity_id
+                )
+              ),
+            2000
+          )
+        })
+      }
+
+      // Make request over user current data after sending statement to assure that the resetting worked
+      const usrData = await fetchData()
+      this.$bus.$emit('reset-complete')
+      console.log('😄 USER STATUS: ', {
+        User: this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        ActivityID: this.getConnectionInfo.activity_id,
+        Record: usrData
+      })
+    },
+
+    /**
+     * @description- Scroll directly to the target* containt
+     * target content can be any Node defined by the ID
+     * @param {String} target = id of HTMLElement. if target don't existe will scroll to wrapper-content
+     * @param {Obj} opt = scroll behavior to apply default { top: 0, left: 0, behavior: 'auto' }
+     */
+
+    moveTo(target, opt = { top: 0, left: 0, behavior: 'auto' }) {
+      if (target.constructor !== String)
+        throw new Error(
+          '⚠️  Not supported value for @target. Must be of type String'
+        )
+
+      let skipTo = document.querySelector(`#wrapper-content`) //default definition of main element
+
+      if (target) {
+        let targetEl = document.querySelector(`#${target}`) // search for node element specified as main
+
+        if (targetEl) skipTo = targetEl
+      }
+
+      opt.top = skipTo.offsetTop + opt.top // Set scroll top from target top
+
+      skipTo.setAttribute('tabIndex', -1) //Allowing accessibility control with keyboard
+      window.scrollTo(opt)
+      this.resetFocus(skipTo) //focus on the target
+    },
+
+    /**
+     * @description Reset the focus the element
+     * @param {HTMLElement} e - element that will get focus
+     */
+    resetFocus(e) {
+      if (e) e.focus()
+    },
+    /**
+     * @description Mothods to validate that application settings are correctly
+     * Opens error component when configurations are not correct
+     *
+     */
+    checkForErrors() {
+      let errMessage
+
+      if (validateAppContent(this.appConfig, true).length) {
+        return (this.error = validateAppContent(this.appConfig, true))
+      }
+      const { list: activitiesList } = this.getAllActivities()
+      let { no_menu, is_single_activity } = this.appConfig
+
+      let noMenu = no_menu == undefined ? false : no_menu
+
+      let isSingleActivity =
+        is_single_activity == undefined ? false : is_single_activity
+
+      let err
+      if (this.getErrorMenu) err = true
+      else err = false
+
+      let consoleMsg = ''
+      //error if There is more than one activity when is_single_activity
+      switch (true) {
+        case isSingleActivity && activitiesList.size > 1:
+          errMessage = `La configuration choisie ne permet pas d'avoir plus d'une activité dans l'application. \n Vous devez soit désactiver l'option 💲<b>is_single_activity</b> ou retirer TOUTES les autres activités`
+
+          consoleMsg = `Cannot have more than 1 activity with this settings configuration. Either disable 💲is_single_activity or DELETE ALL others activities`
+          this.error.push(errMessage)
+          break
+
+        case isSingleActivity && !noMenu:
+          errMessage = `Le MENU n'est pas disponible avec la configuration choisie.\n Vous devez soit désactiver l'option  💲<b>no_menu</b> ou l'option 💲<b>is_single_activity</b>`
+          consoleMsg = `Cannot have MENU with current settings configuration. Either set 💲no_menu:false or 💲is_single_activity:false`
+          this.error.push(errMessage)
+          break
+
+        case err:
+          errMessage = `Il y une erreur dans votre fichier menu.setting.js. \n ouvrez votre console pour voir l'erreur et corriger la dans menu.setting.js  `
+          consoleMsg = this.getErrorMenu
+          this.error.push(errMessage)
+          break
+      }
+
+      if (errMessage)
+        return console.warn(
+          `%c  WARNING!>>> ${consoleMsg}`,
+          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+        )
     }
   }
 }
-
-.macWarn-overlay {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 99999;
-  width: 100%;
-  height: 100vh;
-  display: none;
-  background-color: rgba(0, 0, 0, 0.92);
-  opacity: 0;
-  &.warningPortait {
-    display: block;
-    opacity: 1;
+</script>
+<style lang="scss">
+body {
+  &:focus {
+    border: none !important;
   }
+}
+#App-base {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
 
-  .macWarn-box {
-    width: 50%;
-    position: absolute;
-
-    top: calc(45% - 15% / 2);
-    left: 25%;
+  #overlay_loading {
+    position: fixed !important;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9999;
 
-    h1 {
-      text-align: center;
-      color: #fff !important;
+    .grp-spinners span {
+      margin: 0px 2px;
     }
+  }
 
-    p {
+  #build-info {
+    opacity: 0.9;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    color: #fff;
+    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
+    background-color: hotpink;
+    font-family: serif, Impact, Arial;
+    font-size: 11px;
+    padding: 3px;
+    cursor: pointer;
+    z-index: 999;
+    span {
       text-align: center;
-      font-size: 1.3rem;
-      color: #fff !important;
-    }
-
-    #btn-warning-ok {
       display: block;
-      margin: 10px auto;
     }
   }
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-.fade-enter, .fade-leave-to
-/* .component-fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-
-.app-icons-svg {
-  width: 30px;
-  height: 30px;
-  fill: #fff;
-  stroke: #fff;
-  cursor: pointer;
-}
 
-.svg-hidden {
-  display: none;
+  .box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
 }
 </style>