71 lines
3.4 KiB
Plaintext
71 lines
3.4 KiB
Plaintext
<!-- Separate the page into two distinct parts -->
|
|
<div class="reservation-page" data-controller="main-calendar" style="display: block; width: 100%; height: 100vh; overflow: hidden;">
|
|
<!-- Fixed height header -->
|
|
<header style="height: 80px; padding: 15px; background-color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 100;">
|
|
<% content_for :title, t('.title') %>
|
|
|
|
<div class="flex justify-between items-center-calendar">
|
|
<div class="flex items-center space-x-4">
|
|
<h1 class="font-bold text-4xl px-5"><%= t('.title') %></h1>
|
|
<% if notice.present? %>
|
|
<p class="py-1 px-3 ml-4 bg-green-100 text-green-700 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
|
|
<% end %>
|
|
<div class="flex items-center space-x-2 ml-6" data-main-calendar-target="navigation">
|
|
<button data-action="main-calendar#prev" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
<%= t('.prev') %>
|
|
</button>
|
|
<button data-action="main-calendar#today" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
<%= t('.today') %>
|
|
</button>
|
|
<button data-action="main-calendar#next" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
<%= t('.next') %>
|
|
</button>
|
|
<span data-main-calendar-target="dateDisplay" class="ml-3 font-medium"></span>
|
|
</div>
|
|
|
|
<!-- Team Filter Dropdown -->
|
|
<div class="ml-6">
|
|
<label for="team-filter" class="mr-2 font-medium"><%= t('.filter_by_team') %>:</label>
|
|
<select id="team-filter" data-main-calendar-target="teamFilter" data-action="change->main-calendar#filterByTeam" class="rounded-md border-gray-300 shadow-sm px-3 py-1 bg-white">
|
|
<option value="all"><%= t('.all_teams') %></option>
|
|
<% if @company&.teams %>
|
|
<% @company.teams.each do |team| %>
|
|
<option value="<%= team.id %>" style="background-color: <%= team_color(team.id) %>; color: #000000; padding-left: 10px;">
|
|
<%= team.name %>
|
|
</option>
|
|
<% end %>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<%= link_to t('.new_reservation'), new_reservation_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium ml-auto" %>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Calendar container - with fixed top position and precise height calculation -->
|
|
<div class="calendar-container" style="height: calc(100vh - 80px); width: 100%; position: relative; top: 0; left: 0;">
|
|
<div style="height: 100%; width: 100%;">
|
|
<%
|
|
calendar_translations = {
|
|
hours: t('reservations.calendar.hours'),
|
|
delete_confirm: t('reservations.calendar.delete_confirm'),
|
|
delete_success: t('reservations.calendar.delete_success'),
|
|
delete_error: t('reservations.calendar.delete_error'),
|
|
network_error: t('reservations.calendar.network_error'),
|
|
edit: t('reservations.calendar.edit'),
|
|
delete: t('reservations.calendar.delete'),
|
|
all_teams: t('reservations.calendar.all_teams')
|
|
}.to_json
|
|
%>
|
|
<%= tag.div nil,
|
|
data: {
|
|
reservations: @reservations.to_json,
|
|
translations: calendar_translations
|
|
},
|
|
id: "main-calendar",
|
|
style: "height: 100%; width: 100%;"
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div>
|