spen
/
survey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bug. 

change result chart to year seperated.
Add color recover to default feature.
change consent checkbox to required.
This commit is contained in:
BoHung Chiu 2021-11-14 12:59:03 +08:00
parent 9b6e011286
commit cc4131c05e
10 changed files with 336 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/controllers/admin/surveys_controller.rb
View File

@ -234,6 +234,9 @@ class Admin::SurveysController < OrbitAdminController
end end
def delete_section def delete_section
@section = SurveySection.find(params[:id])
@section.destroy
redirect_to :back
end end
def create_section def create_section

4
app/controllers/surveys_controller.rb
View File

@ -300,7 +300,9 @@ class SurveysController < ApplicationController
end end
end end
@answer_model.save! @answer_model.save!
params[:url] = params[:show_page_url] show_page = (OrbitHelper.page.nil? rescue true) ? Page.where(:page_id=>params["page_id"]).first : OrbitHelper.page
show_page_url = show_page.get_url rescue show_page.url
params[:url] = show_page_url
OrbitHelper.set_params(params,current_user) OrbitHelper.set_params(params,current_user)
redirect_to OrbitHelper.url_to_show(@survey.to_param) + "?method=answer_success&ans=#{@answer_model.id.to_s}" redirect_to OrbitHelper.url_to_show(@survey.to_param) + "?method=answer_success&ans=#{@answer_model.id.to_s}"
else else

13
app/models/questionnaire_survey.rb
View File

@ -67,17 +67,17 @@ class QuestionnaireSurvey
end end
def check_need_update def check_need_update
if self.result_criteria_changed? if self.result_criteria_changed?
old_colors = self.result_criteria_was.map{|c| c["color"].blank? ? '#ffffff' : c["color"]} old_colors = self.result_criteria_was.map{|c| c["color"].blank? ? '#ffffff' : c["color"]} rescue []
new_colors = self.result_criteria.map{|c| c["color"].blank? ? '#ffffff' : c["color"]} new_colors = self.result_criteria.map{|c| c["color"].blank? ? '#ffffff' : c["color"]} rescue []
new_colors_uniq_count = new_colors.uniq.count new_colors_uniq_count = new_colors.uniq.count
self.need_assign_color = (new_colors_uniq_count > 1) self.need_assign_color = (new_colors_uniq_count > 1)
if old_colors != new_colors if old_colors != new_colors
self.need_update_color = true self.need_update_color = true
elsif new_colors_uniq_count > 1 elsif new_colors_uniq_count > 1
old_questions = self.result_criteria_was.map{|c| c["questions"]} old_questions = self.result_criteria_was.map{|c| c["questions"]} rescue []
old_range = self.result_criteria_was.map{|c| c["range"]} old_range = self.result_criteria_was.map{|c| c["range"]} rescue []
new_questions = self.result_criteria.map{|c| c["questions"]} new_questions = self.result_criteria.map{|c| c["questions"]} rescue []
new_range = self.result_criteria.map{|c| c["range"]} new_range = self.result_criteria.map{|c| c["range"]} rescue []
if old_questions != new_questions || old_range != new_range if old_questions != new_questions || old_range != new_range
self.need_update_color = true self.need_update_color = true
end end
@ -193,6 +193,7 @@ class QuestionnaireSurvey
if self.enable_consent_feature if self.enable_consent_feature
answers[i]["agree"] = (answer.consent_used ? agree_trans : disagree_trans) answers[i]["agree"] = (answer.consent_used ? agree_trans : disagree_trans)
end end
answers[i]["scored_points"] = answer.scored_points
end end
SurveysHelper.set_locale(I18n.locale) SurveysHelper.set_locale(I18n.locale)
survey_questions.each do |question| survey_questions.each do |question|

278
app/views/admin/surveys/answer_sets.html.erb
View File

@ -57,7 +57,7 @@
<% @survey_answers.options = {} %> <% @survey_answers.options = {} %>
<div style="clear: both;"></div> <div style="clear: both;"></div>
<style type="text/css"> <style type="text/css">
#tooltip{ .tooltip{
position: absolute; position: absolute;
background: #ffffff; background: #ffffff;
z-index: 1; z-index: 1;
@ -65,16 +65,13 @@
padding: 2px; padding: 2px;
display: none; display: none;
font-weight: bold; font-weight: bold;
font-size: 1em;
opacity: 1;
} }
.flot_wrapper{ .flot_wrapper{
position: relative; position: relative;
} }
</style> </style>
<div class="flot_wrapper">
<span id="tooltip"></span>
<div class="legend-container"></div>
<div id="resultchart-container" class="flot-placeholder"></div>
</div>
<%= javascript_include_tag "survey/jquery.colorhelpers.js" %> <%= javascript_include_tag "survey/jquery.colorhelpers.js" %>
<%= javascript_include_tag "survey/jquery.canvaswrapper.js" %> <%= javascript_include_tag "survey/jquery.canvaswrapper.js" %>
<%= javascript_include_tag "survey/jquery.flot_3.0.js" %> <%= javascript_include_tag "survey/jquery.flot_3.0.js" %>
@ -93,140 +90,168 @@
font-weight: bold; font-weight: bold;
} }
</style> </style>
<script> <% @survey_answers = @survey_answers.order_by(:created_at=>1) %>
<% if @survey.need_assign_color %> <% last_year = @survey_answers.last.created_at.year %>
<% data = @survey_answers.order_by(:created_at=>1).group_by(&:color).map{|k,sas| [k, sas.map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} ] }.to_h %> <% first_year = @survey_answers.first.created_at.year %>
var min_time = <%= data.map{|k,d| d[0][0] rescue 0}.min %>; <% all_years = (first_year..last_year).to_a.reverse %>
var max_time = <%= data.map{|k,d| d[-1][0] rescue 0}.max %>; <% all_years.each do |year|%>
<% all_data = data.values.flatten(1) %> <% start_d = DateTime.parse("#{year}/1/1 #{Time.zone}") %>
<% y_data = all_data.map{|v| v[1]} %> <% end_d = start_d.end_of_year %>
var min_y = <%= y_data.min.to_i %>; <% survey_answers_sep = @survey_answers.where(:created_at.gte=>start_d).and(:created_at.lte=>end_d) %>
var max_y = <%= y_data.max.to_i %>; <% next if survey_answers_sep.count == 0 %>
<% else %> <div class="flot_wrapper" id="<%=year%>_block">
<% data = @survey_answers.order_by(:created_at=>1).map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} %> <h4 style="text-align: center;"><%= year %></h4>
var min_time = <%= data[0][0] rescue 0 %>; <span class="tooltip"></span>
var max_time = <%= data[-1][0] rescue 0 %>; <div class="legend-container"></div>
var min_y = <%= data.map{|a| a[1]}.min.to_i %>; <div class="flot-placeholder"></div>
var max_y = <%= data.map{|a| a[1]}.max.to_i %>; </div>
<% end %> <script>
var xaxes = [{ (function(){
mode: "time", <% if @survey.need_assign_color %>
axisLabelUseCanvas: false, <% data = survey_answers_sep.group_by(&:color).map{|k,sas| [k, sas.map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} ] }.to_h %>
timeformat: "%Y/%m/%d", var min_time = <%= data.map{|k,d| d[0][0] rescue 0}.min %>;
timezone: "browser", var max_time = <%= data.map{|k,d| d[-1][0] rescue 0}.max %>;
font: { <% all_data = data.values.flatten(1) %>
size: '16', <% y_data = all_data.map{|v| v[1]} %>
color: 'black' var min_y = <%= y_data.min.to_i %>;
}, var max_y = <%= y_data.max.to_i %>;
// min: min_time, <% else %>
// max: max_time, <% data = survey_answers_sep.order_by(:created_at=>1).map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} %>
axisLabel: "<%=t("survey.taken_date")%>", var min_time = <%= data[0][0] rescue 0 %>;
position: "bottom", var max_time = <%= data[-1][0] rescue 0 %>;
}]; var min_y = <%= data.map{|a| a[1]}.min.to_i %>;
var yaxes = [{ var max_y = <%= data.map{|a| a[1]}.max.to_i %>;
use_min_force: false, //modify at jquery_flot_3.0.js <% end %>
axisLabelUseCanvas: false, var xaxes = [{
showTickLabels: 'all', mode: "time",
font: { axisLabelUseCanvas: false,
size: '16', timeformat: "%Y/%m/%d",
color: 'black' timezone: "browser",
}, font: {
// min: min_y, size: '16',
// max: max_y, color: 'black'
axisLabel: "<%=t("survey.result_score")%>",
position: "left",
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
}];
var options = {
series: {
lines: {
show: true,
lineWidth: 2,
steps: false , //畫斜線
is_sort: true
}, },
points: { // min: min_time,
radius: 5, // max: max_time,
show: true, axisLabel: "<%=t("survey.taken_date")%>",
fillColor: '#ffffff' position: "bottom",
}];
var yaxes = [{
use_min_force: false, //modify at jquery_flot_3.0.js
axisLabelUseCanvas: false,
showTickLabels: 'all',
font: {
size: '16',
color: 'black'
}, },
downsample: { // min: min_y,
threshold: 0 // max: max_y,
axisLabel: "<%=t("survey.result_score")%>",
position: "left",
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
}];
var options = {
series: {
lines: {
show: true,
lineWidth: 2,
steps: false , //畫斜線
is_sort: true
},
points: {
radius: 5,
show: true,
fillColor: '#ffffff'
},
downsample: {
threshold: 0
}
},
grid: {
hoverable: true,
clickable: true,
show: true
},
xaxes: xaxes,
yaxes: yaxes,
zoom: {
interactive: true
},
pan: {
interactive: true,
enableTouch: true
},
colors: ["#708fff"], //["#708fff","#ffc107","#96478c","#1e7e34"],
polycolors: ["#3f66f4"],//["#3f66f4","#ffc107","#dc3545","#1e7e34"],
// legend: {
// show: true,
// noColumns: 1
// },
bar: {
zero: false
} }
}, };
grid: { <% all_colors = @survey.result_criteria.map{|c| c["color"]}.select{|c| c.present?}.uniq %>
hoverable: true, var points_fillColor = "#ffffff";
clickable: true, var need_split_data = false;
show: true <% if all_colors.count == 1 %>
}, points_fillColor = "<%=all_colors[0]%>";
xaxes: xaxes, <% end %>
yaxes: yaxes, // options['legend']['container'] = $('.legend-container')[0];
zoom: { <% if @survey.need_assign_color %>
interactive: true options["series"]["lines"]["show"] = false;
}, <% label_name = @user.member_name rescue "NA" %>
pan: { var chart_data = <%= ([{"label"=> label_name, "data"=> all_data,
interactive: true, "color"=> "#708fff",
enableTouch: true "lines"=> {
}, "show"=> true,
colors: ["#708fff"], //["#708fff","#ffc107","#96478c","#1e7e34"], "lineWidth"=> 2,
polycolors: ["#3f66f4"],//["#3f66f4","#ffc107","#dc3545","#1e7e34"], "steps"=> false ,
// legend: { "is_sort"=> true
// show: true, }}] + data.map{|color,d| tmp_color=(color.blank? ? "#ffffff" : color);{"label"=>label_name, "data"=>d, "color"=> (tmp_color == "#ffffff" ? "#708fff" : tmp_color), "points"=>{
// noColumns: 1 "show"=> true,
// }, "fillColor"=> tmp_color
bar: { }}}).to_json.html_safe %>;
zero: false <% else %>
} var chart_data = [{"label": "<%=@user.member_name rescue "NA" %>", "data": <%= data.to_json.html_safe %>,"points": {
}; show: true,
<% all_colors = @survey.result_criteria.map{|c| c["color"]}.select{|c| c.present?}.uniq %> fillColor: points_fillColor
var points_fillColor = "#ffffff"; }}];
var need_split_data = false; <% end %>
<% if all_colors.count == 1 %> $(document).ready(function(){
points_fillColor = "<%=all_colors[0]%>"; var chart_height = $(window).outerWidth(true)*0.2;
<% end %> $("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
// options['legend']['container'] = $('.legend-container')[0]; })
<% if @survey.need_assign_color %> $(window).resize(function(){
options["series"]["lines"]["show"] = false; var chart_height = $(window).outerWidth(true)*0.2;
<% label_name = @user.member_name rescue "NA" %> $("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
var chart_data = <%= ([{"label"=> label_name, "data"=> all_data, })
"color"=> "#708fff", })();
"lines"=> { </script>
"show"=> true, <% end %>
"lineWidth"=> 2, <script>
"steps"=> false ,
"is_sort"=> true
}}] + data.map{|color,d| tmp_color=(color.blank? ? "#ffffff" : color);{"label"=>label_name, "data"=>d, "color"=> (tmp_color == "#ffffff" ? "#708fff" : tmp_color), "points"=>{
"show"=> true,
"fillColor"=> tmp_color
}}}).to_json.html_safe %>;
<% else %>
var chart_data = [{"label": "<%=@user.member_name rescue "NA" %>", "data": <%= data.to_json.html_safe %>,"points": {
show: true,
fillColor: points_fillColor
}}];
<% end %>
$(document).ready(function(){ $(document).ready(function(){
var chart_height = $(window).outerWidth(true)*0.2;
$("#resultchart-container").height(chart_height).plot(chart_data,options);
$(".flot-placeholder").bind("plothover", function (event, pos, item) { $(".flot-placeholder").bind("plothover", function (event, pos, item) {
if (!pos.x || !pos.y) { if (!pos.x || !pos.y) {
return; return;
} }
if (!item) { if (!item) {
$("#tooltip").hide(); $(this).siblings(".tooltip").hide();
} }
}); });
$(".flot-placeholder").bind("plotclick", function (event, pos, item) { $(".flot-placeholder").bind("plotclick", function (event, pos, item) {
if (!pos.x || !pos.y) { if (!pos.x || !pos.y || item == null) {
return; return;
} }
var tooltip = $(this).siblings(".tooltip");
console.log(tooltip)
var x = item.datapoint[0].toFixed(2), var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(0); y = item.datapoint[1].toFixed(0);
var date = new moment(Math.round(x)); var date = new moment(Math.round(x));
var tp = "(" + date.format("yyyy/MM/DD HH:mm") + ")" var tp = "(" + date.format("yyyy/MM/DD HH:mm") + ")"
$("#tooltip").html("<%=t("survey.type.0")%>: "+y+"<br>"+tp); tooltip.html("<%=t("survey.type.0")%>: "+y+"<br>"+tp);
var left = 0; var left = 0;
var content_width = tp.length*8.2 var content_width = tp.length*8.2
if (content_width+item.pageX+5>$(window).width()){ if (content_width+item.pageX+5>$(window).width()){
@ -235,14 +260,10 @@
left = item.pageX - content_width / 2; left = item.pageX - content_width / 2;
} }
var offset = $(this).parents(".flot_wrapper").eq(0).offset(); var offset = $(this).parents(".flot_wrapper").eq(0).offset();
$("#tooltip").css({top: item.pageY+5-offset.top, left: left-offset.left}) tooltip.css({top: item.pageY+5-offset.top, left: left-offset.left})
.fadeIn(200); .fadeIn(200);
}); });
}) })
$(window).resize(function(){
var chart_height = $(window).outerWidth(true)*0.2;
$("#resultchart-container").height(chart_height).plot(chart_data,options);
})
</script> </script>
<% else %> <% else %>
<table class="table main-list"> <table class="table main-list">
@ -254,6 +275,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<% @is_answer_list = true if !@answer_repeat%>
<% answers_nil = @survey_answers.nil? %>
<% (@survey_answer_groups || @survey_answers).each do |sa| %> <% (@survey_answer_groups || @survey_answers).each do |sa| %>
<tr> <tr>
<% user = sa.user.nil? ? nil : (User.find(sa.user) rescue nil) %> <% user = sa.user.nil? ? nil : (User.find(sa.user) rescue nil) %>
@ -268,6 +291,7 @@
<a class="btn btn-primary" href="/admin/surveys/<%= sa.id.to_s %>/answer_list"><%= t("survey.view") %>(<%=sa.survey_answer_ids.count%>)</a> <a class="btn btn-primary" href="/admin/surveys/<%= sa.id.to_s %>/answer_list"><%= t("survey.view") %>(<%=sa.survey_answer_ids.count%>)</a>
<button class="btn btn-primary export-xls" data-href="/admin/surveys/<%= sa.id.to_s %>/export_answers"><%= t("survey.export") %></button> <button class="btn btn-primary export-xls" data-href="/admin/surveys/<%= sa.id.to_s %>/export_answers"><%= t("survey.export") %></button>
<% else %> <% else %>
<% sa = sa.survey_answers.last if answers_nil %>
<% if @survey.result_type == QuestionnaireSurvey::ResultCriteria %> <% if @survey.result_type == QuestionnaireSurvey::ResultCriteria %>
<% tmp_msgs = [] <% tmp_msgs = []
answer_model_attrs = sa.attributes answer_model_attrs = sa.attributes

12
app/views/admin/surveys/set_answers.html.erb
View File

@ -9,6 +9,9 @@
border-bottom: 2px solid; border-bottom: 2px solid;
padding-bottom: 15px; padding-bottom: 15px;
} }
input.color_input{
height: 2em;
}
</style> </style>
<% end %> <% end %>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
@ -115,7 +118,8 @@
<% end %> <% end %>
</div> </div>
<div class="criteria" style="margin-left:0px;display:block;margin-bottom:50px;"> <div class="criteria" style="margin-left:0px;display:block;margin-bottom:50px;">
<label style="padding-left:0px;" for="" class="radio inline"> Color : <input type="color" name="questionnaire_survey[result_criteria][<%= idx %>][color]" value="<%=criteria["color"].blank? ? "#ffffff" : criteria["color"] %>"></label> <label style="padding-left:0px;" for="" class="radio inline"> Color : <input class="color_input" type="color" name="questionnaire_survey[result_criteria][<%= idx %>][color]" value="<%=criteria["color"].blank? ? "#ffffff" : criteria["color"] %>"></label>
<button type="button" class="btn btn-primary btn-small recover_to_default"><%=I18n.t("survey.recover_to_default")%></button>
</div> </div>
<div class="criteria"> <div class="criteria">
<label for="" class="radio inline"> <label for="" class="radio inline">
@ -151,7 +155,7 @@
<% [0,1].each do |i| %> <% [0,1].each do |i| %>
html += '<option value="<%=i%>"><%=t("survey.type.#{i}")%></option>' html += '<option value="<%=i%>"><%=t("survey.type.#{i}")%></option>'
<% end %> <% end %>
html += '</select></label></div><div data-critera-number="criteria_{index}" class="criteria" style="width:800px;"><label style="padding-left:0px;" for="" class="radio inline"> From : <input name="questionnaire_survey[result_criteria][{index}][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label><label for="" class="radio inline"> To : <input name="questionnaire_survey[result_criteria][{index}][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label><a href="" style="margin-left:5px;" class="btn btn-primary delete-critera"><i class="icon icon-trash"></i></a><span class="radio inline">Save to add text</span></div><div class="criteria" style="margin-left:0px;display:block;"><label style="padding-left:0px;" for="" class="radio inline"> Color : <input type="color" name="questionnaire_survey[result_criteria][{index}][color]" value="#ffffff"></label></div></div>'; html += '</select></label></div><div data-critera-number="criteria_{index}" class="criteria" style="width:800px;"><label style="padding-left:0px;" for="" class="radio inline"> From : <input name="questionnaire_survey[result_criteria][{index}][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label><label for="" class="radio inline"> To : <input name="questionnaire_survey[result_criteria][{index}][range][]" class="span1" max="<%= @survey.total_points %>" type="number"></label><a href="" style="margin-left:5px;" class="btn btn-primary delete-critera"><i class="icon icon-trash"></i></a><span class="radio inline">Save to add text</span></div><div class="criteria" style="margin-left:0px;display:block;"><label style="padding-left:0px;" for="" class="radio inline"> Color : <input class="color_input" type="color" name="questionnaire_survey[result_criteria][{index}][color]" value="#ffffff"></label><button type="button" class="btn btn-primary btn-small recover_to_default"><%=I18n.t("survey.recover_to_default")%></button></div></div>';
$("#add-criteria").on("click",function(){ $("#add-criteria").on("click",function(){
var newhtml = html.replace(/{index}/g,index); var newhtml = html.replace(/{index}/g,index);
@ -160,7 +164,9 @@
$("#criterias").append(newhtml); $("#criterias").append(newhtml);
return false; return false;
}) })
$(document).on("click", ".recover_to_default", function(){
$(this).siblings("label").find(".color_input").val("#ffffff");
})
$(document).on("click", ".delete-critera" ,function(){ $(document).on("click", ".delete-critera" ,function(){
$(this).parent().parent().remove(); $(this).parent().parent().remove();
return false; return false;

2
app/views/survey_export/export.xlsx.axlsx
View File

@ -10,6 +10,8 @@ wb.add_worksheet(name: title) do |sheet|
row << survey.consent_contents row << survey.consent_contents
row2 << "" row2 << ""
end end
row << I18n.t("survey.type.0")
row2 << ""
survey_questions.each_with_index do |question, i| survey_questions.each_with_index do |question, i|
qnum = question.title.match(/^\d+./).nil? ? "#{i+1}. " : "" qnum = question.title.match(/^\d+./).nil? ? "#{i+1}. " : ""
start_col = row2.count start_col = row2.count

286
app/views/surveys/my_record.html.erb
View File

@ -37,9 +37,10 @@
</div> </div>
<% end %> <% end %>
<% if type == "result_chart" %> <% if type == "result_chart" %>
<% @survey_answers.options = {} %>
<div style="clear: both;"></div> <div style="clear: both;"></div>
<style type="text/css"> <style type="text/css">
#tooltip{ .tooltip{
position: absolute; position: absolute;
background: #ffffff; background: #ffffff;
z-index: 1; z-index: 1;
@ -47,13 +48,13 @@
padding: 2px; padding: 2px;
display: none; display: none;
font-weight: bold; font-weight: bold;
font-size: 1em;
opacity: 1;
}
.flot_wrapper{
position: relative;
} }
</style> </style>
<div class="flot_wrapper">
<span id="tooltip"></span>
<div class="legend-container"></div>
<div id="resultchart-container" class="flot-placeholder"></div>
</div>
<%= javascript_include_tag "survey/jquery.colorhelpers.js" %> <%= javascript_include_tag "survey/jquery.colorhelpers.js" %>
<%= javascript_include_tag "survey/jquery.canvaswrapper.js" %> <%= javascript_include_tag "survey/jquery.canvaswrapper.js" %>
<%= javascript_include_tag "survey/jquery.flot_3.0.js" %> <%= javascript_include_tag "survey/jquery.flot_3.0.js" %>
@ -71,144 +72,169 @@
.axisLabels { .axisLabels {
font-weight: bold; font-weight: bold;
} }
.flot_wrapper{
position: relative;
}
</style> </style>
<script> <% @survey_answers = @survey_answers.order_by(:created_at=>1) %>
<% if @survey.need_assign_color %> <% last_year = @survey_answers.last.created_at.year %>
<% data = @survey_answers.order_by(:created_at=>1).group_by(&:color).map{|k,sas| [k, sas.map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} ] }.to_h %> <% first_year = @survey_answers.first.created_at.year %>
var min_time = <%= data.map{|k,d| d[0][0] rescue 0}.min %>; <% all_years = (first_year..last_year).to_a.reverse %>
var max_time = <%= data.map{|k,d| d[-1][0] rescue 0}.max %>; <% all_years.each do |year|%>
<% all_data = data.values.flatten(1) %> <% start_d = DateTime.parse("#{year}/1/1 #{Time.zone}") %>
<% y_data = all_data.map{|v| v[1]} %> <% end_d = start_d.end_of_year %>
var min_y = <%= y_data.min.to_i %>; <% survey_answers_sep = @survey_answers.where(:created_at.gte=>start_d).and(:created_at.lte=>end_d) %>
var max_y = <%= y_data.max.to_i %>; <% next if survey_answers_sep.count == 0 %>
<% else %> <div class="flot_wrapper" id="<%=year%>_block">
<% data = @survey_answers.order_by(:created_at=>1).map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} %> <h4 style="text-align: center;"><%= year %></h4>
var min_time = <%= data[0][0] rescue 0 %>; <span class="tooltip"></span>
var max_time = <%= data[-1][0] rescue 0 %>; <div class="legend-container"></div>
var min_y = <%= data.map{|a| a[1]}.min.to_i %>; <div class="flot-placeholder"></div>
var max_y = <%= data.map{|a| a[1]}.max.to_i %>; </div>
<% end %> <script>
var xaxes = [{ (function(){
mode: "time", <% if @survey.need_assign_color %>
axisLabelUseCanvas: false, <% data = survey_answers_sep.group_by(&:color).map{|k,sas| [k, sas.map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} ] }.to_h %>
timeformat: "%Y/%m/%d", var min_time = <%= data.map{|k,d| d[0][0] rescue 0}.min %>;
timezone: "browser", var max_time = <%= data.map{|k,d| d[-1][0] rescue 0}.max %>;
font: { <% all_data = data.values.flatten(1) %>
size: '16', <% y_data = all_data.map{|v| v[1]} %>
color: 'black' var min_y = <%= y_data.min.to_i %>;
}, var max_y = <%= y_data.max.to_i %>;
// min: min_time, <% else %>
// max: max_time, <% data = survey_answers_sep.order_by(:created_at=>1).map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} %>
axisLabel: "<%=t("survey.taken_date")%>", var min_time = <%= data[0][0] rescue 0 %>;
position: "bottom", var max_time = <%= data[-1][0] rescue 0 %>;
}]; var min_y = <%= data.map{|a| a[1]}.min.to_i %>;
var yaxes = [{ var max_y = <%= data.map{|a| a[1]}.max.to_i %>;
use_min_force: false, //modify at jquery_flot_3.0.js <% end %>
axisLabelUseCanvas: false, var xaxes = [{
showTickLabels: 'all', mode: "time",
font: { axisLabelUseCanvas: false,
size: '16', timeformat: "%Y/%m/%d",
color: 'black' timezone: "browser",
}, font: {
// min: min_y, size: '16',
// max: max_y, color: 'black'
axisLabel: "<%=t("survey.result_score")%>",
position: "left",
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
}];
var options = {
series: {
lines: {
show: true,
lineWidth: 2,
steps: false , //畫斜線
is_sort: true
}, },
points: { // min: min_time,
radius: 5, // max: max_time,
show: true, axisLabel: "<%=t("survey.taken_date")%>",
fillColor: '#ffffff' position: "bottom",
}];
var yaxes = [{
use_min_force: false, //modify at jquery_flot_3.0.js
axisLabelUseCanvas: false,
showTickLabels: 'all',
font: {
size: '16',
color: 'black'
}, },
downsample: { // min: min_y,
threshold: 0 // max: max_y,
axisLabel: "<%=t("survey.result_score")%>",
position: "left",
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
}];
var options = {
series: {
lines: {
show: true,
lineWidth: 2,
steps: false , //畫斜線
is_sort: true
},
points: {
radius: 5,
show: true,
fillColor: '#ffffff'
},
downsample: {
threshold: 0
}
},
grid: {
hoverable: true,
clickable: true,
show: true
},
xaxes: xaxes,
yaxes: yaxes,
zoom: {
interactive: true
},
pan: {
interactive: true,
enableTouch: true
},
colors: ["#708fff"], //["#708fff","#ffc107","#96478c","#1e7e34"],
polycolors: ["#3f66f4"],//["#3f66f4","#ffc107","#dc3545","#1e7e34"],
// legend: {
// show: true,
// noColumns: 1
// },
bar: {
zero: false
} }
}, };
grid: { <% all_colors = @survey.result_criteria.map{|c| c["color"]}.select{|c| c.present?}.uniq %>
hoverable: true, var points_fillColor = "#ffffff";
clickable: true, var need_split_data = false;
show: true <% if all_colors.count == 1 %>
}, points_fillColor = "<%=all_colors[0]%>";
xaxes: xaxes, <% end %>
yaxes: yaxes, // options['legend']['container'] = $('.legend-container')[0];
zoom: { <% if @survey.need_assign_color %>
interactive: true options["series"]["lines"]["show"] = false;
}, <% label_name = @user.member_name rescue "NA" %>
pan: { var chart_data = <%= ([{"label"=> label_name, "data"=> all_data,
interactive: true, "color"=> "#708fff",
enableTouch: true "lines"=> {
}, "show"=> true,
colors: ["#708fff"], //["#708fff","#ffc107","#96478c","#1e7e34"], "lineWidth"=> 2,
polycolors: ["#3f66f4"],//["#3f66f4","#ffc107","#dc3545","#1e7e34"], "steps"=> false ,
// legend: { "is_sort"=> true
// show: true, }}] + data.map{|color,d| tmp_color=(color.blank? ? "#ffffff" : color);{"label"=>label_name, "data"=>d, "color"=> (tmp_color == "#ffffff" ? "#708fff" : tmp_color), "points"=>{
// noColumns: 1 "show"=> true,
// }, "fillColor"=> tmp_color
bar: { }}}).to_json.html_safe %>;
zero: false <% else %>
} var chart_data = [{"label": "<%=@user.member_name rescue "NA" %>", "data": <%= data.to_json.html_safe %>,"points": {
}; show: true,
<% all_colors = @survey.result_criteria.map{|c| c["color"]}.select{|c| c.present?}.uniq %> fillColor: points_fillColor
var points_fillColor = "#ffffff"; }}];
var need_split_data = false; <% end %>
<% if all_colors.count == 1 %> $(document).ready(function(){
points_fillColor = "<%=all_colors[0]%>"; var chart_height = $(window).outerWidth(true)*0.2;
<% end %> $("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
// options['legend']['container'] = $('.legend-container')[0]; })
<% if @survey.need_assign_color %> $(window).resize(function(){
options["series"]["lines"]["show"] = false; var chart_height = $(window).outerWidth(true)*0.2;
<% label_name = @user.member_name rescue "NA" %> $("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
var chart_data = <%= ([{"label"=> label_name, "data"=> all_data, })
"color"=> "#708fff", })();
"lines"=> { </script>
"show"=> true, <% end %>
"lineWidth"=> 2, <script>
"steps"=> false ,
"is_sort"=> true
}}] + data.map{|color,d| tmp_color=(color.blank? ? "#ffffff" : color);{"label"=>label_name, "data"=>d, "color"=> (tmp_color == "#ffffff" ? "#708fff" : tmp_color), "points"=>{
"show"=> true,
"fillColor"=> tmp_color
}}}).to_json.html_safe %>;
<% else %>
var chart_data = [{"label": "<%=@user.member_name rescue "NA" %>", "data": <%= data.to_json.html_safe %>,"points": {
show: true,
fillColor: points_fillColor
}}];
<% end %>
$(document).ready(function(){ $(document).ready(function(){
var chart_height = $(window).outerWidth(true)*0.2;
$("#resultchart-container").height(chart_height).plot(chart_data,options);
$(".flot-placeholder").bind("plothover", function (event, pos, item) { $(".flot-placeholder").bind("plothover", function (event, pos, item) {
if (!pos.x || !pos.y) { if (!pos.x || !pos.y) {
return; return;
} }
if (!item) { if (!item) {
$("#tooltip").hide(); $(this).siblings(".tooltip").hide();
} }
}); });
$(".flot-placeholder").bind("plotclick", function (event, pos, item) { $(".flot-placeholder").bind("plotclick", function (event, pos, item) {
if (!pos.x || !pos.y) { if (!pos.x || !pos.y || item == null) {
return; return;
} }
var tooltip = $(this).siblings(".tooltip");
console.log(tooltip)
var x = item.datapoint[0].toFixed(2), var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(0); y = item.datapoint[1].toFixed(0);
var date = new moment(Math.round(x)); var date = new moment(Math.round(x));
var tp = "(" + date.format("yyyy/MM/DD HH:mm") + ")" var tp = "(" + date.format("yyyy/MM/DD HH:mm") + ")"
$("#tooltip").html("<%=t("survey.type.0")%>: "+y+"<br>"+tp); tooltip.html("<%=t("survey.type.0")%>: "+y+"<br>"+tp);
var left = 0; var left = 0;
var content_width = tp.length*8.2 var content_width = tp.length*8.2
if (content_width+item.pageX+5>$(window).width()){ if (content_width+item.pageX+5>$(window).width()){
@ -217,15 +243,10 @@
left = item.pageX - content_width / 2; left = item.pageX - content_width / 2;
} }
var offset = $(this).parents(".flot_wrapper").eq(0).offset(); var offset = $(this).parents(".flot_wrapper").eq(0).offset();
tooltip.css({top: item.pageY+5-offset.top, left: left-offset.left})
$("#tooltip").css({top: item.pageY+5-offset.top, left: left-offset.left})
.fadeIn(200); .fadeIn(200);
}); });
}) })
$(window).resize(function(){
var chart_height = $(window).outerWidth(true)*0.2;
$("#resultchart-container").height(chart_height).plot(chart_data,options);
})
</script> </script>
<% else %> <% else %>
<table class="table main-list"> <table class="table main-list">
@ -237,6 +258,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<% @is_answer_list = true if !@answer_repeat%>
<% answers_nil = @survey_answers.nil? %>
<% (@survey_answer_groups || @survey_answers).each do |sa| %> <% (@survey_answer_groups || @survey_answers).each do |sa| %>
<tr> <tr>
<% user = sa.user.nil? ? nil : (User.find(sa.user) rescue nil) %> <% user = sa.user.nil? ? nil : (User.find(sa.user) rescue nil) %>
@ -251,6 +274,7 @@
<a class="btn btn-primary" href="/admin/surveys/<%= sa.id.to_s %>/answer_list" title="<%= t("survey.view") %>"><%= t("survey.view") %>(<%=sa.survey_answer_ids.count%>)</a> <a class="btn btn-primary" href="/admin/surveys/<%= sa.id.to_s %>/answer_list" title="<%= t("survey.view") %>"><%= t("survey.view") %>(<%=sa.survey_answer_ids.count%>)</a>
<button class="btn btn-primary export-xls" data-href="/admin/surveys/<%= sa.id.to_s %>/export_answers" title="<%= t("survey.export") %>"><%= t("survey.export") %></button> <button class="btn btn-primary export-xls" data-href="/admin/surveys/<%= sa.id.to_s %>/export_answers" title="<%= t("survey.export") %>"><%= t("survey.export") %></button>
<% else %> <% else %>
<% sa = sa.survey_answers.last if answers_nil %>
<% if @survey.result_type == QuestionnaireSurvey::ResultCriteria %> <% if @survey.result_type == QuestionnaireSurvey::ResultCriteria %>
<% tmp_msgs = [] <% tmp_msgs = []
answer_model_attrs = sa.attributes answer_model_attrs = sa.attributes

7
app/views/surveys/show.html.erb
View File

@ -92,9 +92,10 @@
</div> </div>
<ol class="o-question-list"> <ol class="o-question-list">
<% if @survey.enable_consent_feature %> <% if @survey.enable_consent_feature %>
<div class="survey_consent_contents o-question-title"> <li class="survey_consent_contents question-item ">
<label for="survey_consent_used"><%= f.check_box :consent_used , {:id=>"survey_consent_used", :title=>t('survey.agree')} %><span style="margin-left: 0.2em;"><%= @survey.consent_contents.to_s.html_safe %></span></label> <span class="required-star">(*)</span>
</div> <label for="survey_consent_used" class="o-question-title"><%= f.check_box :consent_used , {:id=>"survey_consent_used", :title=>t('survey.agree'), :required=>"required"} %><span style="margin-left: 0.2em;"><%= @survey.consent_contents.to_s.html_safe %></span></label>
</li>
<% end %> <% end %>
<% @questions.each_with_index do |question, i| %> <% @questions.each_with_index do |question, i| %>
<% header_count = i + 1 %> <% header_count = i + 1 %>

1
config/locales/en.yml
View File

@ -2,6 +2,7 @@ en:
module_name: module_name:
survey: Survey survey: Survey
survey: survey:
recover_to_default: Recover to default
'true': 'Yes' 'true': 'Yes'
'false': 'No' 'false': 'No'
consent_to_be_used_for_research: "Consent answer to be used for research" consent_to_be_used_for_research: "Consent answer to be used for research"

1
config/locales/zh_tw.yml
View File

@ -4,6 +4,7 @@ zh_tw:
survey: 問卷調查 survey: 問卷調查
survey: survey:
recover_to_default: 恢復成預設
'true': 已勾選 'true': 已勾選
'false': 未勾選 'false': 未勾選
consent_to_be_used_for_research: "同意填答結果被用於研究" consent_to_be_used_for_research: "同意填答結果被用於研究"