Add support for event handling (#79)

* space fixes in quiz * Ignore plugins dir * Trying to import web component * Dynamically Get Data * Load questions based on content * Add attributes to web component plugins * Add questions on build time * [FIX] Add back toggle nav bar script * Removed by mistake * Add context info * Move to ENUMS for ContentTypes * Raise alert on submit bug report * Default position to bottom right for now * Move button to header * fix bug report desktop view * add floating bug report button for mobile view * switch position of popup menu & bug report button * made bug report feature testing exclusive * Update package-lock * Migrate bug report module script link to virtual labs * Add an event handler * Move bug report event handling * Update bug report event name to vl-bug-report * Notify user on successful bug report * Update bug report title * Push learningUnit and task to dataLayer * Add toast mesages instead of alerts * They are technically still alerts of bootstrap, but they look more like a toast * Also fix duplicate question * Use Sweet alert 2 for toast notification Co-authored-by: b30wulffz <[email protected]>
virtual-labs · Sep 2, 2022 · bf759a6 · bf759a6
1 parent e328430
commit bf759a6
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 10 deletions.
diff --git a/assets_plugins/json/bug-report-questions.js b/assets_plugins/json/bug-report-questions.js
@@ -1,8 +1,8 @@
 const { ContentTypes } = require("../../Enums");
 
 const issues = {
-  [ContentTypes.TEXT]: ["Incorrect Content", "Insufficient Content"],
-  [ContentTypes.VIDEO]: ["Incorrect Content", "Insufficient Content"],
+  [ContentTypes.TEXT]: ["Insufficient Content"],
+  [ContentTypes.VIDEO]: ["Insufficient Content"],
   [ContentTypes.ASSESMENT]: [
     "Incorrect Options",
     "Incorrect Answer",
@@ -13,7 +13,7 @@ const issues = {
     "Incorrect Results/Observations",
     "Insufficient/Incorrect Instructions",
   ],
-  DEFAULT: ["Page Not Loading", "Content Not Visible", "Incorrect content"],
+  DEFAULT: ["Page Not Loading", "Content Not Visible", "Incorrect Content"],
 };
 
 module.exports = issues;
diff --git a/templates/assets/js/event-handler.js b/templates/assets/js/event-handler.js
@@ -0,0 +1,41 @@
+"use-strict";
+
+const Toast = Swal.mixin({
+    toast: true,
+  position: 'bottom-end',
+  showConfirmButton: false,
+  timer: 3000,
+  timerProgressBar: true,
+  didOpen: (toast) => {
+    toast.addEventListener('mouseenter', Swal.stopTimer)
+    toast.addEventListener('mouseleave', Swal.resumeTimer)
+  }
+})
+
+document.getElementById('bug-report').addEventListener('vl-bug-report', (e)=>{
+    if(e.detail.status === 200 || e.detail.status === 201){
+        const learningUnit = document.head.querySelector('meta[name="learning-unit"]').content;
+        const task = document.head.querySelector('meta[name="task-name"]').content;
+        dataLayer.push({
+            event: "vl-bug-report",
+            "bug-type": e.detail.issues,
+            "learning-unit": learningUnit ? learningUnit : "", 
+            "task-name": task ? task : ""
+        })        
+        Toast.fire({
+          icon: 'success',
+          iconColor: "white",
+          background:"#a5dc86",
+          title: 'Bug Reported Succesfully',
+        })
+    }else{
+        Toast.fire({
+            icon: 'error',
+            iconColor: "white", 
+            color:"white",
+            background:"#f27474",
+            timer: 5000,
+            title: 'Bug Report Failed, Please Try Again',
+        })
+    }
+})
diff --git a/templates/pages/content.handlebars b/templates/pages/content.handlebars
@@ -52,11 +52,7 @@
       </div>
       {{> footer }}
     {{/if}}
-    <script>
-      document.getElementById('bug-report').addEventListener('submitted', (e)=>{
-          alert(event.detail.message)
-      })
-    </script>
     <script src="{{assets_path}}/assets/js/toggleSidebar.js"></script>
+    <script src="{{assets_path}}/assets/js/event-handler.js"></script>    
   </body>
 </html>
diff --git a/templates/partials/bug-report-mobile.handlebars b/templates/partials/bug-report-mobile.handlebars
@@ -2,7 +2,7 @@
     <div class="bug-report-mobile">
         <bug-report 
             id="bug-report"
-            title="[BUG REPORT] Virtual Labs {{ exp_name }}"
+            title="[BUG REPORT] {{ exp_name }}"
             page-type="{{ content_type }}"
             context-info="{{ bugreport_context_info }}"
             checkbox-json="{{ page_plugins.plugin-bug-report.attributes.issues }}"

diff --git a/templates/partials/commons.handlebars b/templates/partials/commons.handlebars
@@ -24,3 +24,5 @@
   integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
   crossorigin="anonymous"
 ></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
diff --git a/templates/partials/header.handlebars b/templates/partials/header.handlebars
@@ -16,7 +16,7 @@
       {{#if testing}}
         <bug-report 
             id="bug-report"
-            title="[BUG REPORT] Virtual Labs {{ exp_name }}"
+            title="[BUG REPORT] {{ exp_name }}"
             page-type="{{ content_type }}"
             context-info="{{ bugreport_context_info }}"
             checkbox-json="{{ page_plugins.plugin-bug-report.attributes.issues }}"