Add in lecture time popover

app/javascript/controllers/index.js

@@ -6,7 +6,7 @@ import { application } from "controllers/application"
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
 eagerLoadControllersFrom("controllers", application)
 
-import { Popover } from "tailwindcss-stimulus-components"
+import Popover from 'stimulus-popover'
 application.register('popover', Popover)
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)

app/models/attendance.rb

@@ -5,4 +5,9 @@ class Attendance < ApplicationRecord
     :concurrent,
     :catchup
   ]
+
+  def duration
+    toggl_data['time_entries'].sum { |entry| entry['seconds'] }
+                              .seconds
+  end
 end

app/views/attendance_tracker/index.html.erb

@@ -58,8 +58,8 @@
                       <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                       </td>
                     <% else %>
-                      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 flex justify-center">
+                      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 flex justify-center" data-controller="popover">
-                        <div>
+                        <div data-action="mouseenter->popover#show mouseleave->popover#hide">
                           <% if lecture.attendance.nil? %>
                             <i class="fa fa-times text-red-700"></i>
                           <% elsif lecture.attendance.kind == 'concurrent' %>
@@ -69,6 +69,14 @@
                           <% else %>
                             <% lecture.attendance.kind %>
                           <% end %>
+
+                          <% if lecture.attendance.present? %>
+                            <template data-popover-target="content">
+                              <div class="content absolute max-w-xs bg-gray-300 rounded p-2" data-popover-target="card">
+                                In lecture: <%= lecture.attendance.duration.in_minutes.round %> minutes
+                              </div>
+                            </template>
+                          <% end %>
                         </div>
                       </td>
 

config/importmap.rb

@@ -5,4 +5,4 @@ pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
-pin "tailwindcss-stimulus-components", to: "https://ga.jspm.io/npm:tailwindcss-stimulus-components@4.0.4/dist/tailwindcss-stimulus-components.module.js"
+pin "stimulus-popover", to: "https://ga.jspm.io/npm:stimulus-popover@6.2.0/dist/stimulus-popover.mjs"