Skip to content

Commit 2b20cca

Browse files
larseggertlarseggert
committed
Switch to list.js
 - Legacy-Id: 19695
1 parent e195a00 commit 2b20cca

8 files changed

Lines changed: 206 additions & 141 deletions

File tree

‎.eslintrc.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ module.exports = {
66
"no-multiple-empty-lines": ["error", { max: 2, maxEOF: 0 }],
77
"quote-props": ["error", "as-needed"],
88
"brace-style": ["error", "1tbs", { allowSingleLine: true }],
9-
"semi": ["error", "always"],
9+
semi: ["error", "always"],
10+
"newline-per-chained-call": ["error"]
1011
},
1112
env: {
1213
browser: true,

‎ietf/static/css/datatables.scss‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎ietf/static/css/ietf.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,6 @@ $bootstrap-icons-font-src: url("~node_modules/bootstrap-icons/font/fonts/bootstr
6161
url("~node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff?a97b3594ad416896e15824f6787370e0") format("woff") !default;
6262
@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons";
6363

64-
// Install the datatables.net bootstrap5 styles.
65-
// FIXME: Including this with ~ fails for some odd reason?
66-
@import "../../../node_modules/datatables.net-bs5/css/dataTables.bootstrap5";
67-
6864
// Leave room for fixed-top navbar.
6965
body {
7066
padding-top: 60px;

‎ietf/static/js/datatables.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎ietf/static/js/list.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as List from "list.js";
2+
3+
$(document)
4+
.ready(function () {
5+
$("table.tablesorter")
6+
.each(function () {
7+
var searcher = $.parseHTML(`
8+
<div class="input-group mb-3">
9+
<input type="search" class="search form-control" placeholder="Search"/>
10+
<button class="btn btn-outline-secondary search-reset" type="button">
11+
<i class="bi bi-x"></i>
12+
</button>
13+
</div>`);
14+
15+
$(this)
16+
.before(searcher);
17+
18+
var fields = $(this)
19+
.find("thead > tr:first")
20+
.children("th")
21+
.map(function () {
22+
return $(this)
23+
.attr("data-field");
24+
})
25+
.toArray();
26+
console.log(fields);
27+
28+
var search_field = $(searcher)
29+
.find("input.search");
30+
31+
var reset_search = $(searcher)
32+
.find("button.search-reset");
33+
34+
if (fields.length == 0) {
35+
searcher.addClass("visually-hidden");
36+
} else {
37+
console.log($(this)[0]);
38+
var list = new List($(this)
39+
.parent()[0], { valueNames: fields });
40+
41+
reset_search.on("click", function () {
42+
search_field.val("");
43+
list.search();
44+
});
45+
46+
search_field.on("keydown", function (e) {
47+
if (e.key == "Escape") {
48+
reset_search.trigger("click");
49+
}
50+
});
51+
52+
list.on("searchComplete", function () {
53+
var last_show_with_children = -1;
54+
for (var i = 0; i < list.items.length; i++) {
55+
if ($(list.items[i].elm)
56+
.hasClass("show-with-children")) {
57+
last_show_with_children = i;
58+
}
59+
60+
if (list.items[i].found &&
61+
last_show_with_children >= 0 &&
62+
list.items[last_show_with_children].found == false) {
63+
list.items[last_show_with_children].found = true;
64+
list.items[last_show_with_children].show();
65+
last_show_with_children = -1;
66+
}
67+
68+
if ($(list.items[i].elm)
69+
.hasClass("show-always")) {
70+
list.items[i].found = true;
71+
list.items[i].show();
72+
}
73+
}
74+
list.update();
75+
});
76+
}
77+
});
78+
});

‎ietf/templates/meeting/agenda.html‎

Lines changed: 94 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -118,96 +118,106 @@ <h2 class="mt-3">
118118
<p>Check boxes below to select individual sessions.</p>
119119
{% endif %}
120120

121-
<table id="agenda-table" class="table table-sm">
122-
{% for item in filtered_assignments %}
123-
124-
{% ifchanged item.timeslot.time|date:"Y-m-d" %}
125-
<tr class="table-primary">
126-
<th colspan="6">
127-
{# The anchor here needs to be in a div, not in the th, in order for the anchor-target margin hack to work #}
128-
<div class="anchor-target" id="slot-{{item.timeslot.time|slugify}}"></div>
129-
<div class="h6 mt-2">{{ item.timeslot.time|date:"l, F j, Y" }}</div>
130-
</th>
121+
<table id="agenda-table" class="table table-sm tablesorter">
122+
<thead>
123+
<tr>
124+
<th data-field=""></th>
125+
<th data-field=""></th>
126+
<th data-field="loc"></th>
127+
<th data-field="group"></th>
128+
<th data-field="area"></th>
129+
<th data-field="desc"></th>
131130
</tr>
132-
{% endifchanged %}
133-
134-
{% if item|is_special_agenda_item %}
135-
<tr id="row-{{ item.slug }}" data-filter-keywords="{{ item.filter_keywords|join:',' }}"
136-
data-slot-start-ts="{{item.start_timestamp}}"
137-
data-slot-end-ts="{{item.end_timestamp}}">
138-
<td class="text-center">
139-
{% if item.session_keyword %}
140-
<input
141-
type="checkbox"
142-
class="pickview form-check-input"
143-
title="Select session"
144-
name="selected-sessions"
145-
value="{{ item.session_keyword }}"
146-
data-filter-keywords="{{ item.filter_keywords|join:',' }}"
147-
data-filter-item="{{ item.session_keyword }}">
148-
{% endif %}
149-
</td>
150-
151-
<td class="text-nowrap text-end">
152-
{% include "meeting/timeslot_start_end.html" %}
153-
</td>
154-
<td colspan="3">
155-
{% location_anchor item.timeslot %}
156-
{{ item.timeslot.get_html_location }}
157-
{% end_location_anchor %}
158-
{% if item.timeslot.show_location and item.timeslot.get_html_location %}
159-
{% with item.timeslot.location.floorplan as floor %}
160-
{% if item.timeslot.location.floorplan %}
161-
<div class="d-none d-sm-block">
162-
<a href="{% url 'ietf.meeting.views.floor_plan' num=schedule.meeting.number %}#{{floor.name|xslugify}}"
163-
class="float-end" title="{{floor.name}}"><span class="badge bg-secondary label-wide">{{floor.short}}</span></a>
164-
</div>
131+
</thead>
132+
<tbody class="list">
133+
{% for item in filtered_assignments %}
134+
{% ifchanged item.timeslot.time|date:"Y-m-d" %}
135+
<tr class="table-primary show-with-children">
136+
<td colspan="6">
137+
{# The anchor here needs to be in a div, not in the th, in order for the anchor-target margin hack to work #}
138+
<div class="anchor-target" id="slot-{{item.timeslot.time|slugify}}"></div>
139+
<div class="fw-bold">{{ item.timeslot.time|date:"l, F j, Y" }}</div>
140+
</td>
141+
</tr>
142+
{% endifchanged %}
143+
{% if item|is_special_agenda_item %}
144+
<tr id="row-{{ item.slug }}" data-filter-keywords="{{ item.filter_keywords|join:',' }}"
145+
data-slot-start-ts="{{item.start_timestamp}}"
146+
data-slot-end-ts="{{item.end_timestamp}}">
147+
<td class="text-center">
148+
{% if item.session_keyword %}
149+
<input
150+
type="checkbox"
151+
class="pickview form-check-input"
152+
title="Select session"
153+
name="selected-sessions"
154+
value="{{ item.session_keyword }}"
155+
data-filter-keywords="{{ item.filter_keywords|join:',' }}"
156+
data-filter-item="{{ item.session_keyword }}">
157+
{% endif %}
158+
</td>
159+
160+
<td class="text-nowrap text-end">
161+
{% include "meeting/timeslot_start_end.html" %}
162+
</td>
163+
<td colspan="3" class="loc">
164+
{% location_anchor item.timeslot %}
165+
{{ item.timeslot.get_html_location }}
166+
{% end_location_anchor %}
167+
{% if item.timeslot.show_location and item.timeslot.get_html_location %}
168+
{% with item.timeslot.location.floorplan as floor %}
169+
{% if item.timeslot.location.floorplan %}
170+
<div class="d-none d-sm-block">
171+
<a href="{% url 'ietf.meeting.views.floor_plan' num=schedule.meeting.number %}#{{floor.name|xslugify}}"
172+
class="float-end" title="{{floor.name}}"><span class="badge bg-secondary label-wide">{{floor.short}}</span></a>
173+
</div>
174+
{% endif %}
175+
{% endwith %}
165176
{% endif %}
166-
{% endwith %}
167-
{% endif %}
168-
</td>
169-
<td>
170-
{% agenda_anchor item.session %}
171-
{% assignment_display_name item %}
172-
{% end_agenda_anchor %}
177+
</td>
178+
<td class="desc">
179+
{% agenda_anchor item.session %}
180+
{% assignment_display_name item %}
181+
{% end_agenda_anchor %}
173182

174-
{% if item.session.current_status == 'canceled' %}
175-
<span class="badge bg-danger float-end">CANCELLED</span>
176-
{% else %}
177-
<div class="float-end ps-3">
178-
{% if item.slot_type.slug == 'other' %}
179-
{% if item.session.agenda or item.session.remote_instructions or item.session.agenda_note %}
180-
{% include "meeting/session_buttons_include.html" with show_agenda=True item=item schedule=schedule %}
181-
{% else %}
182-
{% for slide in item.session.slides %}
183-
<a href="{{slide.get_href}}">{{ slide.title|clean_whitespace }}</a>
184-
<br>
185-
{% endfor %}
186-
{% endif %}
183+
{% if item.session.current_status == 'canceled' %}
184+
<span class="badge bg-danger float-end">CANCELLED</span>
185+
{% else %}
186+
<div class="float-end ps-3">
187+
{% if item.slot_type.slug == 'other' %}
188+
{% if item.session.agenda or item.session.remote_instructions or item.session.agenda_note %}
189+
{% include "meeting/session_buttons_include.html" with show_agenda=True item=item schedule=schedule %}
190+
{% else %}
191+
{% for slide in item.session.slides %}
192+
<a href="{{slide.get_href}}">{{ slide.title|clean_whitespace }}</a>
193+
<br>
194+
{% endfor %}
195+
{% endif %}
196+
{% endif %}
197+
</div>
187198
{% endif %}
188-
</div>
189-
{% endif %}
190-
</td>
191-
</tr>
199+
</td>
200+
</tr>
192201

193202
{% elif item|is_regular_agenda_item or item|is_plenary_agenda_item %}
194203

195204
{% if item|is_regular_agenda_item %}
196205
{% ifchanged %}
197-
<tr class="table-secondary session-label-row"
206+
<tr class="table-secondary session-label-row show-with-children"
198207
data-slot-start-ts="{{item.start_timestamp}}"
199208
data-slot-end-ts="{{item.end_timestamp}}">
200209
<td class="text-center">
201210
</td>
202211

203-
<th class="text-nowrap text-end">
212+
<td class="text-nowrap text-end fw-bold">
204213
{% include "meeting/timeslot_start_end.html" %}
205-
</th>
206-
<th colspan="4">
214+
</td>
215+
<td colspan="4" class="fw-bold desc">
207216
{{ item.timeslot.time|date:"l"}}
208217
{{item.timeslot.name|capfirst_allcaps}}
209-
</th>
218+
</td>
210219
</tr>
220+
211221
{% endifchanged %}
212222
{% endif %}
213223

@@ -232,10 +242,10 @@ <h2 class="mt-3">
232242
</td>
233243

234244
{% if item.slot_type.slug == 'plenary' %}
235-
<th class="text-nowrap text-end">
245+
<td class="text-nowrap text-end">
236246
{% include "meeting/timeslot_start_end.html" %}
237-
</th>
238-
<td colspan="3">
247+
</td>
248+
<td colspan="3" class="loc">
239249
{% location_anchor item.timeslot %}
240250
{{item.timeslot.get_html_location}}
241251
{% end_location_anchor %}
@@ -252,15 +262,15 @@ <h2 class="mt-3">
252262
{% endif %}
253263
{% endwith %}
254264
</td>
255-
<td>
265+
<td class="loc">
256266
{% location_anchor item.timeslot %}
257267
{{item.timeslot.get_html_location}}
258268
{% end_location_anchor %}
259269
</td>
260270

261-
<td><div class="d-none d-sm-block">{{item.session.historic_group.historic_parent.acronym}}</div></td>
271+
<td class="area"><div class="d-none d-sm-block">{{item.session.historic_group.historic_parent.acronym}}</div></td>
262272

263-
<td>
273+
<td class="group">
264274
{% if item.session.historic_group %}
265275
<a href="{% url 'ietf.group.views.group_about' acronym=item.session.historic_group.acronym %}">{{item.session.historic_group.acronym}}</a>
266276
{% else %}
@@ -269,7 +279,7 @@ <h2 class="mt-3">
269279
</td>
270280
{% endif %}
271281

272-
<td>
282+
<td class="desc">
273283
{% agenda_anchor item.session %}
274284
{% assignment_display_name item %}
275285
{% end_agenda_anchor %}
@@ -291,7 +301,7 @@ <h2 class="mt-3">
291301
RESCHEDULED
292302
{% if item.session.rescheduled_to %}
293303
TO
294-
<div class="timetooltip reschedtimetooltip"><div class="time" data-start-time="{{item.session.rescheduled_to.utc_start_time|date:"U"}}" data-end-time="{{item.session.rescheduled_to.utc_end_time|date:"U"}}" {% if item.timeslot.time|date:"l" != item.session.rescheduled_to.time|date:"l" %} weekday="1"{% endif %}>
304+
<div class="timetooltip reschedtimetooltip"><div data-start-time="{{item.session.rescheduled_to.utc_start_time|date:"U"}}" data-end-time="{{item.session.rescheduled_to.utc_end_time|date:"U"}}" {% if item.timeslot.time|date:"l" != item.session.rescheduled_to.time|date:"l" %} weekday="1"{% endif %}>
295305
{% if "-utc" in request.path %}
296306
{{ item.session.rescheduled_to.utc_start_time|date:"l G:i"|upper }}-{{ item.session.rescheduled_to.utc_end_time|date:"G:i" }}
297307
{% else %}
@@ -309,9 +319,11 @@ <h2 class="mt-3">
309319
{% endif %}
310320
</td>
311321
</tr>
322+
312323
{% endif %}
313324
{% endif %}
314325
{% endfor %}
326+
</tbody>
315327
</table>
316328
{% include "meeting/agenda_personalize_buttonlist.html" with meeting=schedule.meeting only %}
317329

@@ -428,6 +440,7 @@ <h2 class="mt-3">
428440
}
429441

430442
</script>
443+
<script src="{% static 'ietf/js/list.js' %}"></script>
431444
<script src="{% static 'ietf/js/moment.js' %}"></script>
432445
<script src="{% static 'ietf/js/moment-timezone-with-data-10-year-range.js' %}"></script>
433446
<script src="{% static 'ietf/js/timezone.js' %}"></script>
@@ -496,7 +509,7 @@ <h2 class="mt-3">
496509
});
497510

498511
document.getElementById('agenda-table')
499-
.addEventListener('click', handleTableClick);
512+
.addEventListener('click', handleTableClick);
500513
{% else %}
501514
agenda_filter.set_update_callback(update_view);
502515
{% endif %}

0 commit comments

Comments
 (0)