#945 Improve analysis of qualifying test questions (#1317)

* - Changed the TAB title from "Logs" to "Connection Logs"
- Created the "HISTORY" tab
- Added Analytics information and the amount of time user spent on the question

* [945] resolve conflict

* [945] fix build

* Revert changes to package-lock

* Revert changes to package.json

Co-authored-by: Warren Searle <warren@precise-minds.co.uk>

src/views/Exercise/Tasks/QualifyingTests/QualifyingTest/Response/View.vue

@@ -325,7 +325,7 @@
         </div>
         <div v-if="activeTab === 'logs'">
           <h2 class="govuk-heading-m">
-            Logs
+            Connection Logs
           </h2>
           <div
             v-for="(log, i) in logs"
@@ -351,6 +351,65 @@
             </table>
           </div>
         </div>
+        <!-- // END CONNECTION TAB -->
+        <div v-if="activeTab === 'history'">
+          <h2 class="govuk-heading-m">
+            History Logs
+          </h2>
+          <div>
+            <table class="history-logs">
+              <div 
+                v-for="(testQuestion, index) in questions"
+                :key="index"
+              >
+                <tr 
+                  class="log_row"
+                >
+                  <td rowspan="6">
+                    Question {{ index + 1 }}
+                  </td>
+                </tr>
+                <tr>
+                  <td>Amount of time on question: </td><td>{{ amountOfTimeOnQuestion(index) }}</td>
+                </tr>
+                <tr>
+                  <td>How many times visited question: </td><td>{{ amountOfTimeVisitedQuestion(index) }} </td>
+                </tr>
+                <tr>
+                  <td>how many times saved: </td><td>{{ historyCount('save', index) }}</td>
+                </tr>
+                <tr>
+                  <td>How many times skipped: </td><td>{{ historyCount('skip', index) }}</td>
+                </tr>
+                <tr>
+                  <td>How many times changed answer: </td><td>{{ historyCount('changed', index) }}</td>
+                </tr>
+              </div>
+            </table>
+          </div>
+          <div
+            v-for="(log, i, index) in sortHistory()"
+            :key="i"
+          >
+            <table>
+              <tr class="log_row">
+                <td class="log_row_time">
+                  {{ differenceInTime(index, log.timestamp) }}
+                </td>
+                <td class="log_row_date">
+                  <span v-if="log.action">{{ log.action }} </span>
+                  <span v-if="log.question >= 0">question {{ log.question + 1 }} </span>
+                  <span v-if="log.txt">("{{ log.txt }}" on {{ log.location }})</span>
+                  <!-- <span v-if="log.location">{{ log.location }}</span> -->
+
+                  <!-- <br>
+                  {{ i }}<br> {{ log }} -->
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <!-- // END HISTORY TAB -->
       </div><!-- hasStarted -->
     </div>
   </div>
@@ -382,6 +441,7 @@ export default {
       isEditingTestDate: false,
       activeTab: 'questions',
       authorisedToPerformAction: false,
+      history: null,
     };
   },
   computed: {
@@ -393,7 +453,11 @@ export default {
         },
         {
           ref: 'logs',
-          title: 'Logs',
+          title: 'Connection',
+        },
+        {
+          ref: 'history',
+          title: 'History',
         },
       ];
     },
@@ -525,10 +589,11 @@ export default {
       if (newActiveTab === 'logs') {
         const candidateId = this.candidate.id;
         const qualifyingTestId = this.$route.params.qualifyingTestId;
-        // eslint-disable-next-line no-console
-        // console.log('mounted', candidateId, qualifyingTestId, this);
         await this.$store.dispatch('connectionMonitor/bind', { qualifyingTestId, candidateId });
       }
+      if (newActiveTab === 'history') {
+        this.dateCalculate = null;
+      }
     },
   },
   async created() {
@@ -644,6 +709,15 @@ export default {
         return new Date(minDate).toISOString().substr(11, 8);
       }
     },
+    differenceInTime(index, date) {
+      const date2 = this.dateCalculate === null ? date : this.dateCalculate ;
+      const minDate = date - date2;
+      this.dateCalculate = date;
+      return index === 0 ? '00:00:00' : new Date(minDate).toISOString().substr(11, 8);
+    },
+    differenceInMills(entry1, entry2) {
+      return (entry1 - entry2);
+    },
     timeOffline(index) {
       const thisTimeOffline = this.logs[index] && this.logs[index].offline;
       const nextIndex = index + 1 >= this.logs.length ? this.logs.length : index + 1;
@@ -655,6 +729,56 @@ export default {
         return new Date(timeOffline).toISOString().substr(11, 8);
       }
     },
+    sortHistory() {
+      let ordered = {};
+      if (this.response.history) {
+        ordered = Object.keys(this.response.history).sort()
+          .reduce(
+            (obj, key) => { 
+              obj[key] = this.response.history[key]; 
+              return obj;
+            }, 
+            {}
+          );
+      }
+      return ordered;
+    },
+    historyCount(value, index) {
+      let timeSaved = {};
+      if (this.response.history) {
+        timeSaved = Object.keys(this.response.history)
+          .filter(key => {
+            return (this.response.history[key].action === value && this.response.history[key].question === index); 
+          });
+      }
+      const amountTimeSaved = Object.keys(timeSaved).length;
+      return amountTimeSaved;
+    },
+    amountOfTimeOnQuestion(index) {
+      let millisecs = 0;
+      if (this.response.history) {
+        Object.keys(this.response.questionSession).map(key => {
+          const item = this.response.questionSession[key];
+          if (item.question === index) {
+            const diff = this.differenceInMills(item.end, item.start);
+            millisecs = millisecs + diff;
+          }
+        }); 
+      }
+      return new Date(millisecs).toISOString().substr(11, 8);
+    },
+    amountOfTimeVisitedQuestion(index) {
+      let counter = 0;
+      if (this.response.history) {
+        Object.keys(this.response.history).map(key => {
+          const item = this.response.history[key];
+          if (item.question === index && (item.action === 'save' || item.action === 'skip' || item.action === 'exit')) {
+            counter++;
+          }
+        }); 
+      }
+      return counter;
+    },
   },
 };
 </script>
@@ -685,4 +809,8 @@ export default {
     line-height: 1;
     padding: 5px;
   }
+  .history-logs [rowspan] {
+    font-weight: bold;
+    font-size: larger;
+  }
 </style>