Update lecture view and attendance tracker styling
This commit is contained in:
@@ -1,63 +1,109 @@
|
||||
<tr class="<%= class_names({
|
||||
'lecture-future': lecture.start_time.future?,
|
||||
'bg-green-100': lecture.attended?,
|
||||
}) %>">
|
||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||
<%= lecture.title %>
|
||||
<% if local_assigns[:div] %>
|
||||
<% status_classes = class_names({
|
||||
'lecture-future': lecture.start_time.future?,
|
||||
'bg-purple-100': lecture == @current_lecture,
|
||||
'bg-green-100': lecture.attended?,
|
||||
}) %>
|
||||
|
||||
<% if lecture.online %>
|
||||
<i class="fa fa-solid fa-globe text-gray-500"></i>
|
||||
<% end %>
|
||||
</td>
|
||||
<div class="<%= status_classes %> px-6 py-4 flex justify-between items-center grid grid-cols-5">
|
||||
<div class="whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
<%= lecture.title %>
|
||||
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
|
||||
data-controller="popover"
|
||||
data-action="mouseenter->popover#show mouseleave->popover#hide"
|
||||
>
|
||||
<%= lecture.start_time.to_fs(:dmy) %>
|
||||
<% if lecture.online %>
|
||||
<i class="fa fa-solid fa-globe text-gray-500"></i>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<template data-popover-target="content">
|
||||
<div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
|
||||
<%= lecture.start_time.to_fs(:time) %> ‐ <%= lecture.end_time.to_fs(:time) %>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
<div
|
||||
class="whitespace-nowrap text-sm text-gray-500"
|
||||
data-controller="popover"
|
||||
data-action="mouseenter->popover#show mouseleave->popover#hide"
|
||||
>
|
||||
<%= lecture.start_time.to_fs(:dmy) %>
|
||||
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
|
||||
<%= render partial: 'lecture_status_icons', locals: { lecture: } %>
|
||||
</td>
|
||||
<template data-popover-target="content">
|
||||
<div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
|
||||
<%= lecture.start_time.to_fs(:time) %> ‐ <%= lecture.end_time.to_fs(:time) %>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
<% joinable_time = lecture.start_time - 5.minutes %>
|
||||
<% if joinable_time.future? %>
|
||||
<%= button_to "Prepare",
|
||||
lecture_start_preparation_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
<% elsif joinable_time.past? && !lecture.attended? %>
|
||||
<% start_label = if lecture.is_live? then
|
||||
"Join"
|
||||
else
|
||||
"Start"
|
||||
end %>
|
||||
<%= button_to start_label,
|
||||
lectures_start_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
<% else %>
|
||||
<div class="flex justify-center">
|
||||
<%= button_to "Review",
|
||||
lecture_start_review_path(id: lecture.id),
|
||||
<div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
|
||||
<%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
|
||||
</div>
|
||||
|
||||
<div class="whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
<%= render partial: 'lectures/lecture_action', locals: { lecture: } %>
|
||||
</div>
|
||||
|
||||
<div class="whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
<% if lecture.recording %>
|
||||
<%= link_to "Open recording", lecture.recording&.recording_url %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<tr class="<%= class_names({
|
||||
'lecture-future': lecture.start_time.future?,
|
||||
'bg-green-100': lecture.attended?,
|
||||
}) %>">
|
||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
|
||||
<%= lecture.title %>
|
||||
|
||||
<% if lecture.online %>
|
||||
<i class="fa fa-solid fa-globe text-gray-500"></i>
|
||||
<% end %>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
|
||||
data-controller="popover"
|
||||
data-action="mouseenter->popover#show mouseleave->popover#hide"
|
||||
>
|
||||
<%= lecture.start_time.to_fs(:dmy) %>
|
||||
|
||||
<template data-popover-target="content">
|
||||
<div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
|
||||
<%= lecture.start_time.to_fs(:time) %> ‐ <%= lecture.end_time.to_fs(:time) %>
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
|
||||
<%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
<% joinable_time = lecture.start_time - 5.minutes %>
|
||||
<% if joinable_time.future? %>
|
||||
<%= button_to "Prepare",
|
||||
lecture_start_preparation_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
</div>
|
||||
<% end %>
|
||||
</td>
|
||||
<% elsif joinable_time.past? && !lecture.attended? %>
|
||||
<% start_label = if lecture.is_live? then
|
||||
"Join"
|
||||
else
|
||||
"Start"
|
||||
end %>
|
||||
<%= button_to start_label,
|
||||
lectures_start_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
<% else %>
|
||||
<div class="flex justify-center">
|
||||
<%= button_to "Review",
|
||||
lecture_start_review_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
</div>
|
||||
<% end %>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
<% if lecture.recording %>
|
||||
<%= link_to "Open recording", lecture.recording&.recording_url %>
|
||||
<% end %>
|
||||
</td>
|
||||
</tr>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
||||
<% if lecture.recording %>
|
||||
<%= link_to "Open recording", lecture.recording&.recording_url %>
|
||||
<% end %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<% joinable_time = lecture.start_time - 5.minutes %>
|
||||
|
||||
<% if lecture == @current_lecture %>
|
||||
<div class="py-1">
|
||||
Started
|
||||
</div>
|
||||
<% elsif joinable_time.future? %>
|
||||
<%= button_to "Prepare",
|
||||
lecture_start_preparation_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
<% elsif joinable_time.past? && !lecture.attended? %>
|
||||
<% start_label = if lecture.is_live? then
|
||||
"Join"
|
||||
else
|
||||
"Start"
|
||||
end %>
|
||||
<%= button_to start_label,
|
||||
lectures_start_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
<% else %>
|
||||
<%= button_to "Review",
|
||||
lecture_start_review_path(id: lecture.id),
|
||||
class: 'action-button'
|
||||
%>
|
||||
<% end %>
|
||||
@@ -0,0 +1,47 @@
|
||||
<div class="flex flex-row gap-2">
|
||||
<% prep_icon_class = if lecture.prepared?
|
||||
'text-green-700'
|
||||
else
|
||||
'text-slate-300'
|
||||
end %>
|
||||
<i class="fa fa-hourglass-start <%= prep_icon_class %>"></i>
|
||||
|
||||
<% if lecture.attended? %>
|
||||
<% if lecture.entirely_attended_in_person? %>
|
||||
<i class="fa fa-chalkboard-user text-green-700"></i>
|
||||
<% else %>
|
||||
<i class="fa fa-video text-green-700"></i>
|
||||
<% end %>
|
||||
<% elsif lecture.is_live? %>
|
||||
<i class="fa fa-video text-blue-700"></i>
|
||||
<% elsif lecture.start_time.past? %>
|
||||
<i class="fa fa-times text-red-700"></i>
|
||||
<% else %>
|
||||
<div class="flex-grow"></div>
|
||||
<% end %>
|
||||
|
||||
<% reviewed_icon_class = if lecture.start_time.future?
|
||||
'invisible'
|
||||
elsif lecture.reviewed?
|
||||
'text-green-700'
|
||||
else
|
||||
'text-slate-300'
|
||||
end %>
|
||||
<i class="fa fa-hourglass-end <%= reviewed_icon_class %>"></i>
|
||||
</div>
|
||||
|
||||
<template data-popover-target="content">
|
||||
<% unless lecture.tracked_time_entries.empty? %>
|
||||
<div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
|
||||
<div>
|
||||
Preparation: <%= humanise_duration(lecture.total_preparation_time) %>
|
||||
</div>
|
||||
<div>
|
||||
In lecture: <%= humanise_duration(lecture.total_attendance_time) %>
|
||||
</div>
|
||||
<div>
|
||||
Review: <%= humanise_duration(lecture.total_review_time) %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</template>
|
||||
Reference in New Issue
Block a user