Rating integration

Config.js

@@ -21,6 +21,8 @@ const Lab = {
     ["popup_menu", "popupmenu"],
     ["simulation_header", "simulation-header"],
     ["bug_report_mobile", "bug-report-mobile"],
+    ["rating_submit_mobile", "rating-submit-mobile"],
+    ["rating_display", "rating-display"],
     ["nav_menu_items", "nav-menu-items"],
   ],
   pages: [
@@ -51,7 +53,9 @@ const Experiment = {
     ["popup_menu", "popupmenu"],
     ["simulation_header", "simulation-header"],
     ["bug_report_mobile", "bug-report-mobile"],
+    ["rating_submit_mobile", "rating-submit-mobile"],
     ["nav_menu_items", "nav-menu-items"],
+    ["rating_display", "rating-display"],
   ],
   optional_pages: [
     "Observations",

config.json

@@ -1,49 +1,53 @@
 {
-    "commonComponents" : [ 
-		"head.html",
-		"lab-name.html",    	    	
-		"broad-area.html",
-		"sidebar.html"		
-    ],
-    "pages" : [
-	{
-	    "src": "introduction-ctnt.html",
-	    "target": "Introduction.html",
-	    "label": "Introduction"
-
-	},
-	{
-	    "src": "objective-ctnt.html",
-	    "target": "Objective.html",
-	    "label": "Objective"
-	},
-	{
-	    "src": "list-of-experiments-ctnt.html",
-	    "target": "List of experiments.html",
-	    "label": "List of experiments"
-	},
-	{
-	    "src": "nested-list-of-experiments-ctnt.html",
-	    "target": "List of experiments.html",
-	    "label": "List of experiments"
-	},
-	{
-	    "src": "target-audience-ctnt.html",
-	    "target": "Target Audience.html",
-	    "label": "Target Audience"
-	},
-	{
-	    "src": "course-alignment-ctnt.html",
-	    "target": "Course Alignment.html",
-	    "label": "Course Alignment"
-	},
-	{
-	    "src": "feedback-ctnt.html",
-	    "target": "Feedback.html",
-	    "label": "Feedback"
-	}
-    ],
-    "exp_dir" : "exprepos",
-    "common_repo_name" : "content-html",
-    "deployment_dest" : "/var/www/html"
+  "commonComponents": [
+    "head.html",
+    "lab-name.html",
+    "broad-area.html",
+    "sidebar.html"
+  ],
+  "pages": [
+    {
+      "src": "introduction-ctnt.html",
+      "target": "Introduction.html",
+      "label": "Introduction"
+    },
+    {
+      "src": "objective-ctnt.html",
+      "target": "Objective.html",
+      "label": "Objective"
+    },
+    {
+      "src": "list-of-experiments-ctnt.html",
+      "target": "List of experiments.html",
+      "label": "List of experiments",
+      "modules": [
+        "https://virtual-labs.github.io/svc-rating/rating-display.js",
+        "https://virtual-labs.github.io/svc-rating/rating.js",
+        "https://virtual-labs.github.io/svc-rating/rating-submit.js"
+      ]
+    },
+    {
+      "src": "nested-list-of-experiments-ctnt.html",
+      "target": "List of experiments.html",
+      "label": "List of experiments"
+    },
+    {
+      "src": "target-audience-ctnt.html",
+      "target": "Target Audience.html",
+      "label": "Target Audience"
+    },
+    {
+      "src": "course-alignment-ctnt.html",
+      "target": "Course Alignment.html",
+      "label": "Course Alignment"
+    },
+    {
+      "src": "feedback-ctnt.html",
+      "target": "Feedback.html",
+      "label": "Feedback"
+    }
+  ],
+  "exp_dir": "exprepos",
+  "common_repo_name": "content-html",
+  "deployment_dest": "/var/www/html"
 }

libcrypto.so

@@ -0,0 +1 @@
+libcrypto.so.1.1

libssl.so

@@ -0,0 +1 @@
+libssl.so.1.1

main.js

@@ -25,11 +25,16 @@ function stageLab(src, destPath) {
   shell.exec(`rsync -a ${src} '${destPath}'`);
 }
 
-function buildPage(template_file, component_files, content_file) {
+function buildPage(template_file, component_files, content_file, modules) {
   const main_template = fs.readFileSync(template_file, "utf-8");
   const components = loadComponents(component_files);
   const content = fs.readFileSync(`page-components/${content_file}`, "utf-8");
-  const res_html = populateTemplate(main_template, components, content);
+  const res_html = populateTemplate(
+    main_template,
+    components,
+    content,
+    modules
+  );
   return res_html;
 }
 
@@ -40,12 +45,14 @@ function loadComponents(component_files) {
   return components;
 }
 
-function populateTemplate(template, components, content) {
+function populateTemplate(template, components, content, modules) {
   let dom = new JSDOM(`${template}`);
   let res = addAnalytics(dom, components[0]);
   res = addLabName(res, components[1]);
   res = addBroadAreaName(res, components[2]);
   res = addSideBar(res, components[3]);
+  console.log("49---------------------\n", modules);
+  res = addModules(res, modules);
   res = addContent(res, content);
   return res.serialize();
 }
@@ -62,6 +69,16 @@ function addBroadAreaName(dom, broadareaName) {
   return dom;
 }
 
+function addModules(dom, modules) {
+  if (modules !== undefined) {
+    const scriptTags = modules.map((module) => {
+      return `<script type='module' src="${module}"></script>`;
+    });
+    dom.window.document.querySelector("head").innerHTML += scriptTags.join("");
+    console.log("72---------------------\n", scriptTags);
+  }
+  return dom;
+}
 function addLabName(dom, labname) {
   dom.window.document.querySelector(".lab-name").innerHTML = labname;
   return dom;
@@ -102,7 +119,12 @@ function generateLab(pages, labpath, template_file, component_files) {
   shell.exec(`cd ${labpath}; git checkout master; git pull origin master`);
   prepareStructure(labpath);
   pages.forEach((p) => {
-    const res_html = buildPage(template_file, component_files, p.src);
+    const res_html = buildPage(
+      template_file,
+      component_files,
+      p.src,
+      p.modules
+    );
     fs.writeFileSync(`${labpath}/build/${p.target}`, res_html, "utf-8");
   });
 }
@@ -113,7 +135,11 @@ function dataPreprocess(datafile) {
   if (data.experiments) {
     data.experiments = data.experiments.map((e) => {
       const exp_url = generateLink(data.baseUrl, e["short-name"]);
-      return { name: e.name, link: exp_url.toString() };
+      return {
+        name: e.name,
+        short_name: e["short-name"],
+        link: exp_url.toString(),
+      };
     });
     return data;
   } else {
@@ -127,7 +153,11 @@ function dataPreprocess(datafile) {
               e["short-name"],
               (index_fn = "index.html")
             );
-            return { name: e.name, link: exp_url.toString() };
+            return {
+              name: e.name,
+              short_name: e["short-name"],
+              link: exp_url.toString(),
+            };
           }),
         };
       });

page-templates/list-of-experiments-ctnt.handlebars

@@ -2,9 +2,22 @@
 	<ol>
 		{{#each experiments }}
 		<li>
-			<a href={{ this.link }}>
+			<div class="list-of-experiments-container">	
+
+				<a href={{ this.link }}>
 				{{ this.name }}
-			</a>
+				</a>
+
+			<div class="list-of-experiments-display-rating">		
+			<rating-display
+    			experimentName={{this.name}}
+    			spreadsheetID=1azCik_ei7pR8cePq8l6ELEPt-iOyrl9QChTx8zdulEc
+				sheetName="Rating-Experiments"
+				columnName="Experiment Short Name"
+				columnValue={{this.short_name}}
+    		></rating-display>
+			</div>
+			</div>
 		</li>
 		{{/each}}				
 	</ol>

plugin-config.production.js

@@ -1,6 +1,31 @@
 const { PluginScope } = require("./Enums.js");
+const issues = require("./assets_plugins/json/bug-report-questions.js");
+
 
 const config = [
+
+
+
+
+  {
+    id: "plugin-rating",
+    scope: PluginScope.PAGE,
+    js_modules:[
+      "https://virtual-labs.github.io/svc-rating/rating-display.js",
+      "https://virtual-labs.github.io/svc-rating/rating.js",
+      "https://virtual-labs.github.io/svc-rating/rating-submit.js",
+    ],
+    attributes: {},
+
+  },
+  {
+    id: "tool-performance",
+    scope: PluginScope.EXPERIMENT,
+    repo: "https://github.com/virtual-labs/tool-performance",
+    template: "handlebars/performance-report.handlebars",
+    target: "performance-report.html",
+    label: "Performance Tool",
+  },
 ];
 
-module.exports = config;
+module.exports = config;

plugin-config.testing.js

@@ -1,6 +1,7 @@
 const { PluginScope } = require("./Enums.js");
 const issues = require("./assets_plugins/json/bug-report-questions.js");
 
+
 const config = [
   {
     id: "plugin-bug-report",
@@ -15,6 +16,13 @@ const config = [
   {
     id: "plugin-rating",
     scope: PluginScope.PAGE,
+    js_modules:[
+      "https://virtual-labs.github.io/svc-rating/rating-display.js",
+      "https://virtual-labs.github.io/svc-rating/rating.js",
+      "https://virtual-labs.github.io/svc-rating/rating-submit.js",
+    ],
+    attributes: {},
+
   },
   {
     id: "tool-performance",
@@ -26,4 +34,4 @@ const config = [
   },
 ];
 
-module.exports = config;
+module.exports = config;

templates/assets/css/vlabs-style.css

@@ -2,6 +2,29 @@ html {
   overflow-y: auto;
 }
 
+.vl-rating-display{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding: 0px 10px;
+}
+.list-of-experiments-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+ }
+.list-of-experiments-container > div{
+  margin: 10px;
+  flex: 50%;
+}
+.list-of-experiments-display-rating {
+  position: relative;
+  top: -10px;
+}
 .vlabs-page {
   height: 100vh;
   overflow-x: hidden;
@@ -111,6 +134,7 @@ html {
   }
 }
 
+
 @media (min-width: 992px) {
   .vlabs-hidden {
     display: none !important;
@@ -121,8 +145,12 @@ html {
   .bug-report-mobile {
     display: none;
   }
+  .vl-rating-submit-mobile{
+    display: none;
+  }
 }
 
+
 .vlabs-header a {
   margin: 0 1rem;
   padding: 0.5rem 1rem;

templates/assets/js/event-handler.js

@@ -38,4 +38,21 @@ document.getElementById('bug-report').addEventListener('vl-bug-report', (e)=>{
             title: 'Bug Report Failed, Please Try Again',
         })
     }
-})
+})
+
+document.getElementById('rating-submit').addEventListener('vl-rating-submit', (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 Succesfully',
+        })
+})

templates/pages/content.handlebars

@@ -30,6 +30,7 @@
           {{> popup_menu }}
           {{> content }}
           {{> bug_report_mobile }}
+           {{> rating_submit_mobile }}
         </div>
       </div>
     {{else}}
@@ -42,6 +43,10 @@
           {{> tools }}
           {{/if}}
           </div>
+          {{#if testing}}
+          {{> rating_display }}
+          {{> rating_submit_mobile }}
+          {{/if}}
         </div>
         <div class="row flex-grow-1 d-flex flex-nowrap flex-column flex-lg-row">
           {{> popup_menu }}