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

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

@@ -36,7 +36,12 @@
       </transition>
 
       <router-view class="box" />
-
+      <div v-if="appDebugMode" class="timer">
+        <!-- <div class="timer"> -->
+        <div>Act: {{ appTimer.ISOTimeParser(activityDuration) }}</div>
+        <span>&nbsp|&nbsp</span>
+        <div>Les: {{ appTimer.ISOTimeParser(lessonDuration) }}</div>
+      </div>
       <app-icons-next :extra-icons="userExtraIcons" />
     </template>
 
@@ -61,18 +66,19 @@
 <script>
 import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore.js'
-import { timerMixin } from '../mixins/timerMixin'
+import { Timer } from '../composables/useTimer.js'
+import { IdleDetector } from '../composables/useIdleDetector.js'
 import { validateAppContent } from '../shared/validators'
-import { computed } from 'vue'
+import { version as fcadVersion } from '../../package.json'
+import { computed, h, reactive } 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)
+      lessonDuration: computed(() => this.lessonDuration), //exposing the lesson Duration variable to all components
+      elapsedIdleTime: computed(() => this.idleDetector.getElapsedTime()), //exposing idle detector elapse time to all components
+      appTimer: this.appTimer //exposing the app timer instance to all components
     }
   },
   props: {
@@ -86,7 +92,9 @@ export default {
   },
   setup() {
     const store = useAppStore()
-    return { store }
+    const appTimer = reactive(new Timer('ativityTimer')) // Making Timer instance reactive to be able to track changes
+    const idleDetector = reactive(new IdleDetector()) // Making detector instance reactive.
+    return { store, appTimer, idleDetector }
   },
 
   data() {
@@ -99,7 +107,10 @@ export default {
       buildInfoClicked: false,
       error: [],
       initialLoading: true,
-      f5KeyPressed: false
+      f5KeyPressed: false,
+      lessonDuration: 0,
+      idleTimeout: 5 * 60000, //5 mins: this is the time of inactivity before considering the user is idle
+      starterTimeout: null
     }
   },
   computed: {
@@ -117,8 +128,16 @@ export default {
       'getErrorMenu',
       'getRouteHistory',
       'getBookmarkEnabled',
+      'getAppDebugMode',
       'getApplicationSettings'
     ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    activityDuration() {
+      return this.appTimer.getTime() // return the time duration in seconds
+    },
+
     getwidth() {
       return window.innerWidth
     },
@@ -134,12 +153,9 @@ export default {
     },
     appReady() {
       let readyState = this.getAppStatus === 'ready' ? true : false
-      if (readyState) {
-        this.setInitialLoadingDone()
-      }
-
       return readyState
     },
+
     displayLang() {
       let lang = false
       const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
@@ -162,6 +178,20 @@ export default {
     }
   },
   watch: {
+    initialLoading: {
+      deep: true,
+      handler(newVal) {
+        if (newVal !== false) {
+          return
+        }
+        const eventParams = {
+          fcad_version: fcadVersion,
+          course_id: this.getAppConfigs.crs_id,
+          lesson_id: this.getAppConfigs.id
+        }
+        this.$analytics.sendEvent('user_meta', eventParams)
+      }
+    },
     'store.$state.userDataLoaded': {
       handler() {
         !this.store.$state.userDataLoaded
@@ -169,6 +199,13 @@ export default {
           : this.updateTracker('appBase', 'ready')
       },
       immediate: true
+    },
+    appReady: {
+      handler(newValue) {
+        if (newValue) {
+          this.setInitialLoadingDone()
+        }
+      }
     }
   },
 
@@ -203,24 +240,19 @@ 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.$analytics.init(this.getAppConfigs.analytics_id, this.$router)
     this.$bus.$on('start-timer', this.startAppTimer)
+    this.$bus.$on('stop-app-timer', this.stopAppTimer)
     this.$bus.$on('start-idle-detector', this.setIdleDetector)
     this.$bus.$on('stop-idle-detector', this.unsetIdleDetector)
   },
   beforeMount() {
-    window.addEventListener('keydown', this.handleF5KeyPressed)
     window.addEventListener(
       'beforeunload',
       (e) => {
+        this.executeCloseEventTriggered()
         // e.preventDefault()
         // e.returnValue = true
-
-        //prevent app to send/Save data when F5 is pressed to reload app
-        if (this.f5KeyPressed) return
-
-        this.executeCloseEventTriggered()
-
-        //debugger
       },
       true
     )
@@ -230,6 +262,7 @@ export default {
     // set the language of the app
     this.setLocale(this.getAppConfigs.lang)
     window.addEventListener('keydown', this.handleF5KeyPressed)
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
   },
   beforeUnmount() {
     this.$bus.$off('set-comp-status', this.updateTracker)
@@ -241,7 +274,9 @@ export default {
     this.$bus.$off('start-idle-detector', this.setIdleDetector)
     this.$bus.$off('stop-idle-detector', this.unsetIdleDetector)
     this.$bus.$off('start-timer', this.startAppTimer)
+    this.$bus.$off('stop-app-timer', this.stopAppTimer)
     window.removeEventListener('keydown', this.handleF5KeyPressed)
+    window.removeEventListener('beforeunload', this.handleBeforeUnload)
     if (this.getAppConfigs.remote && this.unsubscribeToSetConfig)
       this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
@@ -258,30 +293,82 @@ export default {
       'setMobileState',
       'setCurrentBrowser'
     ]),
+    /**
+     * @description start the app timer instance
+     * Check if the timer is already started, if yes it add the activity duration
+     * to the lesson duration and restart the timer
+     */
+
     startAppTimer() {
-      if (this.timerCurrentState == 'started') this.stopTimer('activity')
-      this.startTimer('activity')
+      if (this.$route.name === 'module') return // don't start timer when in menu
+      if (this.appTimer.getTimerState() == 'started') {
+        this.lessonDuration += this.activityDuration //
+        this.appTimer.stop() // Start the activity timer
+      }
+
+      //Delay actually one second before starting timers
+      this.starterTimeout = setTimeout(() => {
+        this.appTimer.start() // Start the activity timer
+        this.setIdleDetector() //start the idle time detector
+      }, 500)
     },
 
+    /**
+     * @description stop the app timer instance
+     * The function add the activity duration to the lesson duration and stop the timer
+     */
+    stopAppTimer() {
+      this.lessonDuration += this.activityDuration
+      this.appTimer.stop() // stop timer
+      clearTimeout(this.starterTimeout)
+    },
+
+    /**
+     * @description set the idle detector to start detecting idle time
+     * Attach DOM event listeners to reset the idle timer
+     * The idle detector will start after 1 second after the app is loaded
+     * The idle detector will pause the app timer when idle time is reached
+     */
+
     setIdleDetector() {
       setTimeout(() => {
-        this.startIdleTimer() //start the iddle dectection
+        this.idleDetector.startIdleTimer(
+          () => this.appTimer.pause(),
+          this.idleTimeout
+        )
         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)
+      }, 800)
     },
-    /*
-     * stop the idle timer and remove hidle-dector listeners
+    /**
+     * @description unset the idle detector
+     *  stop the idle timer and remove DOM event to stop listening the idle timer
      */
     unsetIdleDetector() {
-      this.stopIdleTimer()
+      this.idleDetector.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)
     },
+    /**
+     * @description reset the idle timer
+     * The function stop the idle timer and restart it
+     * start also the app timer if it was paused
+     *
+     */
+    resetIdleTimer() {
+      if (this.$route.name == 'menu' || this.$route.name == 'module') return // don't reset idle timer when in menu
+      this.idleDetector.stopIdleTimer()
+
+      if (this.appTimer.getTimerState() == 'stopped') this.appTimer.start()
+      this.idleDetector.startIdleTimer(
+        () => this.appTimer.pause(),
+        this.idleTimeout
+      )
+    },
 
     setInitialLoadingDone() {
       this.initialLoading = false
@@ -580,21 +667,31 @@ export default {
               ? (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`)
+              : (d = `PT${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[0]
+                }H${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[1]
+                }M${
+                  this.appTimer
+                    .ISOTimeParser(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
           ) {
+            // ===================== Extension of the Object definition =====================//
             //Validate each entry given in the extension Array
             extensions.forEach((e) => {
               //entry must be of type Object
@@ -622,7 +719,6 @@ export default {
           //============================================================
           stmtsQueue.push(stmt)
         })
-
         this.$xapi._sendStatements(stmtsQueue, cb, withFetch)
       }
     },
@@ -681,7 +777,7 @@ export default {
             }
           }
         ],
-        duration: this.lessonDuration
+        duration: this.appTimer.ISOTimeParser(this.lessonDuration)
       }
 
       const endStmt = { ...stmt }
@@ -732,7 +828,8 @@ export default {
         option
       ) //send xapi statement
 
-      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
+      if (this.appTimer.getTimerState() === 'started')
+        setTimeout(() => this.stopAppTimer(), 0) //clear the timer
 
       if (cb) cb()
     },
@@ -750,7 +847,7 @@ export default {
       this.setRouteHistory([]) // resetting  store record for all last visited pages
 
       // this.$bus.$emit('stop-timer')
-      this.stopTimer()
+      this.stopAppTimer()
       if (this.getModuleInfo.packageType !== 'xapi') return
 
       if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)
@@ -929,7 +1026,7 @@ export default {
       if (e) e.focus()
     },
     /**
-     * @description Mothods to validate that application settings are correctly
+     * @description Method to validate that application settings are correctly
      * Opens error component when configurations are not correct
      *
      */
@@ -981,9 +1078,24 @@ export default {
           'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
     },
-
+    /**
+     * @description Handle the keydown event to detect if F5 key was pressed
+     * The function set the f5KeyPressed to true if F5 key was pressed
+     * @param {Event} e - keydown event
+     */
     handleF5KeyPressed(e) {
       this.f5KeyPressed = e.code == 'F5'
+    },
+
+    /**
+     * @description Handle the beforeunload event to save data when the user close the app or reload the app
+     * The function check if the F5 key was pressed to avoid sending data when the user reload the app
+     */
+    handleBeforeUnload() {
+      //prevent app to send/Save data when F5 is pressed to reload app
+      if (this.f5KeyPressed) return
+
+      this.executeCloseEventTriggered()
     }
   }
 }
@@ -1039,4 +1151,20 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+.timer {
+  position: sticky; /* Sticks inside the parent container */
+  bottom: 90%; /* Sticks to the top edge of the parent */
+  left: 100%; /* Sticks to the left edge of the parent */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 1em;
+  width: fit-content;
+  color: #333;
+  opacity: 0.9;
+  background-color: #eaabb6b3; /* Optional: ensures readability when content scrolls */
+  padding: 5px 12px; /* Some breathing space */
+  z-index: 1000; /* Keeps it above other elements */
+}
 </style>

package/src/components/AppBaseButton.test.js

@@ -11,7 +11,6 @@ describe('AppBaseButton Tests', () => {
     })
     expect(wrapper.find('button').exists()).toBeTruthy()
   })
-
   it('should fire click event', async () => {
     const wrapper = mount(AppBaseButton, {
       props: defaultProps