Add a first csv export idea

app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js

@@ -56,7 +56,8 @@ class CorpusAnalysisConcordance {
         .then(
           paginatedSubcorpus => {
             subcorpus.p = paginatedSubcorpus;
-            if (subcorpus !== 'Last') {this.data.subcorpora.Last = subcorpus;}
+            subcorpus.selectedItems = {};
+            if (subcorpusName !== 'Last') {this.data.subcorpora.Last = subcorpus;}
             this.data.subcorpora[subcorpusName] = subcorpus;
             this.settings.selectedSubcorpus = subcorpusName;
             this.renderSubcorpusList();
@@ -153,6 +154,9 @@ class CorpusAnalysisConcordance {
   renderSubcorpusActions() {
     this.clearSubcorpusActions();
     this.elements.subcorpusActions.innerHTML += `
+      <a class="btn-floating btn-small tooltipped waves-effect waves-light corpus-analysis-action download-subcorpus-selection-trigger" data-tooltip="Download subcorpus selection">
+        <i class="material-icons">playlist_add_check</i>
+      </a>
       <a class="btn-floating btn-small tooltipped waves-effect waves-light corpus-analysis-action download-subcorpus-trigger" data-tooltip="Download subcorpus">
         <i class="material-icons">file_download</i>
       </a>
@@ -161,6 +165,36 @@ class CorpusAnalysisConcordance {
       </a>
     `.trim();
     M.Tooltip.init(this.elements.subcorpusActions.querySelectorAll('.tooltipped'));
+    this.elements.subcorpusActions.querySelector('.download-subcorpus-trigger').addEventListener('click', event => {
+      event.preventDefault();
+      app.flash('This feature is currently not available', 'error');
+    });
+    this.elements.subcorpusActions.querySelector('.download-subcorpus-selection-trigger').addEventListener('click', event => {
+      event.preventDefault();
+      let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
+      if (JSON.stringify(subcorpus.selectedItems) === '{}') {app.flash('No items selected', 'error'); return;}
+      let csvContent = 'sep=,\r\n';
+      csvContent += '"#Match","Text title","Left context","KWIC","Right context"\r\n';
+      for (let selectedItem of Object.values(subcorpus.selectedItems)) {
+        csvContent += `"${selectedItem.num}",`;
+        csvContent += `"${selectedItem.textTitle.replace('"', '""')}",`;
+        csvContent += `"${selectedItem.leftContext.replace('"', '""')}",`;
+        csvContent += `"${selectedItem.kwic.replace('"', '""')}",`;
+        csvContent += `"${selectedItem.rightContext.replace('"', '""')}"\r\n`;
+      }
+      // Create a blob
+      let blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'});
+      let url = URL.createObjectURL(blob);
+
+      // Create a link to download it
+      let pom = document.createElement('a');
+      pom.href = url;
+      pom.setAttribute('download', 'export.csv');
+      pom.click();
+      // console.log(csvContent);
+      // let encodedUri = encodeURI(csvContent);
+      // window.open(encodedUri);
+    });
     this.elements.subcorpusActions.querySelector('.delete-subcorpus-trigger').addEventListener('click', event => {
       event.preventDefault();
       let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
@@ -214,6 +248,7 @@ class CorpusAnalysisConcordance {
     let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
     this.clearSubcorpusItems();
     for (let item of subcorpus.p.items) {
+      let itemIsSelected = item.num in subcorpus.selectedItems;
       this.elements.subcorpusItems.innerHTML += `
         <tr class="item" data-id="${item.num}">
           <td class="num">${item.num}</td>
@@ -222,8 +257,12 @@ class CorpusAnalysisConcordance {
           <td class="kwic">${this.cposRange2HTML(...item.c)}</td>
           <td class="right-context">${item.rc ? this.cposRange2HTML(...item.rc) : ''}</td>
           <td class="actions right-align">
-            <a class="btn-floating btn-small waves-effect waves-light corpus-analysis-action goto-reader-trigger"><i class="material-icons prefix">search</i></a>
+            <a class="btn-floating btn-small waves-effect waves-light corpus-analysis-action goto-reader-trigger">
-            <a class="btn-floating btn-small waves-effect waves-light corpus-analysis-action export-trigger"><i class="material-icons prefix">add</i></a>
+              <i class="material-icons prefix">search</i>
+            </a>
+            <a class="btn-floating btn-small waves-effect waves-light corpus-analysis-action select-trigger ${itemIsSelected ? 'green' : ''}">
+              <i class="material-icons prefix">${itemIsSelected ? 'check' : 'add'}</i>
+            </a>
           </td>
         </tr>
       `.trim();
@@ -252,6 +291,28 @@ class CorpusAnalysisConcordance {
         this.app.elements.m.extensionTabs.select('reader-extension-container');
       });
     }
+    for (let selectTriggerElement of this.elements.subcorpusItems.querySelectorAll('.select-trigger')) {
+      selectTriggerElement.addEventListener('click', event => {
+        event.preventDefault();
+        let itemElement = selectTriggerElement.closest('.item');
+        let itemId = parseInt(itemElement.dataset.id);
+        if (itemId in subcorpus.selectedItems) {
+          delete subcorpus.selectedItems[itemId];
+          selectTriggerElement.classList.remove('green');
+          selectTriggerElement.querySelector('i').textContent = 'add';
+        } else {
+          subcorpus.selectedItems[itemId] = {
+            num: itemId,
+            textTitle: itemElement.querySelector('.text-title').textContent,
+            leftContext: [...itemElement.querySelectorAll('.left-context .p-attr')].map(x => x.textContent).join(' '),
+            kwic: [...itemElement.querySelectorAll('.kwic .p-attr')].map(x => x.textContent).join(' '),
+            rightContext: [...itemElement.querySelectorAll('.right-context .p-attr')].map(x => x.textContent).join(' ')
+          };
+          selectTriggerElement.classList.add('green');
+          selectTriggerElement.querySelector('i').textContent = 'check';
+        }
+      });
+    }
   }
 
   clearSubcorpusPagination() {