Commit ad5e4e06 by Kálmán Viktor

dashboard: fix vm tour

If an activity was already active it kept reloading #ops and introjs
couldn't find it.

Also removed the activity check if there is only 1 activity
parent 86c16fe8
......@@ -981,3 +981,13 @@ textarea[name="new_members"] {
.hilight .autocomplete-hl {
color: orange;
}
.introjs-button:focus {
text-decoration: none;
color: #333;
outline: none;
}
.introjs-button:hover {
color: #428bca;
}
......@@ -361,10 +361,7 @@ function decideActivityRefresh() {
/* if something is still spinning */
if($('.timeline .activity i').hasClass('fa-spin'))
check = true;
/* if there is only one activity */
if($('#activity-timeline div[class="activity"]').length < 2)
check = true;
return check;
}
......
......@@ -2,65 +2,13 @@ $(function() {
$("#vm-details-start-template-tour").click(function() {
var intro = introJs();
intro.setOptions({
'nextLabel': gettext("Next"),
'prevLabel': gettext("Previous"),
'nextLabel': gettext("Next") + ' <i class="fa fa-chevron-right"></i>',
'prevLabel': '<i class="fa fa-chevron-left"></i> ' + gettext("Previous"),
'skipLabel': gettext("Skip"),
'doneLabel': gettext("Done"),
});
intro.setOptions({
steps: [
{
element: document.querySelector("#vm-details-start-template-tour"),
intro: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" +
"<p>" + gettext('For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).') + "</p>" +
"<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however " +
"you can end the tour any time you want with the End Tour button!") + "</p>",
},
{
element: document.querySelector('a[href="#home"]'),
intro: gettext("In this tab you can tag your virtual machine and modify the name and description."),
},
{
element: document.querySelector('a[href="#resources"]'),
intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
},
{
element: document.querySelector('#vm-details-resources-form'),
intro: '<p><strong>' + gettext("CPU priority") + ":</strong> " + gettext("higher is better") + "</p>" +
'<p><strong>' + gettext("CPU count") + ":</strong> " + gettext("number of CPU cores.") + "</p>" +
'<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>",
position: "top",
},
{
element: document.querySelector('#vm-details-resources-disk'),
intro: gettext("You can add empty disks, download new ones and remove existing ones here."),
position: "top",
},
{
element: document.querySelector('a[href="#network"]'),
intro: gettext('You can add new network interfaces or remove existing ones here.'),
},
{
element: document.querySelector('#ops a[class*="operation-deploy"]'),
intro: gettext("Deploy the virtual machine."),
},
{
element: document.querySelector("#vm-info-pane"),
intro: gettext("Use the connection string or connect with your choice of client!"),
},
{
element: document.querySelector("#vm-info-pane"),
intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
},
{
element: document.querySelector('#ops a[class*="operation-save_as"]'),
intro: gettext('Press the "Save as template" button and wait until the activity finishes.'),
},
{
element: document.querySelector(".alert-new-template"),
intro: gettext("This is the last message, if something is not clear you can do the the tour again!"),
},
]
'steps': get_steps(),
});
intro.onbeforechange(function(target) {
/* if the tab menu item is highlighted */
......@@ -81,3 +29,73 @@ $(function() {
return false;
});
});
function get_steps() {
// if an activity is running the #ops will be refreshed
// and the intro will break
deploy_selector = "#ops";
save_as_selector = "#ops";
if(!$('.timeline .activity i').hasClass('fa-spin')) {
deploy_selector += ' a[class*="operation-deploy"]';
save_as_selector += ' a[class*="operation-save_as"]';
}
steps = [
{
element: document.querySelector("#vm-details-start-template-tour"),
intro: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" +
"<p>" + gettext('For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).') + "</p>" +
"<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however you can end the tour any time you want with the End Tour button!") +
"</p>",
},
{
element: document.querySelector('a[href="#home"]'),
intro: gettext("In this tab you can tag your virtual machine and modify the name and description."),
},
{
element: document.querySelector('a[href="#resources"]'),
intro: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
},
{
element: document.querySelector('#vm-details-resources-form'),
intro: '<p><strong>' + gettext("CPU priority") + ":</strong> " +
gettext("higher is better") + "</p>" +
"<p><strong>" + gettext("CPU count") + ":</strong> " +
gettext("number of CPU cores.") + "</p>" +
"<p><strong>" + gettext("RAM amount") + ":</strong> " +
gettext("amount of RAM.") + "</p>",
position: "top",
},
{
element: document.querySelector('#vm-details-resources-disk'),
intro: gettext("You can add empty disks, download new ones and remove existing ones here."),
position: "top",
},
{
element: document.querySelector('a[href="#network"]'),
intro: gettext('You can add new network interfaces or remove existing ones here.'),
},
{
element: document.querySelector(deploy_selector),
intro: gettext("Deploy the virtual machine."),
},
{
element: document.querySelector("#vm-info-pane"),
intro: gettext("Use the connection string or connect with your choice of client!"),
},
{
element: document.querySelector("#vm-info-pane"),
intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
},
{
element: document.querySelector(save_as_selector),
intro: gettext('Press the "Save as template" button and wait until the activity finishes.'),
},
{
element: document.querySelector(".alert-new-template"),
intro: gettext("This is the last message, if something is not clear you can do the the tour again!"),
},
];
return steps;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment