Merge pull request #268 from virtual-labs/rating-integration-btp

Rating tool integration btp

assets/css/vlabs-style.css

@@ -2,6 +2,41 @@ html {
   overflow-y: auto;
 }
 
+.svc-rating-display{
+  display:flex;
+  flex-direction: column;
+  margin-right: 40px ;
+  margin-bottom: 17px;
+  align-items: center ;
+}
+
+.vl-rating-display {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding: 0px 10px;
+  margin-top: -15px; /* Adjust this value as needed */
+}
+.list-of-experiments-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  overflow: hidden;
+  flex: 0 0 1%; /*Adjust this value to decrease the width*/
+}
+
+.list-of-experiments-container > div{
+  margin: 1px;
+}
+.list-of-experiments-display-rating {
+  position: relative;
+  top: -10px;
+  left: 20px;
+}
+
 .vlabs-page {
   height: 100vh;
   overflow-x: hidden;

assets/js/event-handler.js

@@ -1,7 +1,7 @@
 "use-strict";
 
 const Toast = Swal.mixin({
-    toast: true,
+  toast: true,
   position: 'bottom-end',
   showConfirmButton: false,
   timer: 3000,
@@ -12,30 +12,54 @@ const Toast = Swal.mixin({
   }
 })
 
-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 Successfully',
-        })
-    }else{
-        Toast.fire({
-            icon: 'error',
-            iconColor: "white", 
-            color:"white",
-            background:"#f27474",
-            timer: 5000,
-            title: 'Bug Report Failed, Please Try Again',
-        })
-    }
+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 Successfully',
+    })
+  } else {
+    Toast.fire({
+      icon: 'error',
+      iconColor: "white",
+      color: "white",
+      background: "#f27474",
+      timer: 5000,
+      title: 'Bug Report Failed, Please Try Again',
+    })
+  }
 })
+
+// Function to handle the rating submit logic
+function handleRatingSubmit(e) {
+  const learningUnit = document.head.querySelector('meta[name="learning-unit"]').content;
+  const task = document.head.querySelector('meta[name="task-name"]').content;
+  dataLayer.push({
+    event: "vl-rating-submit",
+    "rating": e.detail.rating,
+    "learning-unit": learningUnit ? learningUnit : "",
+    "task-name": task ? task : ""
+  });
+  Toast.fire({
+    icon: 'success',
+    iconColor: "white",
+    background: "#a5dc86",
+    title: 'Rating Submitted Successfully',
+  });
+}
+
+const ratingSubmitElement = document.querySelector('rating-submit');
+if (ratingSubmitElement) {
+  // Wait for the 'vl-rating-submit' event before adding the event listener
+  ratingSubmitElement.addEventListener('vl-rating-submit', handleRatingSubmit);
+}

config.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const log = require("./logger.js");
 
 const Lab = {
   descriptor_name: "lab-descriptor",
@@ -21,6 +22,8 @@ const Lab = {
     ["popup_menu", "popupmenu"],
     ["simulation_header", "simulation-header"],
     ["bug_report_mobile", "bug-report-mobile"],
+    ["svc_rating_display", "svc-rating-display"],
+    ["svc_rating_submit", "svc-rating-submit"],
     ["nav_menu_items", "nav-menu-items"],
   ],
   pages: [
@@ -52,6 +55,8 @@ const Experiment = {
     ["popup_menu", "popupmenu"],
     ["simulation_header", "simulation-header"],
     ["bug_report_mobile", "bug-report-mobile"],
+    ["svc_rating_display", "svc-rating-display"],
+    ["svc_rating_submit", "svc-rating-submit"],
     ["nav_menu_items", "nav-menu-items"],
   ],
   optional_pages: [
@@ -78,8 +83,19 @@ function assets_path() {
   return path.resolve(__dirname, "assets");
 }
 
+function isURL(source) {
+  try {
+    new URL(source);
+    return true;
+  } catch (e) {
+    log.debug(`${source} is not a valid URL`);
+    return false;
+  }
+}
+
 module.exports.Experiment = Experiment;
 module.exports.Lab = Lab;
 module.exports.build_path = build_path;
 module.exports.assets_path = assets_path;
+module.exports.isURL = isURL;
 module.exports.PROJECT_ROOT = PROJECT_ROOT;

exp_build/exp_gen.js

@@ -4,7 +4,8 @@ const shell = require("shelljs");
 
 const { Experiment } = require("./experiment.js");
 const Config = require("../config.js");
-const { BuildEnvs, validBuildEnv } = require("../enums.js");
+const { Plugin } = require("./plugin.js");
+const { PluginScope } = require("../enums.js");
 const log = require("../logger.js");
 
 function run(src, lab_data, build_options) {
@@ -18,6 +19,18 @@ function run(src, lab_data, build_options) {
   }
 
   const exp = new Experiment(src);
+  const pluginConfigFile = Plugin.getConfigFileName(build_options.env);
+  const pluginConfig = require(pluginConfigFile);
+
+  const pageScopePlugins = pluginConfig.filter(
+    (p) => p.scope === PluginScope.PAGE
+  );
+
+  pageScopePlugins.forEach((plugin) => {
+    if(plugin.id === "svc-rating") {
+      plugin.attributes.columnValue = lab_data.exp_short_name;
+    }
+  });
   exp.init(Handlebars);
   // Validation
   if (build_options.isValidate)

exp_build/experiment.js

@@ -193,6 +193,7 @@ class Experiment {
     };
 
     if (options.plugins) {
+      Plugin.loadAllPlugins(options);
       exp_info.plugins = Plugin.processExpScopePlugins(
         exp_info,
         hb,

exp_build/plugin-config.production.js

@@ -2,16 +2,40 @@ const { PluginScope } = require("../enums.js");
 const issues = require("../assets_plugins/json/bug-report-questions.js");
 
 const config = [
-    {
-        id: "plugin-bug-report",
-        scope: PluginScope.PAGE,
-        js_modules: [
-          "https://virtual-labs.github.io/svc-bug-report/client/src/bug-report.js",
-        ],
-        attributes: {
-          issues: JSON.stringify(issues),
-        },
-      },
+  {
+    id: "plugin-bug-report",
+    scope: PluginScope.PAGE,
+    js_modules: [
+      "https://virtual-labs.github.io/svc-bug-report/client/src/bug-report.js",
+    ],
+    attributes: {
+      issues: JSON.stringify(issues),
+    },
+  },
+  {
+    id: "svc-rating",
+    scope: PluginScope.PAGE,
+    repo: "https://github.com/virtual-labs/svc-rating",
+    tag: "v1.1.0.beta",
+    label: "Validation Tool",
+    js_modules: [
+      "./index.js",
+      "./config.js",
+      "https://apis.google.com/js/api.js",
+    ],
+    css_modules: [
+      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",
+    ],
+    attributes: {
+      spreadsheetID: "1x12nhpp0QvnsA6x-O1sV4IA9SAbfVsq_wiexWkutOmU",
+      sheetName: "Experiment-Database",
+      columnName: "Experiment Short Name",
+      columnValue: "expName",
+      title: "Rate this experiment",
+      imagesDirectory: "./plugins/svc-rating/images/",
+    },
+
+  },
 ];
 
 module.exports = config;

exp_build/plugin-config.testing.js

@@ -12,10 +12,6 @@ const config = [
       issues: JSON.stringify(issues),
     },
   },
-  {
-    id: "plugin-rating",
-    scope: PluginScope.PAGE,
-  },
   {
     id: "tool-performance",
     scope: PluginScope.EXPERIMENT,
@@ -39,7 +35,30 @@ const config = [
     repo: "https://github.com/virtual-labs/tool-validation",
     tag: "v1.0.1",
     command: "npm i && node js/link_validation.js",
-  }
+  },
+  {
+    id: "svc-rating",
+    scope: PluginScope.PAGE,
+    repo: "https://github.com/virtual-labs/svc-rating",
+    tag: "v1.1.0.beta",
+    label: "Validation Tool",
+    js_modules: [
+      "./index.js",
+      "./config.js",
+      "https://apis.google.com/js/api.js",
+    ],
+    css_modules: [
+      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",
+    ],
+    attributes: {
+      spreadsheetID: "1x12nhpp0QvnsA6x-O1sV4IA9SAbfVsq_wiexWkutOmU",
+      sheetName: "Experiment-Database",
+      columnName: "Experiment Short Name",
+      columnValue: "expName",
+      title: "Rate this experiment",
+      imagesDirectory: "./plugins/svc-rating/images/",
+    },
+  },
 ];
 
 module.exports = config;