勤怠システム土曜を青、日曜を赤に指定したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

勤怠システムの土曜日を青、日曜日を赤色に指定したい

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

ifを使ってみようとしたが、コードの書き方がわかりません
custom/scss

該当のソースコード

  <tr> <!--rowspan:縦結合、colspan：横結合-->
    <th rowspan = "2">日付</th>
    <th rowspan = "2">曜日</th>
    <th colspan = "3">出社</th>
    <th colspan = "3">退社</th>
    <th rowspan = "2">在社時間</th>
    <th rowspan = "2">備考</th>
  </tr>
  <tr>
    <th>時</th>
    <th>分</th>
    <th></th>
    <th>時</th>
    <th>分</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <% @dates.each do |day| %>
    <tr>
      <td><%= day.worked_on.to_s(:date) %></td>
      <td><%= %w{日 月 火 水 木 金 土}[day.worked_on.wday] %></td>

　　　　　 <td><% if day.worked_on.wday == 土 %></td>
<td><%= font color="# 0000ff">土< %></font></td>

試したこと

<td><% if day.worked_on.wday == 土 %></td> <td><%= font color="# 0000ff">土< %></font></td>

補足情報（FW/ツールのバージョンなど）

Answer 1

コードは markdown の [コード] に修正がうれしいです

<td><%= %w{日 月 火 水 木 金 土}[day.worked_on.wday] %></td> <td><% if day.worked_on.wday == 土 %></td> <td><%= font color="# 0000ff">土< %></font></td>

と３カラムに渡って曜日が有りますが、やりたいのは１カラムに曜日が表示されて、土日は文字を赤くしたい、ということですね？

<td class='<%= "wday#{day.worked_on.wday}"%>'> <%= %w{日 月 火 水 木 金 土}[day.worked_on.wday] %></td>

として、class wday0,, wday6 をわりふり、stylesheet　で wday0,wday6に赤を指定してはどうでしょう

Comments

[doragon11]

ありがとうございます！　クラスにわけるという発想はすごいですね
ただクラスわけをどのようにコードにしていったら良いかが、わかりません

classのあとにクラス名を大文字からはじめる位しか知識がありません
この場合だと　

class Day
end

でしょうか？
属性を持たせるattr_accessorは必要になるのでしょうか？
大変お手数だとは存じますが
クラスのつくり方を教えて頂けると、
助かります

[winterboum]

ここで言ってる class　は Ruby の classではなく、html、CSSのclassのことです。
<td class='<%= "wday#{day.worked_on.wday}"%>'> <%= %w{日 月 火 水 木 金 土}[day.worked_on.wday] %></td>
と書けば
<td class='wday0'> 日</td>
:
<td class='wday6'> 土</td>

となります

[doragon11]

すごくすっきりしました
ありがとうございます

<td class='wday0'> 日</td>は
それぞれ月、火、水、木、金も含めて
書き出すようにして

stlesheetで色の設定をするには

wday0　{
　color: red;
}

のような形でしょうか？

[winterboum]

ですね。
1-5はclassつけなくても良いんですが、そこに場合分け入れるとごちゃごちゃするんでつけちゃいました。
if、case の嫌いな男です

Answer 2

ヘルパーメソッド (app/helpers/*) として定義すると、 View 側の記述・コードの見た目がスッキリするのではないでしょうか

ヘルパー側：

# グローバルに使うなら ApplicationHelper に記述
# そうでないならコントローラ名に対応したファイルに記述
module SomeOfHelper
  # ヘルパーメソッドの定義
  # FIXME: より適切な名前があれば そちらに更新する
  def week_color(date)
    # 与えられた日付から日本語表記に変換
    displaying_label =
      %w[日 月 火 水 木 金 土][date.wday]

    # 土・日曜日のみ、<span/> タグで括って、クラス属性値を付与
    # CSS 側のスタイル定義で色を変える
    # NOTE: クラス名は CSS 定義と適宜対応させる
    if date.saturday?
      tag.span(displaying_label, class: 'saturday')
    elsif date.sunday?
      tag.span(displaying_label, class: 'sunday')
    else
      displaying_label
    end
  end
end

View 側：

<td><%= day.worked_on.to_s(:date) %></td>
<% # ヘルパーメソッドを利用して日付から曜日に変換表示 %>
<td><%= week_color(day) %></td>

なにか参考になれば幸いです

Link

• ActionView::Helpers::TagHelper#tag

Comments

[doragon11]

すごくシンプルなコードになっていて、素敵です
動作をまだ、確認しきれていないのですが、大変参考になります
同じ実装結果でも、コードの書き方が、様々で皆さんの発想に感動します

Answer 3

曜日の一部に色を付ける方法について

コードは markdown の [コード] に修正されては？

Comments

[doragon11]

ありがとうございます！markdown、次回から使います‼