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:
joshuacoles
2024-02-04 19:45:53 +00:00
parent 39554fb176
commit ab43d0f7a0
7 changed files with 134 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/attendance_tracker/_course_table.erb
+15 -30
View File
@@ -1,42 +1,27 @@
<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>Date</div>
<div>Status</div>
<div>Action</div>
<div>Recording</div>
</div>
<% 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 %>
<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>
<% lectures.each do |lecture| %>
<% 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 %>
<%= render lectures, { div: true } %>
<% end %>
</div>
</div>
app/views/attendance_tracker/_lecture_action.html.erb
-27
View File
@@ -1,27 +0,0 @@
<% 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 %>
app/views/attendance_tracker/_lecture_status_icons.html.erb
-47
View File
@@ -1,47 +0,0 @@
<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>
app/views/attendance_tracker/course_focus.html.erb
+2 -10
View File
@@ -8,14 +8,6 @@
<% end %>
</div>
<div class="flex flex-col gap-4">
<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 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 class="mx-10 mt-4 shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<%= render partial: 'course_table', locals: { course: @course, current_lecture: @current_lecture } %>
</div>
app/views/attendance_tracker/overview.erb
+14 -6
View File
@@ -2,13 +2,21 @@
<h1 class="text-3xl font-medium">Overview</h1>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="flex flex-row flex-wrap gap-4 justify-around">
<% @courses.each do |course| %>
<div class="mt-4 py-2">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<div class="divide-y divide-gray-300 w-full">
<%= render partial: 'course_table', locals: { course: course } %>
</div>
<div class="min-w-[350px] sm:min-w-[500px] flex-grow max-w-lg">
<div class="flex flex-row gap-2 items-center">
<h1 class="text-xl font-medium"><%= course.title %></h1>
<% 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>
<% end %>
app/views/attendance_tracker/today.html.erb
+2 -2
View File
@@ -27,11 +27,11 @@
</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: } %>
<%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
</div>
<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>
<% end %>