Merge branch 'feature/refactor-front' into develop

Dockerfile

@@ -1,4 +1,4 @@
-from python
+FROM python
 
 COPY . /usr/src/app
 WORKDIR /usr/src/app

expe/templates/base.html

@@ -34,16 +34,14 @@
         const host     = window.location.host
         var baseUrl    = location.protocol + '//' + host + '/'
 
-        if (BASE != ''){
-            baseUrl += BASE + '/'
-        }
+        if (BASE !== '') baseUrl += BASE + '/'
 
         const expeUrl  = baseUrl + 'expe'  
 
         // EXPE variables parts
         // get access to django variables
-        var BEGIN_EXPE = "{{request.session.expe_started}}"
-        var END_EXPE   = "{{request.session.expe_finished}}"
+        var BEGIN_EXPE = "{{request.session.expe_started}}" === 'True'
+        var END_EXPE   = "{{request.session.expe_finished}}" === 'True'
     </script>
 
     <!-- Custom Javascript file for experience template is placed here -->

static/js/indications.js

@@ -1,29 +1,25 @@
-// implement `key` events
-document.onkeydown = checkKey;
-
 // Utils informations
-var KEYCODE_Q           = '81'
-var KEYCODE_ENTER       = '13'
-
-urlParams = new URLSearchParams(window.location.search);
+const KEYCODE_Q     = 81
+const KEYCODE_ENTER = 13
 
-var scene = urlParams.get('scene')
-var expe  = urlParams.get('expe')
+urlParams = new URLSearchParams(window.location.search)
 
-function checkKey(e) {
+const scene = urlParams.get('scene')
+const expe  = urlParams.get('expe')
 
-   e = e || window.event;
+const checkKey = e => {
+     if (e.keyCode === KEYCODE_Q) {
+          // `q` to quit expe
+          console.log('`q` key is pressed')
+          window.location = ''
+     }
+     else if (e.keyCode === KEYCODE_ENTER) {
+          // right arrow
+          const params = `?scene=${scene}&expe=${expe}&iteration=0`
+          console.log(expeUrl + params)
+          window.location = expeUrl + params
+     }
+}
 
-   if (e.keyCode == KEYCODE_Q) {
-        // `q` for quit expe
-        console.log('`q` key is pressed')
-        window.location = ''
-   }
-   else if (e.keyCode == KEYCODE_ENTER) {
-
-        // right arrow
-        var params = "?scene=" + scene + "&expe=" + expe + "&iteration=0"
-        console.log(expeUrl + params)
-        window.location = expeUrl + params
-   }
-}
+// implement `key` events
+document.addEventListener('keydown', checkKey)

static/js/keyEvents.js

@@ -1,71 +1,60 @@
-// implement `key` events
-document.onkeydown = checkKey;
-
-urlParams = new URLSearchParams(window.location.search);
-
 // Utils informations
-var KEYCODE_Q           = '81'
-var KEYCODE_ENTER       = '13'
-var KEYCODE_LEFT_ARROW  = '37'
-var KEYCODE_RIGHT_ARROW = '39'
-
-// get params if exists
-if (urlParams.has('scene')){
-
-   var scene = urlParams.get('scene')
-   var expe  = urlParams.get('expe')
-}
+const KEYCODE_Q           = 81
+const KEYCODE_ENTER       = 13
+const KEYCODE_LEFT_ARROW  = 37
+const KEYCODE_RIGHT_ARROW = 39
 
-function checkKey(e) {
+urlParams = new URLSearchParams(window.location.search)
 
-   e = e || window.event;
+const scene = urlParams.get('scene')
+const expe  = urlParams.get('expe')
 
-   if (e.keyCode == '81') {
-      // `q` for quit expe
+const checkKey = e => {
+   if (e.keyCode === KEYCODE_Q) {
+      // `q` to quit expe
       console.log('`q` key is pressed')
       window.location = baseUrl
    }
-   else if (e.keyCode == '13') {
-
+   else if (e.keyCode === KEYCODE_ENTER) {
       // check if experience is begin
-      if (!BEGIN_EXPE){
-
-         console.log(window.location.href + "&begin=true")
+      if (!BEGIN_EXPE) {
          // right arrow
-         window.location = window.location.href + "&begin=true"
+         window.location = window.location.href + '&begin=true'
       } 
    }
-   else if (e.keyCode == '37' || e.keyCode == '39'){
-
-      // only do something is experience is begin
-      if (BEGIN_EXPE){
-         var answer;
+   else if (e.keyCode === KEYCODE_LEFT_ARROW || e.keyCode === KEYCODE_RIGHT_ARROW) {
+      // only do something is experience has begun
+      if (BEGIN_EXPE) {
+         let answer
 
          // left arrow key
-         if (e.keyCode == '37'){
+         if (e.keyCode === KEYCODE_LEFT_ARROW) {
             console.log('left arrow is pressed')
             answer = '1'
          }
 
          // right arrow key
-         if (e.keyCode == '39'){
+         if (e.keyCode === KEYCODE_RIGHT_ARROW) {
             console.log('right arrow is pressed')
             answer = '0'
          }
 
-         var iteration = 0;
+         let iteration = 0
 
          // update of iteration if exists
-         if (urlParams.has('iteration')){
+         if (urlParams.has('iteration')) {
             iteration = urlParams.get('iteration')
 
             // increment step
-            iteration++;
+            iteration++
          }
          
          // construct url with params for experience
-         var params = "?scene=" + scene + "&expe=" + expe + "&iteration=" + iteration + "&answer=" + answer
+         const params = `?scene=${scene}&expe=${expe}&iteration=${iteration}&answer=${answer}`
          window.location = expeUrl + params
       }
    }
-}
+}
+
+// implement `key` events
+document.addEventListener('keydown', checkKey)

static/js/loadImg.js

@@ -1,28 +1,19 @@
-window.onload = function () {
-
-    console.log("End expe " + END_EXPE)
+const delay = ms => new Promise(res => setTimeout(res, ms))
 
+window.addEventListener('DOMContentLoaded', async () => {
+    console.log('End expe ' + END_EXPE)
+    
     // only if not end of expe
-    if (END_EXPE == "False"){
-        setTimeout(function(){ 
-            document.getElementById("expeImg").style.display = "inline";
-        }, 500);
+    if (!END_EXPE) {
+        await delay(500)
+        document.getElementById('expeImg').style.display = 'inline'
     }
-
-    // redirect if end of expe after 5 sec
-    if (END_EXPE == "True"){
-        
-        for(var i=0; i<6; i++){
-            ((x)=>{
-                setTimeout(()=> 
-                    document.getElementById("refreshTime").textContent = 5 - x
-                ,1000 * i)
-            })(i);
-        } 
-
-        setTimeout(function(){ 
-            // TODO : refresh to home app
-            window.location = baseUrl
-        }, 5000);
+    // redirect after 5s if end of expe
+    else if (END_EXPE) {
+        for (let i = 0; i <= 5; i++) {
+            document.getElementById('refreshTime').textContent = 5 - i
+            if (i <= 4) await delay(1000)
+        }
+        window.location = baseUrl
     }
-}
+})