Some initial UI work

This commit is contained in:
Joshua Coles 2023-09-29 18:53:43 +01:00
parent 376e80e385
commit d14903fcb4
8 changed files with 53 additions and 38 deletions

View File

@ -72,3 +72,4 @@ group :test do
end end
gem "tailwindcss-rails", "~> 2.0" gem "tailwindcss-rails", "~> 2.0"
gem "font-awesome-sass"

View File

@ -88,6 +88,9 @@ GEM
irb (>= 1.5.0) irb (>= 1.5.0)
reline (>= 0.3.1) reline (>= 0.3.1)
erubi (1.12.0) erubi (1.12.0)
ffi (1.16.2)
font-awesome-sass (6.4.2)
sassc (~> 2.0)
globalid (1.2.1) globalid (1.2.1)
activesupport (>= 6.1) activesupport (>= 6.1)
i18n (1.14.1) i18n (1.14.1)
@ -175,6 +178,8 @@ GEM
io-console (~> 0.5) io-console (~> 0.5)
rexml (3.2.6) rexml (3.2.6)
rubyzip (2.3.2) rubyzip (2.3.2)
sassc (2.4.0)
ffi (~> 1.9)
selenium-webdriver (4.10.0) selenium-webdriver (4.10.0)
rexml (~> 3.2, >= 3.2.5) rexml (~> 3.2, >= 3.2.5)
rubyzip (>= 1.2.2, < 3.0) rubyzip (>= 1.2.2, < 3.0)
@ -223,6 +228,7 @@ DEPENDENCIES
bootsnap bootsnap
capybara capybara
debug debug
font-awesome-sass
importmap-rails importmap-rails
jbuilder jbuilder
pg (~> 1.1) pg (~> 1.1)

View File

@ -11,5 +11,6 @@
* It is generally better to create a new file per style scope. * It is generally better to create a new file per style scope.
* *
*= require_tree . *= require_tree .
*= require _font-awesome
*= require_self *= require_self
*/ */

View File

@ -1,4 +1,5 @@
class AttendanceTrackerController < ApplicationController class AttendanceTrackerController < ApplicationController
def index def index
@course = Course.first
end end
end end

View File

@ -1,2 +1,3 @@
class Course < ApplicationRecord class Course < ApplicationRecord
has_many :lectures
end end

View File

@ -3,9 +3,13 @@ class Lecture < ApplicationRecord
enum :status, [ enum :status, [
:future, :future,
:live, :happening_now,
:attended, :attended_in_person,
:watched, :watched_recording,
:missed, :missed,
] ]
def week_number
((start_time.beginning_of_week - Time.new('2023-10-02')) / 1.week).floor
end
end end

View File

@ -5,7 +5,7 @@
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"> <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<h2 class="text-2xl p-2 px-4">Continuum Mechanics</h2> <h2 class="text-2xl p-2 px-4"><%= @course.title %></h2>
<table class="border-t-2 min-w-full divide-y divide-gray-300"> <table class="border-t-2 min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
@ -18,41 +18,40 @@
</thead> </thead>
<tbody class="divide-y divide-gray-200 bg-white"> <tbody class="divide-y divide-gray-200 bg-white">
<tr class="border-t border-gray-200"> <% @course.lectures.group_by { |lecture| lecture.week_number }.each do |(week_number, lectures)| %>
<th colspan="4" scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-5">Week 1</th> <tr class="border-t border-gray-200">
</tr> <th colspan="4" scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Week <%= week_number %></th>
</tr>
<tr> <% lectures.each do |lecture| %>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Lindsay Walton</td> <tr>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Front-end Developer</td> <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">lindsay.walton@example.com</td> <%= lecture.title %>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Member</td> </td>
</tr> <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
<%= lecture.start_time.to_fs(:dmy) %>
<tr class="border-t border-gray-200"> </td>
<th colspan="4" scope="colgroup" class="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-5">Week 1</th> <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
</tr> <% if lecture.status == 'future' %>
<i class="fa fa-clock"></i>
<tr> <% elsif lecture.status == 'happening_now' %>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Lindsay Walton</td> <i class="fa fa-hourglass-start"></i>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Front-end Developer</td> <% elsif lecture.status == 'attended_in_person' %>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">lindsay.walton@example.com</td> <i class="fa fa-chalkboard-user"></i>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Member</td> <% elsif lecture.status == 'watched_recording' %>
</tr> <i class="fa fa-video"></i>
<tr> <% else %>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Lindsay Walton</td> <% lecture.status %>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Front-end Developer</td> <% end %>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">lindsay.walton@example.com</td> </td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Member</td> <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
</tr> <button type="button" class="rounded bg-indigo-600 px-2 py-1 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
<tr> Start
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Lindsay Walton</td> </button>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Front-end Developer</td> </td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">lindsay.walton@example.com</td> </tr>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Member</td> <% end %>
</tr> <% end %>
<!-- More people... -->
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -0,0 +1,2 @@
Time::DATE_FORMATS[:dmy] = "%d/%m/%Y"
Date::DATE_FORMATS[:dmy] = "%d/%m/%Y"