217 lines
8.8 KiB
JavaScript
217 lines
8.8 KiB
JavaScript
(function ($) {
|
||
var ScenarioComparer = function (element, options) {
|
||
this.init(element, options);
|
||
};
|
||
|
||
ScenarioComparer.prototype = {
|
||
scenarios: [],
|
||
$compareButtons: {},
|
||
options: {},
|
||
preloaderSettings: {
|
||
overlayCSS: { backgroundColor: "#fff", opacity: 0.9 },
|
||
css: { border: "none", backgroundColor: "transparent" },
|
||
message: "<span><img class='valign-middle' src=\"/Content/images/loadFA.gif\")' /> loading...</span>"
|
||
},
|
||
|
||
init: function (element, options) {
|
||
var plugin = this;
|
||
|
||
plugin.options = options;
|
||
$(options.checkBoxSelector).change(function () { plugin.onInputChanged(this) });
|
||
plugin.$compareButtons = $(options.compareButtonSelector);
|
||
plugin.$compareButtons.click(function () { plugin.onCompareClick(this) });
|
||
$(document).on("show.bs.modal", options.modalSelector, $.proxy(plugin.onModalShow, plugin));
|
||
$(document).on("shown.bs.modal", options.modalSelector, $.proxy(plugin.onModalShown, plugin));
|
||
},
|
||
|
||
onModalShow: function (event) {
|
||
var $modalBody = $(this.options.modalSelector + " .modal-body");
|
||
$modalBody.html("");
|
||
},
|
||
|
||
onModalShown: function (event) {
|
||
var
|
||
plugin = this,
|
||
$modal = $(this.options.modalSelector),
|
||
$modalBody = $(this.options.modalSelector + " .modal-body"),
|
||
projectId = $modal.data("project-id"),
|
||
url = this.options.compareUrl;
|
||
|
||
$modalBody.block(plugin.preloaderSettings);
|
||
$(".blockUI.blockMsg").css("z-index", 9999); //modal is over loading message
|
||
|
||
var ids = $.map(this.getScenariosByProject(projectId), function (item, key) {
|
||
return item.scenarioId;
|
||
});
|
||
|
||
$modalBody.load(url, { ids: ids }, function (response, status, xhr) {
|
||
$modalBody.unblock();
|
||
if (status == "error") {
|
||
bootbox.alert("An error occurred while processing your request. Please, try again later.", function () {
|
||
$modal.modal("hide");
|
||
});
|
||
} else {
|
||
plugin.loaded();
|
||
}
|
||
});
|
||
},
|
||
|
||
loaded: function () {
|
||
var
|
||
plugin = this,
|
||
modalSelector = this.options.modalSelector,
|
||
$modal = $(modalSelector),
|
||
projectId = $modal.data("project-id");
|
||
|
||
var gradient = 'linear-gradient(-135deg, #7030A0 20%, #475FBE 30%, #04ABED 40%, #3CBDAF 70%, #8ED054 80%)';
|
||
var scenarios = this.getScenariosByProject(projectId);
|
||
|
||
$.each(scenarios, function (index, item) {
|
||
var selector = modalSelector + " .modal-body .magnify[data-scenario-id='" + item.scenarioId + "']",
|
||
magnify = $(selector),
|
||
percent = magnify.data("scenario-percent");
|
||
|
||
magnify.bar(percent, "percent", true, gradient);
|
||
});
|
||
|
||
$(".activate-scenario").click(function () { plugin.onActivateClick(this) });
|
||
},
|
||
|
||
onActivateClick: function (button) {
|
||
var plugin = this,
|
||
$button = $(button),
|
||
$modal = $(this.options.modalSelector),
|
||
projectId = $modal.data("project-id"),
|
||
scenarioId = $button.data("scenario-id"),
|
||
scenarioStartDate = $button.data('scenario-start-date'),
|
||
scenarioEndDate = $button.data('scenario-end-date'),
|
||
isOptimal = ($button.data("is-optimal") == "True"),
|
||
msg = isOptimal ? "Wise choice! Please confirm that you would like to activate the most optimal scenario." :
|
||
"You’re the boss! Please confirm that you would like to activate a less than optimal scenario.";
|
||
|
||
$button.scenarioStatusToggle({
|
||
scenario: {
|
||
scenarioId: scenarioId,
|
||
projectId: projectId,
|
||
startDate: scenarioStartDate,
|
||
endDate: scenarioEndDate,
|
||
},
|
||
minStartDate: plugin.options.minStartDate,
|
||
maxEndDate: plugin.options.maxEndDate,
|
||
activationConfirmMessage: msg,
|
||
saveButtonText: 'Yes',
|
||
runType: 'OnDemand',
|
||
alwaysShowConfirmation: true,
|
||
success: function (args) {
|
||
location.href = location.pathname + $.query.SET("ptab", "scenarios").toString();
|
||
},
|
||
error: function (args) {
|
||
showErrorModal();
|
||
},
|
||
});
|
||
$button.scenarioStatusToggle('toggleStatus');
|
||
},
|
||
|
||
onCompareClick: function (element) {
|
||
var $button = $(element),
|
||
projectId = $button.data("project-id"),
|
||
scenarios = this.getScenariosByProject(projectId),
|
||
columnsCount = scenarios.length + 1;
|
||
|
||
var $modal = $(this.options.modalSelector);
|
||
$modal.data("project-id", projectId);
|
||
$modal.data("width", 196 * columnsCount);
|
||
$modal.modal('show');
|
||
},
|
||
|
||
onInputChanged: function (element) {
|
||
var $checkbox = $(element);
|
||
var projectId = $checkbox.data("project-id"),
|
||
scenarioId = $checkbox.data("scenario-id"),
|
||
scenario = this.getScenario(scenarioId);
|
||
|
||
if ($checkbox.prop("checked")) {
|
||
if (scenario == null) {
|
||
this.scenarios.push({
|
||
projectId: projectId,
|
||
scenarioId: scenarioId
|
||
});
|
||
}
|
||
} else {
|
||
if (scenario != null) {
|
||
var index = this.scenarios.indexOf(scenario);
|
||
this.scenarios.splice(index, 1);
|
||
}
|
||
}
|
||
this.updateButtonState();
|
||
},
|
||
|
||
updateButtonState: function () {
|
||
var plugin = this;
|
||
$.each(this.$compareButtons, function (index, btn) {
|
||
var $button = $(btn),
|
||
projectId = $button.data("project-id"),
|
||
scenarios = plugin.getScenariosByProject(projectId);
|
||
|
||
if (scenarios.length < 2) {
|
||
$button.attr("disabled", "disabled");
|
||
} else {
|
||
$button.removeClass("disabled");
|
||
$button.attr("disabled", null);
|
||
if (scenarios.length < 4) {
|
||
var selector = plugin.options.checkBoxSelector + "[comparable]:disabled[data-project-id='" + projectId + "']";
|
||
var $inputsToEnable = $(selector);
|
||
$inputsToEnable.attr("disabled", null);
|
||
$inputsToEnable.attr("title", "");
|
||
} else {
|
||
var selector = plugin.options.checkBoxSelector + "[comparable]:unchecked:enabled[data-project-id='" + projectId + "']";
|
||
var $inputsToDisable = $(selector);
|
||
$inputsToDisable.attr("disabled", "disabled");
|
||
$inputsToDisable.attr("title", "Please deselect one or more scenarios to make this selection.");
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
getScenariosByProject: function (projectId) {
|
||
var matchedScenarios = this.scenarios.filter(function (item) {
|
||
return item.projectId === projectId;
|
||
});
|
||
|
||
return matchedScenarios;
|
||
},
|
||
|
||
getScenario: function (scenarioId) {
|
||
var matchedScenarios = this.scenarios.filter(function (item) {
|
||
return item.scenarioId === scenarioId;
|
||
});
|
||
if (matchedScenarios.length > 0) {
|
||
return matchedScenarios[0];
|
||
}
|
||
|
||
return null;
|
||
}
|
||
};
|
||
|
||
$.fn.scenarioComparer = function (option, args) {
|
||
return this.each(function () {
|
||
var $this = $(this),
|
||
data = $this.data('scenarioComparer'),
|
||
options = $.extend({}, $.fn.scenarioComparer.defaults, $this.data(), typeof option === 'object' && option);
|
||
|
||
if (!data) $this.data('scenarioComparer', (data = new ScenarioComparer(this, options)));
|
||
if (typeof option === 'string')
|
||
data[option].apply(data, [].concat(args));
|
||
});
|
||
};
|
||
$.fn.scenarioComparer.defaults = {
|
||
checkBoxSelector: "input.scenario-comparer",
|
||
compareButtonSelector: "a.scenario-comparer",
|
||
modalSelector: "#compare-scenarios-modal",
|
||
compareUrl: "",
|
||
minStartDate: null,
|
||
maxEndDate: null,
|
||
};
|
||
|
||
$.fn.scenarioComparer.Constructor = ScenarioComparer;
|
||
}(jQuery)); |