Redmine

<% content_for :header_tags do %>

  <%= javascript_include_tag 'raphael' %>

  <%= javascript_include_tag 'gantt' %>

<% end %>

<%= javascript_tag do %>

  $(document).ready(drawGanttHandler);

  $(window).resize(drawGanttHandler);

<% end %>

<div style="position:relative;height:<%= t_height + 24 %>px;overflow:auto;" id="gantt_area">

<%

  style  = ""

  style += "position: absolute;"

  style += "height: #{g_height}px;"

  style += "top: #{headers_height + 1}px;"

  style += "left: 0px;"

  style += "width: #{g_width - 1}px;"

%>

<%= content_tag(:div, '', :style => style, :id => "gantt_draw_area") %>

var draw_gantt = null;

var draw_top;

var draw_right;

var draw_left;

function setDrawArea() {

  draw_top   = $("#gantt_draw_area").position().top;

  draw_right = $("#gantt_draw_area").width();

  draw_left  = $("#gantt_area").scrollLeft();

}

function drawGanttHandler() {

  var folder = document.getElementById('gantt_draw_area');

  if(draw_gantt != null)

    draw_gantt.clear();

  else

    draw_gantt = Raphael(folder);

  setDrawArea();

}

                          :order => 4, :sym => TYPE_BLOCKED,

                          :landscape_margin => 12 },

                          :order => 6, :sym => TYPE_FOLLOWS,

                          :landscape_margin => 16 },

  DRAW_TYPES = {

    TYPE_BLOCKS   => TYPES[TYPE_BLOCKS],

    TYPE_BLOCKED  => TYPES[TYPE_BLOCKED],

    TYPE_PRECEDES => TYPES[TYPE_PRECEDES],

    TYPE_FOLLOWS  => TYPES[TYPE_FOLLOWS],

  }.freeze

  DRAW_TYPES_JSON = DRAW_TYPES.to_json

  var issue_relation_type = <%= IssueRelation::DRAW_TYPES_JSON.html_safe %>;

  $(function() {

    $("#draw_rels").change(drawGanttHandler);

  });

<fieldset id="filters" class="collapsible">

  <legend onclick="toggleFieldset(this);"><%= l(:label_display) %></legend>

  <div>

    <fieldset>

      <legend><%= l(:label_related_issues) %></legend>

      <label>

        <%= check_box_tag "draw_rels", 0, params["draw_rels"] %>

        <% rels = [IssueRelation::TYPE_BLOCKS, IssueRelation::TYPE_PRECEDES] %>

        <% rels.each do |rel| %>

          <%= content_tag(:span, '&nbsp;&nbsp;&nbsp;'.html_safe,

                          :id => "gantt_draw_rel_color_#{rel}") %>

          <%= l(IssueRelation::TYPES[rel][:name]) %>

        <% end %>

      </label>

    </fieldset>

  </div>

</fieldset>

      def issue_relations(issue)

        relations = {}

        issue.relations_to.each do |relation|

          relation_type = relation.relation_type_for(relation.issue_to)

          if !IssueRelation::DRAW_TYPES[relation_type].nil?

            (relations[relation_type] ||= []) << relation.issue_from_id

          end

        end

        relations

      end

          html_id = "task-todo-issue-#{options[:issue].id}" if options[:issue]

          content_opt = {:style => style,

                         :class => "#{options[:css]} task_todo",

                         :id => html_id}

          if options[:issue]

            rels_hash = {}

            issue_relations(options[:issue]).each do |k, v|

              rels_hash[k] = v.join(',')

            end

            content_opt[:data] = {"rels" => rels_hash}

          end

          output << view.content_tag(:div, '&nbsp;'.html_safe, content_opt)

function getRelationsArray() {

  var arr = new Array();

  $.each($('div.task_todo'), function(index_div, element) {

    var element_id = $(element).attr("id");

    if (element_id != null) {

      var issue_id = element_id.replace("task-todo-issue-", "");

      var data_rels = $(element).data("rels");

      if (data_rels != null) {

        for (rel_type_key in issue_relation_type) {

          if (rel_type_key in data_rels) {

            var issue_arr = data_rels[rel_type_key].toString().split(",");

            if ("reverse" in issue_relation_type[rel_type_key]) {

              $.each(issue_arr, function(index_issue, element_issue) {

                arr.push({issue_from: element_issue, issue_to: issue_id,

                          rel_type: issue_relation_type[rel_type_key]["reverse"]});

              });

            } else {

              $.each(issue_arr, function(index_issue, element_issue) {

                arr.push({issue_from: issue_id, issue_to: element_issue,

                          rel_type: rel_type_key});

              });

            }

          }

        }

      }

    }

  });

  return arr;

}

function drawRelations() {

  var arr = getRelationsArray();

  $.each(arr, function(index_issue, element_issue) {

    var issue_from = $("#task-todo-issue-" + element_issue["issue_from"]);

    var issue_to   = $("#task-todo-issue-" + element_issue["issue_to"]);

    if (issue_from.size() == 0 || issue_to.size() == 0) {

      return;

    }

    var issue_height = issue_from.height();

    var issue_from_top   = issue_from.position().top  + (issue_height / 2) - draw_top;

    var issue_from_right = issue_from.position().left + issue_from.width();

    var issue_to_top   = issue_to.position().top  + (issue_height / 2) - draw_top;

    var issue_to_left  = issue_to.position().left;

    var color = $("#gantt_draw_rel_color_" + element_issue["rel_type"])

                    .css("background-color");

    var landscape_margin = issue_relation_type[element_issue["rel_type"]]["landscape_margin"];

    var issue_from_right_rel = issue_from_right + landscape_margin;

    var issue_to_left_rel    = issue_to_left    - landscape_margin;

    draw_gantt.path(["M", issue_from_right + draw_left,     issue_from_top,

                     "L", issue_from_right_rel + draw_left, issue_from_top])

                   .attr({stroke: color, "stroke-width": 2});

    if (issue_from_right_rel < issue_to_left_rel) {

      draw_gantt.path(["M", issue_from_right_rel + draw_left, issue_from_top,

                       "L", issue_from_right_rel + draw_left, issue_to_top])

                   .attr({stroke: color, "stroke-width": 2});

      draw_gantt.path(["M", issue_from_right_rel + draw_left, issue_to_top,

                       "L", issue_to_left + draw_left,        issue_to_top])

                   .attr({stroke: color,

                          "stroke-width": 2,

                          "stroke-linecap": "butt",

                          "stroke-linejoin": "miter",

                          });

    } else {

      var issue_middle_top = issue_to_top +

                                (issue_height *

                                   ((issue_from_top > issue_to_top) ? 1 : -1));

      draw_gantt.path(["M", issue_from_right_rel + draw_left, issue_from_top,

                       "L", issue_from_right_rel + draw_left, issue_middle_top])

                   .attr({stroke: color, "stroke-width": 2});

      draw_gantt.path(["M", issue_from_right_rel + draw_left, issue_middle_top,

                       "L", issue_to_left_rel + draw_left,    issue_middle_top])

                   .attr({stroke:color, "stroke-width": 2});

      draw_gantt.path(["M", issue_to_left_rel + draw_left, issue_middle_top,

                       "L", issue_to_left_rel + draw_left, issue_to_top])

                   .attr({stroke: color, "stroke-width": 2});

      draw_gantt.path(["M", issue_to_left_rel + draw_left, issue_to_top,

                       "L", issue_to_left + draw_left,     issue_to_top])

                   .attr({stroke: color,

                          "stroke-width": 2,

                          "stroke-linecap": "butt",

                          "stroke-linejoin": "miter",

                          });

    }

    draw_gantt.path(["M", issue_to_left + draw_left, issue_to_top,

                     "l", -8, -4, "l", 0, 8, "z"])

                   .attr({stroke: "none",

                          fill: color,

                          "stroke-linecap": "butt",

                          "stroke-linejoin": "miter",

                          });

  });

}

  if ($("#draw_rels").attr('checked'))

    drawRelations();

#gantt_draw_rel_color_blocks     {background-color:#fb7d2f;}

#gantt_draw_rel_color_precedes   {background-color:#df347c;}