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

package/src/main.js

@@ -7,9 +7,10 @@ import AppBasePage from './components/AppBasePage.vue'
 import AppBaseFlipCard from './components/AppBaseFlipCard.vue'
 import AppCompJauge from './components/AppCompJauge.vue'
 import AppBaseErrorDisplay from './components/AppBaseErrorDisplay.vue'
-import AppCompBif from './components/AppCompBif.vue'
-import AppCompBranchButtons from './components/AppCompBranchButtons'
-import AppCompCarousel from './components/AppCompCarousel'
+//import AppCompBif from './components/AppCompBif.vue'
+import AppCompAudio from './components/AppCompAudio.vue'
+import AppCompBranchButtons from './components/AppCompBranchButtons.vue'
+import AppCompCarousel from './components/AppCompCarousel.vue'
 import AppCompViewDisplay from './components/AppCompViewDisplay.vue'
 import AppCompTableOfContent from './components/AppCompTableOfContent.vue'
 import AppCompMenu from './components/AppCompMenu.vue'
@@ -19,8 +20,9 @@ import AppCompNavigation from './components/AppCompNavigation.vue'
 import AppCompNoteCall from './components/AppCompNoteCall.vue'
 import AppCompNoteCredit from './components/AppCompNoteCredit.vue'
 import AppCompPopover from './components/AppCompPopover.vue'
-import AppCompVideoPlayer from './components/AppCompVideoPlayer'
-import AppCompPlayBar from './components/AppCompPlayBar'
+import AppCompVideoPlayer from './components/AppCompVideoPlayer.vue'
+import AppCompPlayBar from './components/AppCompPlayBar.vue'
+//import AppCompPlayBarAudio from './components/AppCompPlayBarAudio'
 import AppCompQuizRecall from './components/AppCompQuizRecall.vue'
 import store from './module/store'
 import GsapPlugin from './plugins/gsap'
@@ -31,14 +33,16 @@ import { scormPlugin } from './plugins/scorm'
 import { xapiPlugin } from './plugins/xapi'
 import { $idb } from './plugins/idb'
 import PortalVue from 'portal-vue'
+import { validatefileContent } from './shared/validators.js'
+
 import axios from 'axios'
-import AppCompSVG from './components/AppCompSVG'
+import VueAxios from 'vue-axios'
+import AppCompSVG from './components/AppCompSVG.vue'
 Vue.config.productionTip = false
 
 export default {
   install(Vue, options) {
     Vue.use(PortalVue)
-
     Vue.use(GsapPlugin, '$gsap')
     Vue.use(scormPlugin, '$scorm')
     Vue.use(xapiPlugin, '$xapi')
@@ -46,37 +50,39 @@ export default {
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
     Vue.use($idb)
+    Vue.use(VueAxios, axios)
 
-    Vue.component('app-base', AppBase)
-    Vue.component('app-base-button', AppBaseButton)
-    Vue.component('app-base-module', AppBaseModule)
-    Vue.component('app-base-page', AppBasePage)
-    Vue.component('app-base-flip-card', AppBaseFlipCard)
-    Vue.component('app-base-error-display', AppBaseErrorDisplay)
-    Vue.component('app-comp-menu', AppCompMenu)
-    Vue.component('app-comp-bif', AppCompBif)
-    Vue.component('app-comp-branch-buttons', AppCompBranchButtons)
-    Vue.component('app-comp-carousel', AppCompCarousel)
-    Vue.component('app-comp-menu-item', AppCompMenuItem)
-    Vue.component('app-comp-jauge', AppCompJauge)
-    Vue.component('app-comp-table-of-content', AppCompTableOfContent)
-    Vue.component('app-comp-pop-up', AppCompPopUp)
-    Vue.component('app-comp-navigation', AppCompNavigation)
-    Vue.component('app-comp-note-credit', AppCompNoteCredit)
-    Vue.component('app-comp-note-call', AppCompNoteCall)
-
-    Vue.component('app-comp-popover', AppCompPopover)
-    Vue.component('app-comp-video-player', AppCompVideoPlayer)
-    Vue.component('app-comp-play-bar', AppCompPlayBar)
-    Vue.component('app-icons', AppCompSVG)
-    Vue.component('app-comp-quiz-recall', AppCompQuizRecall)
+    Vue.component('AppBase', AppBase)
+    Vue.component('AppBaseButton', AppBaseButton)
+    Vue.component('AppBaseModule', AppBaseModule)
+    Vue.component('AppBasePage', AppBasePage)
+    Vue.component('AppBaseFlipCard', AppBaseFlipCard)
+    Vue.component('AppBaseErrorDisplay', AppBaseErrorDisplay)
+    Vue.component('AppCompMenu', AppCompMenu)
+    //Vue.component('app-comp-bif', AppCompBif)
+    Vue.component('AppCompAudioPlayer', AppCompAudio)
+    Vue.component('AppCompBranchButtons', AppCompBranchButtons)
+    Vue.component('AppCompCarousel', AppCompCarousel)
+    Vue.component('AppCompMenuItem', AppCompMenuItem)
+    Vue.component('AppCompJauge', AppCompJauge)
+    Vue.component('AppCompTableOfContent', AppCompTableOfContent)
+    Vue.component('AppCompPopUp', AppCompPopUp)
+    Vue.component('AppCompNavigation', AppCompNavigation)
+    Vue.component('AppCompNoteCredit', AppCompNoteCredit)
+    Vue.component('AppCompNoteCall', AppCompNoteCall)
+
+    Vue.component('AppCompPopover', AppCompPopover)
+    Vue.component('AppCompVideoPlayer', AppCompVideoPlayer)
+    Vue.component('AppCompPlayBar', AppCompPlayBar)
+    //Vue.component('app-comp-play-bar-audio', AppCompPlayBarAudio)
+    Vue.component('AppIcons', AppCompSVG)
+    Vue.component('AppCompQuizRecall', AppCompQuizRecall)
     Vue.component(AppCompViewDisplay)
 
-    const requiredOptions = ['store', 'i18n', 'appSettings', 'menuSettings']
+    const requiredOptions = ['store', 'i18n', 'menuSettings']
     const errorMissing = {
       store: { a: 'Store', b: 'vuex' },
       i18n: { a: 'Internationalisation', b: 'vue-I18n' },
-      appSettings: { a: 'App Settings file', b: 'appSettings' },
       menuSettings: { a: 'Menu Settings file', b: 'menuSettings' }
       /// nom de composante avec l'error avec la string comme en haut
     }
@@ -84,6 +90,35 @@ export default {
       throw new Error(
         '💥You did not provide i18n and vuex store. Please install and provide them.'
       )
+
+    /*Watch for appBase data received in the store
+     *To set connection Info
+     *To set the connection with indexDB
+     *To set document lang
+     */
+
+    options.store.subscribe(async (mutation, state) => {
+      if (mutation.type === 'SET_APP_CONFIGS') {
+        let { appConfigs } = state.$appStore
+
+        //Configure connection with the Data from appBase
+        configConnection(appConfigs).then((c) => {
+          //Save LRS CONFIGURATION TO STORE
+          store.mutations.SET_LRS_CONFIG(store.state, c)
+          // Subscribe to changes in the state to save progress in localStorage when application is not in remote mode
+          if (!c.remote)
+            Vue.prototype.$idb
+              .openDB()
+              .then(() =>
+                Vue.prototype.$idb.saveState(options.store, appConfigs.idb_id)
+              )
+        })
+        //Set document lang attribute (wcag request)
+        document.documentElement.setAttribute('lang', appConfigs.lang)
+      }
+    })
+
+    /* Check that required options are provided */
     requiredOptions.forEach((key) => {
       // required key is missing in $data that was passed for the page
       if (!Object.keys(options).includes(key)) {
@@ -91,38 +126,43 @@ export default {
           `👉${errorMissing[key].a}👈 is not provided. Please install and provide 👉${errorMissing[key].b}👈.`
         )
       }
+
+      if (key === 'menuSettings') {
+        const mapAct = store.state.thisModule.activities
+        const keys4Lesson = ['lessonTitle', ...mapAct.keys()]
+        const keys4ActivityOpt = ['title', 'subTitle']
+        const keys4ActivityMando = ['time', 'anchors']
+        const keys4Anchors = ['anchorName', 'pageRef', 'page']
+
+        const errChecked = validatefileContent(
+          'menuSettings',
+          options.menuSettings,
+          {
+            keys4Lesson,
+            keys4ActivityMando,
+            keys4ActivityOpt,
+            keys4Anchors
+          }
+        )
+        if (errChecked) {
+          store.mutations.SET_ERROR_MENU(store.state, errChecked)
+        } else {
+          store.mutations.SET_ERROR_MENU(store.state, false)
+        }
+      }
     })
 
-    //Update the module info of the Store
-    //Separate data we want to display for the module information and data we want to only display for the app configuration
-    let {
-      id,
-      crs_id: courseID = null,
-      idb_id: idbID,
-      specification: packageType = 'scorm',
-      actor = {
-        mbox: 'mailto:totoescargot@email.com',
-        name: 'Toto Escargot',
-        objectType: 'Agent'
-      },
-      endpointConfig = null,
-      remote = null,
-      dr_mode,
-      ...others
-    } = options.appSettings
-
-    //============================== SET LRS INFO =======================================
-
-    const configConnection = async () => {
-      if (!packageType === 'xapi') return
+    window.App_DEBUGMODE = false
+
+    /* Local Method to configurate the connection info */
+    const configConnection = async (data) => {
+      if (data && data.specification !== 'xapi') return
 
       switch (true) {
         case window.location.origin.includes('cegepadistance.ca'): {
           try {
             let connectionInfo
 
-            store.mutations.UPDATE_APP_STATUS(store.state, 'loading')
-
             // Accessing User && Activity Info from Url parametters
             const queryString = window.location.search
             const urlParams = new URLSearchParams(queryString)
@@ -152,9 +192,22 @@ export default {
           break
         }
         case window.location.origin.includes('localhost'): {
+          if (!data) return
+          let {
+            id,
+            crs_id = null,
+            actor = {
+              mbox: 'mailto:totoescargot@email.com',
+              name: 'Toto Escargot',
+              objectType: 'Agent'
+            },
+            endpointConfig = null,
+            remote = null
+          } = data
+
           const origin = window.location.origin
-          const activity_id = courseID
-            ? `${origin}/${courseID}/${id}`
+          const activity_id = crs_id
+            ? `${origin}/${crs_id}/${id}`
             : `${origin}/${id}`
 
           if (remote == null) remote = false
@@ -162,8 +215,7 @@ export default {
           if (endpointConfig == null)
             endpointConfig = {
               endpoint: 'https://learninglocker.cegepadistance.ca/data/xAPI/',
-              auth:
-                'Basic MmU4ZGQ3NTY1NDRiZWUxNmUxZWYzZDZiOThjNWVjY2YxNjVhZjIyNzpkY2Q5Zjk4OWZlYjU3MmZlZjBhNDkxZDIxNmYyNmQyY2M1YTQ4Nzlh'
+              auth: 'Basic MmU4ZGQ3NTY1NDRiZWUxNmUxZWYzZDZiOThjNWVjY2YxNjVhZjIyNzpkY2Q5Zjk4OWZlYjU3MmZlZjBhNDkxZDIxNmYyNmQyY2M1YTQ4Nzlh'
             }
 
           let connectionInfo = {
@@ -179,38 +231,22 @@ export default {
     }
 
     //=================================END SET LRS INFO ====================================
+    window.setDebugMode = (mode) => {
+      store.mutations.SET_APP_DEBUG_MODE(store.state, mode)
+      const msg = mode ? 'DEBUG MODE ON' : 'DEBUG MODE OFF'
+      console.log(`🚩 ${msg}`)
+    }
 
-    store.mutations.SET_APP_CONFIGS(store.state, others)
     store.mutations.SET_MENU(store.state, options.menuSettings)
-    store.mutations.UPDATE_MODULE(store.state, {
-      key: 'info',
-      data: { id, courseID, idbID, packageType }
-    })
 
-    configConnection().then((c) => {
-      store.mutations.SET_LRS_CONFIG(store.state, c)
-      // Suscribe to changes in the state to save progress in localStorage when application is not in remote mode
-      if (!c.remote)
-        Vue.prototype.$idb
-          .openDB()
-          .then(() => Vue.prototype.$idb.saveState(options.store, idbID))
-
-      store.mutations.UPDATE_APP_STATUS(store.state, 'ready')
-    })
     //=================================SETTING PREFERENCES ====================================
 
     //define the settings option for user preference according to the mode of App
-    let settingsOptions = (() => {
-      return dr_mode
-        ? {
-            onboarding: null
-          }
-        : {
-            autoplay: null
-            // onboarding: null,// Uncomment when ready to add onboarding in settings
-            // subtitles: null,// Uncomment when ready to add subtitle in settings
-          }
-    })()
+    let settingsOptions = {
+      autoplay: null
+      // onboarding: null,// Uncomment when ready to add onboarding in settings
+      // subtitles: null,// Uncomment when ready to add subtitle in settings
+    }
 
     store.mutations.SET_APPLICATION_SETTINGS(store.state, settingsOptions)
     //=================================END SETTING PREFERENCES ====================================
@@ -221,7 +257,7 @@ export default {
     //mergeLocales
     mergeLocales(options.i18n)
     Vue.use(helper, '$helper')
-    //set document lang attribute (wcag request)
-    document.documentElement.setAttribute('lang', options.appSettings.lang)
+
+    window.app = Vue
   }
 }