fcad-core-dragon 2.0.1 → 2.0.2-beta.2

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

@@ -45,7 +45,8 @@
       :model-value="!appReady && initialLoading"
       class="align-center justify-center"
       scrim="white"
-      opacity="0.8"
+      opacity="0.9"
+      :persistent="true"
     >
       <div class="text-center grp-spinners">
         <v-icon id="icon_loading" icon="mdi-dots-circle" size="x-large" />
@@ -97,7 +98,8 @@ export default {
       resizeiPad: false,
       buildInfoClicked: false,
       error: [],
-      initialLoading: true
+      initialLoading: true,
+      f5KeyPressed: false
     }
   },
   computed: {
@@ -109,15 +111,13 @@ export default {
       'getAppStatus',
       'getUserInteraction',
       'getConnectionInfo',
-      'getDataFromServer',
       'getAllActivities',
       'getMediaPlaybarValues',
       'getAppConfigs',
       'getErrorMenu',
       'getRouteHistory',
       'getBookmarkEnabled',
-      'getApplicationSettings',
-      'getCompStatusTracker'
+      'getApplicationSettings'
     ]),
     getwidth() {
       return window.innerWidth
@@ -162,87 +162,14 @@ export default {
     }
   },
   watch: {
-    getConnectionInfo: {
-      deep: true,
-      //in development environment (localhost), don't wait for the axios call
-      immediate: import.meta.env.DEV,
+    'store.$state.userDataLoaded': {
       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,
-         *  switches from the browser to a different app To save user data to LRS/LMS.
-         * As of 06/2021 MDN Web Doc advise preferring the 'visibilitychange' event over 'unload/beforeunload'
-         * event to send data over a serveur.
-         * Ref:https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
-         * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
-         */
-
-        if (!this.getConnectionInfo)
-          return setTimeout(() => {
-            this.setProgress()
-          }, 200)
-
-        if (this.getIsMobile) {
-          document.addEventListener(
-            'visibilitychange',
-            () => {
-              if (document.visibilityState === 'hidden') {
-                this.executeCloseEventTriggered()
-              }
-            },
-            false
-          )
-        }
-        // initialize scorm Commuinication with LMS || xAPI LRS
-        if (this.getModuleInfo.packageType === 'scorm') {
-          this.$scorm.Initialize()
-          setTimeout(() => {
-            this.setProgress()
-          }, 200)
-        } else if (
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          const {
-            auth,
-            endpoint,
-            registration = this.$xapi.ruuid()
-          } = this.getConnectionInfo
-
-          const config = {
-            auth,
-            endpoint,
-            registration,
-            activity_platform: `SIPI_organizationId`
-          }
-
-          this.$xapi._configLRS(config) // configure and launch LRS
-
-          setTimeout(() => {
-            this.fetchDataFromServer().then(() => {
-              setTimeout(() => {
-                this.setProgress()
-              }, 200)
-            })
-          }, 200)
-        }
-      }
+        !this.store.$state.userDataLoaded
+          ? this.updateTracker('appBase', 'loading')
+          : this.updateTracker('appBase', 'ready')
+      },
+      immediate: true
     }
-    //===========FOR TESTING TIMER TIMEOUT====//
-    // elapsedIdleTime: {
-    //   handler() {
-    //     console.log(
-    //       '⌛:',
-    //       this.elapsedIdleTime,
-    //       this.timerCurrentState,
-    //       this.activityDuration
-    //     )
-
-    //     //max idle time allowed 300s (5 min)
-    //   },
-    //   immediate: true
-    // }
   },
 
   created() {
@@ -252,8 +179,8 @@ export default {
     //Declare loading state if no error was detected
 
     if (!this.error.length) {
-      this.updateTracker('appBase', 'loading')
-      this.setAppConfigs(this.appConfig)
+      // this.updateTracker('appBase', 'loading')
+      this.initializeApp(this.appConfig)
     }
 
     window.versionFCAD = this.$helper.getFcadVersionString()
@@ -281,12 +208,19 @@ export default {
     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
     )
@@ -295,6 +229,7 @@ export default {
   mounted() {
     // set the language of the app
     this.setLocale(this.getAppConfigs.lang)
+    window.addEventListener('keydown', this.handleF5KeyPressed)
   },
   beforeUnmount() {
     this.$bus.$off('set-comp-status', this.updateTracker)
@@ -306,7 +241,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)
-    if (this.getAppConfigs.remote) this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
+    window.removeEventListener('keydown', this.handleF5KeyPressed)
+    if (this.getAppConfigs.remote && this.unsubscribeToSetConfig)
+      this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
   methods: {
     ...mapActions(useAppStore, [
@@ -317,7 +254,7 @@ export default {
       'setApplicationSettings',
       'setMediaPlaybarValues',
       'updateCompStatusTracker',
-      'setAppConfigs',
+      'initializeApp',
       'setMobileState',
       'setCurrentBrowser'
     ]),
@@ -425,145 +362,6 @@ export default {
       return device
     },
 
-    async fetchDataFromServer() {
-      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 || {}
-      //====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 || {}
-      //Update the App Store data
-      this.updateDataFetchFromServer({
-        userProgress,
-        routeHistory,
-        lessonPosition,
-        completedState,
-        playbarValues,
-        applicationSettings
-      }).then(() => {
-        this.updateTracker('appBase_fetch', 'ready')
-      })
-    },
-
     executeCloseEventTriggered() {
       if (
         this.getModuleInfo.packageType === 'scorm' &&
@@ -582,113 +380,6 @@ export default {
       }
     },
 
-    async setProgress() {
-      const packageType = this.getModuleInfo.packageType
-      switch (packageType) {
-        case 'scorm':
-          {
-            // Get saved data from suspend_data or from localStorage to update the store:
-            // LMS is connected
-            if (this.$scorm.initialized) {
-              // launching the lesson (if the lesson is not already completed)
-              const lessonStatus = this.$scorm.GetValue(
-                'cmi.core.lesson_status',
-                true
-              )
-              if (lessonStatus === 'unknown') {
-                this.$scorm.setValue('cmi.core.lesson_status', 'incomplete') // set the lesson status to in complete
-                this.$scorm.Commit() // persist data
-              }
-              // chacked if there is a existing record in the LMS
-              if (this.$scorm.GetValue('cmi.suspend_data') !== '') {
-                const scormRecord = this.$scorm
-                  .GetValue('cmi.suspend_data')
-                  .replace(/\\/g, '')
-                const { userData, routeHistory, userSettings } =
-                  JSON.parse(scormRecord)
-
-                this.setUserMetaData(userData)
-                this.setRouteHistory(routeHistory) // update store recored with existing record
-                this.setApplicationSettings(userSettings) // update store recored with existing record
-              }
-              // check for the bookmark existance in LMS
-              if (
-                this.$scorm.GetValue('cmi.core.lesson_location', false) !== ''
-              ) {
-                let lessonPosition = this.$scorm.GetValue(
-                  'cmi.core.lesson_location',
-                  false
-                )
-                if (this.bookmarkActive && lessonPosition)
-                  this.$router.push({ name: lessonPosition }) //Should Redirect to bookmark
-              }
-
-              // No LMS use LocalStorage record
-            } else {
-              this.$idb.openDB().then(() => {
-                this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
-                  if (res && res.$record) {
-                    const { routeHistory, userSettings, progress } = res.$record
-                    this.setUserMetaData(progress) // update store record with existing record
-                    this.setRouteHistory(routeHistory) // update store record with existing route info
-                    if (userSettings) this.setApplicationSettings(userSettings) // update store record with existing user settings
-                  }
-                })
-              })
-            }
-          }
-          break
-
-        case 'xapi':
-          {
-            if (
-              this.getConnectionInfo &&
-              this.getConnectionInfo.actor &&
-              this.getConnectionInfo.remote
-            ) {
-              if (!this.getDataFromServer) return
-              //Try to get the user progress from LRS
-              const {
-                playbarValues,
-                routeHistory,
-                userProgress,
-                lessonPosition,
-                applicationSettings
-              } = this.getDataFromServer
-
-              this.setUserMetaData(userProgress) // update store record with existing record
-              this.setRouteHistory(routeHistory) // update store record with existing record
-
-              if (playbarValues) this.setMediaPlaybarValues(playbarValues) // update store record with existing record
-
-              if (applicationSettings)
-                this.setApplicationSettings(applicationSettings) // set the user preferred settings
-
-              //Handel bookmark navigation
-              if (this.bookmarkActive && lessonPosition)
-                this.$router.push({ name: lessonPosition }) //Should Redirect to bookmark
-            } 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, progress } = res.$record
-                    this.setUserMetaData(progress) // update store record with existing record
-                    this.setRouteHistory(routeHistory) // update store record with existing route info
-
-                    if (userSettings) {
-                      this.setApplicationSettings(userSettings) // update store record with existing user setting
-                    }
-                  }
-                })
-              })
-            }
-          }
-
-          break
-      }
-      this.updateTracker('appBase', 'ready')
-    },
     updateTracker(name, status) {
       this.updateCompStatusTracker({ name, status })
     },
@@ -772,9 +463,9 @@ export default {
                     //ID is of activity (menu, conclusion, activite, intro )
                     const activityStr = activityId.split('/').toReversed()[0]
 
-                    if (!this.getDataFromServer)
+                    if (!this.getUserInteraction[activityId])
                       return this.$xapi.verbs.initialized
-                    const { userProgress } = this.getDataFromServer
+
                     let activity_ref
                     //Define the activity reference
                     if (['menu', 'introduction', 'A00'].includes(activityStr))
@@ -786,7 +477,10 @@ export default {
                       activity_ref = aNum.length > 1 ? `A${aNum}` : `A0${aNum}`
                     } else activity_ref = activityStr // should be AXX
 
-                    if (userProgress && userProgress[activity_ref])
+                    if (
+                      this.getUserInteraction &&
+                      this.getUserInteraction[activity_ref]
+                    )
                       return this.$xapi.verbs.resumed
                     else return this.$xapi.verbs.initialized
                   }
@@ -1262,7 +956,6 @@ export default {
       //error if There is more than one activity when is_single_activity
       switch (true) {
         case isSingleActivity && activitiesList.size > 1:
-          console.log('ici')
           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`
@@ -1270,14 +963,12 @@ export default {
           break
 
         case isSingleActivity && !noMenu:
-          console.log('LA')
           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:
-          console.log('LA LA')
           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)
@@ -1289,6 +980,10 @@ export default {
           `%c  WARNING!>>> ${consoleMsg}`,
           'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
+    },
+
+    handleF5KeyPressed(e) {
+      this.f5KeyPressed = e.code == 'F5'
     }
   }
 }