From f0e877d1ccfce249da2f25082ebb9ba23213e46a Mon Sep 17 00:00:00 2001
From: Teal <git@teal.is>
Date: Thu, 23 May 2024 22:25:56 +0200
Subject: [PATCH] WIP

---
 app/assets/stylesheets/application.css | 48 ++++++++++++++++++-
 app/views/conferences/show.html.erb    | 64 +++++++++++++++++++-------
 2 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 99f0a56..e5808c2 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -14,17 +14,61 @@
  *= require_self
  */
 /* Add your styles here to layout the tabs, timeline, and session blocks */
+* {
+  box-sizing: border-box;
+}
+
 .timeline {
   position: relative;
   margin: 0 auto;
 }
 
 .session {
-  padding: 10px;
+  padding: 8px;
   background-color: #f9f9f9;
   border: 1px solid #d4d4d4;
+  border-radius: 4px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
-
 .session h4 {
   margin-top: 0;
+  margin-bottom: 4px;
+}
+.session p {
+  margin: 6px 0;
+}
+.session .session-desc {
+  text-overflow: ellipsis;
+}
+.conference-day {
+  position: relative;
+}
+.stage-sessions {
+  position: relative;
+}
+.times {
+
+}
+.time {
+  border-top: 1px dotted gray;
+}
+.time.hour-start {
+  border-top: 1px solid black;
+}
+.current-time {
+  position: absolute;
+  width: 100%;
+  z-index: 30;
+  border-top: 1px solid rgba(255, 0, 0, 0.4);
+}
+.stages {
+  display: flex;
+  flex-direction: row;
+}
+.stages .stage {
+  width: 400px;
+  padding: 0 8px;
+  border-right: 1px dashed gray;
 }
diff --git a/app/views/conferences/show.html.erb b/app/views/conferences/show.html.erb
index 6a7fe35..fca8dc3 100644
--- a/app/views/conferences/show.html.erb
+++ b/app/views/conferences/show.html.erb
@@ -1,3 +1,9 @@
+<%
+pixels_per_hour = 300.0
+timeline_granularity = 15
+# current_time = Time.zone.now
+current_time = @sessions_by_date[@conference.days.first].first.starts_at.advance(minutes: 27)
+%>
 <h1><%= @conference.name %></h1>
 
 <nav id="conference-days">
@@ -7,25 +13,51 @@
 </nav>
 
 <% @conference.days.each do |date| %>
+  <%
+    day_starts_at = @sessions_by_date[date].first.starts_at
+    day_ends_at = @sessions_by_date[date].last.ends_at
+    # round to previous interval
+    timeline_starts_at = day_starts_at.beginning_of_hour.advance(minutes: (day_starts_at.min / timeline_granularity.to_f).floor * timeline_granularity)
+    # ... , except rounding up to later interval
+    timeline_ends_at = day_ends_at.beginning_of_hour.advance(minutes: (day_ends_at.min / timeline_granularity.to_f).ceil * timeline_granularity)
+  %>
   <div class="conference-day" id="<%= date.strftime('day-%Y-%m-%d') %>">
     <h3><%= date.strftime('%B %d, %Y') %></h3>
-    <div class="timeline">
-    <%
-      day_starts_at = @sessions_by_date[date].first.starts_at
-      day_ends_at = @sessions_by_date[date].last.ends_at
-      # granularity for timeline in minutes
-      TIMELINE_GRANULARITY = 15
-      # round to previous interval
-      timeline_starts_at = day_starts_at.beginning_of_hour.advance(minutes: (day_starts_at.min / TIMELINE_GRANULARITY.to_f).floor * TIMELINE_GRANULARITY)
-      # ... , except rounding up to later interval
-      timeline_ends_at = day_ends_at.beginning_of_hour.advance(minutes: (day_ends_at.min / TIMELINE_GRANULARITY.to_f).ceil * TIMELINE_GRANULARITY)
-    %>
-    <% @sessions.select { |s| s.starts_at.to_date == date }.each do |session| %>
-      <div class="session" style="top: <%= session_position(session.starts_at) %>px; height: <%= session_duration(session) %>px;">
-        <h4><%= session.title %></h4>
-        <p><%= session.starts_at.strftime('%H:%M') %> - <%= session.ends_at.strftime('%H:%M') %></p>
+    <div class="day-wrapper" style="display: flex;">
+
+      <div class="times" style="">
+        <h4>&nbsp;</h4>
+      <% if current_time.strftime('%Y%m%d') == date.strftime('%Y%m%d') %>
+        <div class="current-time" style="top: <%= (current_time - timeline_starts_at) / 3600.0 * pixels_per_hour %>px"></div>
+      <% end %>
+      <%
+        time_slot = timeline_starts_at
+        while time_slot <= timeline_ends_at
+      %>
+        <div class="time<%= time_slot.min == 0 ? " hour-start" : "" %>" style="height: <%= timeline_granularity / 60.0 * pixels_per_hour %>px"><%= time_slot.strftime('%H:%M') %></div>
+      <%
+          time_slot = time_slot.advance(minutes: timeline_granularity)
+        end
+      %>
+      </div>
+      <div class="stages">
+        <% @sessions_by_date[date].group_by(&:stage).each do |stage, sessions| %>
+          <% next unless ["Stage 1", "Stage 2"].include? stage.name %>
+          <div class="stage">
+            <h4><%= stage.name %></h4>
+            <div class="stage-sessions">
+              <% sessions.each do |session| %>
+                <div class="session" style="position: absolute; top: <%= (session.starts_at - timeline_starts_at) / 3600.0 * pixels_per_hour %>px; height: <%= (session.ends_at - session.starts_at) / 3600.0 * pixels_per_hour%>px;">
+                  <h4><%= session.title %></h4>
+                  <p class="session-time"><%= session.starts_at.strftime('%H:%M') %> - <%= session.ends_at.strftime('%H:%M') %></p>
+                  <div class="session-desc"><%= session.description.html_safe %></div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+        </div>
       </div>
-    <% end %>
     </div>
   </div>
 <% end %>
-- 
GitLab