')
for path, (w, h, hole_dia, symmetric, patterns) in index.items()
]
table_content = '\n'.join(table_rows)
length_sort = lambda length: float(length.partition(' ')[0])
filter_cols = {
'Width': sorted(set(w for w, h, *rest in index.values())),
'Height': sorted(set(h for w, h, *rest in index.values())),
'Mounting Hole Diameter': sorted(set(dia for w, h, dia, *rest in index.values() if dia)) + ['None'],
'Number of Areas': sorted(set(len(patterns) for *_rest, patterns in index.values())),
'Symmetric Top and Bottom?': ['Yes', 'No'],
'Ground Plane?': ['Yes', 'No'],
'THT Pitches': sorted(set(p for *_rest, patterns in index.values() for p in tht_pitches(patterns))) + ['None'],
'SMD Pitches': sorted(set(p for *_rest, patterns in index.values() for p in smd_pitches(patterns))) + ['None'],
}
filter_headers = '\n'.join(f'
{key}
' for key in filter_cols)
key_id = lambda key: key.lower().replace("?", "").replace(" ", "_")
val_id = lambda value: str(value).replace(".", "_")
def format_value(value):
if isinstance(value, str):
return value
elif isinstance(value, int):
return str(value)
elif isinstance(value, bool):
return value and 'Yes' or 'No'
else:
return format_length(value)
filter_cols = {
key: '\n'.join(f'' for value in values)
for key, values in filter_cols.items() }
filter_cols = [f'
{values}
' for key, values in filter_cols.items()]
filter_content = '\n'.join(filter_cols)
filter_js = textwrap.dedent('''
function get_filters(){
let filters = {};
table = document.querySelector('#filter');
for (let filter of table.querySelectorAll('td')) {
selected = [];
for (let checkbox of filter.querySelectorAll('input')) {
if (checkbox.checked) {
selected.push(checkbox.nextElementSibling.textContent);
}
}
filters[filter.id.replace(/^filter-/, '')] = selected;
}
return filters;
}
filter_indices = {
};
for (const [i, header] of document.querySelectorAll("#listing th").entries()) {
if (header.hasAttribute('data-filter-key')) {
filter_indices[header.attributes['data-filter-key'].value] = i;
}
}
function filter_row(filters, row) {
cols = row.querySelectorAll('td');
for (const [filter_id, values] of Object.entries(filters)) {
if (values.length == 0) {
continue;
}
const row_value = cols[filter_indices[filter_id]].textContent;
if (values.includes("None") && !row_value) {
continue;
}
if (values.includes(row_value)) {
continue;
}
return false;
}
return true;
}
let timeout = undefined;
function apply_filters() {
if (timeout) {
clearTimeout(timeout);
timeout = undefined;
}
const filters = get_filters();
for (let row of document.querySelectorAll("#listing tbody tr")) {
if (filter_row(filters, row)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
}
function refresh_filters() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(apply_filters, 2000);
}
function reset_filters() {
for (let checkbox of document.querySelectorAll("#filter input")) {
checkbox.checked = false;
}
refresh_filters();
}
document.querySelector("#apply").onclick = apply_filters;
document.querySelector("#reset-filters").onclick = reset_filters;
for (let checkbox of document.querySelectorAll("#filter input")) {
checkbox.onchange = refresh_filters;
}
apply_filters();
'''.strip())
style = textwrap.dedent('''
:root {
--gray1: #d0d0d0;
--gray2: #eeeeee;
font-family: sans-serif;
}
table {
table-layout: fixed;
border-collapse: collapse;
box-shadow: 0 0 3px gray;
}
td {
border: 1px solid var(--gray1);
padding: .1em .5em;
}
th {
border: 1px solid var(--gray1);
padding: .5em;
background: linear-gradient(0deg, #e0e0e0, #eeeeee);
}
#listing tr:hover {
background-color: #ffff80;
}
button {
margin: 2em 0.2em;
padding: .5em 1em;
}
'''.strip())
html = textwrap.dedent(f'''
Protoboard Index