diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index 1c88d32a700afd2c946948bcfe2ae20a303ec8e9..a84334004ac9292d1102896549e3851adb49caf7 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/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 export-trigger"><i class="material-icons prefix">add</i></a> + <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 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() {