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

package/src/components/AppBase.vue

@@ -4,49 +4,32 @@
  @ Must be used.
 -->
 <template>
-  <div
-    id="App-base"
-    fluid
-    :class="[{ DR: appConfig.isDr }, { iPad: resizeiPad }]"
-  >
-    <router-view :key="$route.fullpath" class="box" />
+  <div id="App-base" fluid :class="{ iPad: resizeiPad }">
     <transition name="bounce" mode="in-out">
       <div
-        v-show="wrongSide"
-        class="macWarn macWarn-overlay"
-        :class="{ warningPortait: wrongSide }"
+        v-if="showBuildInfo && !buildInfoClicked"
+        id="build-info"
+        @click="buildInfoClicked = true"
       >
-        <div class="macWarn-box">
-          <h1>{{ $t('message.bad_orientation_title') }}</h1>
-          <p>{{ $t('message.bad_orientation_msg') }}</p>
-          <app-base-button
-            id="btn-warning-ok"
-            class="btn"
-            @click="
-              () => {
-                if (wrongSide) wrongSide = !wrongSide
-              }
-            "
-          >
-            ok
-          </app-base-button>
-        </div>
+        <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
+        <span>FCAD {{ this.$helper.getFcadVersion() }}</span>
+        <span>{{ this.$helper.getBuildTime() }}</span>
       </div>
     </transition>
+
+    <router-view class="box" />
+    <app-icons />
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import AppBaseButton from './AppBaseButton.vue'
 
 export default {
-  components: { AppBaseButton },
   props: {
     appConfig: {
       type: Object,
       default: () => {
         return {
-          isDr: false, // set Mode of App: true if DR mode false if is Full app mode
           lang: 'fr' // set language of App: default French
         }
       }
@@ -60,7 +43,7 @@ export default {
       initialDeviceOrentation: null,
       appIsFullScreen: false,
       resizeiPad: false,
-      wrongSide: null
+      buildInfoClicked: false
     }
   },
   computed: {
@@ -77,6 +60,12 @@ export default {
     },
     getheight() {
       return window.innerHeight
+    },
+    showBuildInfo() {
+      return (
+        process.env.NODE_ENV === 'production' &&
+        window.location.host === 'projets.cegepadistance.ca'
+      )
     }
   },
   watch: {
@@ -112,22 +101,8 @@ export default {
             this.getConnectionInfo.actor &&
             this.getConnectionInfo.remote
           ) {
-            /*
-             * NOTE: At this date, beforeunload event does not give consitent behavior
-             * to excecute the methode to securely save data to the LMS. To bypass this anomally
-             * We force the use of message window to give time for the statement to be send to LMS.
-             * The caviat of this is that if the user decide to stay on the page, inconsistent information of termination is
-             * recorded in the LMS as user didn't actually leave the page. We cannot controle the sucessfull delivery of
-             * As of this date, Browser do not give option to execute method base on the user response from the msg window.
-             *
-             */
-
             window.addEventListener('beforeunload', (e) => {
-              // e.preventDefault()
-
               this.executeCloseEventTriggered()
-
-              // return (e.returnValue = '')
             })
           } else
             window.addEventListener(
@@ -157,18 +132,6 @@ export default {
           }
 
           this.$xapi._configLRS(config) // configure and launch LRS
-
-          /* NOTE : Handleling of crossed setting preferrences
-           * This is an exemple of how to check and handle possible existing preferrences set by the user
-           * This logic should properly be handle by the component that will controle the user preferrences
-           */
-          // const activity_id = this.getModuleInfo.courseID
-          //   ? this.getConnectionInfo.activity_id.replace(
-          //       `/${this.getModuleInfo.id}`,
-          //       ''
-          //     )
-          //   : this.getConnectionInfo.activity_id
-          // this.$bus.$emit('launch-xapi-resource', activity_id)
           this.fetchSettingsFromServer()
         }
       }
@@ -176,6 +139,8 @@ export default {
   },
 
   created() {
+    this.setProgress()
+    window.versionFCAD = this.$helper.getFcadVersionString()
     //check if this is running in a mobile environment and register state in the store
     const mobileDetect = require('mobile-detect')
 
@@ -190,46 +155,19 @@ export default {
 
     // register device type running the App in the store (ios, Android or Deskop)
     this.$store.dispatch('setDeviceType', this.detectDevice())
-
-    this.initialDeviceOrentation = window.matchMedia('(orientation:portrait)')
-    /**
-     * Note: So far we have noticed an inconsistent beheavor when app is running in Mooddle. on Android Devices, when *
-     * showing the warning msg for user to turn their device, the listners for unknown reason are not responding. To *
-     * solve that we have add a button that will close the warning msg when the user click ok. This behavior is
-     * applayed for all handheld devices, untill suitable solition is found.
-     */
-
-    //Attaching listener for the MatchMedia
-    if (this.detectDevice() === 'iOSDevice') {
-      this.initialDeviceOrentation.addListener(this.toggleChanges)
-    } else if (this.detectDevice() === 'AndroidDevice') {
-      this.initialDeviceOrentation.addEventListener('change', (e) => {
-        this.toggleChanges(e.target)
-      })
-    }
-    //Attaching a listener when app load the 1st time to detect orientation
-    window.addEventListener('load', () => {
-      this.toggleChanges(this.initialDeviceOrentation)
-    })
-
     this.fetchSettingsFromServer()
   },
   mounted() {
-    // put app in DR or Full mode
-    this.$store.commit('SET_DR', this.appConfig.isDr)
     // set the language of the app
     this.setLocale(this.appConfig.lang)
+    this.$bus.$on('set-comp-status', (name, status) =>
+      this.updateTracker(name, status)
+    )
 
-    // Listen to the size of the window add to the wrapper
-    if (!this.$store.state.$appStore.isDr) {
-      window.addEventListener('resize', function() {
-        if (this.document.getElementById('wrapper-content')) {
-          this.document.getElementById(
-            'wrapper-content'
-          ).style.height = `${window.innerHeight - 55}px`
-        }
-      })
-    }
+    this.$bus.$on('set-user-progress', this.setProgress())
+  },
+  beforeDestroy() {
+    this.$bus.$off('set-comp-status')
   },
   methods: {
     /**
@@ -243,7 +181,7 @@ export default {
         if (lang === 'français' || lang === 'francais' || lang === 'french')
           lang = 'fr'
         else if (lang === 'english' || lang === 'anglais') lang = 'en'
-        else lang = lang.substr(0, 2).toLowerCase()
+        else lang = lang.substring(0, 2).toLowerCase()
         this.$i18n.locale = lang
       }
     },
@@ -302,21 +240,7 @@ export default {
 
       return device
     },
-    /**
-     * @param {MediaQueryList} query
-     */
-    toggleChanges(query) {
-      // Proceed if the app is in full mode
-      if (!this.getIsMobile || this.isDr) return
-      //run the query check
-      else {
-        if (query.matches) {
-          this.wrongSide = true
-        } else {
-          this.wrongSide = false
-        }
-      }
-    },
+
     fetchSettingsFromServer() {
       if (this.getModuleInfo.packageType !== 'xapi') return
       if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
@@ -373,6 +297,107 @@ export default {
         this.$bus.$emit('fire-exit-event', null, true)
         this.routeChangeCounter = 0 //reset counter after saving
       }
+    },
+    setProgress() {
+      this.updateTracker('appBase', 'loading')
+      const packageType = this.getModuleInfo.packageType
+
+      switch (packageType) {
+        case 'scorm':
+          // Get saved data from suspend_data or from localStorage to update the store:
+          // LMS is connected
+          if (this.$scorm.initialized) {
+            // chacked if there is a existing record in the LMS
+            if (this.$scorm.GetValue('cmi.suspend_data') !== '') {
+              const scormRecord = this.$scorm
+                .GetValue('cmi.suspend_data')
+                .replace(/\\/g, '')
+              const userProgress = JSON.parse(scormRecord).userData
+              const routeHistory = JSON.parse(scormRecord).routeHistory
+
+              this.$store.dispatch('setUserMetaData', userProgress)
+              this.$store.dispatch('setRouteHistory', routeHistory) // update store recored with existing record
+              this.updateTracker('appBase', 'ready')
+            }
+
+            // No LMS use LocalStorage record
+          } else {
+            this.$idb.openDB().then(() => {
+              this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
+                if (res && res.$record) {
+                  const {
+                    routeHistory,
+                    userSettings,
+                    ...userData
+                  } = res.$record
+                  this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
+                  this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
+                  if (userSettings)
+                    this.$store.dispatch('setApplicationSettings', userSettings) // update store record with existing user settings
+                  this.updateTracker('appBase', 'ready')
+                }
+              })
+            })
+          }
+
+          break
+
+        case 'xapi':
+          {
+            if (
+              this.getConnectionInfo &&
+              this.getConnectionInfo.actor &&
+              this.getConnectionInfo.remote
+            ) {
+              //Try to get the user progress from LRS
+              const userProgress = this.$xapi._getProgress(
+                this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+                this.getConnectionInfo.activity_id
+              )
+              if (userProgress) {
+                const { routeHistory, ...userData } = userProgress
+                // console.log('Progress from Server: ', {
+                //   userData,
+                //   routeHistory
+                // })
+                this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
+                this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing record
+              }
+              this.updateTracker('appBase', 'ready')
+            } else {
+              //Get existing records for user data in local store
+              this.$idb.openDB().then(() => {
+                this.$idb
+                  .getFromDB(this.getModuleInfo.idbID)
+                  .then((res) => {
+                    if (res && res.$record) {
+                      const {
+                        routeHistory,
+                        userSettings,
+                        ...userData
+                      } = res.$record
+
+                      this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
+                      this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
+
+                      if (userSettings) {
+                        this.$store.dispatch(
+                          'setApplicationSettings',
+                          userSettings
+                        ) // update store record with existing user setting
+                      }
+                    }
+                  })
+                  .then(() => this.updateTracker('appBase', 'ready'))
+              })
+            }
+          }
+
+          break
+      }
+    },
+    updateTracker(name, status) {
+      this.$store.dispatch('updateCompStatusTracker', { name, status })
     }
   }
 }
@@ -382,64 +407,99 @@ export default {
   width: 100%;
   height: 100vh;
 
-  /********** FM **********/
-  &:not(.DR) {
-    .module {
-      width: 100%;
+  #build-info {
+    opacity: 0.9;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    color: #fff;
+    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
+    background-color: hotpink;
+    font-family: serif, Impact, Arial;
+    font-size: 11px;
+    padding: 3px;
+    cursor: pointer;
+    z-index: 999;
+    span {
+      text-align: center;
+      display: block;
+    }
+  }
+
+  .module {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    .navbar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 10;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: start;
+      width: 67px;
       height: 100%;
-      // overflow: hidden;
+    }
+
+    .module-wrapper {
+      width: 100%;
       position: relative;
-      overscroll-behavior-y: none;
-      -webkit-overflow-scrolling: touch;
 
-      .module-wrapper {
+      #wrapper-content {
         width: 100%;
         position: relative;
+        padding-right: 0 !important;
+        padding-left: 0 !important;
 
-        #wrapper-content {
-          display: -webkit-flex;
-          display: flex;
-          min-width: 100%;
-          overflow: auto;
-          position: relative;
-          padding-right: 0 !important;
-          padding-left: 0 !important;
+        &.active {
+          overflow: hidden;
+        }
 
-          &.active {
-            overflow: hidden;
-          }
+        .box {
+          width: 100%;
+          height: 95%;
 
-          .box {
+          .app-page {
             width: 100%;
-            height: 95%;
+            margin-top: 60px;
 
-            .app-page {
+            .row {
               width: 100%;
-              min-width: 100%;
-              margin-top: 60px;
-
-              .row {
-                margin-right: 0;
-                margin-left: 0;
-              }
+              margin-right: 0;
+              margin-left: 0;
             }
           }
         }
+      }
 
-        .app-comp-table-of-content {
-          display: -webkit-flex;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: wrap;
-          position: absolute;
-          top: 0px;
-          min-height: 100%;
-          z-index: 1;
-        }
+      .app-comp-table-of-content {
+        display: -webkit-flex;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        position: absolute;
+        top: 0px;
+        min-height: 100%;
+        z-index: 1;
       }
+    }
 
-      .app-nav {
-        .md-controller {
+    .app-nav {
+      .md-controller {
+        display: -webkit-flex;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        //width: $widthPlayer;
+        width: 50%;
+
+        .ctrl-play {
           display: -webkit-flex;
           display: flex;
           flex-direction: row;
@@ -447,121 +507,45 @@ export default {
           //width: $widthPlayer;
           width: 50%;
 
-          .ctrl-play {
-            display: -webkit-flex;
-            display: flex;
-            flex-direction: row;
-            align-items: baseline;
-            //width: $widthPlayer;
-            width: 50%;
+          #progress-bar {
+            display: block;
+            //width: $widthProgressBar;
+            width: 150px;
+            //height: $heigthProgressBar;
+            height: 10px;
+            position: relative;
+            overflow: hidden;
 
-            #progress-bar {
+            #progress {
               display: block;
-              //width: $widthProgressBar;
-              width: 150px;
-              //height: $heigthProgressBar;
-              height: 10px;
-              position: relative;
-              overflow: hidden;
-
-              #progress {
-                display: block;
-                height: 100%;
-              }
-
-              #progress-shaddow {
-                display: block;
-                height: 100%;
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                z-index: -1;
-              }
+              height: 100%;
+              background-color: red;
             }
-          }
-
-          .ctrl-subtitle {
-            //width: $widthCtrSubtitle;
-            width: 10%;
-          }
 
-          .ctrl-sound {
-            display: -webkit-flex;
-            display: flex;
-            flex-direction: row;
-            align-items: baseline;
-            justify-content: space-between;
-            //width: $widthCtrlSound;
-            width: 40%;
+            #progress-shaddow {
+              display: block;
+              height: 100%;
+              position: absolute;
+              top: 0px;
+              left: 0px;
+              z-index: -1;
+            }
           }
         }
-      }
-    }
-  }
-
-  /********** DR **********/
-  &.DR {
-    .module {
-      position: relative;
-
-      .module-wrapper {
-        width: 100%;
-        margin-top: 65px;
-        /// METRE VH
-        position: relative;
 
-        #wrapper-content {
-          width: 100%;
-          height: 100%;
-
-          .app-page {
-            margin-top: 100px;
-          }
+        .ctrl-subtitle {
+          //width: $widthCtrSubtitle;
+          width: 10%;
         }
-      }
-    }
-  }
-}
-
-html {
-  &:fullscreen,
-  &:-moz-full-screen {
-    #App {
-      width: 100%;
-      height: 100vh;
 
-      .box {
-        height: 100%;
-
-        .module {
-          height: 100%;
-
-          .app-nav {
-            bottom: 0px;
-            z-index: 9999;
-          }
-
-          .module-wrapper {
-            height: 100%;
-
-            #wrapper-content {
-              height: 100%;
-              display: -webkit-flex;
-              display: flex;
-              align-items: center;
-
-              .box {
-                display: -webkit-flex;
-                display: flex;
-                align-items: center;
-
-                .app-page {
-                  align-content: center;
-                  align-items: center;
-                }
-              }
-            }
-          }
+        .ctrl-sound {
+          display: -webkit-flex;
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          justify-content: space-between;
+          //width: $widthCtrlSound;
+          width: 40%;
         }
       }
     }
@@ -615,21 +599,16 @@ html {
 /* .component-fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
-.bounce-enter-active {
-  animation: bounce-in 0.5s;
-}
-.bounce-leave-active {
-  animation: bounce-in 0.5s reverse;
+
+.app-icons-svg {
+  width: 30px;
+  height: 30px;
+  fill: #fff;
+  stroke: #fff;
+  cursor: pointer;
 }
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
-  }
+
+.svg-hidden {
+  display: none;
 }
 </style>

package/src/components/AppBaseErrorDisplay.vue

@@ -127,6 +127,35 @@
         </p>
       </div>
     </div>
+    <div v-if="errorMessage === 'errorMenuBranching'" class="box-error">
+      <div class="red-box">
+        <div class="box">
+          <h2>
+            <b-icon icon="exclamation-triangle" />
+            Erreur d'embranchement.
+          </h2>
+
+          <p>
+            Vous ne pouvez pas avoir de pages d'embranchement(s) dans le dossier
+            A00
+          </p>
+        </div>
+      </div>
+      <div class="box">
+        <p class="doc">
+          Visitez
+          <a
+            :href="
+              `https://fcaddocumentation.netlify.app/guide/structure.html#pages-d-embranchements-dans-un-dossier`
+            "
+            target="blank"
+          >
+            la documentation
+          </a>
+          pour plus de details ...
+        </p>
+      </div>
+    </div>
     <div v-if="errorMessage === '404'" class="box-error">
       <div class="red-box">
         <div class="box">