manager: add hour indicator to partial booking today view (#80043)

chrono/manager/static/css/style.scss

@@ -609,10 +609,11 @@ div#main-content.partial-booking-dayview {
 	--zebra-color:  hsla(0,0%,0%,0.05);
 	--separator-color: white;
 	--separator-size: 2px;
+	--padding: 0.5rem;
 
 	position: relative;
 	background: white;
-	padding: 0.5rem;
+	padding: var(--padding);
 
 	&--hours-list {
 		background: white;
@@ -636,6 +637,7 @@ div#main-content.partial-booking-dayview {
 	}
 	&--registrant-items {
 		margin-top: 0.5rem;
+		position: relative;
 	}
 	&--registrant {
 		display: flex;
@@ -712,6 +714,22 @@ div#main-content.partial-booking-dayview {
 			}
 		}
 	}
+	&--hour-indicator-wrapper {
+		position: absolute;
+		inset: 0 var(--padding) 0 var(--padding);
+		@media (min-width: 761px) {
+			margin-left: var(--registrant-name-width);
+		}
+	}
+	&--hour-indicator {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 1px;
+		height: 100%;
+		background-color: var(--red);
+		z-index: 3;
+	}
 }
 
 .agenda-table.partial-bookings .booking {

chrono/manager/templates/chrono/manager_agenda_day_view.html

@@ -14,7 +14,7 @@
     <a class="date-next pk-button" href="{{ view.get_next_day_url }}"><span class="sr-only">{% trans "Next day" %}</span></a>
   </span>
   <h2 class="date-nav">
-    <span class="date-title">{{ view.date|date:"l j F Y" }}</span>
+    <time datetime="{{ view.date|date:'Y-m-d' }}" class="date-title">{{ view.date|date:"l j F Y" }}</time>
     <button class="date-picker-opener"><span class="sr-only">{% trans "Pick a date" %}</span></button>
     {% with selected_day=view.date|date:"j" selected_month=view.date|date:"n" selected_year=view.date|date:"Y" %}
       <div class="date-picker" style="display: none">

chrono/manager/templates/chrono/manager_partial_bookings_day_view.html

@@ -44,7 +44,34 @@
       </div>
     {% endif %}
 
-    <div class="partial-booking" style="--nb-hours: {{ hours|length }}">
+    <div
+      class="partial-booking"
+      style="--nb-hours: {{ hours|length }}"
+      data-start-datetime="{{ start_datetime.isoformat }}"
+      data-end-datetime="{{ end_datetime.isoformat }}"
+    >
+      {% if view.date.date == today %}
+        <div class="partial-booking--hour-indicator-wrapper" aria-hidden="true">
+          <div class="partial-booking--hour-indicator" hidden></div>
+          <script>
+            const hour_indicator = (function() {
+              const indicator = document.querySelector('.partial-booking--hour-indicator')
+
+              const div_container = document.querySelector('.partial-booking')
+              const start = new Date(div_container.dataset.startDatetime).getTime()
+              const end = new Date(div_container.dataset.endDatetime).getTime() + 3600000 - start
+
+              const indicator_position = function() {
+                const now = Date.now() - start
+                indicator.style.left = now * 100 / end + "%"
+              }
+              indicator_position();
+              setInterval(indicator_position, 60000)
+              indicator.hidden = false;
+            })();
+          </script>
+        </div>
+      {% endif %}
       <div class="partial-booking--hours-list" aria-hidden="true">
         {% for hour in hours %}
           <div class="partial-booking--hour">{{ hour|time:"H" }}&#x202Fh</div>

chrono/manager/views.py

@@ -1645,6 +1645,10 @@ class AgendaDayView(EventChecksMixin, AgendaDateView, DayArchiveView):
         end_time = datetime.time(min(max_time.hour + 1, 23), 0)
         context['hours'] = [datetime.time(hour=i) for i in range(start_time.hour, end_time.hour + 1)]
 
+        context['today'] = localtime().date()
+        context['start_datetime'] = datetime.datetime.combine(self.date.date(), start_time)
+        context['end_datetime'] = datetime.datetime.combine(self.date.date(), end_time)
+
         opening_range_minutes = (
             (end_time.hour + 1) * 60 + end_time.minute - (start_time.hour * 60 + start_time.minute)
         )

tests/manager/test_partial_bookings.py

@@ -244,6 +244,27 @@ def test_manager_partial_bookings_day_view_24_hours(app, admin_user, freezer):
     )
 
 
+@pytest.mark.freeze_time('2023-03-10 08:00')
+def test_manager_partial_bookings_day_view_hour_indicator(app, admin_user, freezer):
+    agenda = Agenda.objects.create(label='Foo bar', kind='events', partial_bookings=True)
+    Event.objects.create(
+        label='Event', start_datetime=now(), end_time=datetime.time(18, 00), places=10, agenda=agenda
+    )
+
+    app = login(app)
+    url = '/manage/agendas/%s/day/%d/%d/%d/' % (agenda.pk, now().year, now().month, now().day)
+    resp = app.get(url)
+
+    assert resp.pyquery('.partial-booking--hour-indicator')
+    assert resp.pyquery('.partial-booking').attr('data-start-datetime') == '2023-03-10T08:00:00'
+    assert resp.pyquery('.partial-booking').attr('data-end-datetime') == '2023-03-10T19:00:00'
+
+    freezer.move_to('2023-03-11 08:00')
+
+    resp = app.get(url)
+    assert not resp.pyquery('.partial-booking--hour-indicator')
+
+
 def test_manager_partial_bookings_day_view_multiple_bookings(app, admin_user, freezer):
     agenda = Agenda.objects.create(label='Foo bar', kind='events', partial_bookings=True)
     start_datetime = make_aware(datetime.datetime(2023, 5, 2, 8, 0))