Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rating tool integration btp #268

Merged
merged 15 commits into from
Dec 12, 2023
Merged

Rating tool integration btp #268

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
727a967
integrated svc-rating tool
gautamxyz Sep 1, 2023
2c0e70d
specified image directory path
gautamxyz Sep 13, 2023
f83be33
implemented retrieval of exp short name
gautamxyz Sep 17, 2023
376920c
fixed bug in index.html rating
gautamxyz Sep 18, 2023
01e28fa
updated event handler
gautamxyz Sep 24, 2023
d457118
updated event handler tested rating tool
gautamxyz Sep 24, 2023
aa19c9e
completed integration of rating-tool with lab pages
gautamxyz Oct 4, 2023
91dd6f3
fixed lab css
mayankbhardwaj719 Oct 5, 2023
c2cd5ba
fixed experiment css
mayankbhardwaj719 Oct 6, 2023
5301393
fixed lab css
mayankbhardwaj719 Oct 6, 2023
ce51fe3
updated plugin-config.producction
gautamxyz Oct 6, 2023
1811475
cleaned feedback-ctnt.html file
gautamxyz Oct 6, 2023
8c52544
code refactored
gautamxyz Oct 26, 2023
63dfa0f
Resolved PR
mayankbhardwaj719 Oct 27, 2023
2c7afaa
updated plugin-config
gautamxyz Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions assets/css/vlabs-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
78 changes: 51 additions & 27 deletions assets/js/event-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use-strict";

const Toast = Swal.mixin({
toast: true,
toast: true,
position: 'bottom-end',
showConfirmButton: false,
timer: 3000,
Expand All @@ -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);
}
4 changes: 4 additions & 0 deletions config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,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: [
Expand Down Expand Up @@ -52,6 +54,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: [
Expand Down
14 changes: 14 additions & 0 deletions exp_build/exp_gen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ const shell = require("shelljs");

const { Experiment } = require("./experiment.js");
const Config = require("../config.js");
const { Plugin } = require("./plugin.js");
const { PluginConfig, PluginScope } = require("../enums.js");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All imports from enums.js can be combined in one statement

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, removed unnecessary imports as well

const { BuildEnvs, validBuildEnv } = require("../enums.js");
const log = require("../logger.js");

Expand All @@ -18,6 +20,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)
Expand Down
1 change: 1 addition & 0 deletions exp_build/experiment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ class Experiment {
};

if (options.plugins) {
Plugin.loadAllPlugins(options);
exp_info.plugins = Plugin.processExpScopePlugins(
exp_info,
hb,
Expand Down
38 changes: 28 additions & 10 deletions exp_build/plugin-config.production.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,34 @@ 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,
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: {
spreadsheetID: "1x12nhpp0QvnsA6x-O1sV4IA9SAbfVsq_wiexWkutOmU",
sheetName: "Experiment-Database",
columnName: "Experiment Short Name",
columnValue: "expName",
title: "Rate this experiment",
imagesDirectory: "https://virtual-labs.github.io/svc-rating/"
},

},
];

module.exports = config;
29 changes: 24 additions & 5 deletions exp_build/plugin-config.testing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ const config = [
issues: JSON.stringify(issues),
},
},
{
id: "plugin-rating",
scope: PluginScope.PAGE,
},
{
id: "tool-performance",
scope: PluginScope.EXPERIMENT,
Expand All @@ -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",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the ratings config different between testing and prod? It should be the same

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the testing one is correct. The prod one is based on the old approach of adding plugins to page.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the prod one. Had taken the prod one based on the old PR

scope: PluginScope.PAGE,
repo: "https://github.com/virtual-labs/svc-rating",
tag: "v1.0.4",
label: "Validation Tool",
js_modules: [
"./index.js",
"./config.js",
"https://apis.google.com/js/api.js",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need api.js?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the api js script was present in the html of svc-rating tool as well. It is used for loading and initializing the Google API client library,

],
css_modules: [
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css",
],
attributes: {
spreadsheetID: "1x12nhpp0QvnsA6x-O1sV4IA9SAbfVsq_wiexWkutOmU",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need spreadsheetID here? Isn't it passed as argument to the component

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The handlebar for rating display component takes the attributes specified in the config file. The rating display handlebar then gets rendered in the html pages.

sheetName: "Experiment-Database",
columnName: "Experiment Short Name",
columnValue: "expName",
title: "Rate this experiment",
imagesDirectory: "./plugins/svc-rating/images/",
},
},
];

module.exports = config;
Loading