Widget: DCTList: Difference between revisions

Revision as of 17:27, 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 94: / Line 96: @@
          const dcts = data[1];
-         const filterHtml = dataSources.reduce((prev, curr) => {
+         let sources1 = '', sources2 = '';
-             return prev + '<div><input type="checkbox" id="filter-' + curr.name + '" value="' + curr.name + '" checked >' +
+        for (const source of dataSources) {
-                '<label for="filter-' + curr.name + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
+            const identifier = source.name.replace(/\s/g, '-');
-         }, '');
+             const output = '<div><input type="checkbox" id="filter-' + identifier + '" value="' + identifier + '" checked>' +
-         document.getElementById('data-source-filter').innerHTML = filterHtml;
+                           '<label for="filter-' + identifier + '"><img src="' + source.image + '"> ' + source.name + '</label></div>'
+            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 136: / Line 143: @@
          <h1>Social Media and Crowdsourcing Technologies</h1>
          <h2>Filters</h2>
-         <div id="data-source-filter"></div>
+         <div id="data-source-filter">
+            <div id="data-source-filter1"></div>
+            <div id="data-source-filter2"></div>
+        </div>
          <div id="dct-tabulator"></div>
      </div>
 </includeonly>