Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
Line 341: Line 341:
                 + '|?Has_description=' + DESC_KEY;
                 + '|?Has_description=' + DESC_KEY;
             const functionsQueryResponse = await fetch(getQueryUrl(functionsQuery)).then(response => response.json());
             const functionsQueryResponse = await fetch(getQueryUrl(functionsQuery)).then(response => response.json());
            console.log(functionsQueryResponse)


             const sortOrder = Object.keys(fnImages);
             const sortOrder = Object.keys(fnImages);
Line 360: Line 358:
                     );
                     );
                 });
                 });
                console.log(functionsData)


             const allFunctions = Array.from(functionsData.values(), entry => entry[FUNC_KEY]).flat();
             const allFunctions = Array.from(functionsData.values(), entry => entry[FUNC_KEY]).flat();
Line 437: Line 433:


                 functionsCheck = checkEmpty && checkNonempty;
                 functionsCheck = checkEmpty && checkNonempty;
                // TODO: Empty should no longer exist, once every category is fully listed in the filter.
                // TODO: The filtering of functions therefore should be reduced to nonempty only.
             }
             }


Line 451: Line 449:
                 ? filterState.hasUC === dct.hasUC
                 ? filterState.hasUC === dct.hasUC
                 : true;
                 : true;
             return sourcesCheck && functionsCheck && businessModelCheck && dmUseCheck && ucCheck;
             return sourcesCheck && functionsCheck && businessModelCheck && dmUseCheck && ucCheck;
         }
         }
Line 470: Line 469:
                 const funcOpts = new Map();
                 const funcOpts = new Map();
                 functionFilterBlocks.forEach(block => {
                 functionFilterBlocks.forEach(block => {
                    // This is still valid, since function blocks still have whole-category checkboxes.
                    // They have simply been hidden.
                     const cat = block.querySelector('input.func-cat');
                     const cat = block.querySelector('input.func-cat');
                     if (cat.checked) {
                     if (cat.checked) {
Line 504: Line 505:
             Array.from(functionsData).forEach(([fnCat, fnInfo], index) => {
             Array.from(functionsData).forEach(([fnCat, fnInfo], index) => {
                 const identifier = 'func-filter-' + escapeAttr(fnCat);
                 const identifier = 'func-filter-' + escapeAttr(fnCat);
                 funcFilterHtml += (index < 4)
                 funcFilterHtml +=  
                    ?
                    // Disable the selection of categories with subfunctions, as it is not clear how their semantics should work
                    // Removing the for-property for the label as well to prevent activating the checkbox
                    `<div class="func-filter-block">
                        <div>
                            <input type="checkbox" id="${identifier}" value="${fnCat}" class="func-cat" style="display:none;">
                            <label title="${fnInfo[DESC_KEY]}"><img src="${fnImages[fnCat]}"> ${fnCat}</label>
                        </div>`
                    :
                    // The following is the original. TODO: This should be cleared up when all categories have subfunctions
                     `<div class="func-filter-block">
                     `<div class="func-filter-block">
                         <div>
                         <div>
                             <input type="checkbox" id="${identifier}" value="${fnCat}" class="func-cat">
                             <input type="checkbox" id="${identifier}" value="${fnCat}" class="func-cat">
                             <label for="${identifier}" title="${fnInfo[DESC_KEY]}"><img src="${fnImages[fnCat]}"> ${fnCat}</label>
                             <label for="${identifier}" title="${fnInfo[DESC_KEY]}"><img src="${fnImages[fnCat]}"> ${fnCat}</label>
                         </div>`
                         </div>`;


                 // add subfunctions  
                 // add subfunctions  
                 if (index < 4) {
                 funcFilterHtml += '<div class="subfunc-filter-block">';
                    funcFilterHtml += '<div class="subfunc-filter-block">';
                for (const func of fnInfo.functions) {
                    for (const func of fnInfo.functions) {
                    const subfuncId = 'subfunc-filter-' + escapeAttr(func);
                        const subfuncId = 'subfunc-filter-' + escapeAttr(func);
                    funcFilterHtml +=
                        funcFilterHtml +=
                        `<div>
                            `<div>
                            <input type="checkbox" id="${subfuncId}" value="${func}">
                                <input type="checkbox" id="${subfuncId}" value="${func}">
                            <label for="${subfuncId}">${func}</label>
                                <label for="${subfuncId}">${func}</label>
                        </div>`;
                            </div>`;
                    }
                    funcFilterHtml += '</div>';
                 }
                 }
                funcFilterHtml += '</div>';
                 funcFilterHtml += '</div>';
                 funcFilterHtml += '</div>';
             });
             });

Revision as of 15:31, 25 July 2023

DCT list widget.
Currently in use – do not modify!