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

package/src/components/AppCompJauge.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-if="!error" class="box-gauge" :class="state">
+  <div v-if="!error" class="box-g" :class="state">
     <b-progress class="jauge" :value="value" :max="maxValue"></b-progress>
-    <p v-if="pourcent">{{ getPourcent }} %</p>
-    <p v-if="fraction">{{ value }} / {{ maxValue }}</p>
+    <p>{{ getPourcent }} %</p>
   </div>
   <div v-else>
     <div class="warning">
@@ -54,3 +53,15 @@ export default {
   methods: {}
 }
 </script>
+<style lang="scss">
+.box-g {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .jauge {
+    width: 80%;
+  }
+}
+</style>

package/src/components/AppCompMenu.vue

@@ -1,33 +1,88 @@
 <!--
  @ Description: This component is used to create the menu and the ard that will bring you back where you were before the menu.
- @ What it does: Look in the store what was the last page you saw before you came to the menu and create the the link for the card. It display AppCompMenuItem and AppCompTableOfContent
+ @ What it does: Look in the store what was the last page you saw before you came to the menu and create the the link for the card. It display's AppCompMenuItem
 -->
 <template>
   <div class="menu-container">
-    <b-row>
-      <b-col md="4" class="wrapper-lasRoute">
-        <b-link
-          id="btn_last_route"
-          class="nav_last_route"
-          :to="{ name: GoToLastRoute() }"
-          :title="handelLabel"
-        >
-          <div class="box-menu">
-            <slot name="inside-last-route" />
-
-            <div class="vsl-tmp">
-              <p>
-                {{ handelLabel }}
-              </p>
-            </div>
-          </div>
-        </b-link>
-      </b-col>
+    <div
+      id="page_info_section"
+      aria-labelledby="page_info"
+      aria-live="true"
+    ></div>
+    <a
+      class="skip-link"
+      href=""
+      @click.prevent="$bus.$emit('move-to-target', 'menu-main')"
+    >
+      {{ $t('message.skip_content') }}
+    </a>
+    <b-row align-v="center" align-h="center" class="r-menu">
+      <div class="wrapper-lasRoute">
+        <div class="box-menu">
+          <h1>{{ getLessonid }}</h1>
+          <h2 v-html="getLessonTitle"></h2>
+          <p class="lesson-progess">
+            {{ $t('message.progress_card') }} {{ lessonProg() }}
+          </p>
+          <b-link
+            id="btn_last_route"
+            class="nav_last_route btn-main"
+            :title="handelLabel"
+            :to="{ name: GoToLastRoute() }"
+          >
+            {{ handelLabel }}
+          </b-link>
+        </div>
+      </div>
+
+      <b-col
+        id="menu-main"
+        md="10"
+        class="wrapper-MenuItem"
+        title="table of content for this lesson"
+      >
+        <h3>{{ $t('text.activity_title') }}</h3>
 
-      <b-col md="8" class="wrapper-MenuItem">
         <app-comp-menu-item></app-comp-menu-item>
       </b-col>
     </b-row>
+    <b-row align-v="center" align-h="center">
+      <b-col md="7">
+        <div v-show="appDebugMode" id="_debug-area">
+          <h5>Mode de débogage activé</h5>
+          <p>
+            Cliquez sur le bouton pour réinitialiser toutes les données de ce
+            paquet.
+          </p>
+
+          <app-base-button
+            :id="`btn-quiz`"
+            class="btn lk-btn"
+            :is-active="resetStatus !== false"
+            @click="askResetUserData"
+          >
+            Réinitialiser la leçon
+          </app-base-button>
+          <div v-show="resetStatus !== false" id="resetOverlay">
+            <div
+              v-show="resetStatus === resetState.LOADING"
+              class="lds-ellipsis"
+            >
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+            <span v-show="resetStatus === resetState.COMPLETE" id="reset_label">
+              Opération réussie!
+            </span>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+    <div id="page_info" class="sr-only" aria-hidden="true">
+      {{ $t('text.title_content_view') }}
+    </div>
   </div>
 </template>
 <script>
@@ -36,22 +91,40 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'AppCompMenu',
+  data() {
+    return {
+      totalAttempts: 0,
+      resetStatus: false,
+      resetState: { LOADING: 'LOADING', COMPLETE: 'COMPLETE' }
+    }
+  },
+
   computed: {
     ...mapGetters([
       'getRouteHistory',
       'getAllActivitiesState',
+      'getAllCompleted',
+      'getModuleInfo',
+      'getMenuSettings',
+      'getAppDebugMode',
       'getAllCompleted'
     ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
     handelLabel() {
       let label = ''
-      const { allActivitiesState, allCompleted } = this.progressWithoutMenu()
+      const { allActivitiesState, allCompleted } = this.progressWithMenu()
 
       let activity = Object.values(allActivitiesState)
       let completeActivity = Object.values(allCompleted)
 
       if (this.noProgress(activity)) {
+        //console.log('dans handleLabel no progress a true')
         label = this.$t('button.menu_item.start')
       } else {
+        // console.log('dans handleLabel no progress a false')
+
         if (activity.length == completeActivity.length) {
           label = this.$t('button.menu_item.end')
         } else {
@@ -59,24 +132,57 @@ export default {
         }
       }
       return label
+    },
+    getLessonid() {
+      // ATTENDRE UX*UI poure voir si on garde le concept ou pas
+      let lessonLabel = this.$t('text.lesson')
+      let lessonId = 99
+      return `${lessonLabel} ${lessonId}`
+    },
+    getLessonTitle() {
+      let lessonT
+      if (this.getMenuSettings.lessonTitle) {
+        lessonT = this.getMenuSettings.lessonTitle
+      } else {
+        lessonT = 'Entrer un titre à pour votre leçon dans menu setting svp.'
+      }
+      return `${lessonT}`
     }
   },
-  created() {},
-  beforeDestroy() {},
+  mounted() {
+    setTimeout(() => {
+      this.$bus.$emit('move-to-target', 'page_info_section')
+    }, 200)
+  },
+  beforeUnmount() {
+    this.$bus.$off('reset-complete', this.onResetComplete)
+  },
   methods: {
+    //When server responds after a reset request
+    onResetComplete() {
+      this.$bus.$off('reset-complete', this.onResetComplete)
+      //show Operation reussie! for 2 seconds then exit debugmode
+      this.resetStatus = this.resetState.COMPLETE
+      setTimeout(() => {
+        window.setDebugMode(false)
+        if (this.resetStatus) {
+          this.resetStatus = false
+        }
+      }, 2000)
+    },
     GoToLastRoute() {
       let lastRoute
       let path
 
       //Get all activity state (menu not included)
-      const { allActivitiesState } = this.progressWithoutMenu()
+      const { allActivitiesState } = this.progressWithMenu()
       let state = Object.values(allActivitiesState)
 
       if (this.getRouteHistory.length) {
         if (this.getRouteHistory.length == 1) {
           lastRoute = this.getRouteHistory[0]
         } else {
-          lastRoute = this.getRouteHistory[this.getRouteHistory.length - 2]
+          lastRoute = this.getRouteHistory[this.getRouteHistory.length - 1]
         }
       }
 
@@ -85,11 +191,12 @@ export default {
         path = 'introduction'
         return path
       }
-
       // create path from the last you saw
       if (lastRoute) path = this.createdRoute(lastRoute)
+
       return path
     },
+
     noProgress(obj) {
       //validator to see if anything was seen before
       for (let i = 0; i < obj.length; i++) {
@@ -104,54 +211,27 @@ export default {
       let page
       let path
 
-      if (
-        (newRoute.activity_ref && newRoute.activity_ref.charAt(1) == '0') ||
-        (newRoute.activity_ref && newRoute.activity_ref.charAt(1) == 0)
-      ) {
-        activity = newRoute.activity_ref.substr(2)
+      const typesToCatch = ['menu', 'introduction', 'conclusion']
+      //Define activity
+      if (typesToCatch.includes(newRoute.type)) {
+        activity = newRoute.type
       } else {
-        activity = newRoute.activity_ref.substr(1)
+        activity =
+          newRoute.activity_ref.charAt(1) == '0'
+            ? `activite_${newRoute.activity_ref.substring(2)}`
+            : `activite_${newRoute.activity_ref.substring(1)}`
       }
-      if (newRoute.activity_ref && newRoute.activity_ref !== 'A00') {
-        // create link for page when you are in the intro
-        if (newRoute.id.charAt(1) == '0' || newRoute.id.charAt(1) == 0) {
-          page = newRoute.id.substr(2)
-        } else {
-          page = newRoute.id.substr(1)
-        }
-        // create link for any ativity
-        if (page == '1' || page == 1) {
-          path = `activite_${activity}`
-        } else {
-          path = `activite_${activity}.page_${page}`
-        }
-      } else {
-        // create link for page when you are not in the intro
-        let str = newRoute.id.substr(newRoute.id.indexOf('-') + 1)
 
-        if (str.charAt(1) == '0' || str.charAt(1) == 0) {
-          page = str.substr(2)
-        } else {
-          page = str.substr(1)
-        }
+      //Define page
+      const idToIgnore = ['P01', 'pg_menu']
+      page = idToIgnore.includes(newRoute.id) ? ' ' : newRoute.id.substring(2)
+
+      //Define path
+      path = page !== ' ' ? `${activity}.page_${page}` : activity
 
-        // CREATE LINK if it was the intro
-        if (page == '1' || page == 1) {
-          path = `introduction`
-        } else if (page == '0' || page == 0) {
-          path = `menu`
-        } else {
-          path = `introduction.page_${page}`
-        }
-      }
       return path
     },
-    progressWithoutMenu() {
-      //get the page which is defined as the menu
-      const toIgnore = this.$helper
-        .getRoutesFromVueRouter('A00')
-        .all_routes.find((el) => el.name === 'menu').meta.id
-
+    progressWithMenu() {
       /*
        * Note:
        * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
@@ -172,32 +252,151 @@ export default {
         ) {
           let completedIntro = allCompleted[activity]
 
-          //remove the "menu page from the completed in intro
-          completedIntro = completedIntro.filter(
-            (el) => Object.keys(el)[0] !== toIgnore
-          )
-
           if (!completedIntro.length) completedIntro = []
 
           allCompleted[activity] = completedIntro
-
-          // Remove menu page from the activity state tracking
-          let introState = allActivitiesState[activity].progressions
-          if (introState.length) {
-            introState = introState.filter(
-              (el) => Object.keys(el)[0] !== toIgnore
-            )
-
-            allActivitiesState[activity].progressions = introState
-            allActivitiesState[activity].size -= 1
-          }
         }
       }
+
       return {
         allActivitiesState,
         allCompleted
       }
+    },
+    lessonProg() {
+      let lstActivity = Object.keys(this.getAllActivitiesState)
+      let progress = null
+      let info = this.progressWithMenu()
+      let page = null
+      let pageCmplt = null
+
+      lstActivity.forEach((element) => {
+        //Get the total of all the page
+        page += info.allActivitiesState[element].size
+
+        if (info.allCompleted[element]) {
+          // GEt all page complete
+          pageCmplt += Object.values(info.allCompleted[element]).length
+        }
+      })
+
+      // Create pourcentage complete
+      progress = Math.round((pageCmplt * 100) / page)
+
+      return `${progress}%`
+    },
+    askResetUserData() {
+      //show loader animation
+      this.resetStatus = this.resetState.LOADING
+      //callback on server response
+      this.$bus.$on('reset-complete', this.onResetComplete)
+      //launch reset call
+      this.$bus.$emit('reset-userdata')
     }
   }
 }
 </script>
+<style lang="scss">
+.menu-container {
+  width: 100%;
+  height: 100%;
+
+  .r-menu {
+    margin: 0 0 0 0;
+  }
+}
+
+#_debug-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px;
+  padding: 20px;
+  background-color: #eaabb685;
+  border-block: dotted yellow 5px;
+  p {
+    padding: 15px;
+    text-align: center;
+    font-size: 1em;
+  }
+  button {
+    background-color: #8dff95;
+    font-size: 1.3em;
+  }
+  #resetOverlay {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 33%;
+    height: 40%;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #000000, $alpha: 0.9);
+    border-radius: 10px;
+    box-shadow: 2px 2px 4px 0px rgba($color: #000000, $alpha: 0.2);
+  }
+  #reset_label {
+    font-family: arial;
+    color: #fff;
+    font-weight: bold;
+    font-size: 18px;
+  }
+  .lds-ellipsis {
+    display: flex;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+}
+</style>