Widget: DCTList: Difference between revisions

Revision as of 10:48, 17 November 2022

Development verstion of the DCT List.
Not ready for production!

@@ Line 437: / Line 437: @@
              const { dcts, funcData } = data[1];
-             let funcHtml = '';
+            // Set up functions filter
-             for (const [fnCat, fnInfo] of funcData) {
+             let funcFilterHtml = '<div>';
+             Array.from(funcData).forEach(([fnCat, fnInfo], index) => {
                  const identifier = 'func-filter-' + escapeAttr(fnCat);
-                 funcHtml +=
+                 funcFilterHtml +=
-                `<div>
+                    `<div>
-                    <input type="checkbox" checked id="${identifier}" value="${fnCat}">
+                        <input type="checkbox" checked id="${identifier}" value="${fnCat}">
-                    <label for="${identifier}"><img src="${fnImages[fnCat]}"> ${fnCat}</label>
+                        <label for="${identifier}"><img src="${fnImages[fnCat]}"> ${fnCat}</label>
-                </div>`;
+                    </div>`;
-            }
-            document.getElementById('functions-filter').innerHTML = funcHtml;
+                // add subfunctions
+                if (index < 3) {
+                    for (const func of fnInfo.functions) {
+                        const subfuncId = 'subfunc-filter-' + escapeAttr(func);
+                        funcFilterHtml +=
+                            `<div class="subfunc-filter">
+                                <input type="checkbox" checked id="${subfuncId}" value="${func}">
+                                <label for="${subfuncId}">${func}</label>
+                            </div>`;
+                    }
+                }
+                funcFilterHtml += '</div>';
+            });
+            document.getElementById('functions-filter').innerHTML = funcFilterHtml;
+            // Set up sources filter
              const groupedSources = [];
              const sourcesCopy = Array.from(dataSources);