403 lines
18 KiB
JavaScript
403 lines
18 KiB
JavaScript
if (typeof ($wosurvey) !== "function") {
|
|
$wosurvey = function (c) {
|
|
var _this = this;
|
|
this.content = c;
|
|
this.questions = [];
|
|
this.questionmodules = [];
|
|
|
|
this.updateQuestions = function (qs) {
|
|
this.questions = qs;
|
|
if (!this.questions) {
|
|
return;
|
|
}
|
|
this.questionmodules = [];
|
|
this.content.children('.question-holder').remove();
|
|
for (var i = 0; i < this.questions.length; i++) {
|
|
this.addQuestionModule(this.questions[i]);
|
|
}
|
|
};
|
|
|
|
this.addQuestionModule = function (q) {
|
|
var qmodule = new $wosurveyquestion(_this, q, _this.questions.indexOf(q));
|
|
qmodule.ondelete = function (qm) {//qm:question module
|
|
_this.questions.splice(_this.questions.indexOf(qm.question), 1);
|
|
_this.questionmodules.splice(_this.questionmodules.indexOf(qm), 1);
|
|
}
|
|
if (_this.questions.indexOf(q) < 0)
|
|
_this.questions.push(q);
|
|
_this.questionmodules.push(qmodule);
|
|
_this.content.append(qmodule.createContent());
|
|
};
|
|
|
|
this.getQuestionInputs = function () {
|
|
this.questions = [];
|
|
if (this.questionmodules.length > 0) {
|
|
for (var i = 0; i < this.questionmodules.length; i++) {
|
|
var q = this.questionmodules[i].getQuestionValue();
|
|
if (!q) return false;
|
|
this.questions.push(q);
|
|
}
|
|
}
|
|
return this.questions;
|
|
};
|
|
}
|
|
|
|
$wosurveyquestion = function (survey, q, index) {
|
|
var wosurvey = survey;
|
|
var _this = this;
|
|
this.question = q;
|
|
this.index = index;
|
|
this.ondelete = null;
|
|
this.txtName = null;
|
|
this.txttitle = null;
|
|
this.txttitletips = null;
|
|
this.txtNotes = null;
|
|
this.selQuestionType = null;
|
|
this.chkMultipleSelect = null;
|
|
this.chkisrequired = null;
|
|
this.additemspan = null;
|
|
this.multipleselectdiv = null;
|
|
this.optionmodules = [];
|
|
|
|
this.holder = null;
|
|
|
|
this.createContent = function () {
|
|
var holder = $('<div class="questionitem"></div>');
|
|
_this.holder = holder;
|
|
var qholder = $('<div class="question-holder"></div>');//question holder
|
|
holder.append(qholder);
|
|
_this.questionholder = qholder;
|
|
var oholder = $('<div style="display:none;"></div>');//option holder
|
|
holder.append(oholder);
|
|
_this.optionholder = oholder;
|
|
|
|
if (this.index % 2 == 1)
|
|
qholder.addClass('holder-even');
|
|
var drag = $('<div class="question-icon" style="width:30px;"><em class="spanbtn iconmove rowdrag"></em></div>');
|
|
qholder.append(drag);
|
|
|
|
drag.attr('draggable', true);
|
|
holder.bind('dragstart', function (e) {
|
|
draggingobj = _this;
|
|
});
|
|
holder.bind('dragend', function (e) {
|
|
draggingobj = null;
|
|
});
|
|
holder.bind('dragover', function (e) {
|
|
e.originalEvent.preventDefault()
|
|
});
|
|
holder.bind('drop', function (e) {
|
|
if (!draggingobj || _this === draggingobj)
|
|
return;
|
|
var t = $(this);
|
|
var after = e.originalEvent.clientY > t.offset().top + t.height() / 2;
|
|
if (after)
|
|
t.after(draggingobj.holder);
|
|
else
|
|
t.before(draggingobj.holder);
|
|
|
|
var index = wosurvey.questions.indexOf(draggingobj.question)
|
|
if (index >= 0) {
|
|
wosurvey.questions.splice(index, 1);
|
|
wosurvey.questionmodules.splice(index, 1);
|
|
}
|
|
|
|
var tindex = 0;
|
|
if (_this.question) {
|
|
tindex = wosurvey.questions.indexOf(_this.question);
|
|
if (after)
|
|
tindex = tindex + 1;
|
|
}
|
|
if (tindex >= 0) {
|
|
wosurvey.questions.splice(tindex, 0, draggingobj.question);
|
|
wosurvey.questionmodules.splice(tindex, 0, draggingobj);
|
|
}
|
|
});
|
|
|
|
_this.txtName = $('<input type="text" class="question-input" maxlength="20" autocomplete="off" style="width:126px;margin-left:5px;" />');
|
|
qholder.append($('<div class="question-cell question-name" style="width: 160px;"></div>').append('<span class="redasterisk">*</span>').append(this.txtName));
|
|
|
|
_this.txttitle = $('<input type="text" class="question-input" maxlength="200" autocomplete="off" style="width:246px;margin-left:5px;" />');
|
|
qholder.append($('<div class="question-cell question-display" style="width: 300px;"></div>').append('<span class="redasterisk">*</span>').append(this.txttitle));
|
|
|
|
_this.txttitletips = $('<input type="text" class="question-input" maxlength="500" autocomplete="off" style="width:246px;margin-left:5px;" />');
|
|
qholder.append($('<div class="question-cell question-display" style="width: 300px;"></div>').append(this.txttitletips));
|
|
|
|
|
|
//this.selQuestionType在createQuestionTypeCtrl中赋值
|
|
var qt = createQuestionTypeCtrl().css('width', 140);
|
|
qholder.append($('<div class="question-cell question-type" style="width: 240px"></div>').append(qt));
|
|
createOptions();
|
|
|
|
_this.chkisrequired = $('<input type="checkbox"/>');
|
|
qholder.append($('<div class="question-cell question-display" style="width: 100px;"></div>').append(this.chkisrequired));
|
|
|
|
_this.txtNotes = $('<textarea class="question-input" maxlength="500" autocomplete="off" style="width:94%;margin-top:5px;"></textarea>');
|
|
qholder.append($('<div class="question-cell question-notes" style="flex-grow: 1;white-space:normal;"></div>').append(this.txtNotes));
|
|
var funcs = $('<div class="question-cell question-func" style="width: 90px;text-align:right;padding-right:20px;"></div>');
|
|
qholder.append(funcs);
|
|
|
|
if (!surveytempreadonly) {
|
|
funcs.append($('<em class="spanbtn icondelete"></em>').click(function () {
|
|
showConfirm(GetTextByKey("P_IPT_AREYOUSUREYOUWANTTODELETETHISQUESTION", 'Are you sure you want to delete this question?'), GetTextByKey("P_IPT_DELETEQUESTION", 'Delete Question'), function () {
|
|
if (_this.ondelete) {
|
|
_this.holder.remove();
|
|
_this.ondelete(_this);
|
|
}
|
|
});
|
|
}).attr('title', GetTextByKey("P_IPT_DELETEQUESTION", 'Delete Question')));
|
|
}
|
|
|
|
|
|
function createQuestionTypeCtrl() {
|
|
var tb = $('<table style="line-height:unset;"></table>');
|
|
var tr = $('<tr></tr>');
|
|
tb.append(tr);
|
|
var td = $('<td></td>');
|
|
tr.append(td);
|
|
_this.selQuestionType = createQuestionType().addClass('question-input');
|
|
td.append(_this.selQuestionType);
|
|
_this.selQuestionType.change(function () {
|
|
_this.questionTypeChange();
|
|
});
|
|
|
|
td = $('<td></td>');
|
|
tr.append(td);
|
|
_this.btnoption = $('<span class="spanbtn iconangleleft" style="font-size:18px;"></span>');
|
|
td.append(_this.btnoption);
|
|
_this.btnoption.click(function () {
|
|
var icon = $(this);
|
|
var type = _this.selQuestionType.val();
|
|
if (icon.hasClass('iconangleleft')) {
|
|
icon.removeClass('iconangleleft').addClass('iconangledown');
|
|
_this.optionholder.show();
|
|
if (type === "2")
|
|
_this.multipleselectdiv.show();
|
|
else
|
|
_this.multipleselectdiv.hide();
|
|
}
|
|
else {
|
|
icon.removeClass('iconangledown').addClass('iconangleleft');
|
|
_this.optionholder.hide();
|
|
}
|
|
});
|
|
|
|
if (_this.question && (_this.question.QuestionType === "2" || _this.question.QuestionType === "4"))
|
|
_this.btnoption.show();
|
|
else
|
|
_this.btnoption.hide();
|
|
return tb;
|
|
}
|
|
|
|
function createOptions() {
|
|
_this.optiondiv = $('<div style="width:500px;margin-left:540px;padding-left:5px;padding-bottom:5px; border: 1px solid #a8a8a8;line-height:32px;"></div>');
|
|
_this.optionholder.append(_this.optiondiv);
|
|
_this.multipleselectdiv = $('<span style="margin-left:50px;"><label>' + GetTextByKey("P_IPT_MULTIPLESELECT_COLON", "Multiple Select:") + '</label></span>');
|
|
_this.chkMultipleSelect = $('<input type="checkbox" style="margin-left:10px;" />');
|
|
_this.multipleselectdiv.append(_this.chkMultipleSelect);
|
|
_this.optiondiv.append('<span style="font-weight:bold;margin-right:5px;">' + GetTextByKey("P_IPT_OPTIONS", "Options") + '</span>');
|
|
if (!surveytempreadonly) {
|
|
_this.additemspan = $('<span class="sbutton iconadd">' + GetTextByKey("P_IPT_ADDITEM", "Add Item") + '</span>').click(function () {
|
|
_this.addOption();
|
|
});
|
|
_this.optiondiv.append(_this.additemspan);
|
|
}
|
|
_this.optiondiv.append(_this.multipleselectdiv);
|
|
}
|
|
|
|
function createQuestionType() {
|
|
var items = [];
|
|
items.push({ 'Key': 0, "Value": GetTextByKey("P_WOS_SINGLELINETEXT", "Single Line Text") });
|
|
items.push({ 'Key': 1, "Value": GetTextByKey("P_WOS_MULTIPLELINETEXT", "Multiple Line Text") });
|
|
items.push({ 'Key': 2, "Value": GetTextByKey("P_WOS_CHOOSE", "Choose") });
|
|
items.push({ 'Key': 3, "Value": GetTextByKey("P_WOS_YESORNO", "Yes Or No") });
|
|
items.push({ 'Key': 4, "Value": GetTextByKey("P_WOS_SCORE", "Score") });
|
|
var sel = $('<select style="width:140px; height:26px;"></select>');
|
|
for (var i = 0; i < items.length; i++) {
|
|
var item = items[i];
|
|
sel.append('<option value="' + item.Key + '">' + item.Value + '</option>');
|
|
}
|
|
return sel;
|
|
}
|
|
|
|
this.questionTypeChange = function () {
|
|
var _this = this;
|
|
_this.optionmodules = [];
|
|
_this.optionholder.find('table').remove();
|
|
var type = _this.selQuestionType.val();
|
|
//questiontype = type;
|
|
if (type === "2" || type === "4") {
|
|
_this.btnoption.show();
|
|
_this.optionholder.find('.sbutton').show();
|
|
if (_this.btnoption.hasClass('iconangledown')) {
|
|
if (type === "2")
|
|
_this.multipleselectdiv.show();
|
|
else
|
|
_this.multipleselectdiv.hide();
|
|
|
|
_this.optionholder.show();
|
|
}
|
|
|
|
if (_this.question) {
|
|
for (var i = 0; i < _this.question.AvailableItems.length; i++) {
|
|
_this.addOption(_this.question.AvailableItems[i]);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
_this.btnoption.hide();
|
|
_this.optionholder.hide()
|
|
}
|
|
}
|
|
|
|
this.addOption = function (item) {
|
|
var _this = this;
|
|
var opcontent = _this.createOptionContent(item);
|
|
_this.optionmodules.push(opcontent);
|
|
_this.optiondiv.append(opcontent);
|
|
}
|
|
|
|
this.createOptionContent = function (item) {
|
|
var tb = $('<table style="border: 1px solid #a8a8a8; margin-top:2px;line-height:32px;"></table>');
|
|
var tr = $('<tr></tr>');
|
|
tb.append(tr);
|
|
var opkey = $('<input type="text" class="form-control" maxlength="20" style="width:100px;margin-left:5px;"/>');
|
|
var td = $('<td style="padding-left:10px;">' + GetTextByKey('P_WOS_VALUE', 'Value: ') + '</td>');
|
|
if (_this.selQuestionType.val() === "4") {
|
|
td.text(GetTextByKey('P_WOS_SCORE_COLON', 'Score: '));
|
|
}
|
|
td.append('<span class="redasterisk">*</span>');
|
|
td.append(opkey);
|
|
tr.append(td);
|
|
|
|
var optext = $('<input type="text" class="form-control" maxlength="100" style="width:180px;margin-left:5px;"/>');
|
|
td = $('<td>' + GetTextByKey('P_WOS_DISPLAYTEXT_COLON', 'Display Text: ') + '<span class="redasterisk">*</span></td>');
|
|
td.append(optext);
|
|
tr.append(td);
|
|
|
|
td = $('<td style="width:30px;"></td>');
|
|
tr.append(td);
|
|
if (!surveytempreadonly) {
|
|
var deleteoptionbtn = $('<em class="spanbtn icondelete"></em>').data('tb', tb);
|
|
td.append(deleteoptionbtn.click(function () {
|
|
this.parentElement.parentElement.parentElement.remove();
|
|
var d_tb = $(this).data('tb');
|
|
_this.optionmodules.splice(_this.optionmodules.indexOf(d_tb), 1);
|
|
}));
|
|
}
|
|
|
|
tb.getOptionValue = function () {
|
|
return {
|
|
Key: opkey.val(),
|
|
Value: optext.val()
|
|
}
|
|
}
|
|
tb.setOptionValue = function (key, text) {
|
|
opkey.val(key);
|
|
optext.val(text);
|
|
}
|
|
tb.setDisabled = function () {
|
|
opkey.prop('disabled', true);
|
|
optext.prop('disabled', true);
|
|
}
|
|
if (item)
|
|
tb.setOptionValue(item.Key, item.Value);
|
|
|
|
if (surveytempreadonly)
|
|
tb.setDisabled();
|
|
|
|
return tb;
|
|
}
|
|
|
|
this.updateContent = function (question) {
|
|
if (this.question != question) {
|
|
this.question = question;
|
|
}
|
|
|
|
this.txtName.val(question.Name);
|
|
this.txttitle.val(question.Title);
|
|
this.txttitletips.val(question.TitleTips);
|
|
this.selQuestionType.val(question.QuestionType);
|
|
this.questionTypeChange();
|
|
this.txtNotes.val(question.Notes);
|
|
this.chkMultipleSelect.attr('checked', question.MultipleSelect);
|
|
this.chkisrequired.attr('checked', question.IsRequired);
|
|
};
|
|
|
|
this.getQuestionValue = function () {
|
|
var question = this.question;
|
|
question.Name = this.txtName.val();
|
|
question.Title = this.txttitle.val();
|
|
question.TitleTips = this.txttitletips.val();
|
|
question.QuestionType = this.selQuestionType.val();
|
|
question.Notes = this.txtNotes.val();
|
|
question.IsRequired = this.chkisrequired.prop('checked');
|
|
if (question.QuestionType === "2")
|
|
question.MultipleSelect = this.chkMultipleSelect.prop('checked');
|
|
else
|
|
question.MultipleSelect = false;
|
|
|
|
question.AvailableItems = [];
|
|
var alerttitle = GetTextByKey("P_WOS_QUESTION", "Question");
|
|
if (!question.Name || question.Name.length == 0) {
|
|
showAlert(GetTextByKey("P_WOS_QUESTIONNAMENOTBEEMPTY", 'Question Name cannot be empty.'), alerttitle);
|
|
return false;
|
|
}
|
|
if (!question.Title || question.Title.length == 0) {
|
|
showAlert(GetTextByKey("P_WOS_QUESTIONTITLENOTBEEMPTY", 'Question Title cannot be empty.'), alerttitle);
|
|
return false;
|
|
}
|
|
|
|
if (this.optionmodules.length > 0) {
|
|
for (var i = 0; i < this.optionmodules.length; i++) {
|
|
var selectitem = this.optionmodules[i].getOptionValue();
|
|
|
|
if (!selectitem.Key || selectitem.Key.length == 0) {
|
|
showAlert(GetTextByKey("P_WOS_VALUENOTBEEMPTY", 'Value cannot be empty.'), alerttitle);
|
|
return false;
|
|
}
|
|
if (question.QuestionType === "4") {
|
|
if (!IsPositiveInteger1.test(selectitem.Key)) {
|
|
showAlert(GetTextByKey("P_WOS_SCOREISNOTAVALIDINTEGER", 'Score is not a valid integer.'), alerttitle);
|
|
return false;
|
|
}
|
|
}
|
|
if (!selectitem.Value || selectitem.Value.length == 0) {
|
|
showAlert(GetTextByKey("P_WOS_DISPLAYNAMENOTBEEMPTY", 'Display Name cannot be empty.'), alerttitle);
|
|
return false;
|
|
}
|
|
question.AvailableItems.push(selectitem)
|
|
}
|
|
}
|
|
return question;
|
|
};
|
|
|
|
|
|
_this.updateContent(_this.question);
|
|
if (surveytempreadonly)
|
|
setDisabled();
|
|
|
|
function setDisabled() {
|
|
_this.txtName.prop('disabled', true);
|
|
_this.txttitle.prop('disabled', true);
|
|
_this.txttitletips.prop('disabled', true);
|
|
_this.selQuestionType.prop('disabled', true);
|
|
_this.txtNotes.prop('disabled', true);
|
|
_this.chkMultipleSelect.prop('disabled', true);
|
|
_this.chkisrequired.prop('disabled', true);
|
|
}
|
|
return holder;
|
|
};
|
|
|
|
}
|
|
}
|
|
|
|
var IsPositiveInteger1 = /^[1-9]\d*$/;
|
|
|
|
function onAddQuestion() {
|
|
if (!wosurveyCtrl) {
|
|
wosurveyCtrl = new $wosurvey($('#questionlist'));
|
|
}
|
|
var question = { QuestionType: '0', SeverityLevel: 0, AvailableItems: [] };
|
|
wosurveyCtrl.addQuestionModule(question);
|
|
} |