add network checks

Author: prismaticoder

public/js/app.js

@@ -1993,7 +1993,7 @@ __webpack_require__.r(__webpack_exports__);
   components: {
     SingleQuestion: _SingleQuestion__WEBPACK_IMPORTED_MODULE_0__["default"]
   },
-  props: ['questions', 'hours', 'minutes', 'subject', 'student'],
+  props: ['questions', 'hours', 'minutes', 'subject', 'student', 'examId', 'studentId'],
   data: function data() {
     return {
       currentQuestion: null,
@@ -2009,7 +2009,9 @@ __webpack_require__.r(__webpack_exports__);
       if (!this.hasStarted) {
         this.$store.dispatch('startExam', {
           hours: this.hours,
-          minutes: this.minutes
+          minutes: this.minutes,
+          examId: this.examId,
+          studentId: this.studentId
         }).then(function () {
           _this.currentQuestion = _this.questions[0];
           _this.questionNumber = 1;
@@ -2047,11 +2049,7 @@ __webpack_require__.r(__webpack_exports__);
       });
 
       if (check.length > 0) {
-        if (check[0].choice == null) {
-          return true;
-        } else {
-          return false;
-        }
+        return check[0].choice == null;
       } else {
         return true;
       }
@@ -2106,7 +2104,7 @@ __webpack_require__.r(__webpack_exports__);
       return this.$store.state.currentSelectedOption;
     },
     hasStarted: function hasStarted() {
-      return this.$store.getters.hasStarted;
+      return this.$store.getters.hasStarted(this.studentId, this.examId);
     },
     hasEnded: function hasEnded() {
       return this.$store.getters.hasEnded;
@@ -2322,15 +2320,14 @@ __webpack_require__.r(__webpack_exports__);
 //
 /* harmony default export */ __webpack_exports__["default"] = ({
   name: "Timer",
-  props: ["hours", "minutes"],
+  props: ["hours", "minutes", 'examId', 'studentId'],
   data: function data() {
     return {
       currentHour: this.hasStarted ? "-" : this.hours,
       currentMinute: this.hasStarted ? "-" : this.minutes,
       currentSecond: this.hasStarted ? "-" : 0,
       interval: null,
       duration: null,
-      examIsAlmostEnding: false,
       x: null,
       dialog: false,
       pauseDialog: false,
@@ -2339,7 +2336,13 @@ __webpack_require__.r(__webpack_exports__);
   },
   computed: {
     hasStarted: function hasStarted() {
-      return this.$store.getters.hasStarted;
+      return this.$store.getters.hasStarted(this.studentId, this.examId);
+    },
+    examIsAlmostEnding: function examIsAlmostEnding() {
+      return this.interval <= 0.1 * this.duration;
+    },
+    studentCanNowSubmit: function studentCanNowSubmit() {
+      return this.interval <= 0.5 * this.duration;
     }
   },
   watch: {
@@ -2350,33 +2353,31 @@ __webpack_require__.r(__webpack_exports__);
         this.currentMinute = 0;
         this.currentSecond = 0;
         this.submitExam();
-      } else if (newValue <= 0.1 * this.duration) {
-        this.examIsAlmostEnding = true;
       }
     },
     hasStarted: function hasStarted(newValue) {
       this.setInterval();
     }
   },
   methods: {
-    checkState: function checkState() {
+    triggerOfflineStatus: function triggerOfflineStatus() {
+      if (this.x) {
+        clearInterval(this.x);
+        this.x = null;
+        this.pauseDialog = true;
+      }
+    },
+    networkReactivationCheck: function networkReactivationCheck() {
       var _this = this;
 
-      setInterval(function () {
-        _this.$http.get("network-status").then(function (res) {
-          if (_this.hasStarted && _this.x === null) {
-            _this.pauseDialog = false;
+      if (this.hasStarted && this.x === null && this.pauseDialog) {
+        //make a call to the network status to be sure the server is reachable not just that the system is online
+        this.$http.get("network-status").then(function (res) {
+          _this.pauseDialog = false;
 
-            _this.setInterval();
-          }
-        })["catch"](function (err) {
-          if (_this.x) {
-            clearInterval(_this.x);
-            _this.x = null;
-            _this.pauseDialog = true;
-          }
+          _this.setInterval();
         });
-      }, 1000);
+      }
     },
     setInterval: function (_setInterval) {
       function setInterval() {
@@ -2411,16 +2412,28 @@ __webpack_require__.r(__webpack_exports__);
       this.$store.dispatch("endExam").then(function (res) {
         _this2.btnLoading = false;
         _this2.dialog = false;
+        localStorage.removeItem("timeLeft");
         window.location.href = "/success";
       })["catch"](function (err) {
         _this2.btnLoading = false;
+        console.log(err.response.data);
+        var errorMessage = err.response.status === 403 ? err.response.data.message : "Sorry, there was an error submitting your examination. Kindly contact the invigilator for assistance.";
 
-        _this2.$noty.error("Error submitting examination: ".concat(err.response.data.message));
+        _this2.$noty.error(errorMessage);
       });
     }
   },
   mounted: function mounted() {
-    this.checkState();
+    if (this.hasStarted) {
+      this.setInterval();
+    }
+
+    window.addEventListener('offline', this.triggerOfflineStatus);
+    window.addEventListener('online', this.networkReactivationCheck);
+  },
+  destroyed: function destroyed() {
+    window.removeEventListener('offline', this.triggerOfflineStatus);
+    window.removeEventListener('online', this.networkReactivationCheck);
   }
 });
 
@@ -73800,7 +73813,7 @@ var render = function() {
               tile: "",
               block: "",
               color: "bg-warning",
-              disabled: !_vm.hasStarted
+              disabled: !_vm.hasStarted || !_vm.studentCanNowSubmit
             },
             on: {
               click: function($event) {
@@ -76638,7 +76651,7 @@ var render = function() {
       _c(
         "td",
         [
-          !_vm.student.deleted_at
+          !_vm.student.deactivated_at
             ? _c(
                 "v-btn",
                 {
@@ -76818,15 +76831,15 @@ var render = function() {
           _c(
             "v-card",
             [
-              _vm.student.deleted_at
+              _vm.student.deactivated_at
                 ? _c("v-card-title", { staticClass: "headline" }, [
                     _vm._v("Restore Examination Access?")
                   ])
                 : _c("v-card-title", { staticClass: "headline" }, [
                     _vm._v("Disable Examination Access?")
                   ]),
               _vm._v(" "),
-              _vm.student.deleted_at
+              _vm.student.deactivated_at
                 ? _c("v-card-text", [
                     _vm._v(
                       "\n        Please confirm that you want to restore\n        "
@@ -76879,7 +76892,7 @@ var render = function() {
                       },
                       on: {
                         click: function($event) {
-                          _vm.student.deleted_at
+                          _vm.student.deactivated_at
                             ? _vm.restoreStudent()
                             : _vm.disableStudent()
                         }
@@ -135817,7 +135830,7 @@ vue__WEBPACK_IMPORTED_MODULE_12___default.a.prototype.$http.interceptors.respons
       throw err;
     }
   } else if (err.request) {
-    throw err; // Vue.prototype.$noty.error("Oops! There was an error sending this request, please confirm that you are connected to the network and try again.")
+    vue__WEBPACK_IMPORTED_MODULE_12___default.a.prototype.$noty.error("Oops! There was an error sending this request, please confirm that you are connected to the network and try again.");
   } else {
     console.log(err.message);
     vue__WEBPACK_IMPORTED_MODULE_12___default.a.prototype.$noty.error("An error seems to have been encountered sending this request, please refresh the page and try again.");
@@ -137239,7 +137252,14 @@ __webpack_require__.r(__webpack_exports__);
   },
   getters: {
     hasStarted: function hasStarted(state) {
-      return !!state.examParams;
+      return function (studentId, examId) {
+        if (!state.examParams) {
+          return false;
+        }
+
+        var examParams = JSON.parse(state.examParams);
+        return examParams.studentId === studentId && examParams.examId === examId;
+      };
     },
     choices: function choices(state) {
       return JSON.parse(state.choices);
@@ -137249,6 +137269,12 @@ __webpack_require__.r(__webpack_exports__);
     },
     timeExamEnds: function timeExamEnds(state) {
       return state.examParams ? JSON.parse(state.examParams).endsAt : null;
+    },
+    studentId: function studentId(state) {
+      return state.examParams ? JSON.parse(state.examParams).studentId : null;
+    },
+    examId: function examId(state) {
+      return state.examParams ? JSON.parse(state.examParams).examId : null;
     }
   },
   mutations: {
@@ -137282,14 +137308,23 @@ __webpack_require__.r(__webpack_exports__);
       var commit = _ref.commit;
       return new Promise(function (resolve, reject) {
         var hours = data.hours,
-            minutes = data.minutes;
+            minutes = data.minutes,
+            examId = data.examId,
+            studentId = data.studentId;
         var timeExamStarted = new Date().getTime();
         var timeExamEnds = timeExamStarted + hours * 60 * 60 * 1000 + minutes * 60 * 1000;
         var examParams = JSON.stringify({
           startedAt: timeExamStarted,
-          endsAt: timeExamEnds
+          endsAt: timeExamEnds,
+          studentId: studentId,
+          examId: examId
+        });
+        localStorage.setItem('exam_params', examParams); // remove anything formerly in local storage
+
+        var keysToRemove = ['choices', 'tabClosed', 'timeLeft'];
+        keysToRemove.forEach(function (key) {
+          return localStorage.removeItem(key);
         });
-        localStorage.setItem('exam_params', examParams);
         commit('START_EXAM', examParams);
         resolve();
       });

resources/js/app.js

@@ -40,8 +40,7 @@ Vue.prototype.$http.interceptors.response.use(undefined, function (err) {
     }
 
     else if (err.request) {
-        throw err;
-        // Vue.prototype.$noty.error("Oops! There was an error sending this request, please confirm that you are connected to the network and try again.")
+        Vue.prototype.$noty.error("Oops! There was an error sending this request, please confirm that you are connected to the network and try again.")
     }
 
     else {

resources/js/components/student/Questions.vue

@@ -68,7 +68,7 @@ export default {
     components: {
         SingleQuestion
     },
-    props: ['questions', 'hours', 'minutes', 'subject', 'student'],
+    props: ['questions', 'hours', 'minutes', 'subject', 'student', 'examId', 'studentId'],
     data() {
         return {
             currentQuestion: null,
@@ -83,6 +83,8 @@ export default {
                 this.$store.dispatch('startExam', {
                     hours: this.hours,
                     minutes: this.minutes,
+                    examId: this.examId,
+                    studentId: this.studentId
                 })
                 .then(() => {
                     this.currentQuestion = this.questions[0]
@@ -116,12 +118,7 @@ export default {
         hasNotBeenAnswered(questionNumber) {
             let check = this.choices.filter(choice => choice.question == questionNumber)
             if (check.length > 0) {
-                if (check[0].choice == null) {
-                    return true
-                }
-                else {
-                    return false
-                }
+                return check[0].choice == null
             }
             else {
                 return true
@@ -181,7 +178,7 @@ export default {
             return this.$store.state.currentSelectedOption
         },
         hasStarted() {
-            return this.$store.getters.hasStarted
+            return this.$store.getters.hasStarted(this.studentId, this.examId);
         },
         hasEnded() {
             return this.$store.getters.hasEnded