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

package/src/module/stores/appStore.js

@@ -0,0 +1,893 @@
+import { defineStore } from 'pinia'
+import { fileAssets } from '../../shared/generalfuncs.js'
+import { mappedFiles } from '../../router/routes.js'
+const allFiles = fileAssets.getActivities()
+
+export const useAppStore = defineStore('$appStore', {
+  //=======================STATE
+  state: () => {
+    return {
+      status: '',
+      anchorStatus: null,
+      thisModule: { activities: mappedFiles },
+      appDebugMode: false,
+      currentActivity: null,
+      currentPage: null,
+      currentBranchPage: null,
+      currentBranching: null,
+      currentSection: null,
+      currentPageMediaElements: [], // array containing all media of the page
+      currentMediaDuration: null,
+      currentPageTimeline: null,
+      bookmark: null,
+      currentBrowser: null,
+      isMobile: null,
+      deviceType: null,
+      introAcitve: null,
+      userMetaData: {},
+      appConfigs: null,
+      menuSetting: null,
+      dataNc: {},
+      ncIsOpen: false,
+      applicationSettings: {},
+      routeHistory: null,
+      mediaVolume: 0.5,
+      mediaMuted: false,
+      mediaSubtitles: false,
+      mediaPlaybarValues: {
+        subtitles: false,
+        volume: 0.5
+      },
+      navA11y: false,
+      showPrimaryCtrl: true,
+      showNavLeftCtrl: true,
+      showNavRightCtrl: true,
+      prevActivity: null,
+      nextActivity: null,
+      lrsConfig: null,
+      compStatusTracker: [],
+      dataFromServer: null,
+      errMenuSetting: null,
+      endPopUp: false
+      //_allFiles: [],
+      //allModuleRoutes: null
+    }
+  },
+  //=======================GETTERS
+  getters: {
+    getAppDebugMode: (state) => {
+      return state.appDebugMode
+    },
+    /**
+     * @description: Check if subtitles are enabled or not
+     */
+    getMediaSubtitles: (state) => {
+      return state.mediaSubtitles
+    },
+    /**
+     * @description: get media volume for the playbar
+     */
+    getMediaVolume: (state) => {
+      return state.mediaVolume
+    },
+
+    /**
+     * @description: get media muted for the playbar
+     */
+    getMediaMuted: (state) => {
+      return state.mediaMuted
+    },
+
+    /**
+     * @description: Check if automatic video playback is enabled in application settings
+     */
+
+    getAutoplayEnabled: (state) => {
+      return state.applicationSettings.autoplay
+        ? state.applicationSettings.autoplay
+        : null
+    },
+
+    /**
+     * @description: Check if onboarding is enabled in application settings
+     */
+    getOnboardingEnabled: (state) => {
+      return state.applicationSettings.onboarding
+        ? state.applicationSettings.onboarding
+        : null
+    },
+
+    /**
+     * @description: Check if auto-show subtitles is enabled in application settings
+     */
+    getShowSubtitles: (state) => {
+      return state.applicationSettings.subtitles
+        ? state.applicationSettings.subtitles
+        : null
+    },
+
+    /**
+     * @description: Getter to return the app status
+     */
+    getAppStatus: (state) => {
+      return state.compStatusTracker.length ? 'loading' : 'ready'
+    },
+
+    /**
+     * @description: Getter to return the compStatusTracker
+     */
+    getCompStatusTracker: (state) => {
+      return state.compStatusTracker
+    },
+
+    getErrorMenu: (state) => {
+      return state.errMenuSetting
+    },
+    getSkipMenu: (state) => {
+      if (state.appConfigs.noMenu) return state.appConfigs.noMenu
+      else return false
+    },
+    /**
+     * @description: Getter to return the content of a page
+     * @param {String} activity_Id: ID of the activity
+     * @param {String} page_Id: ID of the page
+     * @return {Object} : data of the search result
+     */
+    getPageData: (state) => {
+      return (activity_Id, page_Id) => {
+        //Must have activity_Id,  page_Id params
+        if (!activity_Id || !page_Id)
+          throw new Error(
+            ` ⚠️ Invalid call to getPageData \n 🚩 Missing required arguments`
+          )
+
+        if (state.thisModule.activities.get(activity_Id)) {
+          let page
+
+          //handle the case for branching and normal pages
+          if (page_Id.length > 3) {
+            const splitted = page_Id.split('_')
+            page = state.thisModule.activities
+              .get(activity_Id)
+              .get(splitted[0])
+              .get(splitted[1])
+              .get(page_Id)
+          } else {
+            const p = state.thisModule.activities.get(activity_Id).get(page_Id)
+            if (p)
+              switch (p.constructor) {
+                //Branching root page
+                case Map:
+                  page = p.get(page_Id)
+                  break
+                //Normal page
+                default:
+                  page = state.thisModule.activities
+                    .get(activity_Id)
+                    .get(page_Id)
+                  break
+              }
+          }
+
+          if (page) return page.content
+        }
+
+        return false
+      }
+    },
+    /**
+     * @description: Getter to return an activity of the module. The getter will return all the activities if no id is given
+     * @param  id: id of a activity to return
+     */
+    getAllActivities: (state) => {
+      return (id) => {
+        if (
+          !Object.keys(state.thisModule).length ||
+          !state.thisModule.activities
+        )
+          return {}
+
+        if (!id)
+          return new Object({
+            list: state.thisModule.activities,
+            pageSize: (() => {
+              let size = 0
+              state.thisModule.activities.forEach((value, key) => {
+                const aSize = allFiles.filter((f) =>
+                  f.name.includes(key)
+                ).length
+                size = size + aSize
+              })
+              return size
+            })()
+          })
+
+        return new Object({
+          list: state.thisModule.activities.get(id),
+          pageSize: allFiles.filter((f) => f.includes(id)).length
+        })
+      }
+    },
+
+    getAnchorStatus: (state) => {
+      return state.anchorStatus
+    },
+    getIntroStatus() {
+      let activities = this.getAllActivities().list
+      return activities.get('A00') ? true : false
+    },
+    getConcluStatus() {
+      let activities = this.getAllActivities().list
+      return activities.get('A99') ? true : false
+    },
+    getModuleInfo: (state) => {
+      if (state.thisModule.info) return state.thisModule.info
+      else return state.thisModule
+    },
+    getAppConfigs: (state) => {
+      if (state.appConfigs) return state.appConfigs
+      else return false
+    },
+    getRouteHistory: (state) => {
+      return state.routeHistory ? state.routeHistory : []
+    },
+    hasMediaElOrTimeline: (state) => {
+      return state.currentPageMediaElements.length || state.currentPageTimeline
+    },
+    /**
+     * @description: Getter to return the current page
+     * @returns: page {Object}
+     */
+    getCurrentPage: (state) => {
+      let page = null
+      if (state.currentPage !== null) {
+        page = {
+          ...state.currentPage
+        }
+        page.mElements = state.currentPageMediaElements
+        page.timeline = state.currentPageTimeline
+      }
+      return page
+    },
+    /**
+     * @description: Getter to return the current branching page
+     * @returns: page {Object}
+     */
+    getCurrentBranching: (state) => {
+      return state.currentBranching
+    },
+    /**
+     * @description: Getter to return the current branch page in a branching
+     * @returns: page {Object}
+     */
+    getCurrentBranchPage: (state) => {
+      return state.currentBranchPage
+    },
+    /**
+     * @description: Getter to return the current Media Duration
+     */
+    getCurrentMediaDuration: (state) => {
+      return state.currentMediaDuration
+    },
+
+    /**
+     * @description: Getter to return the browser
+     */
+    getCurrentBrowser: (state) => {
+      return state.currentBrowser
+    },
+
+    getIsMobile: (state) => {
+      return state.isMobile
+    },
+    /**
+     * @description: Getter to return the type of device on which app is running (iosDevice, Android device or Desktop)
+     */
+    getDeviceType: (state) => {
+      return state.deviceType
+    },
+    /**
+     * @description: Getter to return the current enabled user settings
+     */
+    getApplicationSettings: (state) => {
+      return state.applicationSettings
+    },
+
+    /**
+     * @description: Getter to return the playbar values - Will return an attribut state by it key or the entire mediaPLaybar values
+     *
+     */
+    getMediaPlaybarValues: (state) => {
+      return (key) =>
+        key && state.mediaPlaybarValues[key]
+          ? state.mediaPlaybarValues[key]
+          : state.mediaPlaybarValues
+    },
+
+    /**
+     * @description: Getter to return the userMetadata
+     * * @returns: {Object}
+     */
+    getUserInteraction: (state) => {
+      return state.userMetaData
+    },
+
+    /**
+     * @description: Getter to return the interaction on a page
+     * * @returns: {Object} - userIneraction
+     */
+    getPageInteraction() {
+      return (activity = null, id = null) => {
+        if (!activity || !id) return null
+        const allInteraction = this.getUserInteraction
+        if (!allInteraction[activity] || !allInteraction[activity][id])
+          return {}
+
+        return allInteraction[activity][id] //allInteraction
+      }
+    },
+    /**
+     * @description: Getter to return all  states of the  activities
+     * @returns: progess {Object}
+     */
+    getAllActivitiesState(state) {
+      const activities = this.getAllActivities().list
+      let progress = {}
+      // search this acvitity in the userInteraction
+      activities.forEach((aValue, aKey) => {
+        let allStates
+        let temp = []
+
+        if (state.userMetaData[aKey]) {
+          const activity = Object.entries(state.userMetaData[aKey])
+
+          // get all the completed acitivities
+          allStates = activity.map((page) => {
+            // return only all the pages which state are completed or started
+            if (
+              page[1].userInteraction.state === 'completed' ||
+              page[1].userInteraction.state === 'started'
+            ) {
+              return {
+                ...allStates,
+                [page[0]]: page[1].userInteraction.state
+              }
+            }
+          })
+        }
+        if (allStates && allStates.length) {
+          temp = [...allStates]
+        }
+
+        // Getting the(Map type Object) length of the activities including the branching
+        let z = [] //placeholder
+        const getLength = (el) => {
+          if (el.size && el.size > 0) {
+            el.forEach((v) => {
+              // v is a map get its length with a recursive call to its elements
+              if (v && v.constructor === Map && v.size > 0) getLength(v)
+              else z.push(v) // v is an object add it to z
+            })
+          }
+          return z.length //return the length of the placeholder
+        }
+
+        // Update the progress with new values
+        progress = {
+          ...progress,
+          [aKey]: {
+            size: getLength(aValue),
+            progressions: [...temp]
+          }
+        }
+      })
+      return progress
+    },
+
+    /**
+     * @description: Getter to return only completed activities
+     * @returns: record {Object}
+     */
+    getAllCompleted(state) {
+      const allActivities = this.getAllActivitiesState
+      let record = {}
+
+      for (const key in allActivities) {
+        // get only activities that are completed
+        const completed = allActivities[key].progressions.filter((page) => {
+          if (page) return Object.values(page)[0] === 'completed'
+        })
+        // add  the activity and its completed pages
+        if (completed.length)
+          record = {
+            ...record,
+            [key]: [...completed]
+          } // add the complete array to the record
+      }
+      return record
+    },
+
+    // for the quizzes
+    getAllQuizAnswers: (state) => {
+      return state.quizAnswers
+    },
+    getAllPollAnswers: (state) => {
+      return state.pollAnswers
+    },
+    getQuizAnswers: (state) => {
+      return (question_id) => {
+        const indexQuestion = state.quizAnswers.findIndex(function (element) {
+          return element.questionId == question_id
+        })
+        if (indexQuestion !== -1) {
+          return state.quizAnswers[indexQuestion]
+        }
+        return false
+      }
+    },
+    getPollAnswers: (state) => {
+      return (question_id) => {
+        const indexQuestion = state.pollAnswers.findIndex(function (element) {
+          return element.questionId == question_id
+        })
+        if (indexQuestion !== -1) {
+          return state.pollAnswers[indexQuestion]
+        }
+        return false
+      }
+    },
+    getBifChoice(state) {
+      const activities = this.getUserInteraction
+      let data = {}
+
+      let act = null
+      let page = null
+      for (const c in activities) {
+        act = c
+        const activity = state.userMetaData[c]
+        for (const b in activity) {
+          page = b
+          if (
+            activity[b] &&
+            [b].userInteractionactivity &&
+            [b].userInteraction.bifChoice
+          ) {
+            let choix = activity[b].userInteraction.bifChoice
+            data = { ...data, act, page, choix }
+          }
+        }
+      }
+
+      return data
+    },
+    /**
+     * @description: Getter to return the connection information of the app
+     * @returns: record {Object}
+     */
+    getConnectionInfo() {
+      return this.getLrsInfo
+    },
+
+    /**
+     * @description: Getter to return the menu setting
+     * @returns: record {Object}
+     */
+    getMenuSettings: (state) => {
+      return state.menuSetting
+    },
+
+    /**
+     * @description: Getter to return the menu setting
+     * @returns: record {Array}: liste of all the anchors by activity
+     */
+    getMenuAnchors(state) {
+      const menu = this.getMenuSettings
+      let anchors = []
+      for (const c in menu) {
+        anchors = [...anchors, { [c]: menu[c].anchors }]
+      }
+      return anchors
+    },
+
+    /**
+     * @description: Getter to return the menu setting
+     * @params ID {String}: id of the Activity
+     * @returns: record {ArrayOfObject}
+     */
+    getAnchorsForActivity(state) {
+      const allAnchors = this.getMenuAnchors
+      return (id) => {
+        const result = allAnchors.find((a) => a[id]) // find the object which has id
+
+        if (result) return result[id]
+        else return []
+      }
+    },
+
+    /**
+     * @description: Getter to return the current Section
+     * @returns:  {Object}
+     */
+    getCurrentSection: (state) => {
+      if (state.currentSection) return state.currentSection
+      else return {}
+    },
+
+    getShowPrimaryCtrl: (state) => {
+      return state.showPrimaryCtrl
+    },
+
+    getShowNavLeftCtrl: (state) => {
+      return state.showNavLeftCtrl
+    },
+
+    getShowNavRightCtrl: (state) => {
+      return state.showNavRightCtrl
+    },
+
+    getLrsInfo: (state) => {
+      return state.lrsConfig
+    },
+
+    getNextActivity: (state) => {
+      return state.nextActivity
+    },
+
+    getPreviousActivity: (state) => {
+      return state.prevActivity
+    },
+
+    getDataFromServer: (state) => {
+      return state.dataFromServer
+    },
+    getDataNoteCredit: (state) => {
+      return state.dataNc
+    },
+    getWidgetOpen(state) {
+      return state.ncIsOpen
+    },
+
+    getSettingsFromStore: (state) => {
+      return (sName = null) => {
+        if (!state.appConfigs || state.appConfigs[sName] == undefined)
+          return null
+
+        if (sName) return state.appConfigs[sName]
+        else return state.appConfigs
+      }
+    },
+
+    getA11yStatus: (state) => {
+      return state.navA11y
+    },
+
+    getEndPopUp: (state) => {
+      return state.endPopUp
+    }
+  },
+  //=======================ACTIONS
+  actions: {
+    updateAppStatus(status) {
+      this.status = status
+    },
+
+    updateAnchorStatus(status) {
+      this.anchorStatus = status
+    },
+
+    updateIntroStatus(status) {
+      this.introAcitve = status
+    },
+
+    setAppDebugMode(state, bool) {
+      this.appDebugMode = bool
+    },
+
+    setMobileState(status) {
+      this.isMobile = status
+    },
+    setCurrentBrowser(browser) {
+      this.currentBrowser = browser
+    },
+    setDeviceType(device) {
+      this.deviceType = device
+    },
+    setErrorMenu(state, error) {
+      this.errMenuSetting = error
+    },
+    setApplicationSettings(settings) {
+      this.applicationSettings = settings
+    },
+
+    setMediaVolume(volume) {
+      this.mediaVolume = volume
+    },
+
+    setMediaMuted(state, bool) {
+      this.mediaMuted = bool
+    },
+
+    setMediaSubtitles(subtitlesEnabled) {
+      this.mediaSubtitles = subtitlesEnabled
+    },
+
+    setMediaPlaybarValues(data) {
+      // update the playbar attributes
+      for (const k in data) {
+        this.mediaPlaybarValues[k] = data[k]
+      }
+    },
+
+    setAllFiles(data) {
+      this.allFiles = data
+    },
+
+    /* set/update the Application configuration*/
+    setAppConfigs(data) {
+      this.appConfigs = data
+      const {
+        id,
+        crs_id: courseID,
+        idb_id: idbID,
+        specification: packageType
+      } = data
+      // Update the Module information when setting config
+      this.updateModule({
+        key: 'info',
+        data: { id, courseID, idbID, packageType }
+      })
+    },
+
+    setRouteHistory(data) {
+      this.routeHistory = data
+    },
+    /* set/update the Menu configuration*/
+    setMenu(data) {
+      this.menuSetting = data
+    },
+
+    /* set/update the Branching information*/
+    updateCurrentBranching(data) {
+      this.currentBranching = data
+    },
+    /* set/update the branch page information*/
+    updateCurrentBranchPage(data) {
+      this.currentBranchPage = data
+    },
+    /* set/update  page information*/
+    updateCurrentPage({ activity_Id, page_Id }) {
+      if (activity_Id && page_Id) {
+        let page
+        //id type case PXX_EXX_PXX
+        if (page_Id.length > 3) {
+          const splitted = page_Id.split('_')
+          page = this.thisModule.activities
+            .get(activity_Id)
+            .get(splitted[0])
+            .get(page_Id).content
+        } else {
+          const p = this.thisModule.activities.get(activity_Id).get(page_Id)
+
+          //this branching page if the constructor is a map
+          if (p && p.constructor === Map) {
+            page = this.thisModule.activities
+              .get(activity_Id)
+              .get(page_Id)
+              .get(page_Id).content
+          } else
+            page = this.thisModule.activities
+              .get(activity_Id)
+              .get(page_Id).content
+        }
+        this.currentPage = page
+      } else this.currentPage = {}
+    },
+    /**
+      @description update the module data.
+                    If no key is passed update the entire module with new data. if key is passed add/update the key
+      @param {String} key : a key to add/update in the module
+      @param {String} data : data for the key to add/update in the module
+     */
+    updateModule({ key, data }) {
+      if (key || this.thisModule[key]) this.thisModule[key] = data
+      else this.thisModule = data
+    },
+
+    updateCurrentTimeline(data) {
+      this.currentPageTimeline = data
+    },
+
+    async updateCurrentMediaElements(data) {
+      if (data && data.constructor === Array && !data.length)
+        return (this.currentPageMediaElements = [])
+
+      const search = this.currentPageMediaElements.findIndex(
+        (e) => e.id == data.id
+      )
+      //If already existe update the current media information
+      if (search !== -1) return (this.currentPageMediaElements[search] = data)
+      //Add the ref in list
+      this.currentPageMediaElements.push(data)
+    },
+
+    updateCurrentMediaDuration(data) {
+      this.currentMediaDuration = data
+    },
+
+    updateCurrentSection(data) {
+      // update when new data
+      if (
+        !this.currentSection ||
+        this.currentSection.anchorName !== data.anchorName
+      )
+        this.currentSection = data
+    },
+    updateCurrentnoteCredit(data) {
+      this.dataNc = data
+    },
+    /**
+     * @description: Save user interaction on a page to store
+     * USe to Update existing userMetadata
+     */
+    updateUserMetaData(data) {
+      const _keys = Object.keys(data) // get all keys in the passed data
+      // ckeck if the Activity existe in the user data
+      if (data.activityRef) {
+        if (this.userMetaData[data.activityRef]) {
+          const activity = this.userMetaData[data.activityRef] // get targeted activity in the user data
+          const page = data.id // page id
+
+          // check if the page exist in the the activity
+          if (Object.keys(activity).includes(page)) {
+            // add entry for new key in user data for the target page
+            _keys.forEach((key) => {
+              // add add value of new key in the record : discart key=ActivityRef and key ===
+              if (key !== _keys[0] && key !== _keys[1]) {
+                // store the current user interaction in a variable
+                const oldValue = activity[page][key]
+
+                // update the user data by copying the old value and add new data
+                activity[page][key] = {
+                  ...oldValue,
+                  ...data[key]
+                }
+              }
+            })
+          } else {
+            /**
+             * add the page reference as an object to the user data
+             * and create entry for user interaction
+             * */
+            _keys.forEach((key) => {
+              // if (key !== _keys[0] && key !== _keys[1]) {
+              //   Vue.set(activity, [page], {
+              //     [key]: data[key]
+              //   })
+              // }
+              if (key !== _keys[0] && key !== _keys[1]) {
+                activity[page] = {
+                  [key]: data[key]
+                }
+              }
+            })
+          }
+        } else {
+          // create a new entry for the activity
+          this.userMetaData = {
+            ...this.userMetaData,
+            [data.activityRef]: {
+              [data.id]: {}
+            }
+          }
+
+          // Add data for each new page
+          _keys.forEach((key) => {
+            if (key !== _keys[0] && key !== _keys[1]) {
+              // add the page datas
+              this.userMetaData[data.activityRef][data.id] = {
+                [key]: data[key]
+              }
+            }
+          })
+        }
+      }
+    },
+
+    /* set/update the user data with existing record */
+    setUserMetaData(data) {
+      this.userMetaData = data
+    },
+
+    // to update the answers
+    saveAnswersQuiz(answers) {
+      const theAnswers = this.getAllQuizAnswers.findIndex(function (element) {
+        return element.questionId == answers.questionId
+      })
+      if (theAnswers == -1) {
+        // if the answer already existed
+        this.quizAnswers.push(answers)
+      } else {
+        this.quizAnswers[theAnswers] = answers
+      }
+    },
+
+    saveAnswersPoll(answers) {
+      const theAnswers = this.getAllPollAnswers.findIndex(function (element) {
+        return element.questionId == answers.questionId
+      })
+      if (theAnswers == -1) {
+        // if the answer already existed
+        this.pollAnswers.push(answers)
+      } else {
+        this.pollAnswers[theAnswers] = answers
+      }
+    },
+
+    // SET_SHOW_PRIMARY_CONTROL(state, bool) {
+    //   state.showPrimaryCtrl = bool
+    // },
+
+    // SET_SHOW_NAV_LEFT_CONTROL(state, bool) {
+    //   state.showNavLeftCtrl = bool
+    // },
+
+    // SET_SHOW_NAV_RIGHT_CONTROL(state, bool) {
+    //   state.showNavRightCtrl = bool
+    // },
+
+    setLrsConfig(data) {
+      if (data) this.lrsConfig = data
+    },
+
+    updateWidgetOpen(state, data) {
+      this.ncIsOpen = data
+    },
+
+    updateDataFetchFromServer(data) {
+      if (!data || data.constructor !== Object) return
+      Object.keys(data).forEach((k) => {
+        this.dataFromServer = { ...this.dataFromServer, [k]: data[k] }
+      })
+    },
+
+    updatePreviousActivity(data) {
+      this.prevActivity = data
+    },
+
+    updateNextActivity(data) {
+      this.nextActivity = data
+    },
+
+    updateNavA11y(data) {
+      this.navA11y = data
+    },
+
+    updateCompStatusTracker(data) {
+      if (!data) return
+
+      const { name, status } = data
+
+      if (!name || !status) return
+
+      let tracker = this.compStatusTracker
+
+      //search for the component
+      let target = tracker.find((e) => e == name)
+
+      //add component to tracking cue
+      if (!target && status == 'loading') tracker.push(name)
+
+      if (!tracker.length) return
+
+      //remove component to tracking cue
+      if (status == 'ready') {
+        const index = tracker.indexOf(target)
+
+        if (index >= 0) tracker = tracker.splice(index, 1)
+      }
+    },
+    updateEndPopUp(data) {
+      this.endPopUp = data
+    }
+  }
+})