Widget: DCTList: Difference between revisions

Revision as of 17:41, 7 June 2022

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

@@ Line 21: / Line 21: @@
              font-size: 1.2em;
              margin-bottom: 4em;
-        }
-        #data-source-filter1, #data-source-filter2 {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
@@ Line 96: / Line 94: @@
          const dcts = data[1];
-         let sources1 = '', sources2 = '';
+         const filterHtml = dataSources.reduce((prev, curr) => {
-        for (const source of dataSources) {
+             return prev + '<div><input type="checkbox" id="filter-' + curr.name + '" value="' + curr.name + '" checked >' +
-            const identifier = source.name.replace(/\s/g, '-');
+                '<label for="filter-' + curr.name + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
-             const output = '<div><input type="checkbox" id="filter-' + identifier + '" value="' + identifier + '" checked>' +
+         }, '');
-                           '<label for="filter-' + identifier + '"><img src="' + source.image + '"> ' + source.name + '</label></div>'
+         document.getElementById('data-source-filter').innerHTML = filterHtml;
-            if (source.name === 'Crowd' || source.name === 'Web') { sources1 += output; }
-            else { sources2 += output; }
-         }
-        document.getElementById('data-source-filter1').innerHTML = sources1;
-         document.getElementById('data-source-filter2').innerHTML = sources2;
-         // console.log(data)
+         console.log(data)
          const table = new Tabulator("#dct-tabulator", {
@@ Line 143: / Line 136: @@
          <h1>Social Media and Crowdsourcing Technologies</h1>
          <h2>Filters</h2>
-         <div id="data-source-filter">
+         <div id="data-source-filter"></div>
-            <div id="data-source-filter1"></div>
-            <div id="data-source-filter2"></div>
-        </div>
          <div id="dct-tabulator"></div>
      </div>
 </includeonly>