fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.10

package/src/plugins/i18n.js

@@ -1,31 +1,26 @@
+import _ from 'lodash'
 /**
  * Merge locales message in project.
  * @summary To merge the locales dictionnary of this library with the locales that user will create
  * @param {Object} i18n - vue-i18n internalization object.
  */
 export default function mergeLocales(i18n) {
-  const deep = require('lodash') // provide deep merge of Object cf: https://attacomsian.com/blog/javascript-merge-objects
-
-  /* I18n internal methods for mutating messages property
-   * mergeLocaleMessage: ƒ mergeLocaleMessage(locale, message)// will merge message with new message object. But does not do a deep merge of object
-   * setLocaleMessage: ƒ setLocaleMessage(locale, message)// set the message with new message object
-   */
-
-  // This library locales files
-  const thisLocales = require.context(
-    '../$locales',
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  )
-
-  thisLocales.keys().forEach((key) => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+  const thisLocales = import.meta.glob('../$locales/*.json', {
+    import: 'default',
+    eager: true
+  })
+  for (const path in thisLocales) {
+    const matched = path.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
+
       // Using lodash to deeply merge objects
-      const mergedMessages = deep.merge(i18n.messages[locale], thisLocales(key))
+      const coreMessages = JSON.parse(JSON.stringify(thisLocales[path]))
+      const templateMessages = JSON.parse(JSON.stringify(i18n.messages[locale]))
+      const mergedMessages = _.merge(coreMessages, templateMessages)
+
       // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
       i18n.setLocaleMessage(locale, mergedMessages)
     }
-  })
+  }
 }

package/src/plugins/idb.js

@@ -1,16 +1,19 @@
 /*
  * idb library by jakearchibald: https://github.com/jakearchibald/idb
  */
-import { openDB, deleteDB, wrap, unwrap } from 'idb'
+import { openDB } from 'idb'
+import $_ from 'lodash'
+//import { createApp } from 'vue'
 //import {*} from "idb";
 let dataBase = null
 let dbName = '$crsDataBase' //test
 let storeName = '$lessonsStore' //test
-openDB, deleteDB, wrap, unwrap
+//openDB, deleteDB, wrap, unwrap
 //$_id
+//const app = createApp({})
 export const $idb = {
-  install(Vue) {
-    Vue.prototype.$idb = {
+  install(app) {
+    app.config.globalProperties.$idb = {
       /*
        * @ Description: create a indexedDB database
        *   Open a data base in indexedDB if does not exist and create a store for the lessons package
@@ -41,7 +44,7 @@ export const $idb = {
               }
             })
             dataBase = db
-            //return (dataBase = db);
+            return dataBase
           }
         } catch (err) {
           console.log('==> Erro ', err)
@@ -64,9 +67,10 @@ export const $idb = {
             searchIndex,
             data[searchIndex]
           )
+
           //Add entry to database if does not exist
           if (!value) {
-            const addedItem = await dataBase.add(storeName, data)
+            const addedItem = await dataBase.add(storeName, $_.cloneDeep(data))
 
             return addedItem
           }
@@ -136,7 +140,10 @@ export const $idb = {
           if (existingRecord) {
             existingRecord.$record = newValue
             existingRecord.$last_edit = Date.now()
-            const updatedItem = await dataBase.put(storeName, existingRecord)
+            const updatedItem = await dataBase.put(
+              storeName,
+              $_.cloneDeep(existingRecord)
+            )
             //await this.getAllFromDB(storeName)
             return updatedItem
           }
@@ -177,33 +184,42 @@ export const $idb = {
       },
       /**
        * @description creating a small save plug-in to save store state in the localStorage
-       * the plugin listen for mutations made to the Vuex store and store them in the local browser storage.
-       * Since the The handler is called after every mutation we want to limite the saving of data to application storage only
-       * when the mutation is affecting the user interaction.
+       * the plugin listen for changes made to the Pinia store store to store them in the browser storage.
+       * Since the The handler is called after every actions we want to limit the saving of data to storage only
+       * when the changes are affecting the user interaction.
        * This prevent resetting the store to initial state when the browser refreshes
-       * Note: the plugin is used in the store.js
-       * @param {Object} store vuex Store
+       * @param {Object} store Pinia Store
        * @param {String} item package $idb_id
        */
-      saveState(store, item) {
-        store.subscribe(async (mutation, state) => {
-          // Watch only for user interaction related mutation to save the data
-          if (mutation.type === 'UPDATE_USER_METADATA') {
-            // Open DB with a store
-            const search = await this.getFromDB(item)
-            if (Object.entries(state.$appStore.userMetaData).length && search) {
-              // Update the db store
-              await this.updateDataInDB(item, state.$appStore.userMetaData)
-              //==================================================
-            } else {
-              //Add Entry to db store
-              await this.insertDataInDB({
-                $idb_id: item,
-                $record: state.$appStore.userMetaData,
-                $last_edit: Date.now()
-              })
-            }
+      async saveState(store, item) {
+        store.$onAction(async ({ name, store, args, after }) => {
+          //Should only track changes actions on userMetadata
+          if (!['updateUserMetaData', 'setUserMetaData'].includes(name)) return
+
+          //  Open DB with a store
+          const search = await this.getFromDB(item)
+
+          if (Object.entries(store.$state.userMetaData).length && search) {
+            // Update the db store
+            await this.updateDataInDB(item, {
+              progress: store.$state.userMetaData,
+              userSettings: store.$state.applicationSettings,
+              routeHistory: store.getRouteHistory
+            })
+            //==================================================
+          } else {
+            //Add Entry to db store
+            await this.insertDataInDB({
+              $idb_id: item,
+              $record: {
+                progress: store.$state.userMetaData,
+                userSettings: store.$state.applicationSettings,
+                routeHistory: store.getRouteHistory
+              },
+              $last_edit: Date.now()
+            })
           }
+          //})
         })
       }
     }

package/src/plugins/save.js

@@ -1,5 +1,5 @@
 /* creating a small save plug-in to save store state in the localStorage
- * the plugin listen for mutations made to the Vuex store and store them in the local browser storage.
+ * the plugin listen for mutations made to the Pinia store and store them in the local browser storage.
  * This prevent reseting the store to initial state when the browser refreshes
  * Note: the plugin is used in the store.js
  */

package/src/plugins/scorm.js

@@ -4,9 +4,9 @@
  */
 
 export const scormPlugin = {
-  install: function(Vue) {
+  install: function (app) {
     {
-      Vue.prototype.$scorm = {
+      app.config.globalProperties.$scorm = {
         nFindAPITries: 0,
         API: null,
         maxTries: 500,
@@ -41,7 +41,7 @@ export const scormPlugin = {
         // value to the win parameter passed in, based on the number of
         // parents.  At the end of the function call, the win variable will be
         // set to the upper most parent in the chain of parents.
-        ScanForAPI: function(win) {
+        ScanForAPI: function (win) {
           while (win.API == null && win.parent != null && win.parent != win) {
             this.nFindAPITries++
             if (this.nFindAPITries > this.maxTries) {
@@ -60,7 +60,7 @@ export const scormPlugin = {
         // function then checks to see if there are any opener windows.  If
         // the window has an opener, the function begins to look for the
         // this.API Instance in the opener window.
-        GetAPI: function(win) {
+        GetAPI: function (win) {
           if (win.parent != null && win.parent != win) {
             this.API = this.ScanForAPI(win.parent)
           }
@@ -70,7 +70,7 @@ export const scormPlugin = {
         },
 
         // Initalize
-        Initialize: function() {
+        Initialize: function () {
           let result
 
           this.GetAPI(window)
@@ -104,7 +104,7 @@ export const scormPlugin = {
           this.initialized = true
         },
         //Termitate the communication with the LMS
-        Finish: function(finalState) {
+        Finish: function (finalState) {
           let result
           //Don't terminate if we haven't initialized or if we've already terminated
           if (this.initialized === false || this.terminateCalled === true) {
@@ -144,7 +144,7 @@ export const scormPlugin = {
         //There are situations where a GetValue call is expected to have an error
         //and should not alert the user.
 
-        GetValue: function(element, checkError) {
+        GetValue: function (element, checkError) {
           let result
 
           if (this.initialized == false || this.terminateCalled == true) {
@@ -179,7 +179,7 @@ export const scormPlugin = {
           return result
         },
 
-        SetValue: function(element, value) {
+        SetValue: function (element, value) {
           let result
 
           if (this.initialized == false || this.terminateCalled == true) {
@@ -209,7 +209,7 @@ export const scormPlugin = {
           }
         },
 
-        Commit: function() {
+        Commit: function () {
           let result
 
           result = this.API.LMSCommit('')
@@ -235,7 +235,7 @@ export const scormPlugin = {
           }
         },
         //==================== CUSTOME METHODS =============================
-        checkForError: function() {
+        checkForError: function () {
           let error_type = null
           let errorNumber = this.API.LMSGetLastError()
           if (errorNumber !== '' || errorNumber !== '0') {
@@ -249,24 +249,24 @@ export const scormPlugin = {
           } else return error_type
         },
 
-        formateMsg: function(msg, data) {
+        formateMsg: function (msg, data) {
           msg.replace('$@errorDescription', data)
         },
 
-        getScormStatus: function() {
+        getScormStatus: function () {
           return this.initialized
         },
 
-        getScormAPI: function() {
+        getScormAPI: function () {
           return this.API
         },
 
-        setCompletionStatus: function(newStatus) {
+        setCompletionStatus: function (newStatus) {
           this.API.RunTimeData.CompletionStatus = newStatus
           this.Commit()
         },
 
-        setSucessStatus: function(newStatus) {
+        setSucessStatus: function (newStatus) {
           this.API.RunTimeData.SuccessStatus = newStatus
           this.Commit()
         },

package/src/plugins/xapi.js

@@ -3,9 +3,9 @@ import ADL from '../module/xapi/ADL'
 const _ADL = new ADL()
 
 export const xapiPlugin = {
-  install(Vue) {
+  install(app) {
     {
-      Vue.prototype.$xapi = _ADL
+      app.config.globalProperties.$xapi = _ADL
     }
   }
 }

package/src/public/index.html

@@ -1,19 +1,31 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" data-build-time="<%= new Date().toLocaleString() %>">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
+      rel="stylesheet"
+    />
     <title>dfcad-prototype</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
+    />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but dfcad-prototype doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but dfcad-prototype doesn't work properly without JavaScript
+        enabled. Please enable it to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

package/src/router/index.js

@@ -0,0 +1,57 @@
+//import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import routes from './routes'
+import { useAppStore } from '../module/stores/appStore'
+import { inject } from 'vue'
+
+//Vue.use(VueRouter)
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      ;(from, savedPosition)
+      return {
+        selector: to.hash
+        // , offset: { x: 0, y: 10 }
+      }
+    }
+  }
+})
+
+router.beforeResolve((to, from, next) => {
+  const app = inject('app')
+  const appStore = useAppStore()
+  const { getWidgetOpen, getPopupIsOpen, getSidebarIsOpen } = appStore
+  const noNavigationToMenu = appStore.getSettingsFromStore('no_menu')
+
+  if (to.name == 'module') return next({ name: 'menu' }) //redirect to 404 if trying to access module directly
+
+  if (getWidgetOpen) app.config.globalProperties.$bus.$emit('close-widget') //close opened widget
+  if (getPopupIsOpen) app.config.globalProperties.$bus.$emit('close-popup') //close the popup
+  if (getSidebarIsOpen) app.config.globalProperties.$bus.$emit('close-sidebar') //close the sidebar
+
+  if (from.name !== 'module')
+    app.config.globalProperties.$bus.$emit('update-route-history', from)
+
+  app.config.globalProperties.$bus.$emit('update-content', to) //update the content of the current page
+  //hidle detector should be stopped in menu
+  if (to.name == 'menu') {
+    app.config.globalProperties.$bus.$emit('stop-app-timer')
+    app.config.globalProperties.$bus.$emit('stop-idle-detector')
+  }
+
+  if ((noNavigationToMenu && to.name == 'menu') || to.name == 'module') {
+    const r = app.config.globalProperties.$helper.getRoutesFromVueRouter() //This return all the routes defined for the module
+    let safeRoute = r.meta.children[0] //get the first navigable route from the module routes
+
+    return next({
+      name: safeRoute._namedRoute // redirect to safety route //
+    })
+  }
+
+  return next(true)
+})
+
+export default router