fcad-core-dragon 2.1.0 → 2.1.2

package/src/module/stores/appStore.js

@@ -1,947 +1,960 @@
-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: {},
-      wigIsOpen: false,
-      popIsOpen: false,
-      sideBIsOpen: 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,
-      userDataLoaded: false,
-      lessonPosition: [],
-      completedState: {}
-    }
-  },
-  //=======================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
-    },
-
-    getUserDataStatus: (state) => {
-      return state.userDataLoaded
-    },
-    /**
-     * @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: Check if auto-show subtitles is enabled in application settings
-     */
-    getBookmarkEnabled: (state) => {
-      return state.applicationSettings.bookmark
-        ? state.applicationSettings.bookmark
-        : null
-    },
-
-    /**
-     * @description: Getter to return the app status
-     */
-    getAppStatus: (state) => {
-      return !state.userDataLoaded || 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
-    },
-    getNotes() {
-      return (actId, pageId) => {
-        let pageNotes = []
-        let pageID = `${actId}/${pageId}`
-        const pagesList = allFiles.filter((page) => {
-          return page.name.includes(pageID)
-        })
-
-        for (const p of pagesList) {
-          if (p.content.data().notes) {
-            pageNotes.push({ [p.content.data().id]: p.content.data().notes })
-          }
-        }
-
-        return pageNotes
-      }
-    },
-    getCredits() {
-      return (actId, pageId) => {
-        let pageCredits = []
-        let pageID = `${actId}/${pageId}`
-        const pagesList = allFiles.filter((page) => {
-          return page.name.includes(pageID)
-        })
-
-        for (const p of pagesList) {
-          if (p.content.data().credits)
-            pageCredits.push(...p.content.data().credits)
-        }
-        return pageCredits
-      }
-    },
-    /**
-     * @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(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.name.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) => {
-      if (state.currentPage !== null) {
-        state.currentPage['mElements'] = state.currentPageMediaElements
-        state.currentPage['timeline'] = state.currentPageTimeline
-      }
-      return state.currentPage
-    },
-    /**
-     * @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 && 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.wigIsOpen
-    },
-    getPopupIsOpen(state) {
-      return state.popIsOpen
-    },
-    getSidebarIsOpen(state) {
-      return state.sideBIsOpen
-    },
-
-    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
-    },
-
-    getLessonPosition(state) {
-      return state.lessonPosition
-    },
-    getCompletionState(state) {
-      return state.completedState
-    }
-  },
-  //=======================ACTIONS
-  actions: {
-    updateAppStatus(status) {
-      this.status = status
-    },
-
-    updateAnchorStatus(status) {
-      this.anchorStatus = status
-    },
-
-    updateIntroStatus(status) {
-      this.introAcitve = status
-    },
-
-    setAppDebugMode(bool) {
-      this.appDebugMode = bool
-    },
-
-    setMobileState(status) {
-      this.isMobile = status
-    },
-    setCurrentBrowser(browser) {
-      this.currentBrowser = browser
-    },
-    setDeviceType(device) {
-      this.deviceType = device
-    },
-    setErrorMenu(error) {
-      this.errMenuSetting = error
-    },
-    setApplicationSettings(settings) {
-      this.applicationSettings = settings
-    },
-    setLessonPosition(newData) {
-      this.lessonPosition = newData
-    },
-    setCompletionState(newData) {
-      this.completedState = newData
-    },
-
-    setMediaVolume(volume) {
-      this.mediaVolume = volume
-    },
-
-    setMediaMuted(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*/
-    async initializeApp(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 }, caller = null) {
-      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 = {}
-      if (caller) console.log('🤙 updateCurrentPage called by', caller)
-    },
-    /**
-      @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]) {
-                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
-      }
-    },
-
-    setLrsConfig(data) {
-      if (data) this.lrsConfig = data
-    },
-
-    updateWidgetOpen(data) {
-      this.wigIsOpen = data
-    },
-    /**
-     * @description update the state of the popup -Cuminicate weither it is open or closes
-     */
-    updatepopIsOpen(data) {
-      this.popIsOpen = data
-    },
-    /**
-     * @description update the state of the sidebar -Cuminicate weither it is open or closes
-     */
-    updatesideBIsOpen(data) {
-      this.sideBIsOpen = data
-    },
-
-    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
-    }
-  }
-})
+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: {},
+      wigIsOpen: false,
+      popIsOpen: false,
+      sideBIsOpen: 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,
+      userDataLoaded: false,
+      lessonPosition: [],
+      completedState: {},
+      pckgInfo: {
+        packageVersion: null,
+        packageName: null
+      }
+    }
+  },
+  //=======================GETTERS
+  getters: {
+    getAppPackageInfo: (state) => {
+      return (key = null) => {
+        if (key && state.pckgInfo[key]) return state.pckgInfo[key]
+        else return state.pckgInfo
+      }
+    },
+    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
+    },
+
+    getUserDataStatus: (state) => {
+      return state.userDataLoaded
+    },
+    /**
+     * @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: Check if auto-show subtitles is enabled in application settings
+     */
+    getBookmarkEnabled: (state) => {
+      return state.applicationSettings.bookmark
+        ? state.applicationSettings.bookmark
+        : null
+    },
+
+    /**
+     * @description: Getter to return the app status
+     */
+    getAppStatus: (state) => {
+      return !state.userDataLoaded || 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
+    },
+    getNotes() {
+      return (actId, pageId) => {
+        let pageNotes = []
+        let pageID = `${actId}/${pageId}`
+        const pagesList = allFiles.filter((page) => {
+          return page.name.includes(pageID)
+        })
+
+        for (const p of pagesList) {
+          if (p.content.data().notes) {
+            pageNotes.push({ [p.content.data().id]: p.content.data().notes })
+          }
+        }
+
+        return pageNotes
+      }
+    },
+    getCredits() {
+      return (actId, pageId) => {
+        let pageCredits = []
+        let pageID = `${actId}/${pageId}`
+        const pagesList = allFiles.filter((page) => {
+          return page.name.includes(pageID)
+        })
+
+        for (const p of pagesList) {
+          if (p.content.data().credits)
+            pageCredits.push(...p.content.data().credits)
+        }
+        return pageCredits
+      }
+    },
+    /**
+     * @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(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.name.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) => {
+      if (state.currentPage !== null) {
+        state.currentPage['mElements'] = state.currentPageMediaElements
+        state.currentPage['timeline'] = state.currentPageTimeline
+      }
+      return state.currentPage
+    },
+    /**
+     * @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 && 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.wigIsOpen
+    },
+    getPopupIsOpen(state) {
+      return state.popIsOpen
+    },
+    getSidebarIsOpen(state) {
+      return state.sideBIsOpen
+    },
+
+    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
+    },
+
+    getLessonPosition(state) {
+      return state.lessonPosition
+    },
+    getCompletionState(state) {
+      return state.completedState
+    }
+  },
+  //=======================ACTIONS
+  actions: {
+    updateAppStatus(status) {
+      this.status = status
+    },
+
+    updateAnchorStatus(status) {
+      this.anchorStatus = status
+    },
+
+    updateIntroStatus(status) {
+      this.introAcitve = status
+    },
+
+    setAppDebugMode(bool) {
+      this.appDebugMode = bool
+    },
+
+    setMobileState(status) {
+      this.isMobile = status
+    },
+    setCurrentBrowser(browser) {
+      this.currentBrowser = browser
+    },
+    setDeviceType(device) {
+      this.deviceType = device
+    },
+    setErrorMenu(error) {
+      this.errMenuSetting = error
+    },
+    setApplicationSettings(settings) {
+      this.applicationSettings = settings
+    },
+    setLessonPosition(newData) {
+      this.lessonPosition = newData
+    },
+    setCompletionState(newData) {
+      this.completedState = newData
+    },
+
+    setMediaVolume(volume) {
+      this.mediaVolume = volume
+    },
+
+    setMediaMuted(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
+    },
+    setAppPackageInfo(info) {
+      this.pckgInfo = { ...info }
+    },
+
+    /* set/update the Application configuration*/
+    async initializeApp(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 }, caller = null) {
+      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 = {}
+      if (caller) console.log('🤙 updateCurrentPage called by', caller)
+    },
+    /**
+      @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]) {
+                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
+      }
+    },
+
+    setLrsConfig(data) {
+      if (data) this.lrsConfig = data
+    },
+
+    updateWidgetOpen(data) {
+      this.wigIsOpen = data
+    },
+    /**
+     * @description update the state of the popup -Cuminicate weither it is open or closes
+     */
+    updatepopIsOpen(data) {
+      this.popIsOpen = data
+    },
+    /**
+     * @description update the state of the sidebar -Cuminicate weither it is open or closes
+     */
+    updatesideBIsOpen(data) {
+      this.sideBIsOpen = data
+    },
+
+    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
+    }
+  }
+})