草野球の出欠確認Webアプリを作ろう！　part.12

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

[<<前回の記事](https://qiita.com/tomodachi_uec/items/9e99dcc0222892dc5ca7)

##今回やったこと

前回記事でbootstrapを導入した際に、既存のCSSが適用されなくなってしまい、一時気力を失ってしまった。
しかし、これまで作ったものをbootstrapのスタイルに置換することで、見た目はこれまでと違うが以降の作業を継続できるようにした。
（未考慮の部分は時間ややる気があるときに整えることにする、後回しともいう）

以下、今回主にクラスなどの部分を編集したスケジュール機能とユーザー機能の画面を示す。

###スケジュール機能

####一覧画面

```erb:app/views/schedules/index.html.erb
<h1>チームの予定一覧</h1>
<div class="mx-3 d-block">
	<%= link_to '新規作成', new_schedule_path, class: 'btn btn-primary' %>
</div>
<% if @schedules.blank? %>
  <div class="container mx-auto"><%= "表示できる予定がありません。" %></div>
<% else %>
  <div class="container mx-auto table-responsive">
    <table id="schedules_table" class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th scope="col">件名</th>
          <th scope="col">予定日</th>
          <th scope="col">予定の時間</th>
        </tr>
      </thead>
      <tbody>
        <% @schedules.each do |lst| %>
          <tr class="clickable-row" data-href="<%= schedule_path lst.id %>">
            <td><%= lst.title %></td>
            <td><%= lst.date_of %></td>
            <td><%= lst.start_time.strftime('%H:%M') %> ～ <%= lst.end_time.strftime('%H:%M') %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
<% end %>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/6d6a9d61-0c13-4c07-11dd-5a8753c67dcf.png)

####新規画面

```erb:app/views/schedules/new.html.erb
<h1>予定の新規作成</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to '予定一覧へ', schedules_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @schedules, url: {action: "create"} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">件名：</label>
      <%= f.text_field :title, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">予定の日付：</label>
      <%= raw sprintf( f.date_select(:date_of, 
                                      use_month_numbers: true,
                                      order:             [:year,:month,:day],
                                      selected:          Time.zone.now,
                                      start_year:        Time.zone.now.year + 5,
                                      end_year:          Time.zone.now.year,
                                      date_separator:    '%s'
                                    ),'年','月') + '日'
                                  %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">開始時間：</label>
      <%= f.time_select :start_time, class: 'form-control' %>
      &nbsp;～&nbsp;
      <label class="form-label">終了時間：</label>
      <%= f.time_select :end_time , class: 'form-control'%>
      &nbsp;（
      <label class="form-label">集合時間：</label>
      <%= f.time_select :meeting_time, class: 'form-control' %>
      ）
    </div>

    <div class="d-block">
      <%= f.submit "新規作成する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/177f65ac-159d-e7f6-f08d-c24cb43f31d3.png)

####編集画面

```erb:app/views/schedules/edit.html.erb
<h1>予定の編集</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to '予定一覧へ', schedules_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @schedules, url: {action: "update", id: @schedules.id} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">件名：</label>
      <%= f.text_field :title, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">予定の日付：</label>
      <%= raw sprintf( f.date_select(:date_of, 
                                      use_month_numbers: true,
                                      order:             [:year,:month,:day],
                                      selected:          Time.zone.now,
                                      start_year:        Time.zone.now.year + 5,
                                      end_year:          Time.zone.now.year,
                                      date_separator:    '%s'
                                    ),'年','月') + '日'
                                  %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">開始時間：</label>
      <%= f.time_select :start_time, class: 'form-control' %>
      &nbsp;～&nbsp;
      <label class="form-label">終了時間：</label>
      <%= f.time_select :end_time, class: 'form-control' %>
      &nbsp;（
      <label class="form-label">集合時間：</label>
      <%= f.time_select :meeting_time, class: 'form-control' %>
      ）
    </div>

    <div class="d-block">
      <%= f.submit "保存する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/2e249574-9db3-86eb-c0a1-fc19321fa1de.png)


####詳細画面

```erb:app/views/schedules/show.html.erb
<h1>予定の詳細</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to '予定一覧へ', schedules_path, class: 'btn btn-primary' %>
  </div>

  <div class="form-group mb-3">
    <label class="form-label">件名：</label>
    <%= @schedules.title %>
  </div>
  <div class="form-group mb-3">
    <label class="form-label">予定の日付：</label>
    <%= @schedules.date_of.strftime("%Y年%m月%d日") %>
  </div>
  <div class="form-group mb-3">
    <label class="form-label">開始時間 ～ 終了時間： </label>
    <%= @schedules.start_time.strftime("%H:%M") %>
    &nbsp;～&nbsp;
    <%= @schedules.end_time.strftime("%H:%M") %>
    &nbsp;（
    <label class="form-label">集合時間：</label>
    <%= @schedules.meeting_time.strftime("%H:%M") %>  
    ）
  </div>
  <div class="d-block">
    <%= link_to '編集', edit_schedule_path(@schedules.id), class: 'btn btn-success' %>
    <%= link_to '削除', schedule_path(@schedules.id), method: :delete, class: 'btn btn-danger' %>
  </div>
</div>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/19ade4c7-76b8-2e9b-e398-24c109a5fa07.png)


###ユーザー機能

####一覧画面

```erb:app/views/users/index.html.erb
<h1>メンバーの一覧</h1>
<div class="mx-3 d-block">
  <%= link_to '新規作成', new_user_path, class: 'btn btn-primary' %>
</div>
<% if @users.blank? %>
  <div><%= "表示できるメンバーがいません。" %></div>
<% else %>
  <div class="container mx-auto table-responsive">
    <table class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th scope="col">ユーザー名</th>
          <th scope="col">メールアドレス</th>
        </tr>
      </thead>
      <tbody>
        <% @users.each do |lst| %>
          <tr class="clickable-row" data-href="<%= user_path lst.id %>">
            <td><%= lst.name %></td>
            <td><%= lst.email %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
<% end %>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/1a195483-8e11-81c9-4587-b6d03f5b6084.png)

####新規画面

```erb:app/views/users/new.html.erb
<h1>ユーザーの新規作成</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to 'ユーザー一覧へ', users_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @users, url: {action: "create"} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">ユーザー名：</label>
      <%= f.text_field :name, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">メールアドレス：</label>
      <%= f.email_field :email, size: "40", class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード：</label>
      <%= f.password_field :password, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード（確認欄）：</label>
      <%= f.password_field :password_confirmation, class: 'form-control' %>
    </div>

    <div class="d-block">
      <%= f.submit "新規作成する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/60462f49-6dad-aac0-ade3-fda0b5a1bdf8.png)

####編集画面

```erb:app/views/users/edit.html.erb
<h1>ユーザーの編集</h1>
<div class="container mx-auto">
  <div class="mb-3 d-block">
    <%= link_to 'ユーザー一覧へ', users_path, class: 'btn btn-primary' %>
  </div>

  <%= form_for @users, url: {action: "update", id: @users.id} do |f| %>
    <div class="form-group mb-3">
      <label class="form-label">ユーザー名：</label>
      <%= f.text_field :name, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">メールアドレス：</label>
      <%= f.email_field :email, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード：</label>
      <%= f.password_field :password, class: 'form-control' %>
    </div>
    <div class="form-group mb-3">
      <label class="form-label">パスワード（確認欄）：</label>
      <%= f.password_field :password_confirmation, class: 'form-control' %>
    </div>

    <div class="d-block">
      <%= f.submit "保存する", class: 'btn btn-success' %>
    </div>
  <% end %>
</div>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/1b1ba096-f895-abbf-3e78-f64c094b0ed1.png)

####詳細画面

```erb:app/views/users/show.html.erb
<h1>ユーザーの詳細</h1>
<div class="container mx-auto">
	<div class="mb-3 d-block">
	  <%= link_to 'ユーザー一覧へ', users_path, class: 'btn btn-primary' %>
	</div>

	<div class="form-group mb-3">
	  <label class="form-label">ユーザー名：</label>
	  <%= @users.name %>
	</div>
	<div class="form-group mb-3">
	  <label class="form-label">メールアドレス：</label>
	  <%= @users.email %>
	</div>
	<div class="form-group mb-3">
	  <label class="form-label">パスワード：</label>
	  <%= "（セキュリティに配慮し、パスワードは非表示です）" %>
	</div>

	<div class="d-block">
	  <%= link_to '編集', edit_user_path(@users.id), class: 'btn btn-success' %>
	  <%= link_to '削除', user_path(@users.id), method: :delete, class: 'btn btn-danger' %>
	</div>
</div>
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/34bcc40e-1298-850f-58d9-016877190f46.png)


ちまちましか進められなくて進みが遅いので、できればどこかで時間を作って作業したいと思う。
内容はゼロだけど今回はここまで。


[次回の記事>>](https://qiita.com/tomodachi_uec/items/67b6718c70e2b5f49387)