You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.1 KiB
111 lines
4.1 KiB
<h1 class="mb-3">Kalender – <%= Date::MONTHNAMES[@month] %> <%= @year %></h1>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<%= link_to "← Vorheriger Monat", calendar_month_path(@year, @month - 1, typ: @filter_typ, art: @filter_art), class: "btn btn-outline-primary" %>
|
|
<%= link_to "Nächster Monat →", calendar_month_path(@year, @month + 1, typ: @filter_typ, art: @filter_art), class: "btn btn-outline-primary ms-2" %>
|
|
</div>
|
|
|
|
<div class="col-md-6 text-end">
|
|
<%= form_with url: calendar_month_path(@year, @month), method: :get, local: true, class: "row g-2 justify-content-end" do %>
|
|
<div class="col-auto">
|
|
<%= select_tag :typ, options_for_select(User::PRAKTIKUMSTYPEN, @filter_typ), include_blank: "Alle Typen", class: "form-select" %>
|
|
</div>
|
|
<div class="col-auto">
|
|
<%= select_tag :art, options_for_select(User::ENTRY_ARTEN, @filter_art), include_blank: "Alle Arten", class: "form-select" %>
|
|
</div>
|
|
<div class="col-auto">
|
|
<%= submit_tag "Filtern", class: "btn btn-outline-secondary" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-bordered calendar-table">
|
|
<thead class="table-light">
|
|
<% day_names = I18n.t("date.abbr_day_names") %>
|
|
<% monday_first = day_names.rotate(1) %>
|
|
<% monday_first.each do |day| %>
|
|
<th><%= day %></th>
|
|
<% end %>
|
|
</thead>
|
|
<tbody>
|
|
<% weeks = @days.in_groups_of(7, nil) %>
|
|
<% weeks.each do |week| %>
|
|
<tr>
|
|
<% week.each do |date| %>
|
|
<td class="day-cell
|
|
<%= 'bg-light' if date.blank? %>
|
|
<%= 'outside-month' if date.month != @month %>
|
|
<%= 'today' if date == Date.current %>"
|
|
data-date="<%= date %>"
|
|
data-label="<%= date&.strftime('%d.%m.%Y') %>">
|
|
|
|
<% if date %>
|
|
<div class="day-box">
|
|
<div class="day-header">
|
|
<span class="day-number"><%= date.day %></span>
|
|
|
|
<%= link_to "+",
|
|
new_entry_path(date: date),
|
|
class: "btn btn-sm btn-success day-add",
|
|
title: "Eintrag hinzufügen",
|
|
onclick: "event.stopPropagation();" %>
|
|
</div>
|
|
|
|
<div class="day-entries">
|
|
<% (@entries[date.to_date] || []).each do |entry| %>
|
|
<%= link_to edit_entry_path(entry),
|
|
class: "day-entry text-decoration-none",
|
|
onclick: "event.stopPropagation();" do %>
|
|
<span class="badge <%= color_class_for(entry) %>">
|
|
<%= entry.entry_art.capitalize %>
|
|
</span>
|
|
<span class="entry-time">
|
|
<%= entry.hours %>h <%= entry.minutes %>min
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</td>
|
|
|
|
<% end %>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
<!-- Tagesmodal -->
|
|
<div class="modal fade" id="dayEntriesModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Einträge für <span id="modal-date-label"></span></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="modal-day-entries"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".day-cell").forEach(cell => {
|
|
cell.addEventListener("click", function () {
|
|
const date = this.dataset.date;
|
|
const label = this.dataset.label;
|
|
const entriesHtml = this.querySelector(".day-entries").innerHTML;
|
|
|
|
document.getElementById("modal-date-label").textContent = label;
|
|
document.getElementById("modal-day-entries").innerHTML = entriesHtml;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById("dayEntriesModal"));
|
|
modal.show();
|
|
});
|
|
});
|
|
});
|
|
</script>
|