mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-14 05:05:55 +08:00
265 lines
8.9 KiB
JavaScript
265 lines
8.9 KiB
JavaScript
//= require datatables
|
||
|
||
// Create custom field ajax
|
||
$("#modal-create-custom-field").on("show.bs.modal", function(event) {
|
||
// Clear input when modal is opened
|
||
input = $(this).find("input#name-input");
|
||
input.val("");
|
||
input.closest(".form-group").removeClass("has-error");
|
||
input.closest(".form-group").find(".help-block").remove();
|
||
});
|
||
$("#modal-create-custom-field").on("shown.bs.modal", function(event) {
|
||
$(this).find("input#name-input").focus();
|
||
});
|
||
|
||
$("form#new_custom_field").on("ajax:success", function(ev, data, status) {
|
||
$("#modal-create-custom-field").modal("hide");
|
||
|
||
// Reload page with URL parameter of newly created field
|
||
window.location.href = addParam(window.location.href, "new_col");
|
||
});
|
||
|
||
$("form#new_custom_field").on("ajax:error", function(e, data, status, xhr) {
|
||
$('form').renderFormErrors('custom_field', data.responseJSON, true, e);
|
||
});
|
||
|
||
// Create sample type ajax
|
||
$("#modal-create-sample-type").on("show.bs.modal", function(event) {
|
||
// Clear input when modal is opened
|
||
input = $(this).find("input#name-input");
|
||
input.val("");
|
||
input.closest(".form-group").removeClass("has-error");
|
||
input.closest(".form-group").find(".help-block").remove();
|
||
});
|
||
|
||
$("#modal-create-sample-type").on("shown.bs.modal", function(event) {
|
||
$(this).find("input#name-input").focus();
|
||
});
|
||
|
||
$("form#new_sample_type").on("ajax:success", function(ev, data, status) {
|
||
$("#modal-create-sample-type").modal("hide");
|
||
updateSamplesTypesandGroups();
|
||
sampleAlertMsg(data.flash, "success");
|
||
currentMode = "viewMode";
|
||
updateButtons();
|
||
});
|
||
|
||
$("form#new_sample_type").on("ajax:error", function(e, data, status, xhr) {
|
||
$('form').renderFormErrors('sample_type', data.responseJSON, true, e);
|
||
});
|
||
|
||
// Create sample group ajax
|
||
$("#modal-create-sample-group").on("show.bs.modal", function(event) {
|
||
// Clear input when modal is opened
|
||
input = $(this).find("input#name-input");
|
||
input.val("");
|
||
input.closest(".form-group").removeClass("has-error");
|
||
input.closest(".form-group").find(".help-block").remove();
|
||
});
|
||
|
||
$("#modal-create-sample-group").on("shown.bs.modal", function(event) {
|
||
$(this).find("input#name-input").focus();
|
||
});
|
||
|
||
$("form#new_sample_group").on("ajax:success", function(ev, data, status) {
|
||
$("#modal-create-sample-group").modal("hide");
|
||
updateSamplesTypesandGroups();
|
||
sampleAlertMsg(data.flash, "success");
|
||
currentMode = "viewMode";
|
||
updateButtons();
|
||
});
|
||
|
||
$("form#new_sample_group").on("ajax:error", function(e, data, status, xhr) {
|
||
$('form').renderFormErrors('sample_group', data.responseJSON, true, e);
|
||
});
|
||
|
||
|
||
// Create import samples ajax
|
||
$("#modal-import-samples").on("show.bs.modal", function(event) {
|
||
formGroup = $(this).find(".form-group");
|
||
formGroup.removeClass("has-error");
|
||
formGroup.find(".help-block").remove();
|
||
});
|
||
|
||
$("form#form-samples-file")
|
||
.on("ajax:success", function(ev, data, status) {
|
||
$("#modal-parse-samples").html(data.html);
|
||
$("#modal-import-samples").modal("hide");
|
||
$("#modal-parse-samples").modal("show");
|
||
})
|
||
.on("ajax:error", function(ev, data, status) {
|
||
$(this).find(".form-group").addClass("has-error");
|
||
$(this).find(".form-group").find(".help-block").remove();
|
||
$(this).find(".form-group").append("<span class='help-block'>" + data.responseJSON.message + "</span>");
|
||
});
|
||
|
||
// Fetch samples data and updates the select options fields for
|
||
// sample group and sample type column
|
||
function updateSamplesTypesandGroups() {
|
||
changeToEditMode();
|
||
updateButtons();
|
||
|
||
$.ajax({
|
||
url: $("table#samples").data("new-sample"),
|
||
type: "GET",
|
||
dataType: "json",
|
||
success: function (data) {
|
||
$("select[name=sample_group_id]").each(function(){
|
||
var sample_group = $(this).val();
|
||
var selectGroup = createSampleGroupSelect(data.sample_groups, sample_group);
|
||
var gtd = $(this).parent("td");
|
||
gtd.html(selectGroup[0]);
|
||
});
|
||
$("select[name=sample_type_id]").each(function(){
|
||
var sample_type = $(this).val();
|
||
var selectType = createSampleTypeSelect(data.sample_types, sample_type);
|
||
var ttd = $(this).parent("td");
|
||
ttd.html(selectType[0]);
|
||
});
|
||
|
||
$("select[name=sample_group_id]").selectpicker();
|
||
$("select[name=sample_type_id]").selectpicker();
|
||
},
|
||
error: function (e, eData, status, xhr) {
|
||
if (e.status == 403)
|
||
showAlertMessage(I18n.t("samples.js.permission_error"));
|
||
changeToViewMode();
|
||
updateButtons();
|
||
}
|
||
});
|
||
}
|
||
|
||
function sampleAlertMsg(message, type) {
|
||
var alertType, glyphSign;
|
||
if (type == 'success') {
|
||
alertType = ' alert-success ';
|
||
glyphSign = ' glyphicon-ok-sign ';
|
||
} else if (type == 'danger') {
|
||
alertType = ' alert-danger ';
|
||
glyphSign = ' glyphicon-exclamation-sign ';
|
||
}
|
||
var htmlSnippet = '<div class="alert' + alertType + 'alert-dismissable alert-floating">' +
|
||
'<div class="container">' +
|
||
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' +
|
||
'<span class="glyphicon' + glyphSign + '"></span>' +
|
||
'<span>'+ message +'</span>' +
|
||
'</div>' +
|
||
'</div>';
|
||
$('#notifications').html(htmlSnippet);
|
||
$('#content-wrapper').addClass('alert-shown');
|
||
}
|
||
|
||
function sampleAlertMsgHide() {
|
||
$('#notifications').html('<div></div>');
|
||
$('#content-wrapper').removeClass('alert-shown');
|
||
}
|
||
|
||
function initTutorial() {
|
||
var currentStep = parseInt(Cookies.get('current_tutorial_step'), 10);
|
||
if (currentStep == 8)
|
||
currentStep++;
|
||
if (showTutorial() && (currentStep > 12 && currentStep < 16)) {
|
||
var samplesTutorial =$("#samples-toolbar").attr("data-samples-step-text");
|
||
var breadcrumbsTutorial = $("#samples-toolbar").attr("data-breadcrumbs-step-text");
|
||
|
||
introJs()
|
||
.setOptions({
|
||
steps: [
|
||
{
|
||
element: document.getElementById("importSamplesButton"),
|
||
intro: samplesTutorial
|
||
},
|
||
{
|
||
element: document.getElementById("secondary-menu"),
|
||
intro: breadcrumbsTutorial,
|
||
tooltipClass: 'custom next-page-link',
|
||
}
|
||
],
|
||
overlayOpacity: '0.1',
|
||
nextLabel: 'Next',
|
||
doneLabel: 'End tutorial',
|
||
skipLabel: 'End tutorial',
|
||
showBullets: false,
|
||
showStepNumbers: false,
|
||
exitOnOverlayClick: false,
|
||
exitOnEsc: false,
|
||
disableInteraction: true,
|
||
tooltipClass: "custom"
|
||
})
|
||
.onafterchange(function (tarEl) {
|
||
Cookies.set('current_tutorial_step', this._currentStep + 14);
|
||
|
||
if (this._currentStep == 1) {
|
||
setTimeout(function() {
|
||
$('.next-page-link a.introjs-nextbutton')
|
||
.removeClass('introjs-disabled')
|
||
.attr('href', $("#reports-nav-tab a").attr('href'));
|
||
$('.introjs-disableInteraction').remove();
|
||
positionTutorialTooltip();
|
||
}, 500);
|
||
} else {
|
||
positionTutorialTooltip();
|
||
}
|
||
})
|
||
.goToStep(currentStep == 15 ? 2 : 1)
|
||
.start();
|
||
|
||
// Destroy first-time tutorial cookies when skip tutorial
|
||
// or end tutorial is clicked
|
||
$(".introjs-skipbutton").each(function (){
|
||
$(this).click(function (){
|
||
Cookies.remove('tutorial_data');
|
||
Cookies.remove('current_tutorial_step');
|
||
restore_after_tutorial();
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
function positionTutorialTooltip() {
|
||
if (Cookies.get('current_tutorial_step') == 13) {
|
||
if ($("#reports-nav-tab").offset().left == 0) {
|
||
$(".introjs-tooltip").css("left", (window.innerWidth / 2 - 50) + "px");
|
||
$(".introjs-tooltip").addClass("repositioned");
|
||
} else if ($(".introjs-tooltip").hasClass("repositioned")) {
|
||
$(".introjs-tooltip").css("left", "");
|
||
$(".introjs-tooltip").removeClass("repositioned");
|
||
}
|
||
} else {
|
||
if ($(".introjs-tooltip").offset().left > window.innerWidth) {
|
||
$(".introjs-tooltip").css("left", (window.innerWidth / 2 - 50) + "px");
|
||
$(".introjs-tooltip").addClass("repositioned");
|
||
} else if ($(".introjs-tooltip").hasClass("repositioned")) {
|
||
$(".introjs-tooltip").css("left", "");
|
||
$(".introjs-tooltip").removeClass("repositioned");
|
||
}
|
||
}
|
||
};
|
||
|
||
function showTutorial() {
|
||
var tutorialData;
|
||
if (Cookies.get('tutorial_data'))
|
||
tutorialData = JSON.parse(Cookies.get('tutorial_data'));
|
||
else
|
||
return false;
|
||
var tutorialModuleId = tutorialData[0].qpcr_module;
|
||
var currentModuleId = $("#samples-toolbar").attr("data-module-id");
|
||
return tutorialModuleId == currentModuleId;
|
||
}
|
||
|
||
function samples_tutorial_helper(){
|
||
if( $('div').hasClass('introjs-overlay') ){
|
||
$.each( $('#secondary-menu').find('a'), function(){
|
||
$(this).css({ 'pointer-events': 'none' });
|
||
});
|
||
}
|
||
}
|
||
|
||
function restore_after_tutorial(){
|
||
$.each( $('#secondary-menu').find('a'), function(){
|
||
$(this).css({ 'pointer-events': 'auto' });
|
||
});
|
||
}
|
||
// Initialize first-time tutorial
|
||
initTutorial();
|
||
samples_tutorial_helper();
|