shift73k/lib/shift73k_web/live/shift_assign_live/index.html.leex

57 lines
1.5 KiB
Text

<h2 class="mb-3 mb-sm-0">
<%= icon_div @socket, "bi-calendar3", [class: "icon baseline"] %>
Assign Shift To Dates
</h2>
<%# month navigation %>
<div class="d-flex justify-content-between align-items-baseline mt-4">
<h3 class="ms-4 text-muted mb-0">
<%= Timex.format!(@cursor_date, "%B %Y", :strftime) %>
</h3>
<div class="me-4">
<a href="#" phx-click="prev-month" class="btn btn-primary">
<%= icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %>
Prev
</a>
<a href="#" phx-click="next-month" class="btn btn-primary">
Next
<%= icon_div @socket, "bi-chevron-right", [class: "icon baseline"] %>
</a>
</div>
</div>
<%# calendar month table display %>
<table class="table table-rounded shadow mt-3">
<thead>
<tr>
<%= for {day_name, _i} <- Enum.with_index(@day_names) do %>
<th width="14%">
<%= day_name %>
</th>
<% end %>
</tr>
</thead>
<tbody>
<%= for week <- @week_rows do %>
<tr>
<%= for day <- week do %>
<%= cond do %>
<% Timex.compare(day, @current_date, :days) == 0 -> %>
<td width="14%" style="height: 6rem;" class="bg-info text-white">
<% day.month != @cursor_date.month -> %>
<td width="14%" style="height: 6rem;" class="bg-light text-gray">
<% true -> %>
<td width="14%" style="height: 6rem;">
<% end %>
<%= Timex.format!(day, "%d", :strftime) %>
</td>
<% end %>
</tr>
<% end %>
</tbody>
</table>