Joshua Coles
a0918ce011
In the attendance tracker view, the total times for preparation, in lecture, and review have been humanized for better readability. Also, total time spent on lectures for each week has been included for a quicker overview. A helper method 'humanise_duration' has been added in application helper to convert time into a more readable format. Changes have been done in 'lecture' model for calculation of total time.
141 lines
7.4 KiB
Plaintext
141 lines
7.4 KiB
Plaintext
<h1 class="text-3xl font-medium">Attendance Tracker</h1>
|
|
|
|
<div class="px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row gap-4">
|
|
<% @courses.each do |course| %>
|
|
<div class="mt-8 flow-root">
|
|
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div class="inline-block py-2 align-middle px-6 lg:px-8">
|
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
|
|
<h2 class="text-2xl p-2 px-4"><%= course.title %></h2>
|
|
|
|
<table class="border-t-2 divide-y divide-gray-300 w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Lecture</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Action</th>
|
|
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Recording</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<% course.lectures.order(:start_time).group_by { |lecture| lecture.week_number }.each do |(week_number, lectures)| %>
|
|
<tr class="border-t border-gray-200">
|
|
<th colspan="5" scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
|
|
<div class="flex flex-row justify-between">
|
|
<div class="">
|
|
Week <%= week_number %>
|
|
</div>
|
|
|
|
<div>
|
|
<%# TODO: Improve this figure, atm it is for lectures in week, not time spent in week (ie
|
|
prepping for lecture next week will count in next week not current week) %>
|
|
(Total <%= humanise_duration(lectures.sum { |lecture| lecture.total_overall_time }.seconds) %>)
|
|
</div>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
|
|
<% lectures.reject(&:cancelled).each do |lecture| %>
|
|
<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 %>
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
|
<%= lecture.start_time.to_fs(:dmy) %>
|
|
</td>
|
|
|
|
<% if lecture.cancelled %>
|
|
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" colspan="3">
|
|
<div class="flex justify-center">
|
|
Cancelled
|
|
</div>
|
|
</td>
|
|
<% else %>
|
|
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
|
|
<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? %>
|
|
<i class="fa fa-chalkboard-user text-green-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>
|
|
</td>
|
|
|
|
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
|
|
<% if lecture.start_time.future? %>
|
|
<%= button_to "Prepare",
|
|
lecture_start_preparation_path(id: lecture.id),
|
|
class: 'action-button'
|
|
%>
|
|
<% elsif lecture.start_time.past? && !lecture.attended? %>
|
|
<%= button_to "Start",
|
|
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>
|
|
<% end %>
|
|
</tr>
|
|
<% end %>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|