From e6872aedec768404336a678311be791c762e52ee Mon Sep 17 00:00:00 2001
From: Marcin Juszkiewicz <hrw@users.noreply.github.com>
Date: Tue, 14 Jan 2025 22:26:47 +0100
Subject: [PATCH 1/6] schedule/events: use DataTables to have search

With 1000+ events taking place at FOSDEM table got so long that finding
anything takes time. DataTables framework allows us to search, sort etc.

Enlarge table to take 100% of width, merge 'Day' and 'Start' columns
into one and sort by it.

Separators with track names are gone now.
---
 content/schedule/events.html |  9 ++-------
 layouts/main.html            | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/content/schedule/events.html b/content/schedule/events.html
index 77a6f500..75d4ac12 100644
--- a/content/schedule/events.html
+++ b/content/schedule/events.html
@@ -16,13 +16,12 @@
 size = h.values.map(&:size).inject(:+)
 %>
 <h1><%= size %> Events</h1>
-<table class="table table-striped table-bordered table-condensed">
+<table id="events" class="display" style="width:100%">
     <thead>
         <tr>
             <th>Event</th>
             <th>Speakers</th>
             <th>Room</th>
-            <th>Day</th>
             <th>Start</th>
             <th>End</th>
             <th>Attachments</th>
@@ -31,16 +30,12 @@ <h1><%= size %> Events</h1>
     </thead>
     <tbody>
       <% h.each do |track, list| %>
-        <tr>
-          <td colspan="8"><h4><%= track[:title] %> (<%= list.size %>)</h4></td>
-        </tr>
         <% list.each do |e| %>
         <tr>
             <td><%= l(e) %></td>
             <td><%= l e[:speakers].map(&$to_speaker) %></td>
             <td><%= l room e[:room] %></td>
-            <td><%= l day e[:day] %></td>
-            <td><%= e[:start_time] %></td>
+            <td><%= l day e[:day] %> <%= e[:start_time] %></td>
             <td><%= e[:end_time] %></td>
 	    <td>
 	      <% e[:attachments].each_with_index do |a, index| %>
diff --git a/layouts/main.html b/layouts/main.html
index 7e51e34a..09f26735 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -39,6 +39,12 @@
     <meta property="og:title" content="<%= conference()[:title] %><% if @item[:title] %> - <%= @item[:title] %><% end %>">
     <meta property="og:type" content="website">
     <meta property="og:image" content="<%= conference()[:homepage] %><%= pathof('/assets/style/logo-gear/')[1..-1] %>">
+<% if @item.identifier == '/schedule/events/' %>
+    <link href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" rel="stylesheet" integrity="sha384-lidBvvi7oLJ2j9e3nFlBSXfo+giBJ9L7QnUdgjc3AvLiynS0HdKEEEZtvZ4izE46" crossorigin="anonymous">
+
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha384-NXgwF8Kv9SSAr+jemKKcbvQsz+teULH/a5UNJvZc6kP47hZgl62M1vGnw6gHQhb1" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js" integrity="sha384-AenwROccLjIcbIsJuEZmrLlBzwrhvO94q+wm9RwETq4Kkqv9npFR2qbpdMhsehX3" crossorigin="anonymous"></script>
+<% end %>
   </head>
   <body<%= @item.identifier =~ %r{^/schedule/([^/]+)/} ?  " class=\"schedule-#{$1}\"" : '' %>> 
     <div id="header">
@@ -179,4 +185,15 @@ <h3><%= column.keys.first.to_s %></h3>
       </div>
     </footer>
   </body>
+<% if @item.identifier == '/schedule/events/' %>
+<script>
+  new DataTable('#events', {
+    order: [
+      [3, 'asc'],
+      [4, 'asc']
+    ],
+    paging:      false,
+  });
+</script>
+<% end %>
 </html>

From 361f50a9381a276dc35ad0503f16d2d34dd9b692 Mon Sep 17 00:00:00 2001
From: Marcin Juszkiewicz <marcin@juszkiewicz.com.pl>
Date: Wed, 12 Feb 2025 20:49:47 +0100
Subject: [PATCH 2/6] schedule/events: add Track column

We no longer have rows with Track name so let add column with this
information.

Had to rename 'Attachments' into 'Files' to make table fit in page.
---
 content/schedule/events.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/content/schedule/events.html b/content/schedule/events.html
index 75d4ac12..a2379d74 100644
--- a/content/schedule/events.html
+++ b/content/schedule/events.html
@@ -21,10 +21,11 @@ <h1><%= size %> Events</h1>
         <tr>
             <th>Event</th>
             <th>Speakers</th>
+            <th>Track</th>
             <th>Room</th>
             <th>Start</th>
             <th>End</th>
-            <th>Attachments</th>
+            <th>Files</th>
 	    <th>Videos</th>
         </tr>
     </thead>
@@ -34,6 +35,7 @@ <h1><%= size %> Events</h1>
         <tr>
             <td><%= l(e) %></td>
             <td><%= l e[:speakers].map(&$to_speaker) %></td>
+            <td><%= l track e[:track] %></td>
             <td><%= l room e[:room] %></td>
             <td><%= l day e[:day] %> <%= e[:start_time] %></td>
             <td><%= e[:end_time] %></td>

From 0f120730fabc7ad1a5f30d5d846d75f9af161608 Mon Sep 17 00:00:00 2001
From: Marcin Juszkiewicz <marcin@juszkiewicz.com.pl>
Date: Wed, 12 Feb 2025 20:51:05 +0100
Subject: [PATCH 3/6] schedule/events: keep table header always visible

FixedHeader extension makes table header always visible - it stays on
top of page while user scrolls page.
---
 layouts/main.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/layouts/main.html b/layouts/main.html
index 09f26735..001b6de8 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -41,9 +41,12 @@
     <meta property="og:image" content="<%= conference()[:homepage] %><%= pathof('/assets/style/logo-gear/')[1..-1] %>">
 <% if @item.identifier == '/schedule/events/' %>
     <link href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css" rel="stylesheet" integrity="sha384-lidBvvi7oLJ2j9e3nFlBSXfo+giBJ9L7QnUdgjc3AvLiynS0HdKEEEZtvZ4izE46" crossorigin="anonymous">
+    <link href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.min.css" rel="stylesheet" integrity="sha384-FidEgRBNslMjNcMkOFgR6bJnL/NNAjZYYob4PXzFLtqQpyiU7HYFjHfG2/OUWpvZ" crossorigin="anonymous">
 
     <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha384-NXgwF8Kv9SSAr+jemKKcbvQsz+teULH/a5UNJvZc6kP47hZgl62M1vGnw6gHQhb1" crossorigin="anonymous"></script>
     <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js" integrity="sha384-AenwROccLjIcbIsJuEZmrLlBzwrhvO94q+wm9RwETq4Kkqv9npFR2qbpdMhsehX3" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js" integrity="sha384-fLqXCJcrAdndivVvcmVV63KCTYYLJXHZwzlfgkRAiROtth7ZJaN3WJr+VaVe/asP" crossorigin="anonymous"></script>
+
 <% end %>
   </head>
   <body<%= @item.identifier =~ %r{^/schedule/([^/]+)/} ?  " class=\"schedule-#{$1}\"" : '' %>> 
@@ -192,6 +195,7 @@ <h3><%= column.keys.first.to_s %></h3>
       [3, 'asc'],
       [4, 'asc']
     ],
+    fixedHeader: true,
     paging:      false,
   });
 </script>

From ad7f7eef5ca8a1abd25c90172df556b0ccf81f13 Mon Sep 17 00:00:00 2001
From: Marcin Juszkiewicz <marcin@juszkiewicz.com.pl>
Date: Wed, 12 Feb 2025 20:52:26 +0100
Subject: [PATCH 4/6] schedule/events: highlight searched phrase

Mark plug-in highlights searched phrase.
---
 layouts/main.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/layouts/main.html b/layouts/main.html
index 001b6de8..1e0ceb6f 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -47,6 +47,9 @@
     <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js" integrity="sha384-AenwROccLjIcbIsJuEZmrLlBzwrhvO94q+wm9RwETq4Kkqv9npFR2qbpdMhsehX3" crossorigin="anonymous"></script>
     <script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js" integrity="sha384-fLqXCJcrAdndivVvcmVV63KCTYYLJXHZwzlfgkRAiROtth7ZJaN3WJr+VaVe/asP" crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css" integrity="sha384-9/swQ7YisolBtgyqn4bi34Jo3VaBu+I8VwH2bqGS3OcGU8m7EKYMNlXJZ7ZTr1+O" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)" integrity="sha384-kHcMxEJ3FRq+rJD4R+iPxVkVbpyeHUnWOi58kdCsGZSwF891AQa9I4+5LH10Pcd2" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/plug-ins/1.12.1/features/mark.js/datatables.mark.js" integrity="sha384-5HSpWnHYdw6jL/oVAeo7Ellk5Umv4rceyBYmYoVp0Gs9a3RaPdx5DX6FI49u+jrZ" crossorigin="anonymous"></script>
 <% end %>
   </head>
   <body<%= @item.identifier =~ %r{^/schedule/([^/]+)/} ?  " class=\"schedule-#{$1}\"" : '' %>> 
@@ -196,6 +199,7 @@ <h3><%= column.keys.first.to_s %></h3>
       [4, 'asc']
     ],
     fixedHeader: true,
+    mark:        true,
     paging:      false,
   });
 </script>

From 407468a896d0c8b30781c5abb1feb061e12d9db5 Mon Sep 17 00:00:00 2001
From: Marcin Juszkiewicz <marcin@juszkiewicz.com.pl>
Date: Wed, 12 Feb 2025 20:53:19 +0100
Subject: [PATCH 5/6] schedule/events: keep 'Search' label on a side of input
 field

Small styling change to keep search elements side by side.
---
 content/assets/style/parts/020_datatables.css | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 content/assets/style/parts/020_datatables.css

diff --git a/content/assets/style/parts/020_datatables.css b/content/assets/style/parts/020_datatables.css
new file mode 100644
index 00000000..1402426d
--- /dev/null
+++ b/content/assets/style/parts/020_datatables.css
@@ -0,0 +1,3 @@
+.dt-search >label {
+  display: inline;
+}

From 2e784ccdde596a4cd172fd253a7a9bea2185ec3e Mon Sep 17 00:00:00 2001
From: Marcin Juszkiewicz <marcin@juszkiewicz.com.pl>
Date: Wed, 12 Feb 2025 21:18:15 +0100
Subject: [PATCH 6/6] schedule/events: restore original sorting order

---
 layouts/main.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/layouts/main.html b/layouts/main.html
index 1e0ceb6f..62c82404 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -194,10 +194,7 @@ <h3><%= column.keys.first.to_s %></h3>
 <% if @item.identifier == '/schedule/events/' %>
 <script>
   new DataTable('#events', {
-    order: [
-      [3, 'asc'],
-      [4, 'asc']
-    ],
+    order: [],
     fixedHeader: true,
     mark:        true,
     paging:      false,