406 lines
14 KiB
Plaintext
406 lines
14 KiB
Plaintext
<style type="text/css">
|
|
#survey_answer_search label{
|
|
float: left;
|
|
margin-right: 0.5em;
|
|
line-height: 2;
|
|
}
|
|
#survey_answer_search input{
|
|
float: left;
|
|
line-height: 2;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="/assets/lib/process.manager.js"></script>
|
|
<div id="downloadModal" data-backdrop="static" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel" aria-hidden="true">
|
|
<div class="modal-header">
|
|
<h3 id="downloadModalLabel">Download</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="wait-zone" style="text-align: center;">
|
|
Please wait while we prepare your download. This may take a while.
|
|
<br />
|
|
<img src="/assets/spin.gif" />
|
|
</p>
|
|
<p id="link-zone" style="display: none; text-align: center;">
|
|
Please click the link below to download.
|
|
<br />
|
|
<a href="" id="download-link" target="_blank">Download</a>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" id="modal-close-btn" style="display:none;" data-dismiss="modal" aria-hidden="true">Close</button>
|
|
</div>
|
|
</div>
|
|
<h3><%= @survey.title %></h3>
|
|
<div>
|
|
<% if @is_answer_list %>
|
|
<h4><%=t('survey.taken_by')%>: <%=@user.member_name rescue "NA" %></h4>
|
|
<% else %>
|
|
<form id="survey_answer_search">
|
|
<div>
|
|
<label for="search_taken_by"><%=t('survey.taken_by')%>:</label>
|
|
<input type="text" id="search_taken_by" name="search" placeholder="<%=t('survey.taken_by')%>" value="<%=params[:search]%>">
|
|
<input type="submit" value="<%=t(:search_)%>">
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
</form>
|
|
<% end %>
|
|
</div>
|
|
<% type = nil %>
|
|
<% if @is_answer_list %>
|
|
<% type = 'result_chart' if params[:type] == 'result_chart' %>
|
|
<div class="pull-right">
|
|
<a href="?type=" class="btn <%= 'active' if type != 'result_chart' %>"><%=t("survey.table")%></a>
|
|
<a href="?type=result_chart" class="btn <%= 'active' if type == 'result_chart' %>"><%=t("survey.result_chart")%></a>
|
|
</div>
|
|
<% end %>
|
|
<% if type == "result_chart" %>
|
|
<% @survey_answers.options = {} %>
|
|
<div style="clear: both;"></div>
|
|
<style type="text/css">
|
|
.tooltip{
|
|
position: absolute;
|
|
background: #ffffff;
|
|
z-index: 1;
|
|
border-radius: 10px;
|
|
padding: 2px;
|
|
display: none;
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
opacity: 1;
|
|
}
|
|
.flot_wrapper{
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<%= javascript_include_tag "survey/jquery.colorhelpers.js" %>
|
|
<%= javascript_include_tag "survey/jquery.canvaswrapper.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot_3.0.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.time.min.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.uiConstants.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.saturated.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.browser.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.drawSeries.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.axislabels.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.hover.js" %>
|
|
<%= javascript_include_tag "survey/jquery.flot.animator.min.js" %>
|
|
<!-- <%= javascript_include_tag "survey/jquery.flot.legend.js" %> -->
|
|
<%= javascript_include_tag "survey/moment.min.js" %>
|
|
<style type="text/css">
|
|
.axisLabels {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<% @survey_answers = @survey_answers.order_by(:created_at=>1) %>
|
|
<% last_year = @survey_answers.last.created_at.year %>
|
|
<% first_year = @survey_answers.first.created_at.year %>
|
|
<% all_years = (first_year..last_year).to_a.reverse %>
|
|
<% all_years.each do |year|%>
|
|
<% start_d = DateTime.parse("#{year}/1/1 #{Time.zone}") %>
|
|
<% end_d = start_d.end_of_year %>
|
|
<% survey_answers_sep = @survey_answers.where(:created_at.gte=>start_d).and(:created_at.lte=>end_d) %>
|
|
<% next if survey_answers_sep.count == 0 %>
|
|
<div class="flot_wrapper" id="<%=year%>_block">
|
|
<h4 style="text-align: center;"><%= year %></h4>
|
|
<span class="tooltip"></span>
|
|
<div class="legend-container"></div>
|
|
<div class="flot-placeholder"></div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
<% if @survey.need_assign_color %>
|
|
<% 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 %>
|
|
var min_time = <%= data.map{|k,d| d[0][0] rescue 0}.min %>;
|
|
var max_time = <%= data.map{|k,d| d[-1][0] rescue 0}.max %>;
|
|
<% all_data = data.values.flatten(1) %>
|
|
<% y_data = all_data.map{|v| v[1]} %>
|
|
var min_y = <%= y_data.min.to_i %>;
|
|
var max_y = <%= y_data.max.to_i %>;
|
|
<% else %>
|
|
<% data = survey_answers_sep.order_by(:created_at=>1).map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} %>
|
|
var min_time = <%= data[0][0] rescue 0 %>;
|
|
var max_time = <%= data[-1][0] rescue 0 %>;
|
|
var min_y = <%= data.map{|a| a[1]}.min.to_i %>;
|
|
var max_y = <%= data.map{|a| a[1]}.max.to_i %>;
|
|
<% end %>
|
|
var xaxes = [{
|
|
mode: "time",
|
|
axisLabelUseCanvas: false,
|
|
timeformat: "%Y/%m/%d",
|
|
timezone: "browser",
|
|
font: {
|
|
size: '16',
|
|
color: 'black'
|
|
},
|
|
// min: min_time,
|
|
// max: max_time,
|
|
axisLabel: "<%=t("survey.taken_date")%>",
|
|
position: "bottom",
|
|
}];
|
|
var yaxes = [{
|
|
use_min_force: false, //modify at jquery_flot_3.0.js
|
|
axisLabelUseCanvas: false,
|
|
showTickLabels: 'all',
|
|
font: {
|
|
size: '16',
|
|
color: 'black'
|
|
},
|
|
// min: min_y,
|
|
// 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
|
|
}
|
|
};
|
|
<% all_colors = @survey.result_criteria.map{|c| c["color"]}.select{|c| c.present?}.uniq %>
|
|
var points_fillColor = "#ffffff";
|
|
var need_split_data = false;
|
|
<% if all_colors.count == 1 %>
|
|
points_fillColor = "<%=all_colors[0]%>";
|
|
<% end %>
|
|
// options['legend']['container'] = $('.legend-container')[0];
|
|
<% if @survey.need_assign_color %>
|
|
options["series"]["lines"]["show"] = false;
|
|
<% label_name = @user.member_name rescue "NA" %>
|
|
var chart_data = <%= ([{"label"=> label_name, "data"=> all_data,
|
|
"color"=> "#708fff",
|
|
"lines"=> {
|
|
"show"=> true,
|
|
"lineWidth"=> 2,
|
|
"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(){
|
|
var chart_height = $(window).outerWidth(true)*0.2;
|
|
$("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
|
|
})
|
|
$(window).resize(function(){
|
|
var chart_height = $(window).outerWidth(true)*0.2;
|
|
$("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
|
|
})
|
|
})();
|
|
</script>
|
|
<% end %>
|
|
<script>
|
|
$(document).ready(function(){
|
|
$(".flot-placeholder").bind("plothover", function (event, pos, item) {
|
|
if (!pos.x || !pos.y) {
|
|
return;
|
|
}
|
|
if (!item) {
|
|
$(this).siblings(".tooltip").hide();
|
|
}
|
|
});
|
|
$(".flot-placeholder").bind("plotclick", function (event, pos, item) {
|
|
if (!pos.x || !pos.y || item == null) {
|
|
return;
|
|
}
|
|
var tooltip = $(this).siblings(".tooltip");
|
|
console.log(tooltip)
|
|
var x = item.datapoint[0].toFixed(2),
|
|
y = item.datapoint[1].toFixed(0);
|
|
var date = new moment(Math.round(x));
|
|
var tp = "(" + date.format("yyyy/MM/DD HH:mm") + ")"
|
|
tooltip.html("<%=t("survey.type.0")%>: "+y+"<br>"+tp);
|
|
var left = 0;
|
|
var content_width = tp.length*8.2
|
|
if (content_width+item.pageX+5>$(window).width()){
|
|
left = $(window).width()-content_width;
|
|
}else{
|
|
left = item.pageX - content_width / 2;
|
|
}
|
|
var offset = $(this).parents(".flot_wrapper").eq(0).offset();
|
|
tooltip.css({top: item.pageY+5-offset.top, left: left-offset.left})
|
|
.fadeIn(200);
|
|
});
|
|
})
|
|
</script>
|
|
<% else %>
|
|
<table class="table main-list">
|
|
<thead>
|
|
<tr class="sort-header">
|
|
<% @table_fields.each do |f| %>
|
|
<%= thead(f) %>
|
|
<% end %>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% @is_answer_list = true if !@answer_repeat%>
|
|
<% answers_nil = @survey_answers.nil? %>
|
|
<% (@survey_answer_groups || @survey_answers).each do |sa| %>
|
|
<tr>
|
|
<%
|
|
link_sa = sa
|
|
if answers_nil
|
|
link_sa = sa.survey_answers.last
|
|
if link_sa.nil?
|
|
sa.destroy
|
|
next
|
|
end
|
|
end
|
|
%>
|
|
<% user = sa.user.nil? ? nil : (User.find(sa.user) rescue nil) %>
|
|
<% if !user.nil? %>
|
|
<td><%= user.member_name rescue user.name %></td>
|
|
<% else %>
|
|
<td>NA</td>
|
|
<% end %>
|
|
<td><%= (answers_nil ? sa.last_modified : sa.created_at).strftime((I18n.locale == :zh_tw ? "%Y/%m/%d %H:%M" : "%h %d, %Y - %H:%M")) rescue nil %></td>
|
|
<td>
|
|
<% if @answer_repeat && !@is_answer_list %>
|
|
<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>
|
|
<% else %>
|
|
<% sa = link_sa %>
|
|
<% if @survey.result_type == QuestionnaireSurvey::ResultCriteria %>
|
|
<% tmp_msgs = []
|
|
answer_model_attrs = sa.attributes
|
|
weight_relations = @survey.survey_questions.map{|q| [q.id.to_s,(q.weight.nil? ? 1 : q.weight)]}.to_h
|
|
types = [] %>
|
|
<% @survey.result_criteria.each do |criteria| %>
|
|
<%
|
|
total_criteria_score = 0
|
|
total_weight = 0
|
|
((criteria["questions"][0].to_i - 1)..(criteria["questions"][1].to_i - 1)).each do |x|
|
|
total_criteria_score = (total_criteria_score + sa.individual_total[x].to_i) rescue 0
|
|
k = weight_relations.keys[x]
|
|
if k && answer_model_attrs.has_key?(k)
|
|
total_weight += weight_relations[k]
|
|
end
|
|
end
|
|
type = criteria["type"].to_i
|
|
%>
|
|
<% if type == 0 %>
|
|
<% if (criteria["range"][0].to_i..criteria["range"][1].to_i).cover?(total_criteria_score) %>
|
|
<% tmp_msgs << criteria["msg"] %>
|
|
<% types << type %>
|
|
<% end %>
|
|
<% else %>
|
|
<% if ((criteria["range"][0].to_i..criteria["range"][1].to_i).cover?(total_criteria_score / total_weight) rescue false) %>
|
|
<% tmp_msgs << criteria["msg"] %>
|
|
<% types << type %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if types.include?(0) %>
|
|
<h4>Your total score is <%= sa.scored_points %> </h4>
|
|
<% end %>
|
|
<% if types.include?(1) %>
|
|
<h4>Your average score is <%= sa.get_avg_points %> </h4>
|
|
<% end %>
|
|
<% tmp_msgs.each do |msg| %>
|
|
<div><%=msg.html_safe%></div>
|
|
<% end %>
|
|
<% end %>
|
|
<a class="btn btn-primary" href="/admin/surveys/<%= @is_answer_list ? sa.id : sa.survey_answer_ids.last.to_s %>/answer_set"><%= t("survey.view_answers") %></a>
|
|
<% end %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
<%=
|
|
content_tag :div, class: "bottomnav clearfix" do
|
|
content_tag :div, paginate((@survey_answer_groups || @survey_answers)), class: "pagination pagination-centered"
|
|
end
|
|
%>
|
|
<script type="text/javascript">
|
|
|
|
var downloadModal = $("#downloadModal"),
|
|
checkForThread = null,
|
|
waitZone = $("#wait-zone"),
|
|
linkZone = $("#link-zone"),
|
|
downloadLink = $("a#download-link"),
|
|
modalBtn = $("#modal-close-btn"),
|
|
processManager = new ProcessManager();
|
|
|
|
$(document).on("click", ".export-xls", function(){
|
|
var link = $(this).data("href"),
|
|
title = null,
|
|
id = "<%=@survey.id%>";
|
|
|
|
linkZone.hide();
|
|
waitZone.show();
|
|
modalBtn.hide();
|
|
$.ajax({
|
|
url : link,
|
|
type : "get",
|
|
dataType : "json"
|
|
}).done(function(data){
|
|
title = data.title;
|
|
checkForThread = new Process(function(){
|
|
$.ajax({
|
|
url : "/admin/surveys/checkforthread",
|
|
type : "get",
|
|
data : {"survey_id" : id, "survey_title" : title},
|
|
dataType : "json"
|
|
}).done(function(data){
|
|
if(!data.status){
|
|
downloadLink.attr("href", "/uploads/survey_export/" + id + "/" + title + ".xlsx");
|
|
waitZone.hide();
|
|
linkZone.show();
|
|
modalBtn.show();
|
|
checkForThread.kill();
|
|
}
|
|
})
|
|
})
|
|
checkForThread.setTimeInterval(1000);
|
|
checkForThread.setRepeat(Process.CONSTANTS.REPEAT_INFINITE);
|
|
processManager.queue(checkForThread);
|
|
})
|
|
downloadModal.modal("show");
|
|
return false;
|
|
})
|
|
|
|
</script>
|
|
<% end %> |