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

package/src/components/AppCompMenu.vue

@@ -1,209 +1,413 @@
-<!--
- @ 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's AppCompMenuItem
--->
-<template>
-  <div class="menu-container">
-    <b-row align-v="center" align-h="center">
-      <b-col md="10" class="wrapper-lasRoute">
-        <div class="box-menu">
-          <h1>{{ getLessonid }}</h1>
-          <h2 v-html="getLessonTitle"></h2>
-          <p class="lesson-progess">{{ lessonProg() }}</p>
-          <b-link
-            id="btn_last_route"
-            class="nav_last_route"
-            :title="handelLabel"
-            :to="{ name: GoToLastRoute() }"
-          >
-            {{ handelLabel }}
-          </b-link>
-        </div>
-      </b-col>
-      <b-col
-        md="10"
-        class="wrapper-MenuItem"
-        title="table of content for this lesson"
-      >
-        <h3>{{ $t('text.activity_title') }}</h3>
-
-        <app-comp-menu-item></app-comp-menu-item>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-<script>
-// ...
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'AppCompMenu',
-  data() {
-    return {
-      totalAttempts: 0
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getRouteHistory',
-      'getAllActivitiesState',
-      'getAllCompleted',
-      'getModuleInfo',
-      'getMenuSettings',
-      'getAllCompleted'
-    ]),
-    handelLabel() {
-      let label = ''
-      const { allActivitiesState, allCompleted } = this.progressWithMenu()
-
-      let activity = Object.values(allActivitiesState)
-      let completeActivity = Object.values(allCompleted)
-
-      if (this.noProgress(activity)) {
-        label = this.$t('button.menu_item.start')
-      } else {
-        if (activity.length == completeActivity.length) {
-          label = this.$t('button.menu_item.end')
-        } else {
-          label = this.$t('button.menu_item.middle')
-        }
-      }
-      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 à votre dans menu setting svp.'
-      }
-      return `${lessonT}`
-    }
-  },
-  created() {},
-  beforeDestroy() {},
-  methods: {
-    GoToLastRoute() {
-      let lastRoute
-      let path
-
-      //Get all activity state (menu not included)
-      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 - 1]
-        }
-      }
-
-      //if course was not started bring you to the introduction
-      if (this.noProgress(state)) {
-        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++) {
-        if (obj[i].progressions.length != 0) return false //something was seen
-      }
-      return true //nothing was seen
-    },
-    createdRoute(objRoute) {
-      // create link for activity
-      let newRoute = objRoute
-      let activity
-      let page
-      let path
-
-      const typesToCatch = ['menu', 'introduction', 'conclusion']
-      //Define activity
-      if (typesToCatch.includes(newRoute.type)) {
-        activity = newRoute.type
-      } else {
-        activity =
-          newRoute.activity_ref.charAt(1) == '0'
-            ? `activite_${newRoute.activity_ref.substring(2)}`
-            : `activite_${newRoute.activity_ref.substring(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
-
-      return path
-    },
-    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
-       * cf: https://reactgo.com/javascript-clone-object/
-       */
-
-      const allActivitiesState = JSON.parse(
-        JSON.stringify(this.getAllActivitiesState)
-      )
-
-      const allCompleted = JSON.parse(JSON.stringify(this.getAllCompleted))
-
-      for (let activity in allActivitiesState) {
-        if (
-          activity === 'A00' &&
-          allActivitiesState[activity] &&
-          allCompleted[activity]
-        ) {
-          let completedIntro = allCompleted[activity]
-
-          if (!completedIntro.length) completedIntro = []
-
-          allCompleted[activity] = completedIntro
-        }
-      }
-
-      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}%`
-    }
-  }
-}
-</script>
+<!--
+ @ 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's AppCompMenuItem
+-->
+<template>
+  <div class="menu-container">
+    <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>
+    <div class="contain-lr">
+      <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>
+          <router-link
+            id="btn_last_route"
+            class="nav_last_route btn-main"
+            :title="handelLabel"
+            :to="{ name: GoToLastRoute() }"
+            data-test="menu-back-btn"
+          >
+            {{ handelLabel }}
+          </router-link>
+        </div>
+      </div>
+      <v-row justify="center" align="center" class="r-menu">
+        <v-col id="menu-main" md="10" class="wrapper-MenuItem">
+          <h3>{{ $t('text.activity_title') }}</h3>
+
+          <app-comp-menu-item></app-comp-menu-item>
+        </v-col>
+      </v-row>
+    </div>
+    <v-row justify="center" align="center">
+      <v-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>
+      </v-col>
+    </v-row>
+    <div id="page_info" class="sr-only" aria-hidden="true">
+      {{ $t('text.title_content_view') }}
+    </div>
+  </div>
+</template>
+<script>
+// ...
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+export default {
+  name: 'AppCompMenu',
+  data() {
+    return {
+      totalAttempts: 0,
+      resetStatus: false,
+      resetState: { LOADING: 'LOADING', COMPLETE: 'COMPLETE' }
+    }
+  },
+
+  computed: {
+    ...mapState(useAppStore, [
+      'getRouteHistory',
+      'getAllActivitiesState',
+      'getAllCompleted',
+      'getModuleInfo',
+      'getMenuSettings',
+      'getAppDebugMode',
+      'getAllCompleted'
+    ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    handelLabel() {
+      let label = ''
+      const { allActivitiesState, allCompleted } = this.progressWithMenu()
+
+      let activity = Object.values(allActivitiesState)
+      let completeActivity = Object.values(allCompleted)
+
+      if (this.noProgress(activity)) {
+        label = this.$t('button.menu_item.start')
+      } else {
+        if (activity.length == completeActivity.length) {
+          label = this.$t('button.menu_item.end')
+        } else {
+          label = this.$t('button.menu_item.end')
+        }
+      }
+      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}`
+    }
+  },
+  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.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 - 1]
+        }
+      }
+
+      //if course was not started bring you to the introduction
+      if (this.noProgress(state)) {
+        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++) {
+        if (obj[i].progressions.length != 0) return false //something was seen
+      }
+      return true //nothing was seen
+    },
+    createdRoute(objRoute) {
+      // create link for activity
+      let newRoute = objRoute
+      let activity
+      let page
+      let path
+
+      const typesToCatch = ['menu', 'introduction', 'conclusion']
+      //Define activity
+      if (typesToCatch.includes(newRoute.type)) {
+        activity = newRoute.type
+      } else {
+        activity =
+          newRoute.activity_ref.charAt(1) == '0'
+            ? `activite_${newRoute.activity_ref.substring(2)}`
+            : `activite_${newRoute.activity_ref.substring(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
+
+      return path
+    },
+    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
+       * cf: https://reactgo.com/javascript-clone-object/
+       */
+
+      const allActivitiesState = JSON.parse(
+        JSON.stringify(this.getAllActivitiesState)
+      )
+
+      const allCompleted = JSON.parse(JSON.stringify(this.getAllCompleted))
+
+      for (let activity in allActivitiesState) {
+        if (
+          activity === 'A00' &&
+          allActivitiesState[activity] &&
+          allCompleted[activity]
+        ) {
+          let completedIntro = allCompleted[activity]
+
+          if (!completedIntro.length) completedIntro = []
+
+          allCompleted[activity] = completedIntro
+        }
+      }
+
+      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">
+.contain-lr {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  width: 100%;
+
+  .wrapper-lasRoute {
+    display: flex;
+    justify-content: flex-end;
+
+    .nav_last_route {
+      display: inline-block;
+    }
+  }
+}
+
+.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>