personal/lecture-attendance-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update lecture view and attendance tracker styling

Browse Source
This commit is contained in:
Joshua Coles 2024-02-04 19:45:53 +00:00
parent 39554fb176
commit ab43d0f7a0
7 changed files with 134 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/views/attendance_tracker/_course_table.erb
View File

@ -1,42 +1,27 @@
<div class="divide-y divide-gray-300 w-full"> <div class="divide-y divide-gray-300 w-full">
<div class="py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4"> <div class="py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-5">
<div>Lecture</div> <div>Lecture</div>
<div>Date</div>
<div>Status</div> <div>Status</div>
<div>Action</div> <div>Action</div>
<div>Recording</div> <div>Recording</div>
</div> </div>
<% course.lectures.sort_by(&:start_time).group_by(&:week_number).each do |(week_number, lectures)| %> <% course.lectures.sort_by(&:start_time).group_by(&:week_number).each do |(week_number, lectures)| %>
<div class="py-3.5 bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4"> <div class="py-3.5 bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 flex flex-row justify-between">
Week <%= week_number %> Week <%= week_number %>
<div>
<% total_for_week = lectures.sum { |lecture| lecture.total_overall_time }.seconds %>
<%# 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) %>
<% if total_for_week > 0 %>
(Total <%= humanise_duration(lectures.sum { |lecture| lecture.total_overall_time }.seconds) %>
)
<% end %>
</div>
</div> </div>
<% lectures.each do |lecture| %> <%= render lectures, { div: true } %>
<% status_classes = class_names({
'lecture-future': lecture.start_time.future?,
'bg-purple-100': lecture == @current_lecture,
'bg-green-100': lecture.attended?,
}) %>
<div class="<%= status_classes %> px-6 py-4 flex justify-between items-center grid grid-cols-4">
<div class="whitespace-nowrap text-sm font-medium text-gray-900">
<%= lecture.title %>
</div>
<div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
<%= render partial: 'lecture_status_icons', locals: { lecture: } %>
</div>
<div class="whitespace-nowrap text-sm font-medium text-gray-900">
<%= render partial: '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>
<% end %>
<% end %> <% end %>
</div> </div>

12
app/views/attendance_tracker/course_focus.html.erb
View File

@ -8,14 +8,6 @@
<% end %> <% end %>
</div> </div>
<div class="flex flex-col gap-4"> <div class="mx-10 mt-4 shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<div class="mt-8 flow-root"> <%= render partial: 'course_table', locals: { course: @course, current_lecture: @current_lecture } %>
<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 w-full">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<%= render partial: 'course_table', locals: { course: @course, current_lecture: @current_lecture } %>
</div>
</div>
</div>
</div>
</div> </div>

20
app/views/attendance_tracker/overview.erb
View File

@ -2,13 +2,21 @@
<h1 class="text-3xl font-medium">Overview</h1> <h1 class="text-3xl font-medium">Overview</h1>
</div> </div>
<div class="grid grid-cols-2 gap-2"> <div class="flex flex-row flex-wrap gap-4 justify-around">
<% @courses.each do |course| %> <% @courses.each do |course| %>
<div class="mt-4 py-2"> <div class="min-w-[350px] sm:min-w-[500px] flex-grow max-w-lg">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg"> <div class="flex flex-row gap-2 items-center">
<div class="divide-y divide-gray-300 w-full"> <h1 class="text-xl font-medium"><%= course.title %></h1>
<%= render partial: 'course_table', locals: { course: course } %>
</div> <% if course.homepage.present? %>
<a class="align-middle" href="<%= course.homepage %>">
<i class="fa fa-link text-blue-600"></i>
</a>
<% end %>
</div>
<div class="mt-4 shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<%= render partial: 'course_table', locals: { course: course, current_lecture: @current_lecture } %>
</div> </div>
</div> </div>
<% end %> <% end %>

4
app/views/attendance_tracker/today.html.erb
View File

@ -27,11 +27,11 @@
</div> </div>
<div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide"> <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
<%= render partial: 'lecture_status_icons', locals: { lecture: } %> <%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
</div> </div>
<div class="whitespace-nowrap text-sm font-medium text-gray-900"> <div class="whitespace-nowrap text-sm font-medium text-gray-900">
<%= render partial: 'lecture_action', locals: { lecture: } %> <%= render partial: 'lectures/lecture_action', locals: { lecture: } %>
</div> </div>
</div> </div>
<% end %> <% end %>

156
app/views/lectures/_lecture.html.erb
View File

@ -1,63 +1,109 @@
<tr class="<%= class_names({ <% if local_assigns[:div] %>
'lecture-future': lecture.start_time.future?, <% status_classes = class_names({
'bg-green-100': lecture.attended?, 'lecture-future': lecture.start_time.future?,
}) %>"> 'bg-purple-100': lecture == @current_lecture,
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6"> 'bg-green-100': lecture.attended?,
<%= lecture.title %> }) %>
<% if lecture.online %> <div class="<%= status_classes %> px-6 py-4 flex justify-between items-center grid grid-cols-5">
<i class="fa fa-solid fa-globe text-gray-500"></i> <div class="whitespace-nowrap text-sm font-medium text-gray-900">
<% end %> <%= lecture.title %>
</td>
<td <% if lecture.online %>
class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" <i class="fa fa-solid fa-globe text-gray-500"></i>
data-controller="popover" <% end %>
data-action="mouseenter->popover#show mouseleave->popover#hide" </div>
>
<%= lecture.start_time.to_fs(:dmy) %>
<template data-popover-target="content"> <div
<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"> class="whitespace-nowrap text-sm text-gray-500"
<%= lecture.start_time.to_fs(:time) %> &dash; <%= lecture.end_time.to_fs(:time) %> data-controller="popover"
</div> data-action="mouseenter->popover#show mouseleave->popover#hide"
</template> >
</td> <%= 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"> <template data-popover-target="content">
<%= render partial: 'lecture_status_icons', locals: { lecture: } %> <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">
</td> <%= lecture.start_time.to_fs(:time) %> &dash; <%= lecture.end_time.to_fs(:time) %>
</div>
</template>
</div>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
<% joinable_time = lecture.start_time - 5.minutes %> <%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
<% if joinable_time.future? %> </div>
<%= button_to "Prepare",
lecture_start_preparation_path(id: lecture.id), <div class="whitespace-nowrap text-sm font-medium text-gray-900">
class: 'action-button' <%= render partial: 'lectures/lecture_action', locals: { lecture: } %>
%> </div>
<% elsif joinable_time.past? && !lecture.attended? %>
<% start_label = if lecture.is_live? then <div class="whitespace-nowrap text-sm font-medium text-gray-900">
"Join" <% if lecture.recording %>
else <%= link_to "Open recording", lecture.recording&.recording_url %>
"Start" <% end %>
end %> </div>
<%= button_to start_label, </div>
lectures_start_path(id: lecture.id), <% else %>
class: 'action-button' <tr class="<%= class_names({
%> 'lecture-future': lecture.start_time.future?,
<% else %> 'bg-green-100': lecture.attended?,
<div class="flex justify-center"> }) %>">
<%= button_to "Review", <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
lecture_start_review_path(id: lecture.id), <%= 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) %> &dash; <%= 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' class: 'action-button'
%> %>
</div> <% elsif joinable_time.past? && !lecture.attended? %>
<% end %> <% start_label = if lecture.is_live? then
</td> "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"> <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<% if lecture.recording %> <% if lecture.recording %>
<%= link_to "Open recording", lecture.recording&.recording_url %> <%= link_to "Open recording", lecture.recording&.recording_url %>
<% end %> <% end %>
</td> </td>
</tr> </tr>
<% end %>

0
app/views/attendance_tracker/_lecture_action.html.erb → app/views/lectures/_lecture_action.html.erb
View File

0
app/views/attendance_tracker/_lecture_status_icons.html.erb → app/views/lectures/_lecture_status_icons.html.erb
View File