blob: c2abea9e8c330eced9734cb1abd1abbf564c5bb7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!--
https://choosealicense.com/licenses/0bsd/
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted.
add the following after the </h1>, before <table>
maybe relocate the script block to within <head></head>
-->
<style>
.hide-without-js {
display: none;
}
.filtered {
display: none;
}
#filters {
margin: 1em 0;
}
#filters label{
margin-left: 0.3em;
}
</style>
<div id="filters" class="hide-without-js">
Filter by:
</div>
<template id="filter-template" style="display:none">
<label class="checkbox-inline"><input type="checkbox" checked="checked" /></label>
</template>
<script>
(function () {
function get_row_status(el) {
return el.querySelector("td:nth-child(2)").textContent.trim()
}
function refresh_filters() {
const shown_statuses = new Set()
for (const el of document.querySelectorAll("#filters label")) {
if (el.querySelector("input").checked) {
shown_statuses.add(el.textContent.trim())
}
}
const el_table = document.querySelector("table")
for (const el of el_table.querySelectorAll("tr")) {
const status = get_row_status(el)
if (shown_statuses.has(status)) {
el.classList.remove("filtered")
} else {
el.classList.add("filtered")
}
}
}
document.addEventListener("DOMContentLoaded", (event) => {
const js_class_name = "hide-without-js"
for (const el of document.getElementsByClassName(js_class_name)) {
el.classList.remove(js_class_name)
}
const result_types = new Set()
for (const el of document.querySelectorAll("tr")) {
result_types.add(get_row_status(el))
}
const el_filters = document.querySelector("#filters")
const el_filter_template = document.querySelector("#filter-template").content
for (const result of result_types) {
const el_new_filter = el_filter_template.cloneNode(true)
el_new_filter.querySelector("label").appendChild(document.createTextNode(` ${result}`))
el_new_filter.querySelector("input").addEventListener("change", refresh_filters)
el_filters.appendChild(el_new_filter)
}
})
})()
</script>
|
