survey/app/views/admin/surveys/answer_sets.html.erb

<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" %>
<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;
  }
  .flot_wrapper{
    position: relative;
  }
</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.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>
<script>
  <% if @survey.need_assign_color %>
    <% data = @survey_answers.order_by(:updated_at=>1).group_by(&:color).map{|k,sas| [k, sas.map{|sa| [sa.updated_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.order_by(:updated_at=>1).map{|sa| [sa.updated_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;
    $("#resultchart-container").height(chart_height).plot(chart_data,options);
    $(".flot-placeholder").bind("plothover", function (event, pos, item) {
      if (!pos.x || !pos.y) {
        return;
      }
      if (!item) {
        $("#tooltip").hide();
      }
    });
    $(".flot-placeholder").bind("plotclick", function (event, pos, item) {
      if (!pos.x || !pos.y) {
        return;
      }
      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);
    });
  })
  $(window).resize(function(){
    var chart_height = $(window).outerWidth(true)*0.2;
    $("#resultchart-container").height(chart_height).plot(chart_data,options);
  })
</script>
<% else %>
<table class="table main-list">
  <thead>
    <tr class="sort-header">
      <% @table_fields.each do |f| %>
      	<%= thead(f) %>
      <% end %>
    </tr>
  </thead>
  <tbody>
  <% (@survey_answer_groups || @survey_answers).each do |sa| %>
  	<tr>
  	<% 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><%= (@is_answer_list ? sa.updated_at : sa.last_modified).strftime("%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 %>
        <% 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 %>