fcad-core-dragon 2.0.0-beta.8 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fcad-core-dragon",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0",
   "private": false,
   "type": "module",
   "main": "./src/main.js",

package/src/assets/data/onboardingMessages.json

@@ -1,47 +1,47 @@
-{
-  "message_1": {
-    "type": "popup-avert",
-    "value": {
-      "title": "Bienvenue dans la visite guidée du FCAD !",
-      "hypertext_1": "<p>Le bouton Confirmer vous fera passer à la prochaine étape de la visite.</p><p>Vous pouvez y mettre fin en tout temps avec le bouton Annuler.</p>"
-    }
-  },
-  "message_2": {
-    "type": "tooltip",
-    "value": {
-      "target": "activity_progress",
-      "title": "Navigation secondaire",
-      "content": "<p>Les flèches permettent de passer à la page précédente ou suivante de l'activité.</p><p>Les rectangles représentent une section de l'activité.</p>"
-    }
-  },
-  "message_3": {
-    "type": "tooltip",
-    "value": {
-      "target": "btn_back_summary",
-      "title": "Navigation secondaire",
-      "content": "<p>Ce bouton permet de retourner au sommaire de l'activité en tout temps.</p>"
-    }
-  },
-  "message_4": {
-    "type": "tooltip",
-    "value": {
-      "target": "primary_activity",
-      "title": "Navigation principale",
-      "content": "<p>La navigation principale permet de valider ses réponses de quiz et de passer à la page suivante.</p>"
-    }
-  },
-  "message_5": {
-    "type": "popup-avert",
-    "value": {
-      "title": "Visite guidée",
-      "hypertext_1": "<p>Message pour la barre de lecture.</p>"
-    }
-  },
-  "message_6": {
-    "type": "popup-avert",
-    "value": {
-      "title": "Visite guidée",
-      "hypertext_1": "<p>Message pour les Paramètres.</p>"
-    }
-  }
-}
+{
+  "message_1": {
+    "type": "popup-avert",
+    "value": {
+      "title": "Bienvenue dans la visite guidée du FCAD !",
+      "hypertext_1": "<p>Le bouton Confirmer vous fera passer à la prochaine étape de la visite.</p><p>Vous pouvez y mettre fin en tout temps avec le bouton Annuler.</p>"
+    }
+  },
+  "message_2": {
+    "type": "tooltip",
+    "value": {
+      "target": "activity_progress",
+      "title": "Navigation secondaire",
+      "content": "<p>Les flèches permettent de passer à la page précédente ou suivante de l'activité.</p><p>Les rectangles représentent une section de l'activité.</p>"
+    }
+  },
+  "message_3": {
+    "type": "tooltip",
+    "value": {
+      "target": "btn_back_summary",
+      "title": "Navigation secondaire",
+      "content": "<p>Ce bouton permet de retourner au sommaire de l'activité en tout temps.</p>"
+    }
+  },
+  "message_4": {
+    "type": "tooltip",
+    "value": {
+      "target": "primary_activity",
+      "title": "Navigation principale",
+      "content": "<p>La navigation principale permet de valider ses réponses de quiz et de passer à la page suivante.</p>"
+    }
+  },
+  "message_5": {
+    "type": "popup-avert",
+    "value": {
+      "title": "Visite guidée",
+      "hypertext_1": "<p>Message pour la barre de lecture.</p>"
+    }
+  },
+  "message_6": {
+    "type": "popup-avert",
+    "value": {
+      "title": "Visite guidée",
+      "hypertext_1": "<p>Message pour les Paramètres.</p>"
+    }
+  }
+}

package/src/components/AppBase.vue

@@ -62,10 +62,18 @@ import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore.js'
 import { timerMixin } from '../mixins/timerMixin'
 import { validateAppContent } from '../shared/validators'
-
+import { computed } from 'vue'
 import mobileDetect from 'mobile-detect'
 export default {
   mixins: [timerMixin],
+  provide() {
+    return {
+      elapsedIdleTime: computed(() => this.elapsedIdleTime),
+      timerCurrentState: computed(() => this.timerCurrentState),
+      lessonDuration: computed(() => this.lessonDuration),
+      activityDuration: computed(() => this.activityDuration)
+    }
+  },
   props: {
     appConfig: {
       type: Object,
@@ -221,6 +229,20 @@ export default {
         }
       }
     }
+    //===========FOR TESTING TIMER TIMEOUT====//
+    // elapsedIdleTime: {
+    //   handler() {
+    //     console.log(
+    //       '⌛:',
+    //       this.elapsedIdleTime,
+    //       this.timerCurrentState,
+    //       this.activityDuration
+    //     )
+
+    //     //max idle time allowed 300s (5 min)
+    //   },
+    //   immediate: true
+    // }
   },
 
   created() {
@@ -254,6 +276,9 @@ export default {
     this.$bus.$on('fire-exit-event', this.endLesson)
     this.$bus.$on('reset-focus-on', this.resetFocus)
     this.$bus.$on('move-to-target', this.moveTo)
+    this.$bus.$on('start-timer', this.startAppTimer)
+    this.$bus.$on('start-idle-detector', this.setIdleDetector)
+    this.$bus.$on('stop-idle-detector', this.unsetIdleDetector)
   },
   beforeMount() {
     window.addEventListener(
@@ -278,7 +303,9 @@ export default {
     this.$bus.$off('reset-focus-on', this.resetFocus)
     this.$bus.$off('send-xapi-statement', this.sendXapiStatements)
     this.$bus.$off('move-to-target', this.moveTo)
-
+    this.$bus.$off('start-idle-detector', this.setIdleDetector)
+    this.$bus.$off('stop-idle-detector', this.unsetIdleDetector)
+    this.$bus.$off('start-timer', this.startAppTimer)
     if (this.getAppConfigs.remote) this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
   methods: {
@@ -294,6 +321,31 @@ export default {
       'setMobileState',
       'setCurrentBrowser'
     ]),
+    startAppTimer() {
+      if (this.timerCurrentState == 'started') this.stopTimer('activity')
+      this.startTimer('activity')
+    },
+
+    setIdleDetector() {
+      setTimeout(() => {
+        this.startIdleTimer() //start the iddle dectection
+        document.addEventListener('mousedown', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('mousemove', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('keypress', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('touchmove', this.resetIdleTimer, false) //set eventlisteners
+      }, 1000)
+    },
+    /*
+     * stop the idle timer and remove hidle-dector listeners
+     */
+    unsetIdleDetector() {
+      this.stopIdleTimer()
+      document.removeEventListener('mousedown', this.resetIdleTimer, false)
+      document.removeEventListener('mousemove', this.resetIdleTimer, false)
+      document.removeEventListener('keypress', this.resetIdleTimer, false)
+      document.removeEventListener('touchmove', this.resetIdleTimer, false)
+    },
+
     setInitialLoadingDone() {
       this.initialLoading = false
     },
@@ -422,6 +474,80 @@ export default {
 
       const { routeHistory = [], ...userProgress } = userData
 
+      const completedState = lessonStatus || {}
+      const lessonPosition = savedPoint || ''
+      const applicationSettings = preferredSettings || {}
+      //====FOR TESTING====//
+      // console.log('💾  RECORDS ', {
+      //   userProgress,
+      //   routeHistory,
+      //   lessonPosition,
+      //   completedState,
+      //   playbarValues,
+      //   applicationSettings
+      // })
+      //Update the App Store data
+      this.updateDataFetchFromServer({
+        userProgress,
+        routeHistory,
+        lessonPosition,
+        completedState,
+        playbarValues,
+        applicationSettings
+      }).then(() => {
+        this.updateTracker('appBase_fetch', 'ready')
+      })
+    },
+
+    async fetchDataFromServerOptimized() {
+      this.updateTracker('appBase_fetch', 'loading')
+      if (this.getModuleInfo.packageType !== 'xapi') return
+      if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
+
+      const actorMbox = this.getConnectionInfo.actor.mbox.replace('mailto:', '')
+      const activityId = this.getConnectionInfo.activity_id
+      const _url = new URL(activityId)
+      const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+
+      const lessonProgressParam = { email: actorMbox, activityId }
+      const lessonStateParam = {
+        email: actorMbox,
+        activityId,
+        verb: 'completed'
+      }
+      const lessonPosionParam = {
+        email: actorMbox,
+        activityId
+      }
+      const playbarParam = {
+        email: actorMbox,
+        activityId,
+        verb: 'played'
+      }
+      const preferencesParam = {
+        email: actorMbox,
+        activityId: parentID,
+        verb: 'preferred'
+      }
+
+      const fetchParams = [
+        lessonProgressParam,
+        lessonStateParam,
+        lessonPosionParam,
+        playbarParam,
+        preferencesParam
+      ]
+
+      const {
+        userData,
+        savedPoint,
+        preferredSettings,
+        playbarValues,
+        lessonStatus
+      } = await this.$xapi._getBulkData(fetchParams)
+
+      const { routeHistory = [], ...userProgress } = userData
+
       const completedState = lessonStatus || {}
       const lessonPosition = savedPoint || ''
       const applicationSettings = preferredSettings || {}
@@ -929,7 +1055,8 @@ export default {
       this.setApplicationSettings({}) // resetting store record for settings
       this.setRouteHistory([]) // resetting  store record for all last visited pages
 
-      this.$bus.$emit('stop-timer')
+      // this.$bus.$emit('stop-timer')
+      this.stopTimer()
       if (this.getModuleInfo.packageType !== 'xapi') return
 
       if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)