サイボウズみたいな表を作りたいPart2

http://d.hatena.ne.jp/kenmituo/20090731の続き。
　
「どうせ時間の変更はしないだろう」というか、時間を変更したときの処理が面倒になってきたので外す。

1日を8時から22時までの表示に固定

こんな方針で作り直す。
　
コントローラー

/app/controller/hoge.rb
  def dayview
    @day_gantt = find_search
    #requestがゲットなら、パラメータをセットする。
    if request.get?
      if params[:page].nil?
        @day_gantt.empty_daygantt!
        @day_gantt.select_day = Date.parse(params[:select_day]) unless params[:select_day].nil?
      end
    else
      @day_gantt.set_daygantt_params(params)
    end    
    params[:page] = 1 if params[:page].nil?
    
    @gantt_time_from = 8
    @gantt_time_to = 22
    
    @select_day = @day_gantt.select_day.to_date
    @page_title = "個人別表"
    @time_from = @select_day.to_date + @gantt_time_from.hours
    @time_to = @select_day.to_date + @gantt_time_to.hours
    
    @events = []
    @events += Hoge.find(:all,
      :conditions =>["started >= ? AND responded <= ?", @time_from, @time_to],
      :order=>'requested DESC'
    )
    @events_staffs = @events.group_by{|event| event.staff_name }
  end

private 
  def find_search
    session[:hoge_cond] ||= Cond::HogeCond.new
  end

　
モデルの中に「cond」ってのがある。

/app/models/cond/hoge_cond.rb
class Cond::HogeCond < Cond::Cond
  def empty_daygantt!
    @select_day = Date.today
  end
  
  def set_daygantt_params(params)
    @select_day = params[:day_gantt][:select_day]
  end
end

ヘルパー
実際に設置したコントローラーには複数のDBの値を表示するようにしてあるので、繰り返しが多くなっていた。
面倒なのでヘルパーに仕込む。

/app/helpers/hoge_helper.rb

module hogeHelper
  include ModalHelper

  #時間横軸の表示開始位置
  def hours_start_point(res_hour, form_hour)
    if res_hour.hour >= form_hour
      rtn = (res_hour.hour - form_hour + 1)*60 + res_hour.min
    else
      rtn = 0
    end
    return rtn
  end
  
　#時間横軸の表示終了位置
  def hours_end_point(start_hour, end_hour)
    tmp_hour = (end_hour - start_hour)/3600
    tmp_min = ((end_hour - start_hour) % 3600) / 60
    
    if tmp_hour < 1
      rtn = tmp_min
    else
      rtn = tmp_hour*60 + tmp_min
    end
    return rtn
  end
  
　#合計時間の表示
  def total_time_count(totaltime)
    hours_t = totaltime.divmod(3600)
    mins_t = hours_t[1].divmod(60) 
    if mins_t[0]<10
      mins_ts = "0" + mins_t[0].to_s
    else
      mins_ts = mins_t[0].to_s
    end
    return hours_t[0].to_s + ":" + mins_ts
  end

　
ビュー

<%- content_for :html_header do -%>
  <%= stylesheet_link_tag 'calendar' %>
  <%= calendar_date_select_includes %>
<script type="text/javascript">
  _translations = {
    "OK": "OK",
    "Now": "現在",
    "Today": "今日" 
  }
  Date.weekdays = $w("日 月 火 水 木 金 土");
  Date.months = $w("1 2 3 4 5 6 7 8 9 10 11 12" );
</script>
<style type	="text/css"><!--
div.hour_view{
	float:left;
	width:56px;
	text-align:center;
	padding:1px;
	margin:1px;
	border:1px;
	border-style:solid;
	border-color:silver;
}
div.hour_back{
	float:left;
	width:56px;
	height:50px;
	text-align:center;
	color:silver;
	padding:1px;
	margin:1px;
	border:1px;
	border-left-style:solid;
	border-right-style:solid;
	border-left-color:silver;
	border-right-color:silver;
	z-index:1;
}
div.hour_content{
	z-index:10;
	height:30px;
	position:absolute;
	text-align:center;
	margin-top:20px;
	border:1px;
	border-style:solid;
	border-color:blue;
	background-color:#80ffff;
}
div.hour_content_total{
	z-index:10;
	color:black;
	position:absolute;
	text-align:center;
	border:1px;
	border-style:solid;
	border-color:blue;
	background-color:#80ffff;	
	margin-top:15px;
}
div.hour_iftb{
	z-index:10;
	height:30px;
	position:absolute;
	text-align:center;
	margin-top:20px;
	border:1px;
	border-style:solid;
	border-color:magenta;
	background-color:lightpink;
}
div.hour_iftb_total{
	z-index:10;
	color:black;
	position:absolute;
	text-align:center;
	margin-top:35px;
	border:1px;
	border-style:solid;
	border-color:magenta;
	background-color:lightpink;
}
-->
</style>
<%- end -%>

<h2><%= @page_title %></h2>

<%- hours_count = @gantt_time_to - @gantt_time_from %>

<%- form_tag do %>
	<%= calendar_date_select(:day_gantt, :select_day) %>
	<%= submit_tag "変更", :class => "button-small" %>    
<%- end -%>
<br />

<table width="100%" style="border:1; border-collapse: collapse;">
<tr>
<th width="60px">staff<br /></th>
<th >
<!-- ヘッダ時間を表示する -->
<%- start_hours = @gantt_time_from
	hours_count.times{|i| %>
	<div class="hour_view"><%= start_hours %></div>
	<%- start_hours=start_hours+1 } %>
</th>
</tr>

<%- @events_staffs.each do |staffs, res| %>
<tr>
<td>
<%= link_to(staffs, :action=>:search, :day_from=>@select_day,
 :day_to=>@select_day, :staff=>staffs) %></td>

<td>
<!-- 背景を作る　-->
<%- start_hours = @gantt_time_from
	hours_count.times{|i| %>
	<div class="hour_back"><%= start_hours %></div>
<%- start_hours=start_hours+1	} %>

<%- time_taiou = 0 %>
<%- res.each do |i| %>
<%-	s_point = hours_start_point(i.started, @gantt_time_from)
	e_point = hours_end_point(i.started, i.responded)
	time_taiou += (i.responded - i.started)
	s="left:"+s_point.to_s+"px;"+"width:"+e_point.to_s+"px;" -%>
	<div style="<%= s %>" class="hour_content">
		<%= modal_link_to "■", {:action=>:modal_open},{:id=>i.id} %>
		<%= modal_script :id=> i.id %>
	</div>
<%- end %>

<div class="hour_back">
<%- if time_taiou>0 %>
	<div class="hour_content_total">
	<%= total_time_count(time_taiou)%>
	</div>
<%- end %>
</div>

</td>
</tr>
<%- end %>

</table>

　
それでもモーダルが宜しくないような･･･
　
やっぱり時間表示モノは「縦に時間」「横に件名」と分けるべきなんだな･･･